YuHuaTai-Pc/vue/src/views/Home.vue

<!--  -->
<template>
  <div class="Home" @click.once="music = true">
    <audio src="../assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
    <div class="logo">
      <img src="../assets/img/Home/logo.png" alt="" />
    </div>
    <div class="music" @click="music = !music">
      <img
        :src="require(`@/assets/img/Home/music${music ? 'X' : ''}.png`)"
        alt=""
      />
    </div>
    <!-- 底部列表 -->
    <div class="tab">
      <div class="row" @click="$router.replace('/Video')">场馆漫游</div>
      <div class="row row2" @click="toQjkk">全景风貌</div>
      <div class="row row3" @click="toGoods">文物赏析</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    //这里存放数据
    return {
      music: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    music(val) {
      let dom = document.querySelector("#bacMusic");
      if (val) dom.play();
      else dom.pause();
    },
  },
  //方法集合
  methods: {
    toQjkk() {
      window.location.replace("/YHT/Qjkk/show.html?id=WK1578926366500417536");
    },
    toGoods() {
      let dom = document.querySelector("#bacMusic");
      dom.pause();
      this.$router.replace("/Goods");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    fetch("http://map.4dage.com:8109/api/count/saveVisit/museum_yuhuatai")
      .then((response) => response.json())
      .then((data) => {
        console.log("增加访问量");
      });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Home {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("../assets/img/Home/bac.jpg");
  background-size: cover;
  .logo {
    position: absolute;
    top: 70px;
    left: 70px;
    width: 690px;
    height: 140px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .music {
    position: absolute;
    top: 26px;
    right: 26px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tab {
    position: absolute;
    bottom: 76px;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 78px;
    left: 50%;
    transform: translateX(-50%);
    .row {
      cursor: pointer;
      width: 276px;
      height: 78px;
      background-image: url("../assets/img/Home/list1.png");
      background-size: 100% 100%;
      font-size: 24px;
      color: #fff;
      text-align: center;
      line-height: 78px;
      margin-right: 120px;
      padding-left: 40px;
      &:hover {
        color: #d8b275;
      }
    }
    .row2 {
      background-image: url("../assets/img/Home/list2.png");
      background-size: 100% 100%;
    }
    .row3 {
      background-image: url("../assets/img/Home/list3.png");
      background-size: 100% 100%;
      margin-right: 0;
    }
  }
}
</style>