vue电影院位置选座代码-html代码-BFW代码库

vue电影院位置选座代码

代码语言：html

所属分类：其他

代码描述：vue电影院位置选座代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <style>
        .sm-img {
            width: 26px;
            height: 26px;
        }
        
        .sm-img img {
            width: 26px;
            height: 26px;
        }
        .sm {
            position: relative;
        }
        .sm-line {
            width: 0;
            height: 100vh;
            border: 1px dashed #ccc;
            position: absolute;
            top: 18px;
            left: 50%;
        }
        .sm-title {
            background-color: #dddddd;
            width: 190px;
            height: 17px;
            -webkit-transform: perspective(17px) rotateX(-10deg);
            transform: perspective(17px) rotateX(-10deg);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="sm">
            <div class="sm-title">舞台</div>
            <div class="sm-line"></div>
            <div style="display: flex; justify-content: center">
                <div>
                    <div style="display: flex" v-for="(item1, index1) in seatList" :key="index1">
                        <!-- v-if="JSON.stringify(item1) !== '{}'" -->
                        <template>
                        <div @click="seatClk(item)" class="sm-img" v-for="item in item1" :key="item.id">
                            <img
                                v-if="item.status === 'N'"
                                class="o-w o-h"
                                src="//repo.bfw.wiki/bfwrepo/icon/65fa7c34c8a6a.png"
                                alt=""
                            />
                            <img
                                v-if="item.status === 'Y' && !item.isCheck"
                                class="o-w o-h"
                                src="//repo.bfw.wiki/bfwrepo/icon/65fa7c1d0e399.png"
                                alt=""
                            />
                            <img
                                v-if="item.status === 'Y' && item.isCheck"
                                class="o-w o-h"
                                src="//repo.bfw.wiki/bfwrepo/icon/65fa7c2691a49.png"
                                alt=""
                            />
                        </div>
                    </template>
                    </div>
                </div>
            </div>
        </div>

    </div>



    <script>
        new Vue({
                    el: '#app',
                    data: function() {
                        return {
                            // 页面渲染的数据
                    seatList: [],
                    // 后端返回的数据
                    arrList: [
                        {
                            id: 1,
                            seatNo: '1排1座',
                            status: 'N',
                            rowNo: '1',
                            colNo: '1'
                        },
                        
                          {
                            id: 9,
                            seatNo: '2排5座',
                            status: 'Y',
                            rowNo: '2',
                            colNo: '5'
                        },
                        {
                            id: 2,
                            seatNo: '1排2座',
                            status: 'Y',
                            rowNo: '1',
                            colNo: '2'
                        },
                        {
                            id: 3,
                            seatNo: '1排3座',
                            status: 'Y',
                            rowNo: '1',
                            colNo: '3'
                        },
                        {
                            id: 4,
                            seatNo: '1排4座',
                            status: 'Y',
                            rowNo: '1',
                            colNo: '4'
                        },
                        {
                            id: 5,
                            seatNo: '1排5座',
                            status: 'Y',
                            rowNo: '1',
                            colNo: '5'
                        },
         
                        {
                            id: 6,
                            seatNo: '2排2座',
                            status: 'Y',
                            rowNo: '2',
                            colNo: '2'
                        },
                        {
                            id: 7,
                            seatNo: '2排3座',
                            status: 'Y',
.........完整代码请登录后点击上方下载按钮下载查看