<template>
    <div class="Room">
        <div class="curTitle">
            2楼平面图
        </div>
        <div class="RoomContainer">
            <div class="RoomBg">
                <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 {
                points: [
                    {name: 'Signal设备01', room: '201', left: '30px', top: '10px',state:1},
                    {name: 'Signal设备02', room: '201', left: '310px', top: '300px',state:0},
                ],
            }
        }
    }
</script>

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

    .RoomContainer {
        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%;
    }

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

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

    .RoomBg li {
        position: relative;
    }

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

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