ShouBo/web/src/views/LearnEngage/index.vue

<template>
  <div class="LearnEngage">
    <div class="ban"></div>
    <div class="nav_2">
      <ul>
        <li
          :class="{ cur: topId === item.url }"
          v-for="(item, index) in topLi"
          :key="index"
          @click="skip(item.url)"
        >
          <img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <!-- 面包屑 -->
    <div class="pos">
      <span class="pos1">Your Position:&nbsp;</span>
      <Router-link to="/Layout/Home">Home></Router-link>
      <Router-link to="/Layout/LearnEngage/Students"
        >Learn & Engage></Router-link
      >
      <span
        >For {{ topId === "Families" ? "Families & Children" : topId }}></span
      >
    </div>
    <!-- 内容 -->
    <div class="conten">
      <div
        class="row"
        v-for="item in data[pageSize - 1]"
        :key="item.id"
        @click="toInfo(item.id)"
      >
        <div class="left">
          <h3>{{ item.h3 }}</h3>
          <p>{{ item.p }}</p>
          <h4 v-html="item.h4"></h4>
        </div>
        <div class="right">
          <img :src="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
        </div>
      </div>
      <!-- 分页 -->
      <div class="page">
        <span
          :class="{ active: pageSize === i }"
          v-for="i in pageNum"
          :key="i"
          @click="pageChange(i)"
          >{{ i }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { LearnEngage } from "@/views/dataAll";
export default {
  name: "LearnEngage",
  components: {},
  data() {
    return {
      topId: "Students",
      topLi: [
        { name: "For Students", url: "Students" },
        { name: "For Adults", url: "Adults" },
        { name: "For Families & Children", url: "Families" },
      ],
      data: [],
      pageNum: 0,
      pageSize: 1,
    };
  },
  computed: {},
  watch: {
    // 监听地址栏参数变化
    $route() {
      this.getData();
    },
  },
  methods: {
    // 跳转到info页面
    toInfo(id) {
      this.$router.push({
        name: "LearnEngageInfo",
        query: { id, k:this.topId,m:this.pageSize},
      });
    },
    // 切换页码
    pageChange(val) {
      this.pageSize = val;
      window.scrollTo({ top: 300, behavior: "smooth" });
    },
    skip(url) {
      this.$router.push(url).catch(() => {});
    },
    // 封装一个处理数据的方法
    getData() {
      this.pageSize = 1;
      // 拿到路由参数id
      this.topId = this.$route.params.id;
      let temp = LearnEngage[this.topId];
      // 判断有多少页
      this.pageNum = Math.ceil(temp.length / 8);
      let tempArrAll = [];
      for (let i = 0; i < this.pageNum; i++) {
        tempArrAll.push(temp.slice(i * 8, (i + 1) * 8));
      }
      this.data = tempArrAll;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
    // 记录分页
    let mm =this.$route.query.m
    if(mm){
      this.pageSize =Number(mm)
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.LearnEngage {
  background-color: #fff;
  .ban {
    width: 100%;
    margin: auto;
    background: url("/data/LearnEngage/topBan.jpg") no-repeat center top #000000;
    height: 300px;
  }
  .nav_2 {
    width: 100%;
    padding-bottom: 8px;
    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
      #f1f1f1;
    overflow: hidden;
    zoom: 1;
    & > ul {
      display: flex;
      width: 1180px;
      margin: 0 auto;
      & > li {
        background: #f1f1f1;
        cursor: pointer;
        width: 168px;
        height: 108px;
        text-align: center;
        & > img {
          margin-top: 25px;
          // width: 49px;
          // height: 39px;
        }
        & > p {
          margin-top: 5px;
          font-size: 14px;
          line-height: 18px;
        }
      }
      .cur {
        background: url("../../assets/images/Visit/bg_1.jpg") center top
          no-repeat #f1f1f1;
      }
    }
  }
  .pos {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    margin: 0 auto 10px auto;
    width: 1180px;
    .pos1 {
      color: #c20e11;
    }
  }
  .conten {
    width: 1178px;
    margin: 0 auto;
    .row {
      cursor: pointer;
      padding: 20px;
      border: solid 1px #c7c7c7;
      border-right: 0;
      height: 295px;
      margin-bottom: 20px;
      .left {
        width: 730px;
        float: left;
        & > h3 {
          font-weight: 700;
          font-size: 18px;
          line-height: 22px;
        }
        & > p {
          color: #a5a5a5;
          font-size: 14px;
          line-height: 20px;
          font-weight: normal;
          padding: 10px 0 40px 0;
        }
        & > h4 {
          font-size: 14px;
          line-height: 24px;
          font-weight: 700;
        }
      }
      .right {
        width: 375px;
        float: right;
        & > img {
          width: 375px;
          height: 255px;
          object-fit: cover;
        }
      }
    }
    .page {
      display: flex;
      justify-content: center;
      padding-bottom: 30px;
      & > span {
        margin-right: 8px;
        cursor: pointer;
      }
      .active {
        color: #bf2323;
      }
    }
  }
}
</style>