ypzz_H5/src/views/Home.vue

<!--  -->
<template>
  <div class="Home" :class="{ last: topImgInd === 8 }">
    <!-- 顶部图片 -->
    <div class="topImg">
      <img :src="require(`@/assets/img/topImg/${topImgInd}.png`)" alt="" />
    </div>

    <!-- 中间内容---使用动态组件 -->
    <div class="main" :class="{ mainAc: myMenucShow }">
      <keep-alive>
        <component
          :scrool="scrool"
          v-if="topImgInd !== 1 && topImgInd !== 8"
          :is="`Son${topImgInd}`"
        ></component>
      </keep-alive>
    </div>

    <!-- 菜单图片 -->
    <div class="menu" @click="myMenucShow = true">
      <img src="../assets/img/menu.png" alt="" />
    </div>

    <!-- 底部菜单选择 -->
    <div class="bottom">
      <div
        class="row"
        @click="topImgInd = item.id"
        :class="{ active: topImgInd == item.id }"
        v-for="item in data"
        :key="item.id"
      >
        <div class="bs"></div>
        {{ item.name }}
      </div>
    </div>
    <!-- 下一章节 -->
    <div class="next" v-if="topImgInd < data.length" @click="topImgInd++">
      下一章节
    </div>
    <!-- 卡片 -->
    <div class="myMenuc" :class="{ myMenucAc: myMenucShow }">
      <Menuc @upInfo="upInfo" />
    </div>
  </div>
</template>

<script>
import Menuc from "./menuc/index.vue";
import Son2 from "../components/son2.vue";
import Son3 from "../components/son3.vue";
import Son4 from "../components/son4.vue";
import Son5 from "../components/son5.vue";
import Son6 from "../components/son6.vue";
import Son7 from "../components/son7.vue";
export default {
  name: "Home",
  components: { Son2, Son3, Son4, Son5, Son6, Son7, Menuc },
  data() {
    //这里存放数据
    return {
      myMenucShow: false,
      data: [
        { id: 1, name: "序言" },
        { id: 2, name: "中西贸易" },
        { id: 3, name: "鸦片贸易" },
        { id: 4, name: "鸦片生产" },
        { id: 5, name: "鸦片祸害" },
        { id: 6, name: "林则徐禁烟" },
        { id: 7, name: "虎门销烟" },
        { id: 8, name: "结束语" },
      ],
      topImgInd: 1,
      // 内容动态组件的值
      scrool: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    topImgInd() {
      window.scrollTo({ top: 0 });
    },
  },
  //方法集合
  methods: {
    upInfo(id) {
      this.myMenucShow = false;
      this.topImgInd = id;
      if (id === this.topImgInd) window.scrollTo({ top: 0 });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 监听是否元素进入页面
    window.addEventListener("scroll", () => {
      this.scrool =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      // console.log(this.scrool);
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Home {
  padding-bottom: 30px;
  width: 100%;
  .topImg {
    width: 100%;
    img {
      width: 100%;
      vertical-align: middle;
    }
  }
  .main {
    overflow-x: hidden;
    background: url("../assets/img/bg.jpg");
    background-size: cover;
    opacity: 1;
    transition: opacity 0.5s;
  }
  .mainAc {
    opacity: 0;
  }
  .menu {
    position: fixed;
    width: 61px;
    height: 61px;
    right: 20px;
    bottom: 200px;
    & > img {
      width: 61px;
    }
  }
  .bottom {
    margin-top: 100px;
    display: flex;
    justify-content: space-around;
    background: url("../assets/img/line.png") top left no-repeat;
    background-size: 100% 2px;
    // border-top: 2px dashed #827d70;
    width: 100%;
    .row {
      position: relative;
      letter-spacing: 5px;
      padding-top: 15px;
      font-size: 14px;
      color: #827d70;
      writing-mode: vertical-lr;
      .bs {
        width: 14px;
        height: 14px;
        position: absolute;
        top: -6px;
        left: 0;
        &::before {
          content: "";
          border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #827d70;
          width: 10px;
          height: 10px;
        }
      }
    }
    .active {
      color: #ebdfbf;
      pointer-events: none;
      .bs {
        left: 1px;
        border-radius: 50%;
        border: 1px solid #ebdfbf;
        &::before {
          width: 8px;
          height: 8px;
          background-color: #ebdfbf;
        }
      }
    }
  }
  .next {
    margin: 28px auto 0;
    width: 90px;
    padding-left: 30px;
    color: #c8b992;
    font-size: 14px;
    background: url("../assets/img/next.png") left center no-repeat;
    background-size: 20px 20px;
  }
  .myMenuc {
    transition: opacity 1s;
    z-index: 999;
    opacity: 0;
    background: url("../assets/img/bodyBac.jpg");
    pointer-events: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
  .myMenucAc {
    opacity: 1;
    pointer-events: auto;
  }
}
.last {
  padding-bottom: 80px;
}
</style>