feat: --

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

@@ -5,7 +5,7 @@
   }
   &-main {
     position: relative;
-    height: 5256px;
+    height: 4700px;
 
     &::before {
       content: "";
@@ -112,36 +112,36 @@
   }
   &__title4 {
     position: absolute;
-    top: 3182px;
+    top: 3730px;
     left: 238px;
     width: 142px;
     height: 62px;
   }
   &-list5 {
     position: absolute;
-    top: 3312px;
+    top: 3860px;
     left: 239px;
     display: flex;
     gap: 40px;
   }
   &__title5 {
     position: absolute;
-    top: 3730px;
+    top: 3182px;
     left: 238px;
     width: 142px;
     height: 55px;
   }
   &-list6 {
     position: absolute;
-    top: 3860px;
+    top: 3312px;
     left: 239px;
     display: flex;
     gap: 40px;
   }
   &__title6 {
     position: absolute;
-    top: 4270px;
-    left: 238px;
+    top: 3730px;
+    left: 800px;
     width: 537px;
     height: 59px;
   }
@@ -149,9 +149,9 @@
     --swiper-scrollbar-border-radius: 7px;
     --swiper-scrollbar-drag-bg-color: #cd8b71;
     position: absolute;
-    top: 4390px;
-    left: 233px;
-    right: 233px;
+    top: 3850px;
+    left: 800px;
+    right: 200px;
     cursor: pointer;
 
     :deep(.swiper-wrapper) {

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

@@ -43,7 +43,7 @@
       <div class="chapter1-list2">
         <Card2
           title="《乾隆雪景行乐图轴》"
-          author="郎世宁等 （故宫博物院藏）"
+          author="郎世宁等（故宫博物院藏）"
           content="此图描绘乾隆皇帝及皇子等多人在宫苑内观赏雪景的情景。房舍梁柱之间放有两个珐琅熏炉。"
           @click="
             $router.push({
@@ -59,7 +59,7 @@
 
         <Card2
           title="《康熙帝万寿图（下卷）》"
-          author="清佚名"
+          author="清佚名（故宫博物院藏）"
           content="画中上面中间帐篷桌几上放有一掐丝珐琅香熏。"
           @click="
             $router.push({
@@ -131,34 +131,6 @@
             })
           "
         />
-        <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>
 
       <!-- 生活 -->
@@ -189,6 +161,25 @@
         />
       </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/8-min.png"

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

@@ -15,7 +15,7 @@
       <div class="chapter3-list">
         <Card2
           title="《雍正行乐图册》"
-          author="佚名 （故宫博物院藏）"
+          author="清 佚名 （故宫博物院藏）"
           content="某冬日，雍正帝在书房内炭火旁悠然阅读。室内书架及桌面放有珐琅器。"
           @click="
             $router.push({
@@ -32,7 +32,7 @@
         <Card2
           class="chapter3-card"
           title="《弘历观画图轴》"
-          author="郎世宁"
+          author="清 郎世宁 （故宫博物院藏）"
           content="画中乾隆皇帝命人打开画轴，进行品评，其旁边桌上放有珐琅瓷器、哥窑瓷壶、熏炉、青铜钟等，应均是乾隆收藏或仿制的器物。"
           @click="
             $router.push({
@@ -48,7 +48,7 @@
 
         <Card2
           title="《月曼清游图册》"
-          author="清陈枚 （故宫博物院藏）"
+          author="清 陈枚 （故宫博物院藏）"
           content="画面内容为宫内的妃子们在赏玩收藏的画卷及青铜器。"
           @click="
             $router.push({

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

@@ -43,7 +43,11 @@
       />
 
       <p class="chapter4__content3">
-        清代康熙海禁解除后，东西方交流日渐兴盛，欧洲画珐琅技术也随着传教士传入中国。广州引入欧洲的画珐琅技术，融中西文化与工艺技术于一炉，发展出全新的岭南工艺名品—广珐琅。广珐琅，不仅引发最负盛名广彩的产生及在西方的广为流行，而且对宫廷画珐琅及景德镇釉上彩瓷均产生重要推动作用，在中西文明交流史上占有重要地位。
+        画珐琅是以矿物质的硅、铅丹、硼砂、长石、石英等原料按适当
+        比例混合，分别加入各种呈色的金属氧化物，经焙烧、磨碎，制成粉
+        末状彩料后，依各类画珐琅工艺的要求，绘于不同质地器物胎体上，
+        再经烘烧而成的珐琅制品。依器物胎质不同，可分玻璃胎、瓷胎、紫
+        砂胎、金属胎画珐琅等品种。
       </p>
 
       <p class="chapter4__content4">
@@ -55,7 +59,7 @@
         @click="
           $router.push({
             name: 'detail',
-            params: { chapter: 'chapter4', index: 2 },
+            params: { chapter: 'chapter4', index: 1 },
           })
         "
       >

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

@@ -15,7 +15,7 @@
   &-img {
     position: absolute;
     top: 50%;
-    left: 211px;
+    left: 161px;
     padding: 40px;
     width: 714px;
     height: 715px;
@@ -24,7 +24,8 @@
     text-indent: 0;
     z-index: 1;
 
-    .el-image {
+    .el-image,
+    .el-carousel {
       width: 100%;
       height: 100%;
     }
@@ -33,8 +34,8 @@
     position: absolute;
     top: utils.vh-calc(200);
     padding-right: 20px;
-    right: 148px;
-    width: 700px;
+    right: 110px;
+    width: 800px;
     height: utils.vh-calc(570);
     z-index: 1;
 

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

@@ -6,18 +6,30 @@
       @click="$router.back"
     />
 
-    <div class="detail-img">
+    <div v-if="detail" class="detail-img">
       <ElImage
+        v-if="!Array.isArray(detail.img)"
         fit="contain"
         preview-teleported
-        :src="getEnvImagePath(detail?.img)"
-        :preview-src-list="[getEnvImagePath(detail?.img)]"
+        :src="getEnvImagePath(detail.img)"
+        :preview-src-list="[getEnvImagePath(detail.img)]"
       />
+      <ElCarousel v-else :interval="5000" height="inherit">
+        <ElCarouselItem v-for="(item, index) in detail.img" :key="item">
+          <ElImage
+            fit="contain"
+            preview-teleported
+            :src="getEnvImagePath(item)"
+            :initial-index="index"
+            :preview-src-list="detail.img.map((i) => getEnvImagePath(i))"
+          />
+        </ElCarouselItem>
+      </ElCarousel>
     </div>
 
     <ElScrollbar class="detail-main">
       <h3>{{ detail?.name }}</h3>
-      <p class="size">尺寸：{{ detail?.size }}</p>
+      <p v-if="detail.size" class="size">尺寸：{{ detail?.size }}</p>
       <img class="icon" draggable="false" src="./images/icon-min.png" />
       <div class="content" v-html="detail?.content" />
     </ElScrollbar>

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

@@ -65,6 +65,9 @@
     > div {
       position: relative;
 
+      img {
+        cursor: pointer;
+      }
       &:first-child {
         grid-area: a;
         background: url("./images/11-min.png") no-repeat center / contain;

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

@@ -16,25 +16,88 @@
 
     <div class="chapter1-list">
       <div>
-        <img draggable="false" src="./images/4-min.png" />
+        <img
+          draggable="false"
+          src="./images/4-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 1 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/5-min.png" />
+        <img
+          draggable="false"
+          src="./images/5-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 0 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/6-min.png" />
+        <img
+          draggable="false"
+          src="./images/6-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 4 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/7-min.png" />
+        <img
+          draggable="false"
+          src="./images/7-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 5 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/8-min.png" />
+        <img
+          draggable="false"
+          src="./images/8-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 7 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/9-min.png" />
+        <img
+          draggable="false"
+          src="./images/9-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 9 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/10-min.png" />
+        <img
+          draggable="false"
+          src="./images/10-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter1', index: 8 },
+            })
+          "
+        />
       </div>
     </div>
 

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

@@ -62,6 +62,7 @@
       left: 68px;
       width: 295px;
       height: 349px;
+      cursor: pointer;
     }
   }
   &-list {
@@ -98,6 +99,7 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        cursor: pointer;
       }
       &:nth-child(1) {
         img {

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

@@ -15,18 +15,54 @@
     <img class="chapter2__bg2" draggable="false" src="./images/2-min.png" />
 
     <div class="chapter2__img1">
-      <img draggable="false" src="./images/3-min.png" />
+      <img
+        draggable="false"
+        src="./images/3-min.png"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter2', index: 2 },
+          })
+        "
+      />
     </div>
 
     <div class="chapter2-list">
       <div>
-        <img draggable="false" src="./images/4-min.png" />
+        <img
+          draggable="false"
+          src="./images/4-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter2', index: 0 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/5-min.png" />
+        <img
+          draggable="false"
+          src="./images/5-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter2', index: 1 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/6-min.png" />
+        <img
+          draggable="false"
+          src="./images/6-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter2', index: 3 },
+            })
+          "
+        />
       </div>
     </div>
 

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

@@ -77,6 +77,7 @@
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
+        cursor: pointer;
       }
       &:nth-child(1) {
         background: url("./images/8-min.png") no-repeat center / contain;

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

@@ -22,19 +22,64 @@
 
     <div class="chapter3-list">
       <div>
-        <img draggable="false" src="./images/3-min.png" />
+        <img
+          draggable="false"
+          src="./images/3-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: 1 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/4-min.png" />
+        <img
+          draggable="false"
+          src="./images/4-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: 2 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/5-min.png" />
+        <img
+          draggable="false"
+          src="./images/5-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: 0 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/6-min.png" />
+        <img
+          draggable="false"
+          src="./images/6-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: 4 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/7-min.png" />
+        <img
+          draggable="false"
+          src="./images/7-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter3', index: 3 },
+            })
+          "
+        />
       </div>
     </div>
 

packages/pc/src/views/Home/components/Chapter4/index.scss

@@ -110,6 +110,7 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        cursor: pointer;
       }
       &:nth-child(1) img {
         width: 220px;

packages/pc/src/views/Home/components/Chapter4/index.vue

@@ -32,16 +32,52 @@
 
     <div class="chapter4-list">
       <div>
-        <img draggable="false" src="./images/5-min.png" />
+        <img
+          draggable="false"
+          src="./images/5-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter4', index: 2 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/6-min.png" />
+        <img
+          draggable="false"
+          src="./images/6-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter4', index: 3 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/7-min.png" />
+        <img
+          draggable="false"
+          src="./images/7-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter4', index: 4 },
+            })
+          "
+        />
       </div>
       <div>
-        <img draggable="false" src="./images/8-min.png" />
+        <img
+          draggable="false"
+          src="./images/8-min.png"
+          @click="
+            $router.push({
+              name: 'detail',
+              params: { chapter: 'chapter4', index: 5 },
+            })
+          "
+        />
       </div>
     </div>