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 aria-theme-independent"
        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,
            'aria-inverse-theme': 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"
        >
          <div class="imgBox">
            <img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
          </div>
          <p
            :class="{
              'aria-inverse-theme': topId === item.url,
            }"
          >
            {{ 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="rightMoer">
          <img src="../../assets/images/MORE.png" alt="" />
        </div>
        <div class="topImg">
          <img
            :src="`/data/LearnEngage/sm/${item.id}.png`"
            :alt="item.h3"
            tabindex="0"
            aria-label="Image link"
            :aria-description="item.h3"
          />
        </div>
        <div class="bottomTxt" v-if="item.info">
          <h3 tabindex="0" aria-label="Link">{{ item.h3 }}</h3>
          <p tabindex="0" aria-label="Link">Venue：{{ item.info.loc }}</p>
          <p tabindex="0" aria-label="Link">Date：{{ item.info.time }}</p>
          <p tabindex="0" aria-label="Link">Limit：{{ item.info.ren }}</p>
        </div>
      </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>
</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.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;

      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: #f1f1f1;
  .ban {
    width: 100%;
    margin: auto;
    background: url("/data/LearnEngage/topBan.jpg") no-repeat center top #000000;
    height: 300px;
  }
  .nav_2 {
    position: relative;
    top: -15px;
    width: 100%;
    overflow: hidden;
    zoom: 1;
    & > ul {
      background-color: #fff;
      padding-top: 5px;
      width: 1300px;
      padding: 5px 60px;
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
      border-radius: 5px;
      & > li {
        cursor: pointer;
        width: 168px;
        height: 108px;
        text-align: center;
        padding-top: 8px;
        .imgBox {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          overflow: hidden;
          background-color: black;
          margin: 10px auto;
          & > img {
            width: 50px;
            height: 50px;
          }
        }
        & > p {
          margin-top: 5px;
          font-size: 14px;
          line-height: 18px;
          color: black;
        }
      }
      .cur {
        .imgBox {
          background-color: #cd1425;
        }
        & > p {
          color: #cd1425;
        }
      }
    }
  }
  .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;
    display: flex;
    flex-wrap: wrap;
    .row {
      width: 31%;
      height: 350px;
      cursor: pointer;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 2% 2% 0;
      transition: all 0.3s;
      position: relative;
      .rightMoer {
        position: absolute;
        bottom: 10px;
        right: 8px;
        width: 50px;
        & > img {
          width: 100%;
        }
      }
      .topImg {
        width: 100%;
        height: 220px;
        & > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .bottomTxt {
        width: 100%;
        height: 130px;
        padding: 15px 20px 0;
        & > h3 {
          font-weight: 700;
          font-size: 18px;
          line-height: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        & > p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #8b8b8b;
          font-size: 14px;
          line-height: 20px;
          font-weight: normal;
        }
      }
      &:nth-of-type(3n) {
        margin-right: 0;
      }
      &:hover {
        box-shadow: 0px 0px 5px 4px #ccc;
        background-color: #fff;
      }
    }
  }
  .page {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
    & > span {
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      margin-right: 15px;
      border-radius: 50%;
      cursor: pointer;
    }
    .active {
      background-color: #bf2323;
      color: #fff;
      pointer-events: none;
    }
  }
}
</style>