shuinichang_/.history/src/views/Index_20231122133214.vue

<template>
  <div class="content">
    <div class="home">
      <RouterView />
    </div>
    <div class="footer">
      <div class="box1" v-if="isShow">
        <img src="../assets/img/生产工艺按钮.png" alt="" class="tabbars1" />
        <p>生产工艺</p>
      </div>
      <div class="box1" v-else>
        <img src="../assets/img/生产工艺按钮选中_hover.png" alt="" class="tabbars1" />
        <p>生产工艺</p>
      </div>
      <div class="box2" v-if="isShow">
        <img src="../assets/img/能源监测按钮  拷贝.png" alt="" class="tabbars2" />
        <p>能源监测</p>
      </div>
      <div class="box2" v-else>
        <img src="../assets/img/能源监测按钮 _hover.png" alt="" class="tabbars2" />
        <p>能源监测</p>
      </div>
      <div class="box3" v-if="isShow">
        <img src="../assets/img/负荷管理按钮 .png" alt="" class="tabbars3" />
        <p>负荷管理</p>
      </div>
      <div class="box3" v-else>
        <img src="../assets/img/负荷管理按钮  拷贝_hover.png" alt="" class="tabbars3" />
        <p>负荷管理</p>
      </div>
      <div class="box4" v-if="isShow">
        <img src="../assets/img/能效管理按钮  拷贝.png" alt="" class="tabbars4" />
        <p>能效管理</p>
      </div>
      <div class="box4" v-else>
        <img src="../assets/img/能效管理按钮_hover.png" alt="" class="tabbars4" />
        <p>能效管理</p>
      </div>
      <div class="box5" v-if="isShow">
        <img src="../assets/img/智能运维按钮   拷贝.png" alt="" class="tabbars5" />
        <p>智能运维</p>
      </div>
      <div class="box5" v-else>
        <img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5" />
        <p>智能运维</p>
      </div>
      <div class="box6" v-if="isShow">
        <img src="../assets/img/碳资产管理.png" alt="" class="tabbars6" />
        <p>碳资产管理</p>
      </div>
      <div class="box6" v-else>
        <img src="../assets/img/碳资产管理 拷贝_hover.png" alt="" class="tabbars6" />
        <p>碳资产管理</p>
      </div>
    </div>
  </div>
</template>

<script>
import { RouterView } from "vue-router";

export default {
  name: "index",
  components: { RouterView },
  data() {
    return {
      isShow: true,
    }
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  border: none;
}

.content {
  width: 100%;
  height: 100%;
  background: url(../assets/img/标题.png);
  background-size: cover;

  .box1 {
    position: absolute;
    // left: 0;
    left: 2130px;
    bottom: 248px;
    z-index: 100;

    p {
      position: absolute;
      left: 96px;
      bottom: 32px;
      width: 216px;
      height: 46px;
      font-size: 50px;
      font-family: FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }
  }

  .box1 {
    position: absolute;
    // left: 0;
    left: 2130px;
    bottom: 248px;
    z-index: 100;

    p {
      position: absolute;
      left: 96px;
      bottom: 32px;
      width: 216px;
      height: 46px;
      font-size: 50px;
      font-family: FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }
  }

  .box2 {
    position: absolute;
    // left: 0;
    left: 2720px;
    bottom: 248px;
    z-index: 100;

    p {
      position: absolute;
      left: 96px;
      bottom: 32px;
      width: 216px;
      height: 46px;
      font-size: 50px;
      font-family: FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }
  }

  .box3 {
    position: absolute;
    // left: 0;
    left: 3200px;
    bottom: 248px;
    z-index: 100;

    p {
      position: absolute;
      left: 96px;
      bottom: 32px;
      width: 216px;
      height: 46px;
      font-size: 50px;
      font-family: FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }
  }

  .box4 {
    position: absolute;
    // left: 0;
    left: 2130px;
    bottom: 248px;
    z-index: 100;

    p {
      position: absolute;
      left: 96px;
      bottom: 32px;
      width: 216px;
      height: 46px;
      font-size: 50px;
      font-family: FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }
  }

  .box5 {
    position: absolute;
    // left: 0;
    left: 2130px;
    bottom: 248px;
    z-index: 100;

    p {
      position: absolute;
      left: 96px;
      bottom: 32px;
      width: 216px;
      height: 46px;
      font-size: 50px;
      font-family: FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }
  }

  .box6 {
    position: absolute;
    // left: 0;
    left: 2130px;
    bottom: 248px;
    z-index: 100;

    p {
      position: absolute;
      left: 96px;
      bottom: 32px;
      width: 216px;
      height: 46px;
      font-size: 50px;
      font-family: FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }
  }

  .footer {
    width: 100%;
    height: 200px;
    position: relative;
  }
}

.home {
  width: 100%;
  height: 100%;
  background-color: transparent;
}</style>