feat: --

src/components/Layout/data.ts

@@ -1,67 +1,131 @@
-export const topData = [
-  { id: 1, name: "Home", pathName: "Home", url: "home" },
+import HomeIcon from "./icons/home.png";
+import VisitIcon from "./icons/visit.png";
+import ExhibitionsIcon from "./icons/exhibitions.png";
+import CollectionsIcon from "./icons/collections.png";
+import EngageIcon from "./icons/engage.png";
+import PublicationsIcon from "./icons/publications.png";
+import SupportIcon from "./icons/support.png";
+import AboutIcon from "./icons/about.png";
+import FunctionsIcon from "./icons/functions.png";
+import type { RouteLocationRaw } from "vue-router";
+
+export interface TOP_DATA {
+  id: number;
+  icon?: string;
+  name: string;
+  fullname?: string;
+  /**
+   * 是否在导航栏显示
+   */
+  hideNav?: boolean;
+  routeParams?: RouteLocationRaw;
+  children?: TOP_DATA[];
+}
+
+export const topData: TOP_DATA[] = [
+  { id: 1, icon: HomeIcon, name: "Home", routeParams: { name: "Home" } },
   {
     id: 2,
+    icon: VisitIcon,
     name: "Visit",
-    pathName: "Visit",
-    url: "Visit",
+    routeParams: { name: "Visit" },
     children: [
-      { url: "/Layout/Visit/8", id: 2.8, name: "Calendar" },
-      { url: "/Layout/Visit/1", id: 2.1, name: "Hours, Direction & Admission" },
-      { url: "/Layout/Visit/2", id: 2.2, name: "Reservation" },
-      { url: "/Layout/Visit/3", id: 2.3, name: "Floor Plans" },
-      { url: "/Layout/Visit/4", id: 2.4, name: "Audio Guide & Tour" },
-      { url: "/Layout/Visit/5", id: 2.5, name: "Accessibility" },
-      { url: "/Layout/Visit/6", id: 2.6, name: "Café & Shop" },
-      { url: "/Layout/Visit/7", id: 2.7, name: "Visitor Guidelines" },
+      { routeParams: "/Layout/Visit/8", id: 2.8, name: "Calendar" },
+      {
+        routeParams: "/Layout/Visit/1",
+        id: 2.1,
+        name: "Hours, Direction & Admission",
+      },
+      { routeParams: "/Layout/Visit/2", id: 2.2, name: "Reservation" },
+      { routeParams: "/Layout/Visit/3", id: 2.3, name: "Floor Plans" },
+      { routeParams: "/Layout/Visit/4", id: 2.4, name: "Audio Guide & Tour" },
+      { routeParams: "/Layout/Visit/5", id: 2.5, name: "Accessibility" },
+      { routeParams: "/Layout/Visit/6", id: 2.6, name: "Café & Shop" },
+      { routeParams: "/Layout/Visit/7", id: 2.7, name: "Visitor Guidelines" },
     ],
   },
   {
     id: 3,
+    icon: ExhibitionsIcon,
     name: "Exhibitions",
-    pathName: "Exhibitions",
-    url: "Exhibitions/1",
+    routeParams: { name: "Exhibitions", params: { type: 1 } },
     children: [
-      { url: "/Layout/Exhibitions/1", id: 3.1, name: "Current Exhibitions" },
-      { url: "/Layout/Exhibitions/2", id: 3.2, name: "Permanent Exhibitions" },
-      { url: "/Layout/Exhibitions/3", id: 3.3, name: "Past Exhibitions" },
-      { url: "/Layout/Exhibitions/4", id: 3.4, name: "Overseas Exhibitions" },
+      {
+        routeParams: "/Layout/Exhibitions/1",
+        id: 3.1,
+        name: "Current Exhibitions",
+      },
+      {
+        routeParams: "/Layout/Exhibitions/2",
+        id: 3.2,
+        name: "Permanent Exhibitions",
+      },
+      {
+        routeParams: "/Layout/Exhibitions/3",
+        id: 3.3,
+        name: "Past Exhibitions",
+      },
+      {
+        routeParams: "/Layout/Exhibitions/4",
+        id: 3.4,
+        name: "Overseas Exhibitions",
+      },
     ],
   },
   {
     id: 4,
+    icon: CollectionsIcon,
     name: "Collections",
-    pathName: "Collections",
-    url: "Collections/Bronzes",
+    routeParams: { name: "Collections", params: { type: "Bronzes" } },
     children: [
-      { url: "/Layout/Collections/Bronzes", id: 4.1, name: "Bronzes" },
-      { url: "/Layout/Collections/Ceramics", id: 4.2, name: "Ceramics" },
+      { routeParams: "/Layout/Collections/Bronzes", id: 4.1, name: "Bronzes" },
+      {
+        routeParams: "/Layout/Collections/Ceramics",
+        id: 4.2,
+        name: "Ceramics",
+      },
       {
-        url: "/Layout/Collections/Buddhist",
+        routeParams: "/Layout/Collections/Buddhist",
         id: 4.3,
         name: "Buddhist Statues",
       },
-      { url: "/Layout/Collections/Jadewares", id: 4.4, name: "Jadewares" },
       {
-        url: "/Layout/Collections/Calligraphies",
+        routeParams: "/Layout/Collections/Jadewares",
+        id: 4.4,
+        name: "Jadewares",
+      },
+      {
+        routeParams: "/Layout/Collections/Calligraphies",
         id: 4.5,
         name: "Calligraphies",
       },
-      { url: "/Layout/Collections/Paintings", id: 4.6, name: "Paintings" },
-      { url: "/Layout/Collections/Gold", id: 4.7, name: "Gold & Silverwares" },
-      { url: "/Layout/Collections/Coins", id: 4.8, name: "Coins & Banknotes" },
       {
-        url: "/Layout/Collections/Brocades",
+        routeParams: "/Layout/Collections/Paintings",
+        id: 4.6,
+        name: "Paintings",
+      },
+      {
+        routeParams: "/Layout/Collections/Gold",
+        id: 4.7,
+        name: "Gold & Silverwares",
+      },
+      {
+        routeParams: "/Layout/Collections/Coins",
+        id: 4.8,
+        name: "Coins & Banknotes",
+      },
+      {
+        routeParams: "/Layout/Collections/Brocades",
         id: 4.9,
         name: "Brocades & Embroideries",
       },
       {
-        url: "/Layout/Collections/Cultural",
+        routeParams: "/Layout/Collections/Cultural",
         id: 4.1,
         name: "Cultural Supplies",
       },
       {
-        url: "/Layout/Collections/Miscellaneous",
+        routeParams: "/Layout/Collections/Miscellaneous",
         id: 4.11,
         name: "Miscellaneous",
       },
@@ -69,14 +133,22 @@ export const topData = [
   },
   {
     id: 5,
+    icon: EngageIcon,
     name: "Learn & Engage",
-    pathName: "LearnEngage",
-    url: "LearnEngage/Students",
+    routeParams: { name: "LearnEngage" },
     children: [
-      { url: "/Layout/LearnEngage/Students", id: 5.1, name: "For Students" },
-      { url: "/Layout/LearnEngage/Adults", id: 5.2, name: "For Adults" },
       {
-        url: "/Layout/LearnEngage/Families",
+        routeParams: "/Layout/LearnEngage/Students",
+        id: 5.1,
+        name: "For Students",
+      },
+      {
+        routeParams: "/Layout/LearnEngage/Adults",
+        id: 5.2,
+        name: "For Adults",
+      },
+      {
+        routeParams: "/Layout/LearnEngage/Families",
         id: 5.3,
         name: "For Families & Children",
       },
@@ -84,40 +156,107 @@ export const topData = [
   },
   {
     id: 6,
+    icon: PublicationsIcon,
     name: "Publications",
-    pathName: "Publications",
-    url: "Publications",
+    fullname: "Preservation & Publications",
+    routeParams: { name: "Publications" },
     children: [
-      { url: "/Layout/Publications/1", id: 6.1, name: "Magazines" },
-      { url: "/Layout/Publications/2", id: 6.2, name: "Exhibition Catalogues" },
-      // {url:'/Layout/Publications/3', id: 6.3, name: "Research" },
+      { routeParams: "/Layout/Publications/1", id: 6.1, name: "Magazines" },
+      {
+        routeParams: "/Layout/Publications/2",
+        id: 6.2,
+        name: "Exhibition Catalogues",
+      },
     ],
   },
   {
     id: 7,
+    icon: SupportIcon,
     name: "Join & Support",
-    pathName: "JoinSupport",
-    url: "JoinSupport/Volunteer",
+    routeParams: { name: "JoinSupport" },
     children: [
       {
-        url: "/Layout/JoinSupport/Volunteer",
+        routeParams: "/Layout/JoinSupport/Volunteer",
         id: 7.1,
         name: "Ways to Volunteer",
+        children: [
+          {
+            routeParams: "/Layout/JoinSupport/VolunteerInfo?id=1",
+            id: 7.11,
+            name: "Volunteer Team Introduction",
+          },
+          {
+            routeParams: "/Layout/JoinSupport/VolunteerInfo?id=2",
+            id: 7.12,
+            name: "Volunteer Apply",
+          },
+          {
+            routeParams: "/Layout/JoinSupport/VolunteerInfo?id=3",
+            id: 7.13,
+            name: "Volunteer Program",
+          },
+        ],
+      },
+      {
+        routeParams: "/Layout/JoinSupport/Give",
+        id: 7.2,
+        name: "Ways to Give",
+        children: [
+          {
+            routeParams: "/Layout/JoinSupport/GiveInfo?id=4",
+            id: 7.21,
+            name: "Individuals",
+          },
+          {
+            routeParams: "/Layout/JoinSupport/GiveInfo?id=5",
+            id: 7.22,
+            name: "Corporations Institutions",
+          },
+        ],
       },
-      { url: "/Layout/JoinSupport/Give", id: 7.2, name: "Ways to Give" },
     ],
   },
   {
     id: 8,
+    icon: AboutIcon,
     name: "About",
-    pathName: "About",
-    url: "About",
-    about: true,
+    routeParams: { name: "About" },
+    children: [
+      {
+        routeParams: { name: "About", query: { scroll: 352 } },
+        id: 8.1,
+        name: "From the Director",
+      },
+      {
+        routeParams: { name: "About", query: { scroll: 816 } },
+        id: 8.2,
+        name: "History",
+      },
+      {
+        routeParams: { name: "About", query: { scroll: 1319 } },
+        id: 8.3,
+        name: "Partners & Connections",
+      },
+      {
+        routeParams: { name: "About", query: { scroll: 1525 } },
+        id: 8.4,
+        name: "Contact",
+      },
+    ],
+  },
+  {
+    id: 9,
+    icon: FunctionsIcon,
+    name: "Auxiliary Functions",
+    hideNav: true,
     children: [
-      { url: 352, id: 8.1, name: "From the Director" },
-      { url: 816, id: 8.2, name: "History" },
-      { url: 1319, id: 8.3, name: "Partners & Connections" },
-      { url: 1525, id: 8.4, name: "Contact" },
+      {
+        routeParams: location.origin + "/mobile/index.html",
+        id: 9.1,
+        name: "Mobile Site",
+      },
+      { routeParams: "/Layout/Use", id: 9.2, name: "Terms of Use" },
+      { routeParams: "/Layout/Employment", id: 9.3, name: "Employment" },
     ],
   },
 ];

src/components/Layout/index.vue

@@ -31,7 +31,7 @@
               aria-description="You have reached the horizontal menu at the top of the website. There are eight dropdown menus and 34 options in this section. To browse the content, please use the tab key."
             >
               <li
-                v-for="item in topData"
+                v-for="item in topData.filter((i) => !i.hideNav)"
                 :key="item.id"
                 aria-label="Link"
                 :aria-description="item.name"
@@ -39,21 +39,21 @@
                   active:
                     $route.path
                       .toLowerCase()
-                      .indexOf(item.pathName.toLowerCase()) > -1,
+                      .indexOf(((item.routeParams as RouteLocationNamedRaw)!.name as string).toLowerCase()) > -1,
                 }"
-                @click="skipOne(item.url)"
-                @keydown.enter.passive="skipOne(item.url)"
+                @click="$router.push(item.routeParams!)"
+                @keydown.enter.passive="$router.push(item.routeParams!)"
               >
                 <span>{{ item.name }}</span>
                 <ul class="main_nav_sub">
                   <li
                     v-for="(val, index) in item.children"
                     :key="index"
-                    :class="{ active2: menaInd === val.url }"
+                    :class="{ active2: $route.path === val.routeParams }"
                     aria-label="Link"
                     :aria-description="val.name"
-                    @click.stop="skipTow(val.url, item.about)"
-                    @keydown.enter.passive.stop="skipTow(val.url, item.about)"
+                    @click.stop="$router.push(val.routeParams!)"
+                    @keydown.enter.passive.stop="$router.push(val.routeParams!)"
                   >
                     <span>{{ val.name }}</span>
                   </li>
@@ -191,7 +191,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute, useRouter, type RouteLocationNamedRaw } from "vue-router";
 import Accessibility from "@/components/Accessibility/index.vue";
 import { useTheme, THEME_COLOR } from "@/components/Accessibility/hooks";
 import { topData, footerData } from "./data";
@@ -209,8 +209,6 @@ const THEME_MAP: Record<THEME_COLOR, string> = {
 const themeIdx = useTheme();
 const route = useRoute();
 const router = useRouter();
-/** 控制二级菜单的高亮 */
-const menaInd = ref<string | null>(null);
 /** 是否开启爱心模式 */
 const loveSwitch = ref(false);
 const accessibility = ref();
@@ -225,25 +223,15 @@ watch(loveSwitch, (v) => {
   }
 });
 
-watch(route, () => {
-  menaInd.value = route.path as string;
-  searchTxt.value = "";
-});
-
-// 第一级的跳转
-const skipOne = (url: string) => {
-  router.push("/Layout/" + url);
-};
-// 第二级的跳转
-const skipTow = (url: string | number, about?: boolean) => {
-  // 如果是about页面
-  if (about === true) {
-    router.push("/Layout/About");
-    setTimeout(() => {
-      window.scrollTo({ top: url as number, behavior: "smooth" });
-    }, 100);
-  } else router.push(url as string);
-};
+watch(
+  route,
+  () => {
+    searchTxt.value = "";
+  },
+  {
+    immediate: true,
+  }
+);
 
 const handleSearch = (txt: string) => {
   router.push({

src/router/index.ts

@@ -61,6 +61,12 @@ const router = createRouter({
               name: "Guidelines",
               component: () => import("../views/Visit/Guidelines/index.vue"),
             },
+            {
+              path: "/Layout/visit/9",
+              name: "AppointmentGuide",
+              component: () =>
+                import("../views/Visit/AppointmentGuide/index.vue"),
+            },
           ],
         },
         {
@@ -167,6 +173,26 @@ const router = createRouter({
           name: "SiteIndex",
           component: () => import("../views/Site/index.vue"),
         },
+        {
+          path: "/Layout/use",
+          name: "Use",
+          component: () => import("../views/Use/index.vue"),
+        },
+        {
+          path: "/Layout/Events",
+          name: "Events",
+          component: () => import("../views/Events/index.vue"),
+        },
+        {
+          path: "/Layout/EventsInfo/:id",
+          name: "EventsDetail",
+          component: () => import("../views/Events/detail.vue"),
+        },
+        {
+          path: "/Layout/Employment",
+          name: "Employment",
+          component: () => import("../views/Employment/index.vue"),
+        },
       ],
     },
   ],

src/views/About/index.vue

@@ -27,6 +27,24 @@ import Director from "./components/Director.vue";
 import History from "./components/History.vue";
 import Connections from "./components/Connections.vue";
 import Contact from "./components/Contact.vue";
+import { useRoute } from "vue-router";
+import { watch, nextTick } from "vue";
+
+const route = useRoute();
+
+watch(
+  route,
+  (v) => {
+    if (v.query.scroll) {
+      nextTick(() => {
+        window.scrollTo({ top: Number(v.query.scroll), behavior: "smooth" });
+      });
+    }
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 
 <style lang="scss" scoped>

src/views/Employment/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="use-page">
+    <Breadcrumb :parents="[]" :cur-route="{ name: 'Employment' }" />
+
+    <div class="container use-page-panel">
+      <div class="use-page-panel-hd">
+        <h3>Terms of Use</h3>
+
+        <div class="use-page-panel-hd__ft">
+          <img src="@/assets/images/bg_5.png" />
+          <div class="date">2018</div>
+
+          <img src="@/assets/images/bg_7.png" />
+          <div class="address">Capital Museum</div>
+        </div>
+      </div>
+
+      <div class="use-page-panel-main">
+        <div class="use-page-panel__title">
+          <span>Exhibition Overview</span>
+        </div>
+
+        <p tabindex="0">Legal Notice</p>
+        <p tabindex="0">
+          Welcome to www.capitalmuseum.org.cn (hereinafter referred to as "this
+          website"). You are expected to comply with following terms while using
+          this website:
+        </p>
+        <p tabindex="0">
+          Copyright of all contents on this website, including but not limited
+          to the website design, texts, pictures, audio and video works, etc.,
+          belong to the Capital Museum and all the parties concerned. All media,
+          websites, organizations or individuals are allowed to read these
+          contents, but cannot use them in the ways including but not limited to
+          reprinting, excerpting, linking, reposting, publication, transfer,
+          distribution, etc. And unauthorized use of this website and its
+          contents for commercial purposes is also prohibited.
+        </p>
+        <p tabindex="0">
+          If you download materials you consider you need from this website for
+          non-commercial use (except for information with copyrights and
+          proprietary rights), please contact us for permission.
+        </p>
+        <p tabindex="0">
+          Any reprints and quotes of any copyrighted articles on this website
+          should conform to following requirements:
+        </p>
+        <p
+          tabindex="0"
+          :aria-description="`(1) For non-commercial, non-profit and non-advertising uses, author's name and source of the used article or picture, &quot;Capital Museum Website&quot; or &quot;${$homePageUrl}&quot;, should be attached.`"
+        >
+          (1) For non-commercial, non-profit and non-advertising uses, author's
+          name and source of the used article or picture, "首都博物馆网站" or
+          "{{ $homePageUrl }}", should be attached.
+        </p>
+        <p
+          tabindex="0"
+          :aria-description="`(2) For business, profit-making and advertising use, you should obtain consent of the original author, and attach the name of that author, limits of authority and the source, &quot;Capital Museum Website&quot;or &quot;${$homePageUrl}&quot;.`"
+        >
+          (2) For business, profit-making and advertising use, you should obtain
+          consent of the original author, and attach the name of that author,
+          limits of authority and the source, "首都博物馆网站"or "{{
+            $homePageUrl
+          }}".
+        </p>
+        <p tabindex="0">
+          (3) Any modification and cancellation of any articles or pictures
+          should be approved by the author, with the limits of authority
+          attached.
+        </p>
+        <p tabindex="0">
+          This website and the Capital Museum are not liable for any direct or
+          indirect incidental damage resulting from the use or inability to use
+          the information on this website. This website also does not assume any
+          criminal or civil liability arising from any violation of the
+          provisions of this website or the laws of the People's Republic of
+          China.
+        </p>
+        <p tabindex="0">
+          This website will make announcement in advance if services are to be
+          suspended due to system maintenance or upgrading. The website and the
+          Capital Museum are not be liable for any inconvenience or losses
+          caused by the suspension of services due to hardware failure or force
+          majeure.
+        </p>
+        <p tabindex="0">
+          The right of final interpretation of all contents of this website is
+          owned by the Capital Museum.
+        </p>
+        <p tabindex="0">
+          To safeguard rights and interests of this website and respect for the
+          authors' copyrights, we entrust Lyu Xiaojing of the Beijing Realizer
+          Law Firm as the legal adviser to this website. Anyone violating the
+          terms of this notice and laws will be held accountable. If any
+          contents published and reposted on this website violate your
+          copyrights, please contact our lawyer within two weeks.
+        </p>
+        <p tabindex="0">The Capital Museum</p>
+      </div>
+    </div>
+
+    <button class="use-page__back" @click="backTop">Back to top</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Breadcrumb from "@/components/Breadcrumb/index.vue";
+
+const $homePageUrl = location.origin;
+
+const backTop = () => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../Use/index.scss";
+</style>

src/views/Events/detail.scss

@@ -0,0 +1,114 @@
+.events-detail {
+  &__banner {
+    margin-top: -20px;
+    height: 450px;
+    object-fit: cover;
+  }
+  &__main {
+    position: relative;
+    margin: -240px auto 0;
+    width: 900px;
+    z-index: 1;
+
+    .breadcrumb {
+      padding: 0 30px;
+      background: var(--white-bg);
+    }
+  }
+  &-hd {
+    display: flex;
+    background-color: #f4f4f4;
+
+    &__info {
+      flex: 1;
+      font-weight: 700;
+      font-family: helvetica;
+      font-size: 36px;
+      line-height: 36px;
+      padding: 40px 30px 20px 30px;
+
+      > p {
+        color: var(--van-primary-color);
+      }
+      &__container {
+        margin-top: 15px;
+        font-family: Georgia;
+        font-size: 16px;
+        line-height: 20px;
+
+        p {
+          margin: 0 auto;
+          width: 350px;
+          text-align: left;
+          font-weight: 500;
+          cursor: pointer;
+        }
+      }
+    }
+    &__date {
+      flex-shrink: 0;
+      width: 294px;
+      font-family: Georgia;
+      font-size: 30px;
+      color: #fff;
+      line-height: 30px;
+      padding: 40px 20px;
+      background-color: #353535;
+
+      p:first-child {
+        margin-bottom: 30px;
+        font-size: 36px;
+        line-height: 40px;
+      }
+    }
+  }
+  &-container {
+    padding: 40px 30px;
+    font-family: arial, helvetica, sans-serif;
+    font-size: 16px;
+    line-height: 2em;
+    text-align: justify;
+    background: var(--white-bg);
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
+  }
+  &-other {
+    margin: 60px 0;
+
+    h3 {
+      margin-bottom: 20px;
+      font-weight: 700;
+      font-size: 30px;
+      line-height: 54px;
+      font-family: Helvetica;
+      text-align: center;
+      border-bottom: 5px solid var(--van-primary-color);
+    }
+    ul {
+      display: flex;
+      margin: -15px;
+
+      li {
+        margin: 15px;
+        width: calc(50% - 30px);
+        background: var(--white-bg);
+
+        .el-image {
+          height: 210px;
+        }
+        p {
+          font-weight: 700;
+          font-family: Helvetica;
+          font-size: 24px;
+          line-height: 30px;
+          padding: 30px 20px;
+        }
+      }
+    }
+  }
+  &__backtop {
+    position: fixed;
+    right: 140px;
+    bottom: 100px;
+    cursor: pointer;
+  }
+}

src/views/Events/detail.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="events-detail container">
+    <img
+      class="events-detail__banner"
+      src="https://en.capitalmuseum.org.cn/data/About/Events/2Ac.jpg"
+      alt=""
+      tabindex=""
+      aria-description=""
+    />
+
+    <div class="events-detail__main">
+      <Breadcrumb
+        :parents="[{ label: 'Events', routeParams: { name: 'Events' } }]"
+      />
+
+      <div class="events-detail-hd">
+        <div class="events-detail-hd__info">
+          <h3 tabindex="0">
+            Development of Contemporary Museum and Exhibition Interpretation
+          </h3>
+          <p tabindex="0">International Symposium</p>
+
+          <div class="events-detail-hd__info__container">
+            <p tabindex="0">■ Introduction</p>
+            <p tabindex="0">
+              ■ Directors' Roundtable of Development of Contemporary Museums and
+              Exhibition Interpretation
+            </p>
+            <p tabindex="0">
+              ■ Development of a Contemporary Museum and Exhibition
+              Interpretation
+            </p>
+          </div>
+        </div>
+
+        <div class="events-detail-hd__date">
+          <p tabindex="0">Date:</p>
+          <p tabindex="0">October 27 - October 28, 2019</p>
+        </div>
+      </div>
+
+      <div class="events-detail-container"></div>
+
+      <div class="events-detail-other">
+        <h3>View Other Events</h3>
+
+        <ul>
+          <li>
+            <ElImage
+              fit="cover"
+              src="https://en.capitalmuseum.org.cn/data/About/Events/3.jpg"
+            />
+            <p>A Bright New Year Opens for Capital Museum</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <img
+      class="events-detail__backtop"
+      src="./images/toTop.jpg"
+      aria-label="Button"
+      aria-description="Back to top"
+      @click="toTop"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Breadcrumb from "@/components/Breadcrumb/index.vue";
+
+const toTop = () => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./detail.scss";
+</style>

src/views/Events/index.scss

@@ -0,0 +1,75 @@
+.events-page {
+  &-panel {
+    padding: 20px 0;
+    background: var(--white-bg);
+
+    &__wrap {
+      margin: 0 auto;
+      width: 900px;
+
+      > ul {
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+        margin-top: 30px;
+      }
+    }
+    h1 {
+      font-size: 40px;
+      font-weight: bold;
+      font-family: Georgia;
+      line-height: 58px;
+      text-align: center;
+      background: url("./images/eve.gif") repeat-x 0 100%;
+      padding-bottom: 7px;
+    }
+  }
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 450px;
+    background: url("https://en.capitalmuseum.org.cn/data/About/Events/1.jpg");
+    background-position: center;
+    background-size: cover;
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+
+    &__main {
+      width: 532px;
+      text-align: center;
+      color: white;
+    }
+    &__hd {
+      padding-bottom: 15px;
+      font-size: 24px;
+      font-family: Helvetica;
+      font-weight: bold;
+      line-height: 30px;
+      border-bottom: 4px solid hsla(0, 0%, 100%, 0.7);
+
+      p {
+        color: var(--van-primary-color);
+      }
+    }
+    &__container {
+      padding: 15px 0;
+      font-family: Georgia;
+      font-size: 16px;
+      color: hsla(0, 0%, 100%, 0.7);
+      line-height: 20px;
+
+      p {
+        margin: 0 auto;
+        width: 350px;
+        text-align: left;
+      }
+    }
+    i {
+      font-family: Georgia;
+      font-size: 16px;
+      line-height: 20px;
+      font-style: italic;
+    }
+  }
+}

src/views/Events/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="events-page"
+    data-aria-viewport-area
+    tabindex="0"
+    aria-description="You've reached the banner area of the Events page; this area has one image; please use the tab key to go through the content."
+  >
+    <Breadcrumb :parents="[]" :cur-route="{ name: 'Events' }" />
+
+    <div
+      class="container events-page-panel"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-description="You've reached the content area of the Events page, please use the tab key to navigate through the content."
+    >
+      <div class="events-page-panel__wrap">
+        <h1>EVENTS</h1>
+
+        <ul>
+          <li
+            class="events-page-item"
+            tabindex="0"
+            aria-label="Link"
+            @click="$router.push({ name: 'EventsDetail', params: { id: 2.1 } })"
+          >
+            <div class="events-page-item__main">
+              <div class="events-page-item__hd">
+                <h2>International Museum Day 2021</h2>
+                <p>International Symposium</p>
+              </div>
+
+              <div class="events-page-item__container">
+                <p>■ Introduction</p>
+                <p>
+                  ■ Directors' Roundtable of Development of Contemporary Museums
+                  and Exhibition Interpretation
+                </p>
+                <p>
+                  ■ Development of a Contemporary Museum and Exhibition
+                  Interpretation
+                </p>
+              </div>
+
+              <i class="events-page-item__date">Date:May 18, 2021</i>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Breadcrumb from "@/components/Breadcrumb/index.vue";
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Site/components/Row.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="site-index-row">
+    <div v-for="item in list" :key="item.id" class="site-index-col">
+      <RouterLink
+        v-if="item.routeParams"
+        :to="item.routeParams"
+        class="site-index-col__label"
+        tabindex="0"
+        aria-label="Link"
+        :aria-description="item.name"
+      >
+        <img :src="item.icon" />
+        <span>{{ item.fullname || item.name }}</span>
+      </RouterLink>
+      <div
+        v-else
+        class="site-index-col__label"
+        tabindex="0"
+        aria-label="Label"
+        :aria-description="item.name"
+      >
+        <img :src="item.icon" />
+        <span>{{ item.fullname || item.name }}</span>
+      </div>
+
+      <ul v-if="item.children" class="site-index-col__list">
+        <li v-for="link in item.children" :key="link.id">
+          <RouterLink
+            v-if="link.routeParams"
+            :to="link.routeParams"
+            tabindex="0"
+            aria-label="Link"
+            :aria-description="link.name"
+            >{{ link.name }}</RouterLink
+          >
+
+          <ul v-if="link.children" class="site-index-col__list2">
+            <li v-for="subLink in link.children" :key="subLink.id">
+              <RouterLink
+                v-if="subLink.routeParams"
+                :to="subLink.routeParams"
+                tabindex="0"
+                aria-label="Link"
+                :aria-description="subLink.name"
+                >{{ subLink.name }}</RouterLink
+              >
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TOP_DATA } from "@/components/Layout/data";
+import { isNumber } from "lodash-unified";
+
+defineProps<{
+  list: TOP_DATA[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.site-index {
+  &-row {
+    display: flex;
+    padding: 30px 0;
+    border-bottom: 1px solid var(--black-text-color);
+
+    &:last-child {
+      border: none;
+    }
+  }
+
+  &-col {
+    flex: 1;
+
+    &__label {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 30px;
+      font-weight: bold;
+      font-family: Cambria;
+      white-space: nowrap;
+    }
+    &__list {
+      > li {
+        padding: 12px 0;
+        font-size: 20px;
+
+        &:first-child {
+          margin-top: 12px;
+        }
+      }
+    }
+    &__list2 {
+      margin: 5px 0 0 5px;
+      border-left: 1px solid var(--black-text-color);
+
+      > li {
+        position: relative;
+        padding: 15px 0 15px 15px;
+        font-size: 16px;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0;
+          width: 10px;
+          height: 1px;
+          border-top: 1px solid var(--black-text-color);
+          transform: translateY(-50%);
+        }
+        &:last-child::after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: -1px;
+          width: 2px;
+          height: 50%;
+          background: #f1f1f1;
+        }
+        a {
+          color: var(--gray-text-color);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Site/index.scss

@@ -0,0 +1,9 @@
+.site-index {
+  padding: 20px 0;
+
+  &-row3 {
+    :deep(.site-index-col:first-child) {
+      flex: 2;
+    }
+  }
+}

src/views/Site/index.vue

@@ -9,20 +9,25 @@
       src="./images/1.jpg"
       alt=""
       tabindex="0"
-      aria-label=""
+      aria-span=""
       aria-description="Site Index"
     />
 
-    <div class="site-index__home">
-      <img
-        src="./images/home.jpg"
-        alt=""
-        tabindex="0"
-        aria-label="Link"
-        aria-description="Home"
-        @click="$router.push({ name: 'Home' })"
-        @keydown.enter.passive="$router.push({ name: 'Home' })"
-      />
-    </div>
+    <Row :list="topData.slice(0, 1)" />
+
+    <Row :list="topData.slice(1, 5)" />
+
+    <Row class="site-index-row3" :list="topData.slice(5, 8)" />
+
+    <Row :list="topData.slice(8)" />
   </div>
 </template>
+
+<script lang="ts" setup>
+import { topData } from "@/components/Layout/data";
+import Row from "./components/Row.vue";
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Use/index.scss

@@ -0,0 +1,74 @@
+.use-page {
+  &-panel {
+    background: var(--white-bg);
+    border: 1px solid #e0e0e0;
+
+    &-hd {
+      padding: 40px 40px 20px;
+      border-bottom: 1px solid #e0e0e0;
+
+      h3 {
+        margin-bottom: 10px;
+        font-size: 22px;
+        line-height: 44px;
+        font-weight: bold;
+      }
+      &__ft {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 14px;
+        color: var(--gray-text-color);
+
+        .date {
+          margin-right: 20px;
+        }
+      }
+    }
+    &-main {
+      padding: 30px 40px;
+
+      p {
+        margin-top: 24px;
+        font-size: 18px;
+        line-height: 26px;
+      }
+    }
+    &__title {
+      position: relative;
+      text-align: center;
+      font-size: 24px;
+      font-weight: bold;
+      color: var(--van-primary-color);
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 320px;
+        height: 1px;
+        border-top: 1px solid var(--gray2-text-color);
+        transform: translate(-50%, -50%);
+      }
+      span {
+        position: relative;
+        padding: 0 20px;
+        background: var(--white-bg);
+        z-index: 1;
+      }
+    }
+  }
+  &__back {
+    display: block;
+    margin: 30px auto;
+    width: 160px;
+    height: 38px;
+    font-size: 16px;
+    background: #f1f1f1;
+    font-weight: bold;
+    color: var(--black-text-color);
+    border: 1px solid var(--black-text-color);
+    cursor: pointer;
+  }
+}

src/views/Use/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="use-page">
+    <Breadcrumb :parents="[]" :cur-route="{ name: 'Terms of Use' }" />
+
+    <div class="container use-page-panel">
+      <div class="use-page-panel-hd">
+        <h3>Terms of Use</h3>
+
+        <div class="use-page-panel-hd__ft">
+          <img src="@/assets/images/bg_5.png" />
+          <div class="date">2018</div>
+
+          <img src="@/assets/images/bg_7.png" />
+          <div class="address">Capital Museum</div>
+        </div>
+      </div>
+
+      <div class="use-page-panel-main">
+        <div class="use-page-panel__title">
+          <span>Exhibition Overview</span>
+        </div>
+
+        <p tabindex="0">Legal Notice</p>
+        <p tabindex="0">
+          Welcome to www.capitalmuseum.org.cn (hereinafter referred to as "this
+          website"). You are expected to comply with following terms while using
+          this website:
+        </p>
+        <p tabindex="0">
+          Copyright of all contents on this website, including but not limited
+          to the website design, texts, pictures, audio and video works, etc.,
+          belong to the Capital Museum and all the parties concerned. All media,
+          websites, organizations or individuals are allowed to read these
+          contents, but cannot use them in the ways including but not limited to
+          reprinting, excerpting, linking, reposting, publication, transfer,
+          distribution, etc. And unauthorized use of this website and its
+          contents for commercial purposes is also prohibited.
+        </p>
+        <p tabindex="0">
+          If you download materials you consider you need from this website for
+          non-commercial use (except for information with copyrights and
+          proprietary rights), please contact us for permission.
+        </p>
+        <p tabindex="0">
+          Any reprints and quotes of any copyrighted articles on this website
+          should conform to following requirements:
+        </p>
+        <p
+          tabindex="0"
+          :aria-description="`(1) For non-commercial, non-profit and non-advertising uses, author's name and source of the used article or picture, &quot;Capital Museum Website&quot; or &quot;${$homePageUrl}&quot;, should be attached.`"
+        >
+          (1) For non-commercial, non-profit and non-advertising uses, author's
+          name and source of the used article or picture, "首都博物馆网站" or
+          "{{ $homePageUrl }}", should be attached.
+        </p>
+        <p
+          tabindex="0"
+          :aria-description="`(2) For business, profit-making and advertising use, you should obtain consent of the original author, and attach the name of that author, limits of authority and the source, &quot;Capital Museum Website&quot;or &quot;${$homePageUrl}&quot;.`"
+        >
+          (2) For business, profit-making and advertising use, you should obtain
+          consent of the original author, and attach the name of that author,
+          limits of authority and the source, "首都博物馆网站"or "{{
+            $homePageUrl
+          }}".
+        </p>
+        <p tabindex="0">
+          (3) Any modification and cancellation of any articles or pictures
+          should be approved by the author, with the limits of authority
+          attached.
+        </p>
+        <p tabindex="0">
+          This website and the Capital Museum are not liable for any direct or
+          indirect incidental damage resulting from the use or inability to use
+          the information on this website. This website also does not assume any
+          criminal or civil liability arising from any violation of the
+          provisions of this website or the laws of the People's Republic of
+          China.
+        </p>
+        <p tabindex="0">
+          This website will make announcement in advance if services are to be
+          suspended due to system maintenance or upgrading. The website and the
+          Capital Museum are not be liable for any inconvenience or losses
+          caused by the suspension of services due to hardware failure or force
+          majeure.
+        </p>
+        <p tabindex="0">
+          The right of final interpretation of all contents of this website is
+          owned by the Capital Museum.
+        </p>
+        <p tabindex="0">
+          To safeguard rights and interests of this website and respect for the
+          authors' copyrights, we entrust Lyu Xiaojing of the Beijing Realizer
+          Law Firm as the legal adviser to this website. Anyone violating the
+          terms of this notice and laws will be held accountable. If any
+          contents published and reposted on this website violate your
+          copyrights, please contact our lawyer within two weeks.
+        </p>
+        <p tabindex="0">The Capital Museum</p>
+      </div>
+    </div>
+
+    <button class="use-page__back" @click="backTop">Back to top</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Breadcrumb from "@/components/Breadcrumb/index.vue";
+
+const $homePageUrl = location.origin;
+
+const backTop = () => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Visit/AppointmentGuide/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="appointment-guide"></div>
+</template>

src/views/Visit/Reservation/index.vue

@@ -8,7 +8,7 @@
       <div class="mm1">
         <div class="mm1l">
           <p>
-            <img src="@/assets/images/Visit/pLeft.jpg" />
+            <img src="@/components/PageTitle/pLeft.jpg" />
             <span>&nbsp;<strong>How to Make a Reservation?</strong></span>
           </p>
           <p><br /></p>

src/views/Visit/index.vue

@@ -51,6 +51,7 @@ import GuideIcon from "@/assets/images/Visit/m-12.png";
 import AccessibilityIcon from "@/assets/images/Visit/m-13.png";
 import ShopIcon from "@/assets/images/Visit/m-14.png";
 import GuidelinesIcon from "@/assets/images/Visit/m-15.png";
+import AppointmentGuideIcon from "@/assets/images/Visit/m-17.png";
 import { useRoute } from "vue-router";
 import { computed } from "vue";
 
@@ -61,6 +62,11 @@ const NAV_LIST = [
     pathName: "Calendar",
   },
   {
+    name: "Appointment guide",
+    img: AppointmentGuideIcon,
+    pathName: "AppointmentGuide",
+  },
+  {
     name: "Hours, Direction & Admission",
     img: DirectionIcon,
     pathName: "Direction",
@@ -104,7 +110,7 @@ const curRoute = computed(() =>
   &-nav {
     position: relative;
     margin-top: -15px;
-    padding: 5px 60px;
+    padding: 5px 10px;
     display: flex;
     justify-content: center;
     background: var(--white-bg);