electrical-interactive-h5/src/views/Home.vue

<template>
  <div class="home">
    <div class="content" v-if="isBegin">
      <img style="width: 100%;" :src="imageList[current]" alt="">
      <div class="text">
        <img class="success" src="../assets/success.png" alt="" v-if="isSuccessed">
        <div class="title">电气</div>
        <div class="tips">{{ massage }}</div>
      </div>
      <template v-if="current == 0">
        <a-tooltip trigger="click" placement="left" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">围墙基础、墙体及压顶变形缝未贯通。</div>
          </template>
          <div class="step image1-1" @click="find(1)">
            <img style="width: 0.35rem;" src="../assets/1-1.png" alt="" v-if="findList.includes(1)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="topRight" :align="{
            targetOffset: ['0%','0%'],
          }">
          <template slot="title">
            <div class="tips-text">建筑物沉降观测标志布置标高不足、固定不牢固。 </div>
          </template>
          <div class="step image1-2" @click="find(2)">
            <img style="width: 0.3rem;" src="../assets/1-2.png" alt="" v-if="findList.includes(2)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="leftBottom" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">场区内安全标志牌未按照警告、禁止、指令、提示的顺序先左后右，先上后下排列。</div>
          </template>
          <div class="step image1-3" @click="find(3)">
            <img style="width: 0.4rem;" src="../assets/1-3.png" alt="" v-if="findList.includes(3)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="top" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">户外排水管缺失</div>
          </template>
          <div class="step image1-4" @click="find(4)">
            <img style="width: 0.3rem;" src="../assets/1-4.png" alt="" v-if="findList.includes(4)">
          </div>
        </a-tooltip>
      </template>
      <template v-else-if="current == 1">
        <a-tooltip trigger="click" placement="left" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">封闭母线外壳未采用专门敷设的接地线接地。</div>
          </template>
          <div class="step image2-1" @click="find(1)">
            <img style="width: 0.35rem;" src="../assets/2-1.png" alt="" v-if="findList.includes(1)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="rightTop" :align="{
            targetOffset: ['0%','0%'],
          }">
          <template slot="title">
            <div class="tips-text">室内消防栓箱内设施配置缺失，栓口不应安装门轴侧； 栓 口中心距地面 小于1.1m</div>
          </template>
          <div class="step image2-2" @click="find(2)">
            <img style="width: 0.4rem;" src="../assets/2-2.png" alt="" v-if="findList.includes(2)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="topRight" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">变压器法兰间跨不规范，无跨接线</div>
          </template>
          <div class="step image2-3" @click="find(3)">
            <img style="width: 0.3rem;" src="../assets/2-3.png" alt="" v-if="findList.includes(3)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="right" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">爬梯制作安装不符合规范，圆笼箍的大小不统一</div>
          </template>
          <div class="step image2-4" @click="find(4)">
            <img style="width: 0.4rem;" src="../assets/2-4.png" alt="" v-if="findList.includes(4)">
          </div>
        </a-tooltip>
      </template>
      <template v-else-if="current == 2">
        <a-tooltip trigger="click" placement="left" :align="{
          targetOffset: ['0%','-30%'],
        }">
          <template slot="title">
            <div class="tips-text">盘、柜内电缆芯线排列不整齐，备用芯线导体外</div>
          </template>
          <div class="step image3-1" @click="find(1)">
            <img style="width: 0.35rem;" src="../assets/3-1.png" alt="" v-if="findList.includes(1)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="topRight" :align="{
            targetOffset: ['0%','0%'],
          }">
          <template slot="title">
            <div class="tips-text">保护屏、端子箱等盘、柜内防火封堵工艺不良，封堵不严密。</div>
          </template>
          <div class="step image3-2" @click="find(2)">
            <img style="width: 0.3rem;" src="../assets/3-2.png" alt="" v-if="findList.includes(2)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="topRight" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">没有两点接电</div>
          </template>
          <div class="step image3-3" @click="find(3)">
            <img style="width: 0.3rem;" src="../assets/3-3.png" alt="" v-if="findList.includes(3)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="top" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">预埋件未设膨胀缝，短边大于 300mm 的预埋件，</div>
          </template>
          <div class="step image3-4" @click="find(4)">
            <img style="width: 0.3rem;" src="../assets/3-4.png" alt="" v-if="findList.includes(4)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="bottom" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">柜子的高度不一致</div>
          </template>
          <div class="step image3-5" @click="find(5)">
            <img style="width: 0.25rem;" src="../assets/3-5.png" alt="" v-if="findList.includes(5)">
          </div>
        </a-tooltip>
        <a-tooltip trigger="click" placement="top" :align="{
          targetOffset: ['0%','0%'],
        }">
          <template slot="title">
            <div class="tips-text">地板边缘没有达到大于1/2板面积的要求</div>
          </template>
          <div class="step image3-6" @click="find(6)">
            <img style="width: 0.35rem;" src="../assets/3-6.png" alt="" v-if="findList.includes(6)">
          </div>
        </a-tooltip>
      </template>
      <div class="bottom">
        <div :class="current == 0 ? 'button disabled' : 'button'" @click="prev">上一篇</div>
        <div class="button" @click="publish">公布答案</div>
        <div class="button" @click="refresh">刷新</div>
        <div :class="current == imageList.length - 1 ? 'button disabled' : 'button'"  @click="next">下一篇</div>
      </div>
    </div>
    <div class="content" v-else>
      <img style="width: 100%;" src="../assets/home-bg.jpg" alt="">
      <div class="home-title">安全质量标准化常见问题通病库互动小程序(电气)</div>
      <div class="entry" @click="isBegin = true">
        <span>进入程序</span>
        <img src="../assets/right.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "MyHome",
  data() {
    // 这里存放数据
    return {
      isBegin: false,
      imageList: [
        require('../assets/bg1.png'),
        require('../assets/bg2.png'),
        require('../assets/bg3.png'),
      ],
      current: 0,
      isSuccessed: false,
      findList: [],
      massage: '请找找看，下面有几处违章？',
      fourList: [0,1],
      sixList: [2],
    };
  },
  methods: {
    prev() {
      if (this.current === 0) {
        return
      }
      this.current -= 1
      this.refresh()
    },
    next() {
      if (this.current === this.imageList.length - 1) {
        return
      }
      this.current += 1
      this.refresh()
    },
    find(val) {
      if (!this.findList.includes(val)) {
        this.findList.push(val)
      }
      if ((this.findList.length == 4 && this.fourList.includes(this.current)) || (this.findList.length == 6 && this.sixList.includes(this.current))) {
        this.publish()
      }
    },
    publish() {
      this.isSuccessed = true
      this.findList = this.findList.length == 4 ? [1,2,3,4] : [1,2,3,4,5,6]
      this.massage = "恭喜您，找到了所有的问题点"
    },
    refresh() {
      this.isSuccessed = false
      this.findList = []
      this.massage = "请找找看，下面有几处违章？"
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
};
</script>
 
<style scoped>
.home {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: whitesmoke;
}
.content {
  overflow: 'hidden';
  position: relative;
  width: 100%;
}

.text {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 30%;
  padding-left: 8%;
  padding-top: 3%;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 16%, rgba(0, 0, 0, 0) 100%);
  letter-spacing: 0.03rem;
  box-sizing: border-box;
}

.home-title {
  position: absolute;
  z-index: 1;
  top: 15.4%;
  left: 0;
  right: 0;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 0.54rem;
  color: #fff;
}
.entry {
  position: absolute;
  left: 0px;
  right: 0;
  bottom: 20%;
  margin: 0 auto;
  width: 20%;
  height: 10%;
  font-size: 0.26rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0.06rem;
  background: #ECD8A4;
  cursor: pointer;
}

.entry span {
  margin-right: 0.1rem;
}

.entry img {
  width: 0.16rem;
}

.success {
  float: left;
  margin-right: 0.16rem;
  margin-top: -0.1rem;
  width: 1.4rem;
}
.text .title {
  font-size: 0.28rem;
  line-height: 0.3rem;
}
.text .tips {
  margin-top: 0.08rem;
  font-size: 0.15rem;
}
.tips-title {
  font-size: 0.18rem;
}
.tips-text {
  font-size: 0.13rem;
}
.step {
  position: absolute;
  z-index: 8;
}
.image1-1 {
  top: 22%;
  right: 16.7%;
  width: 0.8rem;
  height: 1.2rem;
  display: flex;
  justify-content: start;
  align-items: center;
}

.image1-2 {
  bottom: 34%;
  left: 40.9%;
  width: 0.8rem;
  height: 1.3rem;
  display: flex;
  justify-content: end;
  align-items: start;
}

.image1-3 {
  bottom: 17%;
  right: 14.9%;
  width: 2.4rem;
  height: 1.3rem;
  display: flex;
  justify-content: start;
  align-items: end;
}

.image1-4 {
  bottom: 21%;
  left: 21.9%;
  width: 1.4rem;
  height: 1.9rem;
  display: flex;
  justify-content: center;
  align-items: start;
}

.image2-1 {
  top: 15%;
  right: 17.9%;
  width: 1.1rem;
  height: 1.5rem;
  display: flex;
  justify-content: start;
  align-items: center;
}

.image2-2 {
  bottom: 19%;
  right: 34.9%;
  width: 1.1rem;
  height: 1.1rem;
  display: flex;
  justify-content: end;
  align-items: center;
}

.image2-3 {
  top: 32%;
  left: 29.9%;
  width: 1.1rem;
  height: 1rem;
  display: flex;
  justify-content: end;
  align-items: start;
}

.image2-4 {
  bottom: 37%;
  left: 10.9%;
  width: 0.9rem;
  height: 0.8rem;
  display: flex;
  justify-content: start;
  align-items: end;
}

.image3-1 {
  top: 20%;
  left: 7.9%;
  width: 1.1rem;
  height: 1.3rem;
  display: flex;
  justify-content: end;
  align-items: end;
}

.image3-2 {
  bottom: 27%;
  right: 40.9%;
  width: 1.2rem;
  height: 0.7rem;
  display: flex;
  justify-content: end;
  align-items: center;
}

.image3-3 {
  bottom: 13%;
  right: 10.9%;
  width: 0.7rem;
  height: 0.5rem;
  display: flex;
  justify-content: start;
  align-items: start;
}

.image3-4 {
  bottom: 15%;
  left: 7.8%;
  width: 5.3rem;
  height: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: end;
}

.image3-5 {
  top: 10%;
  right: 29.9%;
  width: 1.1rem;
  height: 0.5rem;
  display: flex;
  justify-content: start;
  align-items: end;
}

.image3-6 {
  bottom: 16%;
  right: 19.9%;
  width: 0.8rem;
  height: 0.5rem;
  display: flex;
  justify-content: start;
  align-items: center;
}

.bottom {
  position: absolute;
  z-index: 10;
  opacity: 0.5;
  width: 100%;
  height: 14.4%;
  bottom: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.bottom .button {
  font-size: 0.15rem;
  width: 17%;
  height: 54.3%;
  color: #fff;
  background-color: #D04010;
  text-align: center;
  border-radius: 60px;
  line-height: 3;
}
.bottom .button.disabled {
  background-color: #B0B0B0;
}
</style>