feat: --

package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "@dage/service": "^1.0.3",
     "@dage/utils": "^1.0.2",
     "@vue/shared": "^3.4.27",
     "@vueuse/core": "^10.11.0",

src/components/Layout/data.ts

@@ -30,7 +30,7 @@ export const topData: TOP_DATA[] = [
   {
     id: 3,
     name: "Exhibitions",
-    routeParams: { name: "Exhibitions", params: { type: 1 } },
+    routeParams: { name: "Exhibitions" },
     children: [
       {
         routeParams: "/Layout/Exhibitions/Current",

src/router/index.ts

@@ -123,6 +123,37 @@ const router = createRouter({
           meta: { navBgColor: "#997369" },
         },
         {
+          path: "/Layout/Learn/Info",
+          name: "LearnInfo",
+          component: () => import("../views/Learn/Detail/index.vue"),
+          meta: { navBgColor: "#764032" },
+        },
+        // Publications页面
+        {
+          path: "/Layout/Publications",
+          name: "Publications",
+          component: () => import("../views/Publications/index.vue"),
+          meta: { navBgColor: "#cdb6ac" },
+          redirect: { name: "PuMagazines" },
+          children: [
+            // 二级路由子页面
+            {
+              path: "/Layout/Publications/Magazines",
+              name: "PuMagazines",
+              component: () =>
+                import("../views/Publications/Magazines/index.vue"),
+              meta: { navBgColor: "#cdb6ac" },
+            },
+            {
+              path: "/Layout/Publications/Catalogues",
+              name: "PuCatalogues",
+              component: () =>
+                import("../views/Publications/Catalogues/index.vue"),
+              meta: { navBgColor: "#cdb6ac" },
+            },
+          ],
+        },
+        {
           path: "/Layout/Employment",
           name: "Employment",
           meta: {

src/views/Learn/Detail/index.scss

@@ -0,0 +1,34 @@
+.learn-detail {
+  &-main {
+    padding: 40px;
+    background: url("../images/bgLI.png") no-repeat center top / cover;
+  }
+  &-info {
+    margin-bottom: 40px;
+    padding-bottom: 40px;
+    line-height: 36px;
+    border-bottom: 1px solid #ccc;
+
+    h3 {
+      margin-bottom: 30px;
+      font-size: 36px;
+    }
+    p {
+      color: #666;
+      font-size: 28px;
+      line-height: 72px;
+    }
+    &__team {
+      padding-left: 60px;
+      background: url("@/assets/images/bg_8.png") left 16px no-repeat;
+    }
+    &__time {
+      padding-left: 60px;
+      background: url("@/assets/images/bg_6.png") left 16px no-repeat;
+    }
+    &__address {
+      padding-left: 60px;
+      background: url("@/assets/images/bg_7.png") 6px 16px no-repeat;
+    }
+  }
+}

src/views/Learn/Detail/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="learn-detail">
+    <PageBanner title="Learn & Engage" :img="BannerImg" />
+
+    <div class="learn-detail-main">
+      <div class="learn-detail-info">
+        <h3>
+          Series of activities of the educational practice base for forging a
+          sense of Chinese national community - making a ‘sundial’
+        </h3>
+
+        <p class="learn-detail-info__time">
+          Tuesday to Sunday (closed on Mondays) 9:00 a.m. to 5:00 p.m.
+        </p>
+        <p class="learn-detail-info__address">Room B, F1</p>
+        <p class="learn-detail-info__team">Limited to 20 people in total</p>
+      </div>
+
+      <div class="learn-detail-inner">
+        <VanImage
+          src="https://en.capitalmuseum.org.cn/data/LearnEngage/in/101.jpg"
+        />
+
+        <div class="learn-detail-inner__html"></div>
+
+        <div class="learn-detail-inner__ft">
+          <p>How to sign up</p>
+          <p>
+            Please scan the applet code below to make a reservation, or click on
+            the menu below the Capital Museum’s WeChat Official Account “Love to
+            Participate”--“Join An Activity” to make a reservation (No on-site
+            or telephone registration).
+          </p>
+          <img src="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import PageBanner from "@/components/PageBanner.vue";
+import BannerImg from "../images/bannerLI.png";
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/Learn/components/Card.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="learn-card"
+    @click="$router.push({ name: 'LearnInfo', query: { id: 1 } })"
+  >
+    <VanImage
+      src="https://en.capitalmuseum.org.cn/data/LearnEngage/sm/100.png"
+      style="display: block"
+    />
+
+    <div class="learn-card__inner">
+      <h3>
+        Celebration of Spring--taking advantage of the east wind to fly paper
+        kites
+      </h3>
+      <p>Date：April 5, 2023 10:00 am</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.learn-card {
+  background: white;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px 6px #ccc;
+
+  &__inner {
+    padding: 30px;
+
+    h3 {
+      font-size: 32px;
+    }
+    p {
+      color: #999;
+    }
+  }
+}
+</style>

src/views/Learn/index.vue

@@ -3,7 +3,11 @@
     <PageBanner title="" :img="BannerImg" />
 
     <PageNav v-model="activeTab" @change="handleNav">
-      <van-tab title="Students"></van-tab>
+      <van-tab title="Students">
+        <div class="learn-list">
+          <Card v-for="key in 5" :key="key" />
+        </div>
+      </van-tab>
       <van-tab title="Adults"></van-tab>
       <van-tab title="Families & Children"></van-tab>
     </PageNav>
@@ -15,6 +19,7 @@ import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import PageBanner from "@/components/PageBanner.vue";
 import PageNav from "@/components/PageNav.vue";
+import Card from "./components/Card.vue";
 import BannerImg from "./images/bannerL.png";
 
 const ROUTE_MAP: Record<number, string> = {
@@ -33,3 +38,16 @@ const handleNav = (v: number) => {
   router.push({ name: "LearnEngage", params: { type: ROUTE_MAP[v] } });
 };
 </script>
+
+<style lang="scss" scoped>
+.learn {
+  background-color: #f7f6f3;
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    padding: 6px 40px 60px;
+  }
+}
+</style>

src/views/Publications/Catalogues/index.vue

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

src/views/Publications/Magazines/index.vue

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

src/views/Publications/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="publications">
+    <PageBanner title="Publications" :img="BannerImg" />
+
+    <PageNav v-model="activeTab" @change="handleNav">
+      <van-tab title="Magazines"></van-tab>
+      <van-tab title="Catalogues"></van-tab>
+    </PageNav>
+
+    <RouterView />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import PageBanner from "@/components/PageBanner.vue";
+import PageNav from "@/components/PageNav.vue";
+import BannerImg from "./images/bannerP.png";
+
+const ROUTE_MAP: Record<number, string> = {
+  0: "PuMagazines",
+  1: "PuCatalogues",
+};
+
+const route = useRoute();
+const router = useRouter();
+const activeTab = ref(
+  Object.values(ROUTE_MAP).findIndex((key) => key === route.name) || 0
+);
+
+const handleNav = (v: number) => {
+  router.push({ name: ROUTE_MAP[v] });
+};
+</script>