<template>
    <div class="page-body">
        <div class="paint-content">
            <!-- 第一行 -->
            <div class="paint-row-1-0">
                <p>CDA11323</p>
            </div>
            <div class="paint-row-1-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-1-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-1-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-1-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-1-5">
                <p>CDA231312</p>
            </div>
            <!-- 第二行 -->
            <div class="paint-row-2-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-2-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-2-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-2-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-2-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-2-5">
                <p>CDA231312</p>
            </div>
            <!-- 第三行 -->
            <div class="paint-row-3-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-3-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-3-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-3-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-3-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-3-5">
                <p>CDA231312</p>
            </div>
            <!-- 第四行 -->
            <div class="paint-row-4-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-4-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-4-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-4-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-4-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-4-5">
                <p>CDA231312</p>
            </div>
            <!-- 第五行 -->
            <div class="paint-row-5-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-5-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-5-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-5-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-5-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-5-5">
                <p>CDA231312</p>
            </div>

            <!-- 第六行 -->
            <div class="paint-row-6-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-6-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-6-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-6-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-6-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-6-5">
                <p>CDA231312</p>
            </div>

            <!-- 第七行 -->
            <div class="paint-row-7-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-7-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-7-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-7-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-7-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-7-5">
                <p>CDA231312</p>
            </div>
            <!-- 第八行 -->
            <div class="paint-row-8-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-8-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-8-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-8-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-8-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-8-5">
                <p>CDA231312</p>
            </div>
            <!-- 第九行 -->
            <div class="paint-row-9-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-9-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-9-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-9-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-9-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-9-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-9-5">
                <p>CDA231312</p>
            </div>
            <!-- 第十行 -->
            <div class="paint-row-10-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-10-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-10-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-10-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-10-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-10-5">
                <p>CDA231312</p>
            </div>
            <!-- 第十一行 -->
            <div class="paint-row-11-0">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-11-1">
                <p>CDA23323</p>
            </div>
            <div class="paint-row-11-2">
                <p>CDA2333</p>
            </div>
            <div class="paint-row-11-3">
                <p>CDA23</p>
            </div>
            <div class="paint-row-11-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-11-5">
                <p>CDA231312</p>
            </div>
            <!-- 第十二行 -->
            <div class="paint-row-12-0">
                <p>CDA2</p>
            </div>
            <div class="paint-row-12-2">
                <p>CDA2</p>
            </div>
            <div class="paint-row-12-3">
                <p>CDA2</p>
            </div>
            <div class="paint-row-12-4">
                <p>CDA2</p>
            </div>
            <div class="paint-row-12-5">
                <p>CDA231312</p>
            </div>
            <!-- 第十三行 -->
            <div class="paint-row-13-0">
                <p>CDA2</p>
            </div>
            <div class="paint-row-13-1">
                <p>CDA2</p>
            </div>
            <div class="paint-row-13-2">
                <p>CDA2</p>
            </div>
            <div class="paint-row-13-3">
                <p>CDA2</p>
            </div>
            <div class="paint-row-13-5">
                <p>CDA231312</p>
            </div>
        </div>
    </div>
</template>
<script>
/**
 * @author MARS 2019-09-28 <wangyunfan@vtstar.net>
 * @fileoverview 面/漆作业区
 */
export default {
    data () {
        return {}
    },

    mounted () {},

    methods: {}
}
</script>
<style lang="scss" scoped>
.page-body {
    min-height: 100%;
    background: rgba(0, 7, 12, 1);

    .paint-content {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url('../../../assets/images/Monitor/paint-bg.png') no-repeat;

        .paint-row-1-0,
        .paint-row-1-1,
        .paint-row-1-2,
        .paint-row-1-3,
        .paint-row-1-4,
        .paint-row-1-5,
        .paint-row-2-0,
        .paint-row-2-1,
        .paint-row-2-2,
        .paint-row-2-3,
        .paint-row-2-4,
        .paint-row-2-5,
        .paint-row-3-0,
        .paint-row-3-1,
        .paint-row-3-2,
        .paint-row-3-3,
        .paint-row-3-4,
        .paint-row-3-5,
        .paint-row-4-0,
        .paint-row-4-1,
        .paint-row-4-2,
        .paint-row-4-3,
        .paint-row-4-4,
        .paint-row-4-5,
        .paint-row-5-0,
        .paint-row-5-1,
        .paint-row-5-2,
        .paint-row-5-3,
        .paint-row-5-4,
        .paint-row-5-5,
        .paint-row-6-0,
        .paint-row-6-1,
        .paint-row-6-2,
        .paint-row-6-3,
        .paint-row-6-4,
        .paint-row-6-5,
        .paint-row-7-0,
        .paint-row-7-1,
        .paint-row-7-2,
        .paint-row-7-3,
        .paint-row-7-4,
        .paint-row-7-5,
        .paint-row-8-0,
        .paint-row-8-1,
        .paint-row-8-2,
        .paint-row-8-3,
        .paint-row-8-4,
        .paint-row-8-5,
        .paint-row-9-0,
        .paint-row-9-1,
        .paint-row-9-2,
        .paint-row-9-3,
        .paint-row-9-4,
        .paint-row-9-5,
        .paint-row-10-0,
        .paint-row-10-1,
        .paint-row-10-2,
        .paint-row-10-3,
        .paint-row-10-4,
        .paint-row-10-5,
        .paint-row-11-0,
        .paint-row-11-1,
        .paint-row-11-2,
        .paint-row-11-3,
        .paint-row-11-4,
        .paint-row-11-5,
        .paint-row-12-0,
        .paint-row-12-2,
        .paint-row-12-3,
        .paint-row-12-4,
        .paint-row-12-5,
        .paint-row-13-0,
        .paint-row-13-1,
        .paint-row-13-2,
        .paint-row-13-3,
        .paint-row-13-5 {
            position: absolute;
            width: 140px;
            height: 40px;
            cursor: pointer;
            background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat;
            background-size: 35px 18px;
            background-position: 0 16px;

            p {
                font-size: 14px;
                margin: 0;
                color: #ffffff;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        // ?第0行 left
        .paint-row-1-0,
        .paint-row-2-0,
        .paint-row-3-0,
        .paint-row-4-0,
        .paint-row-5-0,
        .paint-row-6-0,
        .paint-row-7-0,
        .paint-row-8-0,
        .paint-row-9-0,
        .paint-row-10-0,
        .paint-row-11-0,
        .paint-row-12-0,
        .paint-row-13-0 {
            left: 157px;
        }

        // ? 第一行 top
        .paint-row-1-0,
        .paint-row-1-1,
        .paint-row-1-2,
        .paint-row-1-3,
        .paint-row-1-4 {
            top: 151px;
        }
        .paint-row-1-5 {
            top: 142px;
        }
        // ?第一行 left
        .paint-row-1-1,
        .paint-row-2-1,
        .paint-row-3-1,
        .paint-row-4-1,
        .paint-row-5-1,
        .paint-row-6-1,
        .paint-row-7-1,
        .paint-row-8-1,
        .paint-row-9-1,
        .paint-row-10-1,
        .paint-row-11-1,
        .paint-row-13-1 {
            left: 315px;
        }
        .paint-row-1-2,
        .paint-row-5-2,
        .paint-row-7-2,
        .paint-row-8-2,
        .paint-row-12-2 {
            left: 675px;
        }
        .paint-row-1-3,
        .paint-row-2-3,
        .paint-row-7-3,
        .paint-row-11-3 {
            left: 802px;
        }
        .paint-row-1-4,
        .paint-row-3-4,
        .paint-row-4-4,
        .paint-row-6-4,
        .paint-row-7-4,
        .paint-row-9-4,
        .paint-row-10-4,
        .paint-row-11-4,
        .paint-row-12-4 {
            left: 961px;
        }
        .paint-row-1-5,
        .paint-row-2-5,
        .paint-row-3-5,
        .paint-row-4-5,
        .paint-row-5-5,
        .paint-row-6-5,
        .paint-row-7-5,
        .paint-row-8-5,
        .paint-row-9-5,
        .paint-row-10-5,
        .paint-row-11-5,
        .paint-row-12-5,
        .paint-row-13-5 {
            left: 1295px;
        }

        // ?第二行 top
        .paint-row-2-0,
        .paint-row-2-1,
        .paint-row-2-2,
        .paint-row-2-3,
        .paint-row-2-4 {
            top: 210px;
        }
        .paint-row-2-5 {
            top: 202px;
        }
        // ?第二行 left
        .paint-row-2-2,
        .paint-row-3-2,
        .paint-row-4-2,
        .paint-row-6-2,
        .paint-row-9-2,
        .paint-row-10-2,
        .paint-row-11-2,
        .paint-row-13-2 {
            left: 635px;
        }
        .paint-row-2-4,
        .paint-row-5-4,
        .paint-row-8-4 {
            left: 995px;
        }

        // ?第三行 top
        .paint-row-3-0,
        .paint-row-3-1,
        .paint-row-3-2,
        .paint-row-3-3,
        .paint-row-3-4 {
            top: 266px;
        }
        .paint-row-3-5 {
            top: 256px;
        }

        .paint-row-3-3,
        .paint-row-4-3,
        .paint-row-5-3,
        .paint-row-6-3,
        .paint-row-8-3,
        .paint-row-9-3,
        .paint-row-10-3,
        .paint-row-12-3,
        .paint-row-13-3 {
            left: 848px;
        }

        // ?第四行 top
        .paint-row-4-0,
        .paint-row-4-1,
        .paint-row-4-2,
        .paint-row-4-3,
        .paint-row-4-4 {
            top: 325px;
        }
        .paint-row-4-5 {
            top: 315px;
        }

        // ?第五行 top
        .paint-row-5-0,
        .paint-row-5-1,
        .paint-row-5-2,
        .paint-row-5-3,
        .paint-row-5-4 {
            top: 382px;
        }
        .paint-row-5-5 {
            top: 372px;
        }

        // ?第六行 top
        .paint-row-6-0,
        .paint-row-6-1,
        .paint-row-6-2,
        .paint-row-6-3,
        .paint-row-6-4 {
            top: 438px;
        }
        .paint-row-6-5 {
            top: 428px;
        }

        // ?第七行 top
        .paint-row-7-0,
        .paint-row-7-1,
        .paint-row-7-2,
        .paint-row-7-3,
        .paint-row-7-4 {
            top: 495px;
        }
        .paint-row-7-5 {
            top: 485px;
        }

        // ?第八行 top
        .paint-row-8-0,
        .paint-row-8-1,
        .paint-row-8-2,
        .paint-row-8-3,
        .paint-row-8-4 {
            top: 550px;
        }
        .paint-row-8-5 {
            top: 544px;
        }

        // ?第九行
        .paint-row-9-0,
        .paint-row-9-1 {
            top: 610px;
        }
        .paint-row-9-2,
        .paint-row-9-3,
        .paint-row-9-4,
        .paint-row-9-5 {
            top: 602px;
        }

        // ?第十行
        .paint-row-10-0,
        .paint-row-10-1,
        .paint-row-10-2,
        .paint-row-10-3,
        .paint-row-10-4,
        .paint-row-10-5 {
            top: 666px;
        }

        // ?第十一行
        .paint-row-11-0,
        .paint-row-11-1 {
            top: 723px;
        }
        .paint-row-11-2,
        .paint-row-11-3,
        .paint-row-11-4 {
            top: 730px;
        }
        .paint-row-11-5 {
            top: 713px;
        }

        // ?第十二行
        .paint-row-12-0,
        .paint-row-12-2,
        .paint-row-12-3,
        .paint-row-12-4 {
            top: 780px;
        }
        .paint-row-12-5 {
            top: 759px;
        }

        // ?第十三行
        .paint-row-13-0,
        .paint-row-13-1,
        .paint-row-13-3,
        .paint-row-13-2 {
            top: 816px;
        }
        .paint-row-13-5 {
            top: 808px;
        }
    }
}
</style>
