en-shoubo-pc/src/views/Exhibitions/index.vue

<template>
  <div class="exhibitions">
    <img
      :aria-description="`You've reached the banner area of the ${curRoute?.name} page; this area has one image; please use the tab key to navigate through the content.`"
      class="exhibitions-banner"
      src="@/assets/images/Exhibitions/banner_1.jpg"
    />

    <PageNav :list="NAV_LIST" :cur-route-name="curRoute.name" />

    <div class="container">
      <Breadcrumb
        :parents="[
          {
            label: 'Exhibitions',
            routeParams: {
              name: 'Exhibitions',
              params: { type: 1 },
            },
          },
        ]"
        :cur-route="curRoute"
      />

      <PageTitle :title="curRoute?.name" />

      <div
        class="exhibitions-filter"
        data-aria-interaction-area
        tabindex="2"
        aria-description="You've reached search box under the Exhibitions page; please use the tab key to go through the content."
      >
        <div class="exhibitions-filter__input">
          <input
            type="text"
            autocomplete="off"
            v-model="keyword"
            tabindex="3"
            :aria-description="keyword || 'search'"
          />

          <SvgIcon name="search" color="var(--van-primary-color)" />
        </div>

        <!-- 使用el-select组件会无法在选择年份过程中得到选项的无障碍信息，所以改用原生元素 -->
        <select
          v-model="year"
          tabindex="4"
          class="exhibitions-filter__year"
          aria-label="Select"
          aria-description="Select Year"
        >
          <option value="">Select Year</option>
          <option value="2021">2021</option>
          <option value="2020">2020</option>
          <option value="2019">2019</option>
          <option value="2018">2018</option>
          <option value="2017">2017</option>
          <option value="2016">2016</option>
          <option value="2015">2015</option>
        </select>

        <div style="flex: 1" />

        <div class="exhibitions-filter-right">
          <img
            :src="mode === MODE.LIST ? ActListModeIcon : ListModeIcon"
            alt="Button: List mode"
            aria-label="Button"
            aria-description="List mode"
            @click="mode = MODE.LIST"
            @keydown.enter.passive="mode = MODE.LIST"
          />
          <img
            :src="mode === MODE.IMG ? ActImgModeIcon : ImgModeIcon"
            alt="Button: Image mode"
            aria-label="Button"
            aria-description="Image mode"
            @click="mode = MODE.IMG"
            @keydown.enter.passive="mode = MODE.IMG"
          />
        </div>
      </div>

      <div
        class="exhibitions-list"
        data-aria-viewport-area
        :aria-description="`You've reached the content area of the ${curRoute.name} page. To browse the content, please use the tab key.`"
      >
        <ListItem v-if="mode === MODE.LIST" />
        <ImgItem v-else />
      </div>

      <div class="exhibitions__more">Show More</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { computed, ref } from "vue";
import PageNav from "@/components/PageNav/index.vue";
import PageTitle from "@/components/PageTitle/index.vue";
import ListModeIcon from "@/assets/images/Exhibitions/cut1.png";
import ActListModeIcon from "@/assets/images/Exhibitions/cut1Ac.png";
import ImgModeIcon from "@/assets/images/Exhibitions/cut2.png";
import ActImgModeIcon from "@/assets/images/Exhibitions/cut2Ac.png";
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import ListItem from "./components/ListItem/index.vue";
import ImgItem from "./components/ImgItem/index.vue";
import { NAV_LIST } from "./constants";

enum MODE {
  LIST = 0,
  IMG = 1,
}

const route = useRoute();
const curRoute = computed(() => NAV_LIST[Number(route.params.type) - 1]);

const keyword = ref("");
const year = ref("");

const mode = ref(MODE.LIST);
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>