vue实现电影选座代码

代码语言:html

所属分类:其他

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

代码标签: 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/65.........完整代码请登录后点击上方下载按钮下载查看

网友评论0