<template>
    <div class="page-body">
        <div class="coat-content">
            <div class="coat-row-1-1">
                <p>CDA23323</p>
            </div>
            <div class="coat-row-1-2">
                <p>CDA2333</p>
            </div>
            <div class="coat-row-1-3">
                <p>CDA23</p>
            </div>
            <div class="coat-row-1-4">
                <p>CDA2</p>
            </div>
            <div class="coat-row-1-5">
                <p>CDA231312</p>
            </div>
            <!-- 第二行 -->
            <div class="coat-row-2-1">
                <p>CDA23323</p>
            </div>
            <div class="coat-row-2-2">
                <p>CDA2333</p>
            </div>
            <div class="coat-row-2-3">
                <p>CDA23</p>
            </div>
            <div class="coat-row-2-4">
                <p>CDA2</p>
            </div>
            <div class="coat-row-2-5">
                <p>CDA231312</p>
            </div>
            <div class="coat-row-2-6">
                <p>CDA231312</p>
            </div>
            <!-- 第三行 -->
            <div class="coat-row-3-1">
                <p>CDA23323</p>
            </div>
            <div class="coat-row-3-2">
                <p>CDA2333</p>
            </div>
            <div class="coat-row-3-3">
                <p>CDA23</p>
            </div>
            <div class="coat-row-3-4">
                <p>CDA2</p>
            </div>
            <div class="coat-row-3-5">
                <p>CDA231312</p>
            </div>
            <div class="coat-row-3-6">
                <p>CDA231312</p>
            </div>
            <!-- 第四行 -->
            <div class="coat-row-4-1">
                <p>CDA23323</p>
            </div>
            <div class="coat-row-4-2">
                <p>CDA2333</p>
            </div>
            <div class="coat-row-4-3">
                <p>CDA23</p>
            </div>
            <div class="coat-row-4-4">
                <p>CDA2</p>
            </div>
            <div class="coat-row-4-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);

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

        .coat-row-1-1,
        .coat-row-1-2,
        .coat-row-1-3,
        .coat-row-1-4,
        .coat-row-1-5,
        .coat-row-2-1,
        .coat-row-2-2,
        .coat-row-2-3,
        .coat-row-2-4,
        .coat-row-2-5,
        .coat-row-2-6,
        .coat-row-3-1,
        .coat-row-3-2,
        .coat-row-3-3,
        .coat-row-3-4,
        .coat-row-3-5,
        .coat-row-3-6,
        .coat-row-4-1,
        .coat-row-4-2,
        .coat-row-4-3,
        .coat-row-4-4,
        .coat-row-4-5 {
            position: absolute;
            width: 140px;
            height: 50px;
            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;
            }
        }

        // ? 第一行 top
        .coat-row-1-1,
        .coat-row-1-2,
        .coat-row-1-3,
        .coat-row-1-4,
        .coat-row-1-5 {
            top: 355px;
        }
        // ? 第一行 left
        .coat-row-1-1,
        .coat-row-3-1,
        .coat-row-4-1 {
            left: 172px;
        }
        .coat-row-1-2,
        .coat-row-3-2 {
            left: 348px;
        }
        .coat-row-1-3,
        .coat-row-3-3,
        .coat-row-4-2 {
            left: 533px;
        }
        .coat-row-1-4,
        .coat-row-3-4 {
            left: 713px;
        }
        .coat-row-1-5,
        .coat-row-3-5 {
            left: 893px;
        }

        // ?第二行 top
        .coat-row-2-1,
        .coat-row-2-2,
        .coat-row-2-3,
        .coat-row-2-4,
        .coat-row-2-5,
        .coat-row-2-6 {
            top: 425px;
        }
        // ?第二行 left
        .coat-row-2-1 {
            left: 217px;
        }
        .coat-row-2-2 {
            left: 395px;
        }
        .coat-row-2-3 {
            left: 575px;
        }
        .coat-row-2-4,
        .coat-row-4-3 {
            left: 755px;
        }
        .coat-row-2-5,
        .coat-row-4-4 {
            left: 935px;
        }
        .coat-row-2-6 {
            left: 1260px;
        }

        // ?第三行 top
        .coat-row-3-1,
        .coat-row-3-2,
        .coat-row-3-3,
        .coat-row-3-4,
        .coat-row-3-5 {
            top: 495px;
        }
        .coat-row-3-6 {
            top: 515px;
        }
        .coat-row-3-6 {
            left: 1260px;
        }

        // ?第四行 top
        .coat-row-4-1 {
            top: 569px;
        }
        .coat-row-4-2,
        .coat-row-4-3,
        .coat-row-4-4 {
            top: 589px;
        }
        .coat-row-4-5 {
            top: 603px;
            left: 1260px;
        }
    }
}
</style>
