完成外观和功能，有待对接正确的数据。

src/App.vue

@@ -55,8 +55,8 @@ export default {
 // }
 
 // 滚动条，注意头两项要同时设置，只写二者中某一项则不会达到目的。
-// ::-webkit-scrollbar { background: #dddecc; width: 6px; height: 6px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 3px; }
+&::-webkit-scrollbar { height: 8px; width: 8px;}
+&::-webkit-scrollbar-thumb { background: #52c1ff; border-radius: 4px; }
 // ::-webkit-scrollbar-corner { background: #dddecc; }
 
 // vue组件过渡效果

src/views/RelicDetail.vue

@@ -25,18 +25,13 @@
         <h1 :title="relicInfo?.title">
           {{ relicInfo?.title }}
         </h1>
-        <h2 class="author">
-          {{ relicInfo.author }}
+        <h2 class="title-en">
+          {{ relicInfo?.subtitle }}
         </h2>
         <h2 class="sub-title">
           {{ relicInfo?.subtitle }}
         </h2>
-        <img
-          class="splitter"
-          src="@/assets/images/splitter.png"
-          alt=""
-          draggable="false"
-        >
+        <div class="splitter" />
         <div
           class="main-body"
           v-html="relicInfo?.content"
@@ -96,16 +91,12 @@ onMounted(() => {
 .relic-detail{
   height: 100%;
   position: relative;
-  background-image: url(@/assets/images/relic-detail-bg.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
   >button.return{
     position: absolute;
-    top: 46px;
-    left: 54px;
-    width: 70px;
-    height: 70px;
+    top: 64px;
+    left: 56px;
+    width: 50px;
+    height: 50px;
     background-image: url(@/assets/images/btn-return.png);
     background-size: contain;
     background-repeat: no-repeat;
@@ -114,8 +105,8 @@ onMounted(() => {
   }
   >.swiper-root{
     width: 100%;
-    height: 63.8%;
-    background: #fff;
+    height: calc(658 / 1080 * 100vh);
+    background: #070707;
     overflow: hidden;
     position: relative;
     >.swiper-button-prev{
@@ -159,21 +150,23 @@ onMounted(() => {
     }
   }
   >.desc{
-    height: 36.2%;
-    padding-bottom: 8vh;
+    overflow: hidden;
+    height: calc((1080 - 658) / 1080 * 100vh);
     position: relative;
+    background-image: url(@/assets/images/relic-detail-bg.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
     >.article{
-      margin-left: auto;
-      margin-right: auto;
+      overflow: hidden;
       height: 100%;
-      width: 1134px;
-      max-width: calc(100% - 210px);
       >h1{
         margin-top: 38px;
         font-size: 32px;
         font-family: Source Han Serif CN-Bold, Source Han Serif CN;
         font-weight: bold;
         color: #48768D;
+        line-height: 28px;
         text-align: center;
         margin-bottom: 10px;
         overflow: hidden;
@@ -192,16 +185,23 @@ onMounted(() => {
         text-align: center;
       }
       >h2.sub-title{
-        margin-bottom: -30px;
+        margin-bottom: 30px;
       }
-      >img.splitter{
-        width: 100%;
-        height: auto;
-        margin-bottom: 10px;
+      >.splitter{
+        width: calc(1672 / 1920 * 100vw);
+        border-top: 1px dashed rgba(41, 67, 99, 1);
+        margin-bottom: 29px;
+        margin-left: auto;
+        margin-right: auto;
       }
       >.main-body{
-        height: calc(100% - 130px);
+        height: calc(100% - 210px);
+        width: 1134px;
+        max-width: 90vw;
+        margin-left: auto;
+        margin-right: auto;
         overflow: auto;
+        padding-right: 6px;
         &:deep(*) {
           font-size: 22px;
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;

src/views/RelicList.vue

@@ -53,9 +53,9 @@
           </h3>
           <div
             class="desc"
-            :title="item.author"
+            :title="item.subtitle"
           >
-            {{ item.author }}
+            {{ item.subtitle }}
           </div>
         </div>
       </li>
@@ -110,50 +110,60 @@ function int2zh(idx) {
   background-image: url(@/assets/images/unit-list-bg.jpg);
   background-size: 100% auto;
   background-repeat: no-repeat repeat;
-  background-position: center center;
+  background-position: center 5%;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
   >button.return{
     position: absolute;
-    top: 46px;
-    left: 54px;
-    width: 70px;
-    height: 70px;
+    top: 64px;
+    left: 56px;
+    width: 50px;
+    height: 50px;
     background-image: url(@/assets/images/btn-return.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
   }
   >.tabbar{
-    padding-left: 110px;
-    padding-right: 40px;
+    padding-top: 15px;
+    padding-left: 55px;
+    padding-right: 55px;
     flex: 0 0 auto;
     max-width: 100%;
     display: flex;
     align-items: center;
-    gap: 93px;
+    gap: 100px;
     overflow: auto;
     &::-webkit-scrollbar { height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
     >button{
-      width: 262px;
+      width: 80px;
       height: 55px;
-      padding-right: 70px;
       position: relative;
       flex: 0 0 auto;
       font-size: 24px;
-      font-family: Source Han Sans CN-Light, Source Han Sans CN;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;
       color: #515151;
       line-height: 28px;
     }
     >button.active{
-      color: #fff;
-      background-image: url(@/assets/images/tab-deco.png);
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center center;
+      color: #52C1FF;
+      &::after{
+        position: absolute;
+        top: 40%;
+        right: -50px;
+        transform: translateY(-50%);
+        display: inline-block;
+        content: '';
+        width: 127px;
+        height: 63px;
+        background-image: url(@/assets/images/tab-deco.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
     }
   }
   // >.splitter{
@@ -166,18 +176,16 @@ function int2zh(idx) {
     width: 100%;
     display: flex;
     align-items: center;
-    gap: 45px;
+    gap: 30px;
     overflow: auto;
-    padding-bottom: 40px;
+    padding-bottom: 10px;
     padding-left: 70px;
     padding-right: 70px;
-    &::-webkit-scrollbar { height: 8px;}
-    &::-webkit-scrollbar-thumb { background: rgba(138, 168, 204, 1); border-radius: 4px; }
     >li{
       font-size: 0;
       flex: 0 0 auto;
-      width: 473px;
-      height: 642px;
+      width: 469px;
+      height: 713px;
       cursor: pointer;
       background-image: url(@/assets/images/relic-item-bg.png);
       background-size: 100% 100%;
@@ -185,11 +193,11 @@ function int2zh(idx) {
       background-position: center center;
       display: flex;
       flex-direction: column;
-      justify-content: space-evenly;
       align-items: center;
       >img{
-        width: 418px;
-        height: 514px;
+        margin-top: 25px;
+        width: 424px;
+        height: 631px;
         object-fit: cover;
       }
       >.not-img{
@@ -200,33 +208,30 @@ function int2zh(idx) {
         flex-direction: column;
         align-items: center;
         >h3{
-          font-size: 24px;
+          font-size: 22px;
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;
           color: #000000;
-          line-height: 28px;
           overflow: hidden;
           white-space: pre;
           text-overflow: ellipsis;
+          line-height: 1.2;
         }
         >.desc{
           overflow: hidden;
           white-space: pre;
           text-overflow: ellipsis;
           overflow: hidden;
-          font-size: 24px;
+          font-size: 18px;
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;
           color: rgba(0, 0, 0, 0.5);
-          line-height: 28px;
         }
       }
       &:hover{
-        box-shadow: 6px 6px 14px 0px rgba(57,106,168,0.25);
         >img{
         }
         >.not-img{
-          background-color: #fff;
           >h3{
           }
           >.desc{

src/views/UnitList.vue

@@ -28,9 +28,7 @@
             class="normal-txt"
             v-html="item.info"
           />
-          <button class="detail-entry">
-            作品鉴赏
-          </button>
+          <button class="detail-entry" />
         </li>
       </ul>
       <dit class="conclusion">
@@ -75,34 +73,34 @@ export default {
 .unit-list{
   height: 100%;
   position: relative;
-  background-image: url(@/assets/images/unit-list-bg.jpg);
-  background-size: 100% auto;
-  background-repeat: no-repeat repeat;
   overflow: auto;
   &::-webkit-scrollbar { width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-  h3{
-    font-size: 30px;
-    font-family: Source Han Sans CN-Light, Source Han Sans CN;
-    font-weight: 400;
-    color: #fff;
-  }
+  // h3{
+  //   font-size: 30px;
+  //   font-family: Source Han Sans CN-Light, Source Han Sans CN;
+  //   font-weight: 400;
+  //   color: #fff;
+  // }
   .normal-txt, :deep(p){
-    font-size: 16px;
+    font-size: 14px;
     font-family: Source Han Sans CN-Light, Source Han Sans CN;
     font-weight: 300;
-    line-height: 28px;
-    width: 1055px;
+    line-height: 25px;
+    width: 1326px;
     text-indent: 2em;
   }
   >main{
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 66px;
-    padding-bottom: 66px;
+    padding-top: 47px;
+    padding-bottom: 47px;
+    background-image: url(@/assets/images/unit-list-bg.jpg);
+    background-size: 100% auto;
+    background-repeat: no-repeat repeat;
     >.foreword-wrap{
-      width: 1355px;
-      height: 406px;
+      width: 1564px;
+      height: 483px;
       background-image: url(@/assets/images/foreword-bg.png);
       background-size: contain;
       background-repeat: no-repeat;
@@ -115,10 +113,13 @@ export default {
       //   margin-bottom: 32px;
       // }
       >div.foreword{
-        margin-top: 145px;
+        margin-top: 155px;
+        width: 1310px;
         .normal-txt, :deep(p){
+          text-align: center;
+          text-indent: initial;
+          color: #576030;
           text-indent: initial;
-          color: #233953;
         }
       }
     }
@@ -127,10 +128,8 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
-        cursor: pointer;
-        margin-bottom: 10px;
-        width: 1355px;
-        height: 406px;
+        width: 1564px;
+        height: 369px;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
@@ -141,47 +140,62 @@ export default {
         //   margin-bottom: 32px;
         // }
         >.normal-txt{
+          margin-top: 155px;
+          width: 1326px;
         }
         >button.detail-entry{
           position: absolute;
-          width: 186px;
-          height: 43px;
-          border-radius: 5px 5px 5px 5px;
-          bottom: 30px;
-          font-size: 20px;
-          font-family: Source Han Serif CN-Bold, Source Han Serif CN;
-          color: #fff;
-          line-height: 28px;
+          width: 216px;
+          height: 66px;
+          bottom: 60px;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center center;
         }
       }
       >li:nth-of-type(1){
         background-image: url(@/assets/images/unit-1-bg.png);
         >.normal-txt{
-          margin-top: 168px;
-          color: #6C4144;
+          color: #233953;
         }
         >button.detail-entry{
-          background: #FE9B99;
+          background-image: url(@/assets/images/btn-unit-entry-1.png);
         }
       }
       >li:nth-of-type(2){
         background-image: url(@/assets/images/unit-2-bg.png);
         >.normal-txt{
-          margin-top: 187px;
-          color: #256868;
+          color: #215430;
         }
         >button.detail-entry{
-          background: #69BE99;
+          background-image: url(@/assets/images/btn-unit-entry-2.png);
         }
       }
       >li:nth-of-type(3){
         background-image: url(@/assets/images/unit-3-bg.png);
         >.normal-txt{
-          margin-top: 181px;
-          color: #725E2C;
+          color: #533D23;
+        }
+        >button.detail-entry{
+          background-image: url(@/assets/images/btn-unit-entry-3.png);
+        }
+      }
+      >li:nth-of-type(4){
+        background-image: url(@/assets/images/unit-4-bg.png);
+        >.normal-txt{
+          color: #233953;
+        }
+        >button.detail-entry{
+          background-image: url(@/assets/images/btn-unit-entry-4.png);
+        }
+      }
+      >li:nth-of-type(5){
+        background-image: url(@/assets/images/unit-5-bg.png);
+        >.normal-txt{
+          color: #525323;
         }
         >button.detail-entry{
-          background: #FEBE5C;
+          background-image: url(@/assets/images/btn-unit-entry-5.png);
         }
       }
     }
@@ -189,8 +203,8 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 1355px;
-      height: 406px;
+      width: 1564px;
+      height: 318px;
       background-image: url(@/assets/images/conclusion.png);
       background-size: contain;
       background-repeat: no-repeat;
@@ -200,8 +214,9 @@ export default {
       //   margin-bottom: 32px;
       // }
       >div{
-        margin-top: 187px;
-        color: #6C4144;
+        margin-top: 155px;
+        color: #533D23;
+        width: 1310px;
       }
     }
   }