<template>
    <div class="Loft">
        <div class="curTitle">
            {{regionName}}平面图
        </div>
        <div class="loftContainer">
            <div class="loftBg">
                <ul>
                    <li :class="{'active':p.state == 0}" v-for="p in points" :style="{ left: p.left, top: p.top}"><em>{{p.name}}</em><i></i></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                regionName:'2楼',
                points: [
                    {name: 'Signal设备01', room: '201', left: '30px', top: '10px',state:1},
                    {name: 'Signal设备02', room: '202', left: '70px', top: '10px',state:1},
                    {name: 'Signal设备03', room: '203', left: '110px', top: '10px',state:0},
                    {name: 'Signal设备04', room: '204', left: '180px', top: '10px',state:1},
                    {name: 'Signal设备05', room: '205', left: '-380px', top: '240px',state:1},
                    {name: 'Signal设备06', room: '206', left: '-330px', top: '240px',state:1},
                    {name: 'Signal设备07', room: '207', left: '310px', top: '220px',state:0},
                    {name: 'Signal设备08', room: '208', left: '410px', top: '220px',state:1},
                ],
            }
        }
    }
</script>

<style scoped>
    .Loft {
        width: 690px;
        height: 481px;
        float: right;
        margin-top: 11px;
    }

    .loftContainer {
        width: 690px;
        height: 381px;
        margin-left: 0;
        margin-top: 14px;
        overflow: hidden;
        border: 1px solid #2592E2;
        float: left;
        background: rgba(27, 86, 200, 0.14);
    }

    .curTitle {
        width: 164px;
        height: 26px;
        line-height: 26px;
        font-size: 18px;
        color: #6DC1FF;
        float: left;
        text-align: center;
        background: url("../assets/img/main/title.png") top center no-repeat;
        /*background: url("../assets/img/op_title.png") top center no-repeat;*/
        background-size: 100% 100%;
    }

    .loftBg {
        width: 641px;
        height: 330px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/main/loftBg.png") top center no-repeat;
        background-size: 100% 100%;
        margin-top: 24px;
    }

    .loftBg ul {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .loftBg li {
        position: relative;
    }

    .loftBg li em {
        color: #6DC1FF;
        font-size: 12px;
        margin-right: 5px;
        float: left;
        line-height: 22px;
    }

    .loftBg li i {
        width: 22px;
        height: 22px;
        float: left;
        text-align: center;
        line-height: 22px;
        background: #2592E2;
        border-radius: 250px;
        color: #BEE3FF;
        font-size: 10px;
    }
    .loftBg li.active i {
        background: #FFDD00;
        color: #2592E2;
    }
</style>
