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

<!--  -->
<template>
  <div class="Exhibitions">
    <div class="ban_wrapper" data-aria-viewport-area tabindex="0"
      aria-label :aria-description="`You've reached the banner area of the ${topLi[$route.params.id - 1].name} page; this area has one image; please use the tab key to navigate through the content.`"
    >
      <div class="ban" tabindex="0" aria-label="Image" :aria-description="topLi[$route.params.id - 1].name"></div>
    </div>
    <div class="nav_2" data-aria-viewport-area tabindex="0"
      aria-label aria-description="You've reached the secondary menu under the Exhibition section. This menu contains four options. To browse the content,  please use the tab key."
    >
      <ul>
        <li
          :class="{ cur: topId === item.id }"
          v-for="(item, index) in topLi"
          :key="index"
          @click="skip(item.path)"
          @keydown.enter.passive="skip(item.path)"
          tabindex="0"
          aria-label="Link"
          :aria-description="item.name"
        >
          <img
            :src="require(`@/assets/images/Exhibitions/${item.img}`)"
            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; this area contains three URLs; please use the tab key to go through the content."
    >
      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
      <Router-link
        to="/Layout/Home" tabindex="0" aria-description="Home"
      >
        Home>
      </Router-link>
      <Router-link
        to="/Layout/Exhibitions/1" tabindex="0" aria-description="Exhibition"
      >
        Exhibitions>
      </Router-link>
      <Router-link
        to="" tabindex="0" :aria-description="topLi[topId - 1].name"
      >
        {{ topLi[topId - 1].name }}>
      </Router-link>
    </div>
    <div class="title">
      <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
      <span tabindex="0">{{ topLi[topId - 1].name }}</span>
      <div class="xian"></div>
    </div>
    <!-- 列表页面 -->
    <ExhibitionsList />
  </div>
</template>

<script>
import ExhibitionsList from "./component/List";
export default {
  name: "Exhibitions",
  components: { ExhibitionsList },
  data() {
    //这里存放数据
    return {
      topLi: [
        {
          id: 1,
          name: "Current Exhibitions",
          img: "t_1.png",
          path: "/Layout/Exhibitions/1",
        },
        {
          id: 2,
          name: "Permanent Exhibitions",
          img: "t_2.png",
          path: "/Layout/Exhibitions/2",
        },
        {
          id: 3,
          name: "Past Exhibitions",
          img: "t_3.png",
          path: "/Layout/Exhibitions/3",
        },
        {
          id: 4,
          name: "Overseas Exhibitions",
          img: "t_4.png",
          path: "/Layout/Exhibitions/4",
        },
      ],
      topId: null,
    };
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {
    // 监听地址栏参数变化
    $route: {
      handler: function() {
        // 拿到路由参数id
        let temp = this.$route.params.id;
        this.topId = Number(temp);
        switch (temp) {
          case '1':
            this.$eventBus.$emit('request-read', `You have reached the Current Exhibitions page of the Exhibitions section. This page includes one navigation section, six window sections, and two interactive section. To choose an section, please hit the shortcut key.`)
            break;
          case '2':
            this.$eventBus.$emit('request-read', `You have reached the Permanent Exhibitions page of the Exhibitions section. This page includes one navigation section, six window sections, and two interactive section. To choose an section, please hit the shortcut key.`)
            break;
          case '3':
            this.$eventBus.$emit('request-read', `You have reached the Past Exhibitions page of the Exhibitions section. This page includes one navigation section, six window sections, and two interactive section. To choose an section, please hit the shortcut key.`)
            break;
          case '4':
            this.$eventBus.$emit('request-read', `You have reached the Overseas Exhibitions page of the Exhibitions section. This page includes one navigation section, six window sections, and two interactive section. To choose an section, please hit the shortcut key.`)
            break;
          default:
            break;
        }
      },
      immediate: true
    },
  },
  //方法集合
  methods: {
    skip(url) {
      this.$router.push(url).catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Exhibitions {
  .ban {
    width: 100%;
    margin: auto;
    background: url("../../assets/images/Exhibitions/banner_1.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: 37px;
          height: 37px;
        }
        & > 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;
    }
  }
  .title {
    position: relative;
    display: flex;
    height: 65px;
    align-items: center;
    margin: 0px auto 20px;
    width: 1180px;
    font-size: 24px;
    font-weight: bold;
    text-indent: 5px;
    border-bottom: 1px solid black;
    .xian {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 80px;
      height: 2px;
      background-color: #c7000b;
    }
  }
}
</style>