选座页面html,vue单页面影院选座demo

html,

body {

margin: 0;

padding: 0;

height: 100%;

}

#app div {

/* border: 1px solid black; */

float: left;

}

#room {

/* width: 300px; */

width: 60%;

border: 1px solid black;

padding: 20px 20px 20px 20px;

}

.sit {

height: 35px;

width: 35px;

min-height: 10px;

min-width: 10px;

margin: 4px 4px 4px 4px;

background-size: cover;

/* border: 1px solid black; */

}

/* 座位 */

.bg-sit {

background-image: url('/images/bg-sit.png');

}

.bg-sit:hover {

cursor: pointer;

}

/* 已售座位 */

.bg-sited {

/* background-color: red; */

background-image: url('/images/bg-sited.png');

}

/* 空位置 */

.bg-nosit {

/* border: 1px solid white; */

}

/* 已选座位 */

.bg-temp {

cursor: pointer;

background-image: url('/images/bg-temp.png');

}

/* 已选座位号 */

.select-sit {

border: 2px orange solid;

border-radius: 10px;

margin-left: 10px;

padding: 4px 10px 4px 10px;

background-color: rgba(255, 0, 0, 0.2);

}

.row {

/* 清除格式并换行 */

clear: both;

}

/* 确认选座按钮 */

.btn {

border-radius: 10px;

width: 200px;

height: 50px;

/* padding: 4px 10px 4px 10px; */

background-color: rgba(255, 0, 0, 0.8);

font-size: 25px;

color: white;

font-family: '微软雅黑';

}

/* 右侧信息栏 */

.win-right {

padding-left: 2%;

padding-top: 2%;

width: 27%;

background-color: rgba(112, 112, 112, 0.2);

border: 1px white solid;

height: 100%;

}

/* 整体容器 */

.box {

width: 90%;

margin-left: 5%;

height: 64%;

}

/* 电影封面 */

.film-img {

width: 80%;

}

/* 电影名 */

.film-title {

font-family: "微软雅黑";

font-weight: 900;

font-size: 25px;

}

#app {

height: 100%;

}

可选座位

已售座位

已选座位

银幕中央

---

{{i+1}}

v-for="(item1,j) in item">

{{filmSession.filmName}}

类型：{{filmSession.filmType}}

时长：120分钟

影院：

{{filmSession.svname}}

影厅：

{{filmSession.svaddress}}

场次：

{{filmSession.fstartTime|time}}

票价：

￥{{filmSession.filmPrice|price}}

座位：

{{sit|f3}}

总价：

￥{{filmSession.filmPrice*msg.length|price}}

确认选座