cac-fronted/src/views/homePage/index.vue

<template>
  <div class="homeBox">
    <div class="homeLeft">
      <div class="pageleftBox">
        <!-- <div class="divTop">我是上面</div> -->
        <oilChromatography></oilChromatography>
        <clamp></clamp>
        <windingTemperature></windingTemperature>
      </div>
    </div>
    <div class="homeCenter">
      <div class="pagecenterBox">
        <div class="divTop"></div>
        <div class="divcenter"></div>
        <div class="divBottom">
          <warnMessage></warnMessage>
        </div>
      </div>
    </div>
    <div class="homeRight">
      <div class="pagerightBox">
        <div class="divTop">
          <monitoringDevice></monitoringDevice>
        </div>
        <div class="divcenter">
          <sf6></sf6>
        </div>
        <div class="divBottom">
          <arrester></arrester>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import {
//   getTermStatistics,

// } from "@/utils/api/index";
// import pageLeft from "./components/pageLeft";
// import pageCenter from "./components/pageCenter";
import oilChromatography from "./oilChromatography/index.vue"; //油色谱
import clamp from "./clamp/index.vue"; //铁芯夹件
import windingTemperature from "./windingTemperature/index.vue"; //绕组测温

import monitoringDevice from "./monitoringDevice/index.vue"; //装置总数
import sf6 from "./sf6/index.vue"; //sf6环境
import arrester from "./arrester/index.vue"; //避雷器

import warnMessage from "./warnMessage/index.vue"; //告警列表
export default {
  name: "homepage",
  components: {
    oilChromatography,
    clamp,
    windingTemperature,
    monitoringDevice,
    sf6,
    arrester,
    warnMessage,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {},
};
</script>
<style lang="less">
.homeBox {
  width: 100%;
  height: 100%;

  display: flex;
  .homeLeft,
  .homeRight {
    width: 20%;
    height: 100%;
  }
  .homeCenter {
    padding: 0px 10px;
    width: 60%;
    .pagecenterBox {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      .divTop,
      .divcenter,
      .divBottom {
        position: relative;
      }
      .divTop {
        height: 380px;
        margin-bottom: 10px;
        background: rgba(8, 9, 36, 0.28);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: inset 0 4px 44px 0 #106cde;
      }
      .divcenter {
        height: 190px;
        margin-bottom: 10px;
        background: url(../../assets/card3Bg.png) no-repeat center;
        background-size: 100% 100%;
      }
      .divBottom {
        height: 248px;
        background: rgba(255, 27, 27, 0.2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: inset 0 4px 44px 0 rgba(235, 20, 20, 0.69);
        border: 1px solid #ff1b1b;
      }
    }
  }
  .pageleftBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // .divTop,
    // .divcenter,
    // .divBottom {
    //   background: url(../../assets/cardBg.png) no-repeat center;
    //   background-size: 100% 100%;
    //   position: relative;
    // }
    .divTop {
      height: 30%;
      margin-bottom: 10px;
    }
    .divcenter {
      height: 30%;
      margin-bottom: 10px;
    }
    .divBottom {
      height: 30%;
    }
  }
  .pagerightBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .divcenter,
    .divBottom {
      background: url(../../assets/card2Bg.png) no-repeat center;
      background-size: 100% 100%;
      position: relative;
    }
    .divTop {
      background: url(../../assets/card2Bg.png) no-repeat center;
      background-size: 100% 100%;
      height: 280px;
      margin-bottom: 10px;
    }
    .divcenter {
      height: 270px;
      margin-bottom: 10px;
    }
    .divBottom {
      height: 270px;
    }
  }
}
</style>