<template>
  <div class="content">
    <div class="home">
      <RouterView />
    </div>
    <div class="footer">
      <div class="box1" @click="go1">
        <img
          src="../assets/img/生产工艺按钮.png"
          v-show="flag1"
          alt=""
          class="tabbars1"
        />
        <img
          src="../assets/img/生产工艺按钮选中_hover.png"
          alt=""
          v-show="!flag1"
          class="tabbars1"
        />
        <p>生产工艺</p>
      </div>

      <div class="box2" @click="go2">
        <img
          src="../assets/img/能源监测按钮  拷贝.png"
          alt=""
          v-show="flag2"
          class="tabbars2"
        />
        <img
          src="../assets/img/能源监测按钮 _hover.png"
          alt=""
          v-show="!flag2"
          class="tabbars2"
        />
        <p>能源监测</p>
      </div>

      <div class="box3" @click="go3">
        <img
          src="../assets/img/负荷管理按钮 .png"
          v-show="flag3"
          alt=""
          class="tabbars3"
        />
        <img
          src="../assets/img/负荷管理按钮  拷贝_hover.png"
          alt=""
          v-show="!flag3"
          class="tabbars3"
        />
        <p>负荷管理</p>
      </div>

      <div class="box4" @click="go4">
        <img
          src="../assets/img/能效管理按钮  拷贝.png"
          alt=""
          v-show="flag4"
          class="tabbars4"
        />
        <img
          src="../assets/img/能效管理按钮_hover.png"
          alt=""
          v-show="!flag4"
          class="tabbars4"
        />
        <p>能效管理</p>
      </div>

      <div class="box5" @click="go5">
        <img
          src="../assets/img/智能运维按钮   拷贝.png"
          alt=""
          v-show="flag5"
          class="tabbars5"
        />
        <img
          src="../assets/img/智能运维按_hover.png"
          v-show="!flag5"
          alt=""
          class="tabbars5"
        />
        <p>智能运维</p>
      </div>

      <div class="box6" @click="go6">
        <img
          src="../assets/img/碳资产管理.png"
          v-show="flag6"
          alt=""
          class="tabbars6"
        />
        <img
          src="../assets/img/碳资产管理 拷贝_hover.png"
          alt=""
          v-show="!flag6"
          class="tabbars6"
        />
        <p>碳资产管理</p>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "index",
  components: { RouterView },
  data() {
    return {
      flag1: true,
      flag2: true,
      flag3: true,
      flag4: true,
      flag5: true,
      flag6: true,
    };
  },
  methods: {
    sendMessageToCSharp(name) {
      window.vuplex.postMessage({
        type: "Tog",
        message: `${name}_true`,
      });
    },
    go1() {
      this.flag1 = false;
      this.flag2 = true;
      this.flag3 = true;
      this.flag4 = true;
      this.flag5 = true;
      this.flag6 = true;
      this.sendMessageToCSharp("生产工艺");
      // this.$router.push(
      //   "/znywjk",
      //   () => {},
      //   () => {}
      // );
    },
    go2() {
      this.flag1 = true;
      this.flag2 = false;
      this.flag3 = true;
      this.flag4 = true;
      this.flag5 = true;
      this.flag6 = true;
      this.sendMessageToCSharp("能源监测");
      this.$router.push(
        "/area",
        () => {},
        () => {}
      );
    },
    go3() {
      this.flag1 = true;
      this.flag2 = true;
      this.flag3 = false;
      this.flag4 = true;
      this.flag5 = true;
      this.flag6 = true;
      this.sendMessageToCSharp("负荷管理");
      this.$router.push(
        "/fhgl",
        () => {},
        () => {}
      );
    },
    go4() {
      this.flag1 = true;
      this.flag2 = true;
      this.flag3 = true;
      this.flag4 = false;
      this.flag5 = true;
      this.flag6 = true;
      this.sendMessageToCSharp("能效管理");
      this.$router.push(
        "/nxgl",
        () => {},
        () => {}
      );
    },
    go5() {
      this.flag1 = true;
      this.flag2 = true;
      this.flag3 = true;
      this.flag4 = true;
      this.flag5 = false;
      this.flag6 = true;
      this.sendMessageToCSharp("智能运维");
      this.$router.push(
        "/znyw",
        () => {},
        () => {}
      );
    },
    go6() {
      this.flag1 = true;
      this.flag2 = true;
      this.flag3 = true;
      this.flag4 = true;
      this.flag5 = true;
      this.flag6 = false;
      // this.sendMessageToCSharp("碳资产管理");
      this.$router.push(
        "/tzcgl",
        () => {},
        () => {}
      );
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  border: none;
}

// .bg {
//   background: rgba(255, 255, 255, 0.5);
//   /* 设置透明度，最后一个参数是透明度值（0为完全透明，1为完全不透明） */
//   /* 其他样式属性 */
// }

.content {
  width: 7680px;
  height: 3240px;
  background-image: url(../assets/img/标题.png);
  background-size: cover;
  background: transparent;

  .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: 3328px;
    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: 3920px;
    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: 4528px;
    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: 5168px;
    bottom: 248px;
    z-index: 100;

    p {
      position: absolute;
      left: 96px;
      bottom: 32px;
      width: 316px;
      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;

    div {
      cursor: pointer;
    }
  }
}

.home {
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/左遮罩.png), url(../assets/img/右遮罩.png),
    url(../assets/img/遮罩上.png), url(../assets/img/下遮罩.png);
  background-size: cover;
}
</style>
