v3-school-level-big-data-web/src/views/videoSurveillance/index.vue

<!-- 视频监控 -->
<template>
  <div class="videoSurveillance-index">
    <div class="left-max-big-box">
      <deptListComponent></deptListComponent>
    </div>
    <div class="center-max-big-box">
      <videoComponent ref="videoComponent"></videoComponent>
    </div>
    <div class="center-top-button-max-box">
      <img class="position-img position-img-1" src="@/assets/ZDimages/img_bg_cdo@1x.png">
      <img class="position-img position-img-2" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-3" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-4" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-5" src="@/assets/ZDimages/img_bg_xz@1x.png">
      <img class="position-img position-img-6" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-7" src="@/assets/ZDimages/img_bg_cdo@1x.png">
      <p class="null-p"></p>
      <p class="button-p" @click="goPage(1)">安全总览</p>
      <p class="button-p" @click="goPage(2)">资源设备</p>
      <p class="button-p" @click="goPage(3)">三维模型</p>
      <p class="button-check-p">视频监控</p>
      <p class="button-p" @click="goPage(5)">应急管控</p>
      <p class="null-p"></p>
    </div>
  </div>
</template>
<script>
  import deptListComponent from "./pageComponent/deptListComponent.vue";
  import videoComponent from "./pageComponent/videoComponent.vue";
  export default {
    name: 'index',
    components: {
      deptListComponent,
      videoComponent
    },
    data () {
      return {

      }
    },
    created () {

    },
    mounted () {

    },
    methods: {
      //页面切换
      goPage(type){
        this.$parent.pageCheck(type);
      },
      setAddress(list){
        this.$refs['videoComponent'].getAddress(list)
      },
      setUserNum(num){
        this.$refs['videoComponent'].getUserNum(num)
      },
      setVideoData(data){
        this.$refs['videoComponent'].getVideoData(data)
      },
    },
  }
</script>
<style scoped lang="scss">
  .videoSurveillance-index{
    height:1409px;
    padding:0 60px;
    display: flex;
    .left-max-big-box{
      width:430px;
      margin-top: 10px;
    }
    .center-max-big-box{
      width:2143px;
      margin-top:82px;
      margin-left:20px;
    }
    .center-top-button-max-box{
      width:911px;
      position: absolute;
      left:50%;
      margin:0 -456px;
      height:60px;
      display: flex;
      .position-img-1{
        position:absolute;
        top:0;
        left:0;
      }
      .position-img-2{
        position:absolute;
        top:0;
        left:83px;
      }
      .position-img-3{
        position:absolute;
        top:0;
        left:228px;
      }
      .position-img-4{
        position:absolute;
        top:0;
        left:374px;
      }
      .position-img-5{
        position:absolute;
        top:0;
        left:520px;
      }
      .position-img-6{
        position:absolute;
        top:0;
        left:666px;
      }
      .position-img-7{
        position:absolute;
        top:0;
        left:814px;
      }
      .null-p{
        flex:1;
      }
      .button-p{
        z-index:5;
        cursor: pointer;
        font-family: Source Han Sans, Source Han Sans;
        width:145px;
        font-size:24px;
        font-weight:700;
        line-height:60px;
        text-align: center;
        background: -webkit-linear-gradient(0deg, #FFFFFF, #FFFFFF); /* Chrome, Safari */
        background: linear-gradient(0deg, #FFFFFF, #FFFFFF); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 其他浏览器 */
      }
      .button-check-p{
        z-index:5;
        cursor: pointer;
        font-family: Source Han Sans, Source Han Sans;
        width:145px;
        font-weight:700;
        font-size:24px;
        line-height:24px;
        height:24px;
        margin-top:18px;
        text-align: center;
        background: -webkit-linear-gradient(0deg, #34e4ff, #FFFFFF); /* Chrome, Safari */
        background: linear-gradient(0deg, #34e4ff, #FFFFFF); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 其他浏览器 */
      }
    }
  }
</style>