vue实现手机端电影活动位置选座代码
代码语言：html
所属分类：其他
代码描述：vue实现手机端电影活动位置选座代码实现电影院位置选座代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
body{
background: #ffe7e7;
}
.seatClass {
position: absolute;
}
.box {
position: relative;
margin-top: -40px;
}
.seatImgClass {
position: absolute;
top: 0;
left: 0;
height: 70%;
}
.title {
width: 100%;
height: 35px;
background-color: rgba(255, 0, 0, 0.8);
text-align: center;
line-height: 35px;
color: #fff;
letter-spacing: 2px;
}
.titleInfo {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #ccc;
margin-top: 10px;
padding: 0 10px 0 10px;
}
.centerInfo {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 10px;
}
.centerInfo2 {
display: flex;
align-items: center;
}
.screen {
width: 250px;
border: 30px solid #ccc;
border-color: #ccc transparent transparent transparent;
height: 20px;
margin: auto;
margin-top: 10px;
}
.screen-text {
text-align: center;
white-space: nowrap;
font-size: 20px;
font-weight: 600;
color: #fff;
margin-top: -30px;
}
.btn {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
background-color: rgba(255, 0, 0, 0.8);
text-align: center;
line-height: 35px;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div>
<div class="title">{{cinemaInfo.movieName }}</div>
<div class="titleInfo">
<div>{{cinemaInfo.showTime }}</div>
<div>{{ cinemaInfo.name }}</div>
</div>
<div class="centerInfo">
<div class="centerInfo2">
<span>{{cinemaInfo.seatTypeList[0].name }}</span>
<img style="width: 20px" :src="cinemaInfo.seatTypeList[0].icon" />
</div>
<div class="centerInfo2">
<span>{{cinemaInfo.seatTypeList[1].name }}</span>
<img style="width: 20px" :src="cinemaInfo.seatTypeList[1].icon" />
</div>
<div class="centerInfo2">
<span>{{cinemaInfo.seatTypeList[2].name }}</span>
<img style="width: 20px" :src="cinemaInfo.seatTypeList[2].icon" />
</div>
<div class="centerInfo2">
<span>{{cinemaInfo.seatTypeList[3].name }}</span>
<img style="width: 20px" :src="cinemaInfo.seatTypeList[3].icon" />
</div>
</div>
<div class="screen">
<div class="screen-text">屏幕方向</div>
</div>
<div class="box">
<div
v-for="(seatItem, index) in cinemaInfo.seatList"
class="seatClass"
:key="seatItem.id"
@click="clickzuowei(seatItem)"
:style="{
height: height + 'rem',
width: width + 'rem',
top: seatItem.gRow * positionDistin + 'rem',
left: seatItem.gCol * positionDistin + 'rem',
}"
>
<img
class="seatImgClass"
:seatId="seatItem.id"
:seatIndex="index"
:src="cinemaInfo.seatTypeList[seatItem.type].icon"
/>
</div>
</div>
<div class="btn" @click="ok">确 认 选 座</div>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
//影院 厅信息
cinemaInfo: {
errorCode: 0,
errorMsg: "",
name: "4号厅",
movieName: "白蛇传之白蛇缘起",
showTime: "2019-03-06 周五 16:50",
cinema_name: "惊奇队长影院",
//座位信息
seatList: [
{
//座位id
id: "16879097",
//座位X轴实际位置，去掉过道
row: "1",
//座位Y轴实际位置，去掉过道
col: "1",
//座位X轴位置
gRow: 1,
//座位Y轴位置
gCol: 4,
//类型：区分座位状态，详情看seatTypeList数组，按0,1,2顺序下去代表不同状态，切换图片
type: "0",
flag: "0",
price: "69",
},
{
id: "16879101",
row: "1",
col: "4",
gRow: 1,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879104",
row: "1",
col: "7",
gRow: 1,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879099",
row: "1",
col: "2",
gRow: 1,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879102",
row: "1",
col: "5",
gRow: 1,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879105",
row: "1",
col: "8",
gRow: 1,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879100",
row: "1",
col: "3",
gRow: 1,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879103",
row: "1",
col: "6",
gRow: 1,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879107",
row: "1",
col: "9",
gRow: 1,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879113",
row: "2",
col: "1",
gRow: 2,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879117",
row: "2",
col: "4",
gRow: 2,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879120",
row: "2",
col: "7",
gRow: 2,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879124",
row: "2",
col: "10",
gRow: 2,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879114",
row: "2",
col: "2",
gRow: 2,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879118",
row: "2",
col: "5",
gRow: 2,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879121",
row: "2",
col: "8",
gRow: 2,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879125",
row: "2",
col: "11",
gRow: 2,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879116",
row: "2",
col: "3",
gRow: 2,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879119",
row: "2",
col: "6",
gRow: 2,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879122",
row: "2",
col: "9",
gRow: 2,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879142",
row: "3",
col: "13",
gRow: 3,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879129",
row: "3",
col: "2",
gRow: 3,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879133",
row: "3",
col: "5",
gRow: 3,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879136",
row: "3",
col: "8",
gRow: 3,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879139",
row: "3",
col: "11",
gRow: 3,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879143",
row: "3",
col: "14",
gRow: 3,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879130",
row: "3",
col: "3",
gRow: 3,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879134",
row: "3",
col: "6",
gRow: 3,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879137",
row: "3",
col: "9",
gRow: 3,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879141",
row: "3",
col: "12",
gRow: 3,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879144",
row: "3",
col: "15",
gRow: 3,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879128",
row: "3",
col: "1",
gRow: 3,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879131",
row: "3",
col: "4",
gRow: 3,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879135",
row: "3",
col: "7",
gRow: 3,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879138",
row: "3",
col: "10",
gRow: 3,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879154",
row: "4",
col: "9",
gRow: 4,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879145",
row: "4",
col: "1",
gRow: 4,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879158",
row: "4",
col: "12",
gRow: 4,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879148",
row: "4",
col: "4",
gRow: 4,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879161",
row: "4",
col: "15",
gRow: 4,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879152",
row: "4",
col: "7",
gRow: 4,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879155",
row: "4",
col: "10",
gRow: 4,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879146",
row: "4",
col: "2",
gRow: 4,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879159",
row: "4",
col: "13",
gRow: 4,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879150",
row: "4",
col: "5",
gRow: 4,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879153",
row: "4",
col: "8",
gRow: 4,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879156",
row: "4",
col: "11",
gRow: 4,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879147",
row: "4",
col: "3",
gRow: 4,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879160",
row: "4",
col: "14",
gRow: 4,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879151",
row: "4",
col: "6",
gRow: 4,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879164",
row: "5",
col: "3",
gRow: 5,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879168",
row: "5",
col: "6",
gRow: 5,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879171",
row: "5",
col: "9",
gRow: 5,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879175",
row: "5",
col: "12",
gRow: 5,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879178",
row: "5",
col: "15",
gRow: 5,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879162",
row: "5",
col: "1",
gRow: 5,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879165",
row: "5",
col: "4",
gRow: 5,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879169",
row: "5",
col: "7",
gRow: 5,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879172",
row: "5",
col: "10",
gRow: 5,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879176",
row: "5",
col: "13",
gRow: 5,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879163",
row: "5",
col: "2",
gRow: 5,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879167",
row: "5",
col: "5",
gRow: 5,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879170",
row: "5",
col: "8",
gRow: 5,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879173",
row: "5",
col: "11",
gRow: 5,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879177",
row: "5",
col: "14",
gRow: 5,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879207",
row: "6",
col: "11",
gRow: 7,
gCol: 12,
type: "0",
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0