FE-SchoolBigData/src/views/pureWaterSystem/index.vue

<template>
  <div class="pureWaterSystem-index">
    <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_zc@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_xz@1x.png">
      <img class="position-img position-img-8" 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-p" @click="goPage(6)">视频监控</p>
      <p class="button-p" @click="goPage(5)">应急管控</p>
      <p class="button-check-p">纯水系统</p>
      <p class="null-p"></p>
    </div>
    <div class="left-max-big-box">
      <title-page-img-components :propsData="propsData1"></title-page-img-components>
      <div class="max-big-box">
        <div class="big-box">

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

        </div>
      </div>
    </div>
    <div class="right-max-big-box">
      <title-page-img-components :propsData="propsData2"></title-page-img-components>
      <div class="max-big-box">
        <div class="big-box">

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

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'index',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        //组件传参
        propsData1:{
          title:'理科楼 - 纯水设备数据监测',
        },
        propsData2:{
          title:'食品楼 - 纯水设备数据监测',
        },
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //页面切换
      goPage(type){
        this.$parent.pageCheck(type);
      },
    },
  }
</script>
<style scoped lang="scss">
  .pureWaterSystem-index{
    height:1409px;
    padding:0 60px;
    display: flex;
    .center-top-button-max-box{
      width:911px;
      position: absolute;
      left:50%;
      margin:0 -445px;
      height:60px;
      display: flex;
      .position-img-1{
        position:absolute;
        top:0;
        left:-74px;
      }
      .position-img-2{
        position:absolute;
        top:0;
        left:9px;
      }
      .position-img-3{
        position:absolute;
        top:0;
        left:154px;
      }
      .position-img-4{
        position:absolute;
        top:0;
        left:300px;
      }
      .position-img-5{
        position:absolute;
        top:0;
        left:446px;
      }
      .position-img-6{
        position:absolute;
        top:0;
        left:592px;
      }
      .position-img-7{
        position:absolute;
        top:0;
        left:740px;
      }
      .position-img-8{
        position:absolute;
        top:0;
        left:888px;
      }
      .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; /* 其他浏览器 */
      }
    }
    .left-max-big-box{
      width:1280px;
      margin-top:90px;
      height:1235px;
    }
    .right-max-big-box{
      width:1280px;
      margin-top:90px;
      margin-left:37px;
      height:1235px;
    }
    .max-big-box{
      width:1280px;
      height:1172px;
      background-color: red;
      .big-box{
        height:570px;
        background-color: #2f54eb;
      }
      .big-box:nth-child(2){
        margin-top:32px;
      }
    }
  }
</style>