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

<template>
  <div class="LearnEngage">
    <div class="banWrapper"
      tabindex="0"
      data-aria-viewport-area
      aria-label
      :aria-description="`You've reached the banner area of the ${currentTabText} page; this section has one image; please use the tab key to go through the content.`"
    >
      <div class="ban"
        tabindex="0"
        aria-label="Image"
        aria-description="Learn & Engage"
      ></div>
    </div>
    <div class="nav_2" data-aria-viewport-area tabindex="0"
      aria-label aria-description="You've reached the secondary menu of the Learn & Engage section; this menu has three options; please use the tab key to go through the menu."
    >
      <ul>
        <li
          :class="{ cur: topId === item.url }"
          v-for="(item, index) in topLi"
          :key="index"
          @click="skip(item.url)"
          @keydown.enter.passive="skip(item.url)"
          tabindex="0"
          aria-label="Link"
          :aria-description="item.name"
        >
          <img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <!-- 面包屑 -->
    <div class="pos" data-aria-viewport-area tabindex="0"
      aria-label aria-description="You've reached the path area, please use the tab key to navigate through the content."
    >
      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
      <Router-link
        replace
        to="/Layout/Home"
        tabindex="0"
        aria-description="Home"
      >
        Home>
      </Router-link>
      <Router-link
        replace
        to="/Layout/LearnEngage/Students"
        tabindex="0"
        aria-description="Learn & Engage"
      >
        Learn & Engage>
      </Router-link>
      <Router-link
        replace
        to=""
        tabindex="0"
        :aria-description="currentTabText"
      >
        {{currentTabText}}
      </Router-link>
    </div>
    <!-- 内容 -->
    <div class="conten" data-aria-viewport-area tabindex="0"
      aria-label :aria-description="`You've reached the content area of the ${currentTabText} page, please use the tab key to go through the content.`"
    >
      <div
        class="row"
        v-for="item in data[pageSize - 1]"
        :key="item.id"
        @click="toInfo(item.id)"
        @keydown.enter.passive="toInfo(item.id)"
      >
        <div class="left">
          <h3 tabindex="0" aria-label="Link">{{ item.h3 }}</h3>
          <p tabindex="0" aria-label="Link">{{ item.p }}</p>
          <h4 v-html="item.h4" tabindex="0" aria-label="Link"></h4>
        </div>
        <div class="right">
          <img :src="`/data/LearnEngage/sm/${item.id}.png`"
            :alt="item.h3" 
            tabindex="0" aria-label="Image link"
            :aria-description="item.h3"
          />
        </div>
      </div>
      <!-- 分页 -->
      <div class="page">
        <span
          :class="{ active: pageSize === i }"
          v-for="i in pageNum"
          :key="i"
          @click="pageChange(i)"
          @keydown.enter.passive="pageChange(i)"
          tabindex="0"
          aria-label="Link"
          :aria-description="`page ${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: {
    currentTabText() {
      return `For ${this.topId === "Families" ? "Families & Children" : this.topId }`
    }
  },
  watch: {
    // 监听地址栏参数变化
    $route() {
      this.getData();
    },
  },
  methods: {
    // 跳转到info页面
    toInfo(id) {
      this.$router.replace({
        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.replace(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;

      let keyword = ''
      switch (this.topId) {
        case 'Students':
          keyword = 'For Students'
          break;
        case 'Adults':
          keyword = 'For Adults'
          break;
        case 'Families':
          keyword = 'For Families & Children'
          break;
        default:
          break;
      }
      this.$eventBus.$emit('request-read', `You've reached the ${keyword} page of the Learn & Engage section. This page contains one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
    },
  },
  //生命周期 - 创建完成（可以访问当前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;
        pointer-events: none;
      }
    }
  }
}
</style>