vue实现电影选座代码-html代码-BFW代码库

vue实现电影选座代码

代码语言：html

所属分类：其他

代码描述：vue实现电影选座代码，选择座位，计算价格，包含已售和未售。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layer.js"></script>
		<style type="text/css">
			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('//repo.bfw.wiki/bfwrepo/icon/65fa7c1d0e399.png');
			}
			
			.bg-sit:hover {
				cursor: pointer;
			}
			
			/* 已售座位 */
			.bg-sited {
				/* background-color: red; */
				background-image: url('//repo.bfw.wiki/bfwrepo/icon/65fa7c34c8a6a.png');
			}
			
			/* 空位置 */
			.bg-nosit {
				/* border: 1px solid white; */
			}
			
			/* 已选座位 */
			.bg-temp {
				cursor: pointer;
				background-image: url('//repo.bfw.wiki/bfwrepo/icon/65fa7c2691a49.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: 30%;
			}
			
			/* 电影名 */
			.film-title {
				font-family: "微软雅黑";
				font-weight: 900;
				font-size: 25px;
			}

			#app {
				height: 100%;
			}

		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<div id="room">
					<div class="row" style="margin-left:25%;">
						<div style="margin-left: 20px;">
							<div class="sit bg-sit"></div>
							<div>可选座位</div>
						</div>
						<div style="margin-left: 20px;">
							<div class="sit bg-sited"></div>
							<div>已售座位</div>
						</div>
						<div style="margin-left: 20px;">
							<div class="sit bg-temp"></div>
							<div>已选座位</div>
						</div>
					</div>
					<div class="row" style="width: 100%;text-align: center;">
						<span>
							银幕中央
						</span>
						<hr style="width: 90%;">
					</div>
					<div v-for="(item,i) in list" class="row" style="margin-left: 15%;">
						<div class="sit bg-nosit" style="margin-right:50px">{{i+1}}</div>
						<div @click="selectSeat(item1,i,j)" :class="['sit',{'bg-temp':item1==3},{'bg-sited':item1==2},{'bg-sit':item1==1},{'bg-nosit':item1==0}]"
						 v-for="(item1,j) in item">
						</div>
					</div>
				</div>
				<div class="win-right">
					<div class="row">
						<div>
							<img class="film-img" :src="filmSession.filmImg" alt="">
						</div>
						<div>
							<div class="row film-title">{{filmSession.filmName}}</div>
							<div class="row">类型：{{filmSession.filmType}}</div>
							<div class="row">时.........完整代码请登录后点击上方下载按钮下载查看