signal_web/src/components/Total.vue

<template>
    <div class="total">
        <div class="other-people">
            <div class="image-border image-border1"></div>
            <div class="image-border image-border2"></div>
            <div class="image-border image-border3"></div>
            <div class="image-border image-border4"></div>
            <div class="other-people-title">
                实时监测
            </div>
            <div class="totalContianer" v-if="TotalPanel">
                <div class="tlt">
                    <h5>正在监测</h5>
                    <BigRader></BigRader>
                </div>
                <div class="trt">
                    <h5>实时监测记录</h5>
                    <Watching></Watching>
                </div>
            </div>
            <div class="loftContainer" v-if="LoftPanel">
                <div class="tlt">
                    <h5></h5>
                    <SmallRader></SmallRader>
                </div>
                <div class="trt">
                    <Loft></Loft>
                </div>
            </div>
            <div class="RoomContainer" v-if="RoomPanel">
                <div class="tlt">
                    <h5></h5>
                    <SmallRader></SmallRader>
                </div>
                <div class="trt">
                    <Room></Room>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BigRader from '@/components/BigRader.vue'
    import SmallRader from '@/components/SmallRader.vue'
    import Watching from '@/components/Watching.vue'
    import Loft from '@/components/Loft.vue'
    import Room from '@/components/Room.vue'
    export default {
        data(){
          return{
              TotalPanel:true,//总控
              LoftPanel:false,//楼层
              RoomPanel:false,//房间
          }
        },
        components: {
            BigRader,Watching,SmallRader,Loft,Room
        }
    }
</script>

<style scoped>
    .other-people {
        width: 963px;
        height: 481px;
        margin-left: 0;
        overflow: hidden;
        background: #000F2A;
    }
    ul,li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .totalContianer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 55px;
    }
    .totalContianer .tlt {
        width: 48%;
        float: left;
        padding-left: 10px;
    }
    .totalContianer .trt {
        width: 48%;
        float: right;
        padding-right: 20px;
        overflow: hidden;
    }
    .totalContianer h5 {
        width: 126px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #6DC1FF;
        font-size: 14px;
        margin: 0;
        margin-left: 33%;
        margin-bottom: 19px;
        background: url("../assets/img/main/title.png")top center no-repeat;
        background-size: 100% 100%;
    }
    .total .image-border2 {
        right: 0;
    }
    .total .image-border4 {
        right: 0;
    }
    .loftContainer .tlt {
        float: left;
        padding-left: 10px;
        margin-top: 60px;
    }
    .loftContainer .trt {
        float: right;
        padding-right: 20px;
        overflow: hidden;
        margin-top: 30px;
    }
    .RoomContainer .tlt {
        float: left;
        padding-left: 10px;
        margin-top: 60px;
    }
    .RoomContainer .trt {
        float: right;
        padding-right: 20px;
        overflow: hidden;
        margin-top: 30px;
    }
</style>