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;&.........完整代码请登录后点击上方下载按钮下载查看