效果图：
代码：
<template>
<div class="move_box">
<div class="move_leftbox">
<h4 style="text-align:center">屏幕</h4>
<div class="img_box">
<div class="img_itembox" v-for="(m, i) in moves" :key="m.id" @click="selectDesk(i)">
<template v-if="m.state == 'true'">
<div class="img_option move_img"></div>
</template>
<template v-else-if="m.state == 'false'">
<img src="../assets/selected.png" alt="" class="move_img">
</template>
<template v-else-if="m.state == 'on'">
<img src="../assets/be_selected.png" alt="" class="move_img">
</template>
</div>
</div>
</div>
<div class="move_rightbox">
<img src="../assets/jiongma.png" alt="" class="move_bigimg" />
<div class="move_rightitem">
<img src="../assets/jiongma.png" alt=""
style="width:120px;float: left;margin-right: 20px;margin-bottom: 10px;">
<div style="text-align:left">中文名：囧妈</div>
<br>
<div style="text-align:left">英文名：Lost in Russia</div>
<br>
<div style="text-align:left">剧情：喜剧</div>
<br>
<div style="text-align:left">版本：中文2D</div>
<br>
<div style="text-align:left">中国内地/126分钟</div>
<br>
<br>
<div style="text-align:left">影院：<span style="font-weight:600">万达影城</span></div>
<br>
<div style="text-align:left">影厅：<span style="font-weight:600">8号影厅</span></div>
<br>
<div style="text-align:left">场次：<span style="font-weight:600">2021.05.18 (周二) 20:00</span></div>
<br>
<hr>
<br>
<div style="text-align:left">单价：<span style="font-weight:600">￥38.00</span></div>
<br>
<div style="text-align:left">总价：<span style="font-weight:600">￥{{ total }}.00</span></div>
<br>
<hr>
<br>
<div class="btn_box">结帐下单</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
const moves = reactive([
{ id: 1, state: "true" }, { id: 2, state: "true" }, { id: 3, state: "true" },
{ id: 4, state: "true" }, { id: 5, state: "true" }, { id: 6, state: "true" },
{ id: 7, state: "true" }, { id: 8, state: "true" }, { id: 9, state: "true" },
{ id: 10, state: "true" },
{ id: 11, state: "true" }, { id: 12, state: "false" }, { id: 13, state: "true" },
{ id: 14, state: "false" }, { id: 15, state: "false" }, { id: 16, state: "false" },
{ id: 17, state: "true" }, { id: 18, state: "false" }, { id: 19, state: "true" },
{ id: 20, state: "true" },
{ id: 21, state: "false" }, { id: 22, state: "false" }, { id: 23, state: "false" },
{ id: 24, state: "true" }, { id: 25, state: "false" }, { id: 26, state: "true" },
{ id: 27, state: "true" }, { id: 28, state: "true" }, { id: 29, state: "true" },
{ id: 30, state: "true" },
{ id: 31, state: "true" }, { id: 32, state: "true" }, { id: 33, state: "true" },
{ id: 34, state: "true" }, { id: 35, state: "false" }, { id: 36, state: "true" },
{ id: 37, state: "true" }, { id: 38, state: "true" }, { id: 39, state: "true" },
{ id: 40, state: "true" },
{ id: 41, state: "true" }, { id: 42, state: "true" }, { id: 43, state: "true" },
{ id: 44, state: "false" }, { id: 45, state: "false" }, { id: 46, state: "false" },
{ id: 47, state: "true" }, { id: 48, state: "true" }, { id: 49, state: "true" },
{ id: 50, state: "false" },
{ id: 51, state: "true" }, { id: 52, state: "true" }, { id: 53, state: "true" },
{ id: 54, state: "true" }, { id: 55, state: "true" }, { id: 56, state: "true" },
{ id: 57, state: "true" }, { id: 58, state: "true" }, { id: 59, state: "true" },
{ id: 60, state: "true" },
{ id: 61, state: "true" }, { id: 62, state: "true" }, { id: 63, state: "true" },
{ id: 64, state: "true" }, { id: 65, state: "true" }, { id: 66, state: "true" },
{ id: 67, state: "true" }, { id: 68, state: "true" }, { id: 69, state: "true" },
{ id: 70, state: "true" },
{ id: 71, state: "true" }, { id: 72, state: "true" }, { id: 73, state: "true" },
{ id: 74, state: "true" }, { id: 75, state: "false" }, { id: 76, state: "true" },
{ id: 77, state: "false" }, { id: 78, state: "true" }, { id: 79, state: "true" },
{ id: 80, state: "true" },
{ id: 81, state: "true" }, { id: 82, state: "true" }, { id: 83, state: "true" },
{ id: 84, state: "false" }, { id: 85, state: "false" }, { id: 86, state: "false" },
{ id: 87, state: "true" }, { id: 88, state: "true" }, { id: 89, state: "true" },
{ id: 90, state: "true" },
{ id: 91, state: "true" }, { id: 92, state: "true" }, { id: 93, state: "true" },
{ id: 94, state: "true" }, { id: 95, state: "true" }, { id: 96, state: "true" },
{ id: 97, state: "true" }, { id: 98, state: "true" }, { id: 99, state: "true" },
{ id: 100, state: "true" },
{ id: 101, state: "true" }, { id: 102, state: "true" }, { id: 103, state: "true" },
{ id: 104, state: "false" }, { id: 105, state: "true" }, { id: 106, state: "true" },
{ id: 107, state: "false" }, { id: 108, state: "true" }, { id: 109, state: "true" },
{ id: 110, state: "true" },
{ id: 111, state: "true" }, { id: 112, state: "true" }, { id: 113, state: "true" },
{ id: 114, state: "true" }, { id: 115, state: "true" }, { id: 116, state: "true" },
{ id: 117, state: "false" }, { id: 118, state: "true" }, { id: 119, state: "true" },
{ id: 120, state: "true" },
{ id: 121, state: "true" }, { id: 122, state: "true" }, { id: 123, state: "true" },
{ id: 124, state: "true" }, { id: 125, state: "true" }, { id: 126, state: "true" },
{ id: 127, state: "true" }, { id: 128, state: "true" }, { id: 129, state: "true" },
{ id: 130, state: "true" },
{ id: 131, state: "true" }, { id: 132, state: "false" }, { id: 133, state: "true" },
{ id: 134, state: "false" }, { id: 135, state: "false" }, { id: 136, state: "true" },
{ id: 137, state: "true" }, { id: 138, state: "true" }, { id: 139, state: "true" },
{ id: 140, state: "true" },
{ id: 141, state: "false" }, { id: 142, state: "false" }, { id: 143, state: "true" },
{ id: 144, state: "false" }, { id: 145, state: "true" }, { id: 146, state: "true" },
{ id: 147, state: "true" }, { id: 148, state: "true" }, { id: 149, state: "true" },
{ id: 150, state: "true" },
{ id: 151, state: "true" }, { id: 152, state: "true" }, { id: 153, state: "true" },
{ id: 154, state: "true" }, { id: 155, state: "true" }, { id: 156, state: "true" },
{ id: 157, state: "true" }, { id: 158, state: "true" }, { id: 159, state: "true" },
{ id: 160, state: "true" },
{ id: 161, state: "true" }, { id: 162, state: "true" }, { id: 163, state: "true" },
{ id: 164, state: "true" }, { id: 165, state: "true" }, { id: 166, state: "true" },
{ id: 167, state: "true" }, { id: 168, state: "true" }, { id: 169, state: "true" },
{ id: 170, state: "true" },
{ id: 171, state: "false" }, { id: 172, state: "false" }, { id: 173, state: "true" },
{ id: 174, state: "false" }, { id: 175, state: "false" }, { id: 176, state: "false" },
{ id: 177, state: "false" }, { id: 178, state: "false" }, { id: 179, state: "true" },
{ id: 180, state: "false" },
{ id: 181, state: "true" }, { id: 182, state: "true" }, { id: 183, state: "true" },
{ id: 184, state: "true" }, { id: 185, state: "true" }, { id: 186, state: "true" },
{ id: 187, state: "true" }, { id: 188, state: "true" }, { id: 189, state: "true" },
{ id: 190, state: "true" },
{ id: 191, state: "true" }, { id: 192, state: "false" }, { id: 193, state: "true" },
{ id: 194, state: "true" }, { id: 195, state: "false" }, { id: 196, state: "false" },
{ id: 197, state: "true" }, { id: 198, state: "true" }, { id: 199, state: "true" },
{ id: 200, state: "true" },
{ id: 201, state: "true" }, { id: 202, state: "true" }, { id: 203, state: "true" },
{ id: 204, state: "true" }, { id: 205, state: "true" }, { id: 206, state: "true" },
{ id: 207, state: "true" }, { id: 208, state: "true" }, { id: 209, state: "true" },
{ id: 210, state: "true" },
{ id: 211, state: "true" }, { id: 212, state: "true" }, { id: 213, state: "true" },
{ id: 214, state: "true" }, { id: 215, state: "true" }, { id: 216, state: "true" },
{ id: 217, state: "true" }, { id: 218, state: "true" }, { id: 219, state: "true" },
{ id: 220, state: "true" },
{ id: 221, state: "true" }, { id: 222, state: "true" }, { id: 223, state: "true" },
{ id: 224, state: "true" }, { id: 225, state: "true" }, { id: 226, state: "true" },
{ id: 227, state: "true" }, { id: 228, state: "true" }, { id: 229, state: "true" },
{ id: 230, state: "true" },
{ id: 231, state: "true" }, { id: 232, state: "true" }, { id: 233, state: "true" },
{ id: 234, state: "true" }, { id: 235, state: "true" }, { id: 236, state: "true" },
{ id: 237, state: "true" }, { id: 238, state: "true" }, { id: 239, state: "true" },
{ id: 240, state: "true" },
])
let info = ref(0);
let total = ref(0);
function selectDesk(i: any) {
console.log("开始" + info.value)
info.value++
if (moves[i].state == "on") {
moves[i].state = "true"
info.value--
info.value--
console.log("弃票", info.value)
} else if (info.value > 5 && moves[i].state != "false") {
alert("您最多只能一次性购买五张票卷！")
moves[i].state = "true"
info.value--
console.log(info.value)
} else if (moves[i].state == "true") {
moves[i].state = "on"
total.value += 38
} else if (moves[i].state == "false") {
info.value--
alert("当前座位已被购买！")
console.log("选择已购的座位", info.value)
}
// else if (info.value > 5 && moves[i].state == "false") {
// alert("当前座位已被购买！")
// info.value--
// info.value--
// console.log("选择已购的座位", info.value)
// }
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
font-size: 15px;
}
.move_box {
width: 1200px;
border: 1px #333 solid;
border-radius: 5px;
margin: 0 auto;
display: flow-root;
}
.move_rightitem {
padding: 20px;
height: 520px;
background: rgb(3, 3, 3, 0.3);
}
.move_bigimg {
width: 558px;
height: 560px;
object-fit: cover;
filter: blur(4px);
position: absolute;
z-index: -1;
right: 0;
}
.move_leftbox {
width: 50%;
padding: 30px 20px;
float: left;
height: 500px;
border-right: 2px #333 solid;
text-align: center;
}
.move_rightbox {
width: 46.5%;
float: right;
height: 560px;
position: relative;
color:#fff;
}
.img_box {
position: relative;
margin: 10px;
}
.move_img {
width: 30px;
cursor: pointer;
float: left;
margin: 1px;
}
.img_option {
background-image: url("../assets/optional.png");
width: 30px;
height: 30px;
background-size: 100%;
display: block;
}
.active {
background-image: url("../assets/be_selected.png");
width: 30px;
height: 30px;
background-size: 100%;
display: block;
}
.move_img:hover {
box-shadow: 0 0 10px 1px lightgrey;
border-radius: 20%;
}
.btn_box {
margin: 0 auto;
color: #fff;
width: 160px;
padding: 10px 10px;
border-radius: 5px;
cursor: pointer;
background: rgb(9, 9, 9, 0.6);
}
.btn_box:hover {
background: rgb(9, 9, 9, 1);
}
</style>
标签：info,false,电影院,value,案例,state,Vue3,true,id From： https://www.cnblogs.com/zsbb/p/16924095.html