feat: --

packages/base/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@enamel/base",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

packages/base/utils.js

@@ -0,0 +1,7 @@
+export const isDevelopment = import.meta.env.MODE === "development";
+
+export const getEnvImagePath = (path) => {
+  return isDevelopment
+    ? "http://192.168.0.18:8080" + path
+    : `${window.origin}/project/yz-enamel-exhibition/base${path}`;
+};

packages/pc/package.json

@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@enamel/base": "workspace:*",
     "element-plus": "^2.9.0",
     "pinia": "^2.2.6",
+    "swiper": "^11.1.15",
     "vue": "^3.5.13",
     "vue-router": "^4.4.5"
   },

packages/pc/src/App.vue

@@ -12,6 +12,21 @@ import { RouterView } from "vue-router";
   --design-height: 1080;
 }
 
+#app {
+  text-indent: 2em;
+  min-height: 100vh;
+  font-size: 23px;
+  line-height: 51px;
+  background: url("@/assets/images/bg-min.jpg");
+}
+
+.more-btn {
+  width: 181px;
+  height: 53px;
+  background: url("@/assets/images/more-min.png") no-repeat center / contain;
+  cursor: pointer;
+}
+
 @media screen and (max-width: 768px) {
   :root {
     --design-width: 750;

packages/pc/src/components/Card.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="card" :class="`${chapter}-theme`">
+    <div class="card-img">
+      <img
+        :src="
+          getEnvImagePath(
+            Array.isArray(detail?.img)
+              ? detail?.img[initImgIndex || 0]
+              : detail?.img
+          )
+        "
+      />
+    </div>
+    <div class="card-inner">
+      <p class="card__title">{{ detail?.name }}</p>
+      <p class="card__size">尺寸：{{ detail?.size }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getEnvImagePath } from "@enamel/base/utils";
+
+defineProps(["detail", "initImgIndex", "chapter"]);
+</script>
+
+<style lang="scss" scoped>
+.card {
+  max-width: 350px;
+  cursor: pointer;
+
+  &.chapter2-theme {
+    .card-img {
+      background-image: url("@/assets/images/20-min.png");
+    }
+  }
+  &.chapter3-theme {
+    .card-img {
+      background-image: url("@/assets/images/21-min.png");
+    }
+  }
+  &.chapter4-theme {
+    .card-img {
+      background-image: url("@/assets/images/22-min.png");
+    }
+  }
+  &-img {
+    padding: 30px;
+    width: 331px;
+    height: 229px;
+    background: url("@/assets/images/19-min.png") no-repeat center / contain;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  &-inner {
+    position: relative;
+    padding: 15px 0 0 44px;
+    text-indent: 0;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 17px;
+      left: 0;
+      width: 25px;
+      height: 25px;
+      background: url("@/assets/images/14-min.png") no-repeat center / contain;
+    }
+  }
+  &__title {
+    color: #1f1f1f;
+    line-height: 32px;
+  }
+  &__size {
+    margin-top: 8px;
+    color: #767676;
+    font-size: 15px;
+    line-height: 18px;
+    letter-spacing: 1px;
+  }
+}
+</style>

packages/pc/src/components/Card2.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="card2">
+    <slot name="img" />
+    <p class="card2__title">{{ title }}</p>
+    <p class="card2__author">{{ author }}</p>
+    <p v-if="content" class="card2__content">{{ content }}</p>
+  </div>
+</template>
+
+<script setup>
+defineProps(["title", "author", "content"]);
+</script>
+
+<style lang="scss" scoped>
+.card2 {
+  text-indent: 0;
+  color: #000000;
+  width: 452px;
+  cursor: pointer;
+
+  &__title {
+    position: relative;
+    padding: 20px 0 15px 69px;
+    font-size: 34px;
+    letter-spacing: 4px;
+    white-space: nowrap;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 29px;
+      left: 22px;
+      width: 33px;
+      height: 33px;
+      background: url("@/assets/images/14-min.png") no-repeat center / contain;
+    }
+  }
+  &__author {
+    line-height: 25px;
+    text-align: right;
+    letter-spacing: 4px;
+  }
+  &__content {
+    margin-top: 15px;
+    text-indent: 2em;
+    font-size: 20px;
+    color: #7d7d7d;
+    line-height: 34px;
+  }
+}
+</style>

packages/pc/src/router/index.js

@@ -5,10 +5,47 @@ const router = createRouter({
   routes: [
     {
       path: "/",
+      name: "index",
+      component: () => import("../views/Index/index.vue"),
+    },
+    {
+      path: "/home",
       name: "home",
       component: () => import("../views/Home/index.vue"),
     },
+    {
+      path: "/chapter1",
+      name: "chapter1",
+      component: () => import("../views/Chapter1/index.vue"),
+    },
+    {
+      path: "/chapter2",
+      name: "chapter2",
+      component: () => import("../views/Chapter2/index.vue"),
+    },
+    {
+      path: "/chapter3",
+      name: "chapter3",
+      component: () => import("../views/Chapter3/index.vue"),
+    },
+    {
+      path: "/chapter4",
+      name: "chapter4",
+      component: () => import("../views/Chapter4/index.vue"),
+    },
+    {
+      path: "/detail/:chapter/:index",
+      name: "detail",
+      component: () => import("../views/Detail/index.vue"),
+    },
   ],
 });
 
+router.afterEach((to, from, next) => {
+  window.scrollTo({
+    top: 0,
+    behavior: "instant",
+  });
+});
+
 export default router;

packages/pc/src/views/Chapter1/index.scss

@@ -0,0 +1,181 @@
+.chapter1 {
+  &__head {
+    display: block;
+    width: 100%;
+  }
+  &-main {
+    position: relative;
+    height: 5256px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 951px;
+      height: 52px;
+      background: #c9a69b;
+    }
+  }
+  &__img1 {
+    position: absolute;
+    top: 125px;
+    left: 179px;
+    width: 728px;
+    height: 319px;
+  }
+  &__content1 {
+    position: absolute;
+    top: 143px;
+    right: 248px;
+    width: 687px;
+  }
+  &__title1 {
+    position: absolute;
+    top: 514px;
+    left: 239px;
+    width: 142px;
+    height: 59px;
+  }
+  &-list1 {
+    position: absolute;
+    top: 624px;
+    left: 239px;
+  }
+  &__title2 {
+    position: absolute;
+    top: 1010px;
+    left: 239px;
+    width: 273px;
+    height: 60px;
+  }
+  &__content2 {
+    position: absolute;
+    top: 1107px;
+    left: 239px;
+    width: 1412px;
+  }
+  &-list2 {
+    position: absolute;
+    top: 1249px;
+    left: 248px;
+    display: flex;
+    align-items: flex-start;
+    gap: 135px;
+
+    .img1 {
+      width: 393px;
+      height: 438px;
+    }
+    .img2 {
+      width: 453px;
+      height: 441px;
+    }
+  }
+  &-list3 {
+    position: absolute;
+    top: 1951px;
+    left: 238px;
+    display: flex;
+    align-items: flex-start;
+    gap: 40px;
+  }
+  &__title3 {
+    position: absolute;
+    top: 2393px;
+    left: 238px;
+    width: 273px;
+    height: 58px;
+  }
+  &-card1 {
+    position: absolute;
+    top: 2498px;
+    left: 238px;
+
+    .img3 {
+      width: 423px;
+      height: 490px;
+    }
+  }
+  &__content3 {
+    position: absolute;
+    top: 2537px;
+    left: 772px;
+    width: 832px;
+  }
+  &-list4 {
+    position: absolute;
+    top: 2760px;
+    left: 774px;
+    display: flex;
+    gap: 40px;
+  }
+  &__title4 {
+    position: absolute;
+    top: 3182px;
+    left: 238px;
+    width: 142px;
+    height: 62px;
+  }
+  &-list5 {
+    position: absolute;
+    top: 3312px;
+    left: 239px;
+    display: flex;
+    gap: 40px;
+  }
+  &__title5 {
+    position: absolute;
+    top: 3730px;
+    left: 238px;
+    width: 142px;
+    height: 55px;
+  }
+  &-list6 {
+    position: absolute;
+    top: 3860px;
+    left: 239px;
+    display: flex;
+    gap: 40px;
+  }
+  &__title6 {
+    position: absolute;
+    top: 4270px;
+    left: 238px;
+    width: 537px;
+    height: 59px;
+  }
+  &-swiper {
+    --swiper-scrollbar-border-radius: 7px;
+    --swiper-scrollbar-drag-bg-color: #cd8b71;
+    position: absolute;
+    top: 4390px;
+    left: 233px;
+    right: 233px;
+    cursor: pointer;
+
+    :deep(.swiper-wrapper) {
+      padding-bottom: 60px;
+    }
+    .swiper-slide {
+      width: 218px;
+      height: 595px;
+      text-indent: 0;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    :deep(.swiper-scrollbar) {
+      top: unset;
+      bottom: 0;
+      height: 7px;
+      overflow: hidden;
+      border: 1px solid #706d68;
+      background: transparent;
+    }
+  }
+  &__foot {
+    width: 100%;
+  }
+}

packages/pc/src/views/Chapter1/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="chapter1">
+    <img
+      src="@/assets/images/head-min.jpg"
+      draggable="false"
+      class="chapter1__head"
+    />
+
+    <div class="chapter1-main">
+      <img src="./images/20-min.png" draggable="false" class="chapter1__img1" />
+      <p class="chapter1__content1">
+        明清时期，珐琅器因制作工艺复杂，釉料配制和烧造技术难度大，生产成本高，故主要是在宫廷中制作，专供皇室享用,民间鲜有流传。明崇祯年间，“景泰御前作坊之珐琅,精巧远迈前古，四方好事者，亦于内市重价购之。”至康雍乾时期，珐琅器更成为帝王挚爱的“内廷秘玩”，是“庶民弗得一窥”的御用品。
+      </p>
+
+      <!-- 陈设 -->
+      <img
+        src="./images/18-min.png"
+        draggable="false"
+        class="chapter1__title1"
+      />
+
+      <div class="chapter1-list1">
+        <Card
+          :detail="data.chapter1[0]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 0 },
+            })
+          "
+        />
+      </div>
+
+      <!-- 宫廷珐琅 -->
+      <img
+        src="./images/17-min.png"
+        draggable="false"
+        class="chapter1__title2"
+      />
+      <p class="chapter1__content2">
+        宫廷珐琅是指专为宫廷制作和使用的珐琅制品。以胎体的不同，一般可分为金胎珐琅、铜胎珐琅、瓷胎珐琅、玻璃胎珐琅等。明清两代在宫廷内均设有专门机构进行生产珐琅器。明代是“御用监”；清代为“造办处”，并专门设“珐琅作”生产供皇室使用的金属珐琅器。
+      </p>
+      <div class="chapter1-list2">
+        <Card2
+          title="《乾隆雪景行乐图轴》"
+          author="郎世宁等 （故宫博物院藏）"
+          content="此图描绘乾隆皇帝及皇子等多人在宫苑内观赏雪景的情景。房舍梁柱之间放有两个珐琅熏炉。"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 2 },
+            })
+          "
+        >
+          <template #img>
+            <img class="img1" draggable="false" src="./images/16-min.png" />
+          </template>
+        </Card2>
+
+        <Card2
+          title="《康熙帝万寿图（下卷）》"
+          author="清佚名"
+          content="画中上面中间帐篷桌几上放有一掐丝珐琅香熏。"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 3 },
+            })
+          "
+        >
+          <template #img>
+            <img class="img2" draggable="false" src="./images/15-min.png" />
+          </template>
+        </Card2>
+      </div>
+
+      <div class="chapter1-list3">
+        <Card
+          :detail="data.chapter1[1]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 1 },
+            })
+          "
+        />
+        <Card
+          :detail="data.chapter1[4]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 4 },
+            })
+          "
+        />
+      </div>
+
+      <!-- 扬州珐琅 -->
+      <img
+        src="./images/13-min.png"
+        draggable="false"
+        class="chapter1__title3"
+      />
+
+      <Card2
+        class="chapter1-card1"
+        title="《雍正行乐图册》"
+        author="佚名（故宫博物院藏）"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter1', index: 6 },
+          })
+        "
+      >
+        <template #img>
+          <img class="img3" draggable="false" src="./images/12-min.png" />
+        </template>
+      </Card2>
+
+      <p class="chapter1__content3">
+        扬州地区生产的掐丝珐琅器。清乾隆年间逐渐兴起。器物造型标新立异有天球瓶、桌灯、动物形尊等。图案装饰变化多端,与内廷珐琅作和广州风格截然不同,掐丝技巧娴熟线条匀细流畅。珐琅釉料色彩基调多为冷色对比强烈。
+      </p>
+      <div class="chapter1-list4">
+        <Card
+          :detail="data.chapter1[5]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 5 },
+            })
+          "
+        />
+        <Card
+          :detail="data.chapter1[5]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 5 },
+            })
+          "
+        />
+      </div>
+
+      <!-- 宗教 -->
+      <img
+        src="./images/11-min.png"
+        draggable="false"
+        class="chapter1__title4"
+      />
+
+      <div class="chapter1-list5">
+        <Card
+          :detail="data.chapter1[7]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 7 },
+            })
+          "
+        />
+      </div>
+
+      <!-- 生活 -->
+      <img
+        src="./images/10-min.png"
+        draggable="false"
+        class="chapter1__title5"
+      />
+
+      <div class="chapter1-list6">
+        <Card
+          :detail="data.chapter1[8]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 8 },
+            })
+          "
+        />
+        <Card
+          :detail="data.chapter1[9]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 9 },
+            })
+          "
+        />
+      </div>
+
+      <!-- 掐丝珐琅 -->
+      <img
+        src="./images/8-min.png"
+        draggable="false"
+        class="chapter1__title6"
+      />
+
+      <Swiper
+        class="chapter1-swiper"
+        :modules="[FreeMode, Scrollbar]"
+        :slides-per-view="'auto'"
+        :space-between="50"
+        :free-mode="true"
+        :scrollbar="{ draggable: true }"
+      >
+        <SwiperSlide v-for="(img, index) in LIST" :key="index">
+          <img :src="img" />
+        </SwiperSlide>
+      </Swiper>
+    </div>
+
+    <img
+      src="@/assets/images/ft-min.jpg"
+      draggable="false"
+      class="chapter1__foot"
+    />
+  </div>
+</template>
+
+<script setup>
+import { data } from "@enamel/base";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { FreeMode, Scrollbar } from "swiper/modules";
+import "swiper/swiper-bundle.css";
+import Card from "@/components/Card.vue";
+import Card2 from "@/components/Card2.vue";
+
+import Img1 from "./images/1-min.png";
+import Img2 from "./images/2-min.png";
+import Img3 from "./images/3-min.png";
+import Img4 from "./images/4-min.png";
+import Img5 from "./images/5-min.png";
+import Img6 from "./images/6-min.png";
+import Img7 from "./images/7-min.png";
+
+const LIST = [Img1, Img2, Img3, Img4, Img5, Img6, Img7];
+</script>
+
+<style lang="scss" scoped>
+@use "./index.scss";
+</style>

packages/pc/src/views/Chapter2/index.scss

@@ -0,0 +1,122 @@
+.chapter2 {
+  &__head,
+  &__foot {
+    width: 100%;
+    display: block;
+  }
+  &-main {
+    position: relative;
+    height: calc(160px + 300px + 1130px);
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 951px;
+      height: 52px;
+      background: #c8cfd4;
+    }
+  }
+  &__img1 {
+    position: absolute;
+    top: 125px;
+    left: 179px;
+    width: 728px;
+    height: 319px;
+  }
+  &__content1 {
+    position: absolute;
+    top: 146px;
+    left: 965px;
+    width: 326px;
+  }
+  &-card {
+    position: absolute;
+    top: 121px;
+    right: 139px;
+    width: 400px;
+    cursor: pointer;
+
+    img {
+      display: block;
+      width: 326px;
+      height: 594px;
+    }
+    &__title {
+      position: relative;
+      margin-top: 20px;
+      text-indent: 0;
+
+      span {
+        font-size: 34px;
+      }
+      &::before {
+        content: "";
+        position: absolute;
+        top: 10px;
+        left: -42px;
+        width: 33px;
+        height: 33px;
+        background: url("@/assets/images/14-min.png") no-repeat center / contain;
+      }
+    }
+    &__content {
+      margin-top: 10px;
+      font-size: 20px;
+      color: #7d7d7d;
+      line-height: 34px;
+    }
+  }
+  &-card2 {
+    position: absolute;
+    top: 577px;
+    left: 207px;
+    display: flex;
+    align-items: flex-end;
+    gap: 90px;
+    text-indent: 0;
+    cursor: pointer;
+
+    img {
+      width: 456px;
+      height: 372px;
+    }
+    &__title {
+      position: relative;
+
+      span {
+        font-size: 34px;
+      }
+      &::before {
+        content: "";
+        position: absolute;
+        top: 10px;
+        left: -42px;
+        width: 33px;
+        height: 33px;
+        background: url("@/assets/images/14-min.png") no-repeat center / contain;
+      }
+    }
+    &__content {
+      font-size: 20px;
+      color: #7d7d7d;
+      line-height: 34px;
+    }
+  }
+  &-list {
+    position: absolute;
+    top: 1134px;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    gap: 40px;
+    transform: translateX(-50%);
+
+    > div {
+      width: 331px;
+      height: 229px;
+      background: url("@/assets/images/20-min.png") no-repeat center / contain;
+    }
+  }
+}

packages/pc/src/views/Chapter2/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="chapter2">
+    <img
+      src="@/assets/images/head-min.jpg"
+      draggable="false"
+      class="chapter2__head"
+    />
+
+    <div class="chapter2-main">
+      <img src="./images/1-min.png" draggable="false" class="chapter2__img1" />
+      <p class="chapter2__content1">
+        在明清时期的宫廷和贵族府邸中，珐琅器还被广泛用于室内装饰。无论是作为屏风、壁画还是摆件，珐琅器都能以其独特的色彩和图案为室内空间增添一份华贵与雅致。
+      </p>
+
+      <div
+        class="chapter2-card"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter2', index: 4 },
+          })
+        "
+      >
+        <img src="./images/2-min.png" draggable="false" />
+        <p class="chapter2-card__title">
+          <span>《清雍正十二美人图之捻珠观猫》</span>（故宫博物院藏）
+        </p>
+        <p class="chapter2-card__content">
+          美人手持珊瑚十八子手串，桌面摆放着铜铸方鼎式香薰炉和青田石印章，身后的壶门券口带托泥架钟架上放置着一只紫檀木画珐琅自鸣钟。
+        </p>
+      </div>
+
+      <div
+        class="chapter2-card2"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter2', index: 5 },
+          })
+        "
+      >
+        <img src="./images/3-min.png" draggable="false" />
+        <div>
+          <p class="chapter2-card2__title">
+            <span>《清周慕桥闺中<br />十二景图册》</span>（来源网络）
+          </p>
+          <p class="chapter2-card2__content">墙面上挂有插屏。</p>
+        </div>
+      </div>
+
+      <div class="chapter2-list">
+        <Card
+          v-for="(item, index) in 4"
+          :key="item"
+          :detail="data.chapter2[index]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter2', index: index },
+            })
+          "
+        />
+      </div>
+    </div>
+
+    <img
+      src="@/assets/images/ft-min.jpg"
+      draggable="false"
+      class="chapter2__foot"
+    />
+  </div>
+</template>
+
+<script setup>
+import { data } from "@enamel/base";
+import Card from "@/components/Card.vue";
+</script>
+
+<style lang="scss" scoped>
+@use "./index.scss";
+</style>

packages/pc/src/views/Chapter3/index.scss

@@ -0,0 +1,124 @@
+.chapter3 {
+  &__head,
+  &__foot {
+    width: 100%;
+    display: block;
+  }
+  &-main {
+    position: relative;
+    height: 2860px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 951px;
+      height: 52px;
+      background: #c9ae8e;
+    }
+  }
+  &__img1 {
+    position: absolute;
+    top: 125px;
+    left: 179px;
+    width: 728px;
+    height: 319px;
+  }
+  &__content1 {
+    position: absolute;
+    top: 143px;
+    right: 248px;
+    width: 687px;
+  }
+  &-list {
+    position: absolute;
+    top: 582px;
+    left: 50%;
+    display: flex;
+    gap: 80px;
+    transform: translateX(-50%);
+
+    .img1 {
+      width: 447px;
+      height: 532px;
+    }
+    .img2 {
+      display: block;
+      margin: 0 auto;
+      width: 252px;
+      height: 532px;
+    }
+    .img3 {
+      width: 401px;
+      height: 530px;
+    }
+  }
+  &__title1 {
+    position: absolute;
+    top: 1497px;
+    left: 239px;
+    width: 342px;
+    height: 58px;
+  }
+  &-card {
+    width: 337px !important;
+  }
+  &__content2 {
+    position: absolute;
+    top: 1667px;
+    left: 246px;
+    width: 602px;
+  }
+  &-list2 {
+    position: absolute;
+    top: 1518px;
+    right: 236px;
+    display: flex;
+    gap: 76px;
+    text-indent: 0;
+    font-size: 34px;
+    color: black;
+
+    p {
+      position: relative;
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      gap: 17px;
+      letter-spacing: 6px;
+
+      &::before {
+        content: "";
+        width: 33px;
+        height: 33px;
+        background: url("@/assets/images/14-min.png") no-repeat center / contain;
+      }
+    }
+    div:first-child {
+      img {
+        width: 308px;
+        height: 427px;
+      }
+    }
+    div:last-child {
+      img {
+        width: 374px;
+        height: 427px;
+      }
+    }
+  }
+  &-card2 {
+    position: absolute;
+    top: 1975px;
+    left: 238px;
+  }
+  &-list3 {
+    position: absolute;
+    top: 2399px;
+    left: 238px;
+    display: flex;
+    align-items: flex-start;
+    gap: 46px;
+  }
+}

packages/pc/src/views/Chapter3/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="chapter3">
+    <img
+      src="@/assets/images/head-min.jpg"
+      draggable="false"
+      class="chapter3__head"
+    />
+
+    <div class="chapter3-main">
+      <img src="./images/1-min.png" draggable="false" class="chapter3__img1" />
+      <p class="chapter3__content1">
+        明清时期，珐琅器因制作工艺复杂，釉料配制和烧造技术难度大，生产成本高，故主要是在宫廷中制作，专供皇室享用,民间鲜有流传。明崇祯年间，“景泰御前作坊之珐琅,精巧远迈前古，四方好事者，亦于内市重价购之。”至康雍乾时期，珐琅器更成为帝王挚爱的“内廷秘玩”，是“庶民弗得一窥”的御用品。
+      </p>
+
+      <div class="chapter3-list">
+        <Card2
+          title="《雍正行乐图册》"
+          author="佚名 （故宫博物院藏）"
+          content="某冬日，雍正帝在书房内炭火旁悠然阅读。室内书架及桌面放有珐琅器。"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: 5 },
+            })
+          "
+        >
+          <template #img>
+            <img class="img1" draggable="false" src="./images/2-min.jpg" />
+          </template>
+        </Card2>
+
+        <Card2
+          class="chapter3-card"
+          title="《弘历观画图轴》"
+          author="郎世宁"
+          content="画中乾隆皇帝命人打开画轴，进行品评，其旁边桌上放有珐琅瓷器、哥窑瓷壶、熏炉、青铜钟等，应均是乾隆收藏或仿制的器物。"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: 6 },
+            })
+          "
+        >
+          <template #img>
+            <img class="img2" draggable="false" src="./images/3-min.jpg" />
+          </template>
+        </Card2>
+
+        <Card2
+          title="《月曼清游图册》"
+          author="清陈枚 （故宫博物院藏）"
+          content="画面内容为宫内的妃子们在赏玩收藏的画卷及青铜器。"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: 7 },
+            })
+          "
+        >
+          <template #img>
+            <img class="img3" draggable="false" src="./images/4-min.jpg" />
+          </template>
+        </Card2>
+      </div>
+
+      <img
+        src="./images/7-min.png"
+        draggable="false"
+        class="chapter3__title1"
+      />
+
+      <p class="chapter3__content2">
+        明清时期，依据商周时期青铜器造型、纹饰等，运用掐丝珐琅工艺制作的珐琅器，一般称为仿古珐琅器。清代乾隆年间，下令制作了许多仿古珐琅作品，有鬲（炉）、尊、壶、觥、觚、甗等，这些多源自商周青铜器，并在其基础上进行了创新和发展。
+      </p>
+      <div class="chapter3-list2">
+        <div>
+          <img draggable="false" src="./images/5-min.png" />
+          <p>商周青铜器</p>
+        </div>
+        <div>
+          <img draggable="false" src="./images/6-min.png" />
+          <p>明清珐琅器</p>
+        </div>
+      </div>
+
+      <Card
+        class="chapter3-card2"
+        :detail="data.chapter3[0]"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter3', index: 0 },
+          })
+        "
+      />
+
+      <div class="chapter3-list3">
+        <Card
+          v-for="(item, index) in 4"
+          :key="index"
+          :detail="data.chapter3[index + 1]"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: index + 1 },
+            })
+          "
+        />
+      </div>
+    </div>
+
+    <img
+      src="@/assets/images/ft-min.jpg"
+      draggable="false"
+      class="chapter3__foot"
+    />
+  </div>
+</template>
+
+<script setup>
+import { data } from "@enamel/base";
+import Card from "@/components/Card.vue";
+import Card2 from "@/components/Card2.vue";
+</script>
+
+<style lang="scss" scoped>
+@use "./index.scss";
+</style>