feat: --

src/components/Layout/index.vue

@@ -249,6 +249,7 @@ const handleSearch = () => {
   --primary-hover-bg: rgba(204, 0, 3, 0.8);
   --black-text-color: black;
   --white-bg: white;
+  --white-text-color: white;
 
   &.white {
     --topnav-bg-color: white;
@@ -256,6 +257,7 @@ const handleSearch = () => {
     --primary-hover-bg: white;
     --black-text-color: black;
     --white-bg: white;
+    --white-text-color: black;
   }
   &.blue {
     --topnav-bg-color: #00f;
@@ -263,6 +265,7 @@ const handleSearch = () => {
     --primary-hover-bg: #00f;
     --black-text-color: #ff0;
     --white-bg: #00f;
+    --white-text-color: #ff0;
   }
   &.yellow {
     --topnav-bg-color: #ff0;
@@ -270,6 +273,7 @@ const handleSearch = () => {
     --primary-hover-bg: #ff0;
     --black-text-color: black;
     --white-bg: #ff0;
+    --white-text-color: black;
   }
   &.black {
     --topnav-bg-color: black;
@@ -277,6 +281,7 @@ const handleSearch = () => {
     --primary-hover-bg: black;
     --black-text-color: #ff0;
     --white-bg: black;
+    --white-text-color: #ff0;
   }
 }
 
@@ -291,7 +296,7 @@ const handleSearch = () => {
   padding: 0 40px 0 5px;
   height: inherit;
   background: var(--topnav-bg-color);
-  z-index: 1;
+  z-index: 2;
 
   &-wrap {
     position: relative;

src/router/index.ts

@@ -41,8 +41,33 @@ const router = createRouter({
               name: "Plans",
               component: () => import("../views/Visit/Plans/index.vue"),
             },
+            {
+              path: "/Layout/visit/4",
+              name: "Guide",
+              component: () => import("../views/Visit/Guide/index.vue"),
+            },
+            {
+              path: "/Layout/visit/5",
+              name: "Accessibility",
+              component: () => import("../views/Visit/Accessibility/index.vue"),
+            },
+            {
+              path: "/Layout/visit/6",
+              name: "Shop",
+              component: () => import("../views/Visit/Shop/index.vue"),
+            },
+            {
+              path: "/Layout/visit/7",
+              name: "Guidelines",
+              component: () => import("../views/Visit/Guidelines/index.vue"),
+            },
           ],
         },
+        {
+          path: "/Layout/Exhibitions/:type",
+          name: "Exhibitions",
+          component: () => import("../views/Exhibitions/index.vue"),
+        },
       ],
     },
   ],

src/views/Exhibitions/components/ImgItem/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="img-list">
+    <img src="" aria-label="Image link" :aria-description="1" />
+    <p>123456789</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.img-list {
+  position: relative;
+  overflow: hidden;
+  width: 33.3333%;
+  height: 393px;
+  cursor: pointer;
+
+  &:hover {
+    p {
+      bottom: 0;
+    }
+  }
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  p {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -300px;
+    font-weight: 700;
+    font-size: 16px;
+    padding: 15px 25px;
+    color: var(--white-text-color);
+    background: var(--topnav-bg-color);
+    transition: all linear 0.3s;
+    will-change: bottom;
+    z-index: 1;
+  }
+}
+</style>

src/views/Exhibitions/components/ListItem/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="list-item">
+    <img src="" aria-label="Image link" :aria-description="1" />
+
+    <div class="list-item__inner" aria-label="Link">
+      <p class="list-item__title">Splendid Central Axis of Beijing</p>
+      <p class="list-item__content">
+        Starting from the planning and construction of the Central Axis of the
+        Capital Dadu of the Yuan Dynasty and with the ongoing inheritance and
+        carrying forward of past achievements over the later dynasties, the
+        Central Axis of Beijing has finally been made such a magnificent
+        presence as it stands now, with originality and creativeness to be found
+        everywhere along the Axis.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.list-item {
+  display: flex;
+  height: 240px;
+  background: var(--white-bg);
+  cursor: pointer;
+
+  > img {
+    width: 240px;
+    height: 100%;
+  }
+  &__inner {
+    flex: 1;
+    padding: 0 25px;
+    border: 1px solid #c7c7c7;
+    border-left: 0;
+  }
+  &__title {
+    font-size: 18px;
+    line-height: 22px;
+    padding: 16px 0;
+    margin-bottom: 13px;
+    font-weight: bold;
+  }
+  &__content {
+    font-size: 14px;
+    line-height: 20px;
+    color: #666;
+  }
+}
+</style>

src/views/Exhibitions/index.scss

@@ -0,0 +1,146 @@
+.exhibitions {
+  &-nav {
+    width: 100%;
+    padding-bottom: 8px;
+    background: url("@/assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+
+    ul {
+      margin: 0 auto;
+      display: flex;
+      width: 1180px;
+
+      li {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 168px;
+        height: 108px;
+        cursor: pointer;
+
+        &.active {
+          background: url("@/assets/images/Visit/bg_1.jpg") center top no-repeat
+            #f1f1f1;
+        }
+        p {
+          margin-top: 5px;
+          font-size: 14px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+
+  .container {
+    width: 1180px;
+  }
+
+  &-banner {
+    margin-top: -60px;
+    display: block;
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+  }
+
+  .breadcrumb {
+    max-width: 1180px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    margin: 0 auto 10px;
+  }
+
+  &-title {
+    position: relative;
+    display: flex;
+    margin-bottom: 20px;
+    height: 65px;
+    align-items: center;
+    font-size: 24px;
+    font-weight: bold;
+    text-indent: 5px;
+    border-bottom: 1px solid var(--black-text-color);
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 80px;
+      height: 2px;
+      background: var(--van-primary-color);
+    }
+  }
+
+  &-filter {
+    display: flex;
+    align-items: center;
+
+    &__input {
+      display: flex;
+      align-items: center;
+      height: 48px;
+      background: var(--white-bg);
+      border: 1px solid #c7c7c7;
+
+      input {
+        padding: 0px 10px;
+        width: 500px;
+        height: 100%;
+        color: var(--black-text-color);
+        border: none;
+        outline: none;
+        background: transparent;
+      }
+      .svg-icon {
+        padding: 0 10px;
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+      }
+    }
+    &__year {
+      margin-left: 30px;
+      padding-left: 10px;
+      width: 180px;
+      height: 48px;
+      color: var(--black-text-color);
+      font-size: 18px;
+      background: var(--white-bg);
+      border-color: #c0c4cc;
+      cursor: pointer;
+
+      option {
+        cursor: pointer;
+        color: var(--black-text-color);
+        font-size: 18px;
+      }
+    }
+    &-right {
+      display: flex;
+
+      img {
+        display: block;
+        cursor: pointer;
+      }
+    }
+  }
+  &-list {
+    margin: 20px 0 40px;
+  }
+  &__more {
+    height: 38px;
+    width: 160px;
+    margin: 0 auto 60px;
+    color: var(--black-text-color);
+    border: 1px solid var(--black-text-color);
+    font-size: 16px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}

src/views/Exhibitions/index.vue

@@ -0,0 +1,194 @@
+<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"
+    />
+
+    <div
+      class="exhibitions-nav"
+      data-aria-viewport-area
+      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
+          v-for="(item, index) in NAV_LIST"
+          :key="index"
+          :class="{
+            active: curRoute?.name === item.name,
+          }"
+          @click="
+            $router.push({ name: item.pathName, params: { type: index + 1 } })
+          "
+          @keydown.enter.passive="
+            $router.push({ name: item.pathName, params: { type: index + 1 } })
+          "
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="item.name"
+        >
+          <img :src="item.img" alt="" />
+          <p>
+            {{ item.name }}
+          </p>
+        </li>
+      </ul>
+    </div>
+
+    <div class="container">
+      <div
+        class="breadcrumb"
+        data-aria-viewport-area
+        aria-description="You've reached the path area; this area contains three URLs; please use the tab key to go through the content."
+      >
+        <span style="color: var(--van-primary-color)"
+          >Your Position:&nbsp;</span
+        >
+
+        <RouterLink replace :to="{ name: 'Home' }" aria-description="Home">
+          Home>
+        </RouterLink>
+        <RouterLink
+          replace
+          :to="{ name: 'Exhibitions', params: { type: 1 } }"
+          aria-description="Exhibitions"
+        >
+          Exhibitions>
+        </RouterLink>
+        <span>
+          {{ curRoute?.name }}
+        </span>
+      </div>
+
+      <div class="exhibitions-title">
+        <img src="@/assets/images/Visit/pLeft.jpg" alt="" />
+        <span tabindex="1">{{ curRoute?.name }}</span>
+      </div>
+
+      <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 CurrentIcon from "@/assets/images/Exhibitions/t_1.png";
+import PermanentIcon from "@/assets/images/Exhibitions/t_2.png";
+import Pastcon from "@/assets/images/Exhibitions/t_3.png";
+import OverseasIcon from "@/assets/images/Exhibitions/t_4.png";
+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 ListItem from "./components/ListItem/index.vue";
+import ImgItem from "./components/ImgItem/index.vue";
+
+enum MODE {
+  LIST = 0,
+  IMG = 1,
+}
+
+const NAV_LIST = [
+  {
+    name: "Current Exhibitions",
+    img: CurrentIcon,
+    pathName: "Exhibitions",
+  },
+  {
+    name: "Permanent Exhibitions",
+    img: PermanentIcon,
+    pathName: "Exhibitions",
+  },
+  {
+    name: "Past Exhibitions",
+    img: Pastcon,
+    pathName: "Exhibitions",
+  },
+  {
+    name: "Overseas Exhibitions",
+    img: OverseasIcon,
+    pathName: "Exhibitions",
+  },
+];
+
+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>

src/views/Visit/Accessibility/index.scss

@@ -0,0 +1,32 @@
+.Visit5 {
+  .conten {
+    color: #000;
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+    margin: auto;
+    .row {
+      width: 866px;
+      display: flex;
+      & > div {
+        width: 50%;
+        & > h3 {
+          padding-top: 30px;
+
+          font-size: 18px;
+          font-weight: 700;
+          margin-bottom: 20px;
+        }
+        & > p {
+          font-size: 14px;
+        }
+        & > img {
+          width: 100%;
+        }
+      }
+      .blank {
+        padding-left: 10px;
+      }
+    }
+  }
+}

src/views/Visit/Accessibility/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="Visit5"
+    data-aria-viewport-area
+    aria-description="You have reached the content area under the Accessibility page. To browse the content, please use the tab key."
+  >
+    <div class="conten">
+      <div class="row">
+        <div>
+          <h3>Facilities for the Handicapped</h3>
+          <p>
+            Wheelchairs are available for visitors with special needs.
+            Professional consultants and guides are on hand to help.
+          </p>
+          <br />
+          <p>
+            In addition to professional commentators in the exhibition halls, 15
+            advanced self-service screens and six special ones for people in
+            wheelchairs have been installed in the exhibit areas. Visitors can
+            read and download data, or carry out interactive operations via
+            these screens. A total of 18 card-operated telephones, including six
+            for those in wheelchairs, have also been installed.
+          </p>
+        </div>
+        <div>
+          <img
+            src="@/assets/images/Visit/access1.jpg"
+            alt="Facilities for the Handicapped"
+            aria-description="Facilities for the Handicapped"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <img
+            src="@/assets/images/Visit/access2.jpg"
+            alt="Nursery Room"
+            aria-description="Nursery Room"
+          />
+        </div>
+        <div class="blank">
+          <h3>Nursery Room</h3>
+          <p>
+            Nursery room is available on the 5th floor of the museum.
+            Professional consultants and guides are on hand to help.
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <h3>Lockers</h3>
+          <p>
+            Lockers are available on the 1st floor, the right-hand side of the
+            north entrance. Professional consultants and guides are on hand to
+            help.
+          </p>
+        </div>
+        <div>
+          <img
+            src="@/assets/images/Visit/access3.jpg"
+            alt="Lockers"
+            aria-description="Lockers"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Visit/Guide/index.scss

@@ -0,0 +1,32 @@
+.Visit4 {
+  .conten {
+    color: black;
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+    margin: auto;
+    .row {
+      width: 866px;
+      display: flex;
+      & > div {
+        width: 50%;
+        & > h3 {
+          padding-top: 30px;
+
+          font-size: 18px;
+          font-weight: 700;
+          margin-bottom: 20px;
+        }
+        & > p {
+          font-size: 14px;
+        }
+        & > img {
+          width: 100%;
+        }
+      }
+      .blank {
+        padding-left: 10px;
+      }
+    }
+  }
+}

src/views/Visit/Guide/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="Visit4"
+    data-aria-viewport-area
+    aria-description="You have reached the content area under the Audio Guide & Tour page. To browse the content, use the tab key."
+  >
+    <div class="conten">
+      <div class="row">
+        <div>
+          <h3>Audio Guide</h3>
+          <p>The museum offers free audio guide.</p>
+          <p>
+            Visitors can get the devices from the audio guide cabinets with 200
+            RMB refundable deposit.
+          </p>
+          <p>
+            The cabinets can be found at several locations in the museum, such
+            as the east of the main entrance.
+          </p>
+          <p>The service is available in Chinese and English.</p>
+          <p>
+            For further questions, please visit the information desk for help.
+          </p>
+        </div>
+        <div>
+          <img
+            src="@/assets/images/Visit/Audio1.jpg"
+            alt="Audio Guide"
+            aria-description="Audio Guide"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <img
+            src="@/assets/images/Visit/Audio2.jpg"
+            alt="Free Commentary Service"
+            aria-description="Free Commentary Service"
+          />
+        </div>
+        <div class="blank">
+          <h3>Free Commentary Service</h3>
+          <p>
+            Commentators provide free services on each open day (Tuesday to
+            Sunday).
+          </p>
+          <p>
+            Please check the specific time and exhibition location in the museum
+            on the day of your visit.
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <h3>Volunteer Guide</h3>
+          <p>Our museum volunteers offer free explanations and help.</p>
+        </div>
+        <div>
+          <img
+            src="@/assets/images/Visit/Audio3.jpg"
+            alt="Volunteer Guide"
+            aria-description="Volunteer Guide"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Visit/Guidelines/index.scss

@@ -0,0 +1,74 @@
+.Visit7 {
+  .conten {
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+    margin: auto;
+    .top {
+      margin-bottom: 20px;
+      width: 100%;
+      height: 70px;
+      & > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .txt {
+      display: flex;
+      & > div {
+        padding-top: 20px;
+        width: 50%;
+        & > p {
+          position: relative;
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          margin-bottom: 20px;
+          padding-left: 45px;
+          & > span {
+            position: absolute;
+            top: -5px;
+            left: 0;
+            display: block;
+            font-size: 30px;
+          }
+        }
+        &:nth-of-type(1) {
+          border-right: 1px solid #ccc;
+          padding-right: 20px;
+        }
+        &:nth-of-type(2) {
+          padding-left: 20px;
+          & > p {
+            margin-bottom: 30px;
+          }
+        }
+        & > p {
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+    .thank {
+      color: rgb(255, 0, 0);
+      font-size: 14px;
+      text-align: center;
+      margin: 20px 0;
+    }
+    .bottom {
+      margin-bottom: 30px;
+      padding: 20px 0;
+      border: 1px solid black;
+      & > p {
+        text-align: center;
+        font-size: 14px;
+        margin: 20px;
+        & > span,
+        a {
+          color: rgb(255, 0, 0);
+        }
+      }
+    }
+  }
+}

src/views/Visit/Guidelines/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="Visit7"
+    data-aria-viewport-area
+    aria-description=" You have reached the content area of the Visitor Guidelines page. To browse the content, please use the tab key."
+  >
+    <div class="conten">
+      <div class="top" aria-label="" aria-description="Visitor Guidelines">
+        <img src="@/assets/images/Visit/last1.jpg" alt="" />
+      </div>
+      <div class="txt">
+        <div>
+          <p><span>01</span>All exhibitions in the museum are free.</p>
+          <p>
+            <span>02</span>The museum opens from Tuesday to Sunday, 9:00 - 17:00
+            (no admission after 16:00), but is closed on Mondays (except for
+            holidays).
+          </p>
+          <p>
+            <span>03</span>Please make ticket reservations at least one day
+            before the desired visit and obtain your free ticket with your
+            reservation number.
+          </p>
+          <p>
+            <span>04</span>Please keep your valid ID (passport) available for
+            inspection.
+          </p>
+        </div>
+        <div>
+          <p>
+            <span>05</span>Inebriated and improperly-dressed persons will be
+            refused entry.
+          </p>
+          <p>
+            <span>06</span>Inflammable and explosive materials, knives subject
+            to control and dangerous articles cannot be brought into the museum.
+          </p>
+          <p>
+            <span>07</span>Photography is permitted, but flash and tripod is not
+            allowed.
+          </p>
+          <p>
+            <span>08</span>In case of an emergency, please follow the directions
+            of our museum staff.
+          </p>
+        </div>
+      </div>
+      <div class="thank">Thank you for your cooperation.</div>
+      <div class="bottom">
+        <p>
+          Official website of Capital Museum <a :href="origin">{{ origin }}</a>
+        </p>
+        <p>
+          Telephone reservation (individual visitors)
+          <span>+86 (10) 63393339</span>
+        </p>
+        <p>
+          Telephone reservation (group visitors) <span>+86 (10) 63370458</span>
+        </p>
+        <p>Inquiry Hotline <span>+86 (10) 63370491</span></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const origin = location.origin;
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Visit/Plans/index.scss

@@ -0,0 +1,36 @@
+.conten {
+  width: 100%;
+  background-color: var(--black-text-color);
+  height: 570px;
+  .box5 {
+    cursor: pointer;
+    width: 1200px;
+    padding: 15px 0 25px 0;
+    height: 62px;
+    margin: auto;
+    li {
+      color: white;
+      float: left;
+      width: 185px;
+      text-align: right;
+      font-size: 20px;
+      font-weight: bold;
+      &:nth-of-type(1) {
+        width: 62px;
+      }
+    }
+    .titleon {
+      background: url("@/assets/images/Floor/m-22.jpg") no-repeat right;
+      line-height: 62px;
+    }
+    .titleoff {
+      background: url("@/assets/images/Floor/m-23.jpg") no-repeat right;
+    }
+  }
+  .box1 {
+    margin: 50px auto 0px;
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+  }
+}

src/views/Visit/Plans/index.vue

@@ -1,3 +1,87 @@
 <template>
-  <div>1</div>
+  <div
+    class="Visit3"
+    data-aria-viewport-area
+    aria-description="You've reached the content area for the Floor Plans page; this area has seven images; please use the tab key to navigate through the content."
+  >
+    <div class="conten">
+      <div class="box5">
+        <ul>
+          <li
+            class="titleon"
+            v-for="(item, index) in topData"
+            :key="index"
+            :class="{
+              titleoff: index === topInd,
+            }"
+            @mouseenter="topInd = index"
+            @focus="topInd = index"
+            tabindex="0"
+            aria-label="Image link"
+            :aria-description="`Floor Plans ${item.label}`"
+          >
+            <span
+              :class="{
+                'aria-inverse-theme': index === topInd,
+              }"
+            >
+              {{ item.label }}&nbsp;&nbsp;&nbsp;
+            </span>
+          </li>
+        </ul>
+      </div>
+      <div class="box1">
+        <div v-for="(i, idx) in topData" :key="i.label">
+          <img :src="i.img" alt="" v-show="idx === topInd" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import Img1 from "@/assets/images/Floor/1.jpg";
+import Img2 from "@/assets/images/Floor/2.jpg";
+import Img3 from "@/assets/images/Floor/3.jpg";
+import Img4 from "@/assets/images/Floor/4.jpg";
+import Img5 from "@/assets/images/Floor/5.jpg";
+import Img6 from "@/assets/images/Floor/6.jpg";
+import Img7 from "@/assets/images/Floor/7.jpg";
+
+const topData = ref([
+  {
+    label: "B1",
+    img: Img1,
+  },
+  {
+    label: "F1",
+    img: Img2,
+  },
+  {
+    label: "F2",
+    img: Img3,
+  },
+  {
+    label: "F3",
+    img: Img4,
+  },
+  {
+    label: "F4",
+    img: Img5,
+  },
+  {
+    label: "F5",
+    img: Img6,
+  },
+  {
+    label: "F6",
+    img: Img7,
+  },
+]);
+const topInd = ref(0);
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Visit/Shop/index.scss

@@ -0,0 +1,36 @@
+.Visit6 {
+  .conten {
+    color: #000;
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+    margin: auto;
+    .row {
+      width: 866px;
+      display: flex;
+      & > div {
+        width: 50%;
+        & > h3 {
+          padding-top: 30px;
+
+          font-size: 18px;
+          font-weight: 700;
+          margin-bottom: 20px;
+        }
+        & > p {
+          font-size: 14px;
+        }
+        & > img {
+          width: 100%;
+        }
+      }
+      .blank {
+        padding-left: 10px;
+      }
+    }
+    .buy {
+      margin: 30px 0 10px;
+      text-align: center;
+    }
+  }
+}

src/views/Visit/Shop/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="Visit6"
+    data-aria-viewport-area
+    aria-description="You have reached the content area of the Café & Shop page. To browse the content, please use the tab key."
+  >
+    <div class="conten">
+      <div class="row">
+        <div>
+          <h3>Cafeteria</h3>
+          <p>
+            The cafeteria is located on the northeast corner of the round
+            exhibition room at basement level. Covering about 200 square meters,
+            it offers coffee, soft drinks and low alcohol beverages.
+          </p>
+        </div>
+        <div>
+          <img
+            src="@/assets/images/Visit/cafe1.jpg"
+            alt="Cafeteria"
+            aria-description="Cafeteria"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <img
+            src="@/assets/images/Visit/cafe2.jpg"
+            alt="Shop"
+            aria-description="Shop"
+          />
+        </div>
+        <div class="blank">
+          <h3>Shop</h3>
+          <p>
+            Located in the southwest of the museum's basement and with a floor
+            space of about 550 square meters, the souvenir shop offers a wide
+            variety of souvenirs including special souvenirs from the museum,
+            books, and audio-visual products. Also on sale here are various arts
+            and crafts with local characteristics, gold and jade ornaments,
+            collotype calligraphic works and paintings of great collecting
+            value, and other arts and crafts with unique features. The thousands
+            of books on sale here mainly have a "Beijing taste" or are books on
+            collecting and connoisseurship.
+          </p>
+        </div>
+      </div>
+      <div class="buy">
+        <img src="@/assets/images/Visit/cafeBuy.jpg" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Visit/index.vue

@@ -79,18 +79,18 @@ const NAV_LIST = [
   {
     name: "Audio Guide & Tour",
     img: GuideIcon,
-    pathName: "/Layout/Visit/4",
+    pathName: "Guide",
   },
   {
     name: "Accessibility",
     img: AccessibilityIcon,
-    pathName: "/Layout/Visit/5",
+    pathName: "Accessibility",
   },
-  { name: "Café & Shop", img: ShopIcon, pathName: "/Layout/Visit/6" },
+  { name: "Café & Shop", img: ShopIcon, pathName: "Shop" },
   {
     name: "Visitor Guidelines",
     img: GuidelinesIcon,
-    pathName: "/Layout/Visit/7",
+    pathName: "Guidelines",
   },
 ];