FE-V2-PC/src/views/newEvacuationBigData.vue

<template>
    <div class="newEvacuationBigData">
      <div class="title-positon-box"></div>
      <div class="left-max-big-box">
        <div class="left-big-box-one">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_znjc_tb.png">
            <p>智能检测</p>
          </div>
        </div>
        <div class="left-big-box-two">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_znkz_tb.png">
            <p>智能检测</p>
          </div>
        </div>
        <div class="left-big-box-three">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_yygb_wxy.png">
            <p>智能检测</p>
          </div>
        </div>
      </div>
      <div class="center-max-big-box">
        <div class="left-big-box-one">

        </div>
        <div class="left-big-box-two">

        </div>
        <div class="left-big-box-three">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_yygb_tb.png">
            <p>语音广播</p>
          </div>
          <div class="horn-max-big-box-one">
            <div class="horn-max-big-box-one-left">
              <p>A001内测喇叭</p>
              <p>A001内测喇叭</p>
              <p>A001内测喇叭</p>
              <p>A001内测喇叭</p>
              <p>A001内测喇叭</p>
              <p>A001内测喇叭</p>
              <p>A001内测喇叭</p>
            </div>
            <div class="horn-max-big-box-one-right">

            </div>
          </div>
        </div>
      </div>
      <div class="right-max-big-box">
        <div class="left-big-box-one">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_sysnry_tb.png">
            <p>实验室内人员</p>
          </div>
          <div class="user-max-box">
            <div class="user-box">
              <div>
                <img src="https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                <p>李涛</p>
              </div>
            </div>
            <div class="user-box">
              <div>
                <img src="https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                <p>李涛</p>
              </div>
            </div>
            <div class="user-box">
              <div>
                <img src="https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                <p>李涛</p>
              </div>
            </div>
            <div class="user-box">
              <div>
                <img src="https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                <p>李涛</p>
              </div>
            </div>
          </div>
        </div>
        <div class="left-big-box-two">
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'newEvacuationBigData'
  }
</script>

<style scoped lang="scss">
  .newEvacuationBigData{
    position: relative;
    display: flex;
    height:100%;
    width:100%;
    background: #011d37;
    p{
      margin:0;
    }
    .title-positon-box{
      position: absolute;
      height:92px;
      width: 1920px;
    }
    .big-title-box{
      width:181px;
      height:59px;
      background: url("../assets/ZDimages/bigData3_2/img_zjdp_bg.png");
      background-size: 100%;
      display: flex;
      img{
        width:18px;
        height:18px;
        margin:27px 16px 0 20px;
      }
      p{
        margin-top:16px;
        line-height:40px;
        color:#fff;
        font-size:16px;
      }
    }
    .left-max-big-box{
      width:462px;
      .left-big-box-one{
        margin-left:30px;
        margin-top:70px;
        height:414px;
      }
      .left-big-box-two{
        margin-left:30px;
        height:274px;
      }
      .left-big-box-three{
        margin-left:30px;
        height:322px;
      }
    }
    .center-max-big-box{
      flex:1;
      .left-big-box-one{
        height:137px;
        margin-top:82px;
      }
      .left-big-box-two{
        height:500px;
      }
      .left-big-box-three{
        height:284px;
        margin-top:47px;
        .big-title-box{
          margin-left:21px;
        }
        .horn-max-big-box-one{
          margin-top:20px;
          display: flex;
          .horn-max-big-box-one-left{
            width:500px;
            p{
              width:128px;
              line-height:28px;
              font-size:14px;
              text-align: center;
              color:#fff;
              border: 1px solid #1E768E;
              border-radius: 5px;
              display: inline-block;
              margin:0 0 20px 20px;
              cursor: pointer;
            }
            p:hover{
              color:#24D1F9;
            }
            .check-p{
              color:#24D1F9;
            }
          }
          .horn-max-big-box-one-right{

          }
        }
      }
    }
    .right-max-big-box{
      width:462px;
      .left-big-box-one{
        margin-top:70px;
        height:365px;
        .big-title-box{
          margin-left:65px;
        }
        .user-max-box{
          margin-left:65px;
          margin-top:27px;
          .user-box{
            width:148px;
            line-height:48px;
            border-radius:5px;
            border: 1px solid #24D1F9;
            display: inline-block;
            margin:0 33px 18px 0;
            div{
              display: flex;
              img{
                margin:7px 16px;
                height:36px;
                width:36px;
                border: 1px solid #24D1F9;
                border-radius:50%;
                padding:2px;
                overflow: hidden;
                box-shadow:0 0 5px 1px #24D1F9
              }
              p{
                color:#24D1F9;
              }
            }
          }
        }
      }
      .left-big-box-two{
        margin-top:70px;
        height:615px;
      }
    }
  }
</style>