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

<template>
  <div class="homeBox">
    <div class="homeLeft">
      <div class="pageleftBox">
        <!-- <div class="divTop">我是上面</div> -->
        <oilChromatography></oilChromatography>
        <div class="divcenter">我是上面2</div>
        <div class="divBottom">我是上面3</div>
      </div>
    </div>
    <div class="homeCenter">
      <div class="pagecenterBox">
        <div class="divTop"></div>
        <div class="divcenter"></div>
        <div class="divBottom"></div>
      </div>
    </div>
    <div class="homeRight">
      <div class="pagerightBox">
        <div class="divTop"></div>
        <div class="divcenter"></div>
        <div class="divBottom"></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";
export default {
  name: "homepage",
  components: {
    oilChromatography,
  },
  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;
    flex: 1;
    .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: 280px;
      margin-bottom: 10px;
    }
    .divcenter {
      height: 270px;
      margin-bottom: 10px;
    }
    .divBottom {
      height: 270px;
    }
  }
  .pagerightBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .divcenter,
    .divBottom {
      background: url(../../assets/cardBg.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>