<template>
  <div class="box">
    <div class="a">
      <img
        src="../../assets/nyjc/电1.png"
        alt=""
        v-show="!dian"
        @click="
          (dian = true),
            (shui = false),
            (mei = false),
            $router.push(
              '/area/nyjcd',
              () => {},
              () => {}
            )
        "
      />
      <img src="../../assets/nyjc/电.png" alt="" v-show="dian" />
      <img
        src="../../assets/nyjc/水1.png"
        alt=""
        v-show="!shui"
        @click="
          (dian = false),
            (shui = true),
            (mei = false),
            $router.push(
              '/area/nyjcs',
              () => {},
              () => {}
            )
        "
      />
      <img src="../../assets/nyjc/水.png" alt="" v-show="shui" />
      <img
        src="../../assets/nyjc/煤1.png"
        alt=""
        v-show="!mei"
        @click="
          (dian = false),
            (shui = false),
            (mei = true),
            $router.push(
              '/area/nyjcm',
              () => {},
              () => {}
            )
        "
      />
      <img src="../../assets/nyjc/煤.png" alt="" v-show="mei" />
    </div>
    <div class="area">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dian: false,
      shui: false,
      mei: false,
    };
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  position: relative;
  .a {
    position: absolute;
    width: 1300px;
    z-index: 2;
    top: 420px;
    right: 1351px;
    z-index: 100;

    img {
      margin-right: 102px;
      pointer-events: all;
      cursor: pointer;
    }
  }
}
.area {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
</style>
