搞完

src/App.vue

@@ -42,14 +42,14 @@ export default {
 // }
 
 // 字体
-@font-face {
-  font-family: 'KingHwa_OldSong-Regular';
-  src: url('@/assets/jinghua-old-song.ttf');
-}
 // @font-face {
-//   font-family: 'Source Han Serif CN-Bold';
-//   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
+//   font-family: 'KingHwa_OldSong-Regular';
+//   src: url('@/assets/jinghua-old-song.ttf');
 // }
+@font-face {
+  font-family: 'Source Han Serif CN-Bold';
+  src: url('@/assets/SourceHanSerifCN-Bold.otf');
+}
 // i {
 //   font-style: italic;
 // }

src/views/Home.vue

@@ -11,14 +11,14 @@
       class="wrap"
     >
       <img
-        src="@/assets/images/home-title-1.png"
+        src="@/assets/images/home-title.png"
         alt=""
         class="title"
         draggable="false"
       >
       <img
         class="title-en"
-        src="@/assets/images/home-title-en-1.png"
+        src="@/assets/images/home-title-en.png"
         alt=""
         draggable="false"
       >
@@ -63,9 +63,9 @@ export default {
   position: relative;
   >.logo{
     position: absolute;
-    top: 35px;
-    left: 38px;
-    width: 364px;
+    top: 50px;
+    left: 68px;
+    width: 254px;
     z-index: 3;
   }
   >.wrap{
@@ -80,22 +80,23 @@ export default {
     background-position: center center;
     >.title{
       position: absolute;
-      top: calc(106 / 1080 * 100vh);
-      right: 122px;
-      height: calc(814 / 1080 * 100vh);
+      top: calc(169 / 1080 * 100vh);
+      left: 167px;
+      height: calc(469 / 1080 * 100vh);
     }
     >.title-en{
       position: absolute;
-      left: 92px;
-      bottom: 93px;
-      height: calc(372 / 1080 * 100vh);
+      bottom: calc(82/ 1080 * 100vh);
+      left: 68px;
+      height: calc(324 / 1080 * 100vh);
     }
     >button.begin{
       position: absolute;
-      bottom: 39px;
-      right: calc(837 / 1920 * 100vw);
-      width: 129px;
-      height: 129px;
+      bottom: 60px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 167px;
+      height: 167px;
       background-image: url(@/assets/images/btn-start.png);
       background-size: cover;
       background-repeat: no-repeat;

src/views/RelicDetail.vue

@@ -25,9 +25,18 @@
         <h1 :title="relicInfo?.title">
           {{ relicInfo?.title }}
         </h1>
+        <h2 class="author">
+          {{ relicInfo.author }}
+        </h2>
         <h2 class="sub-title">
           {{ relicInfo?.subtitle }}
         </h2>
+        <img
+          class="splitter"
+          src="@/assets/images/splitter.png"
+          alt=""
+          draggable="false"
+        >
         <div
           class="main-body"
           v-html="relicInfo?.content"
@@ -87,16 +96,16 @@ onMounted(() => {
 .relic-detail{
   height: 100%;
   position: relative;
-  background-image: url(@/assets/images/relic-list-bg.jpg);
+  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: 40px;
-    left: 53px;
-    width: 92px;
-    height: 92px;
+    top: 46px;
+    left: 54px;
+    width: 70px;
+    height: 70px;
     background-image: url(@/assets/images/btn-return.png);
     background-size: contain;
     background-repeat: no-repeat;
@@ -166,7 +175,7 @@ onMounted(() => {
         font-weight: bold;
         color: #48768D;
         text-align: center;
-        margin-bottom: 20px;
+        margin-bottom: 10px;
         overflow: hidden;
         white-space: pre;
         text-overflow: ellipsis;
@@ -176,9 +185,20 @@ onMounted(() => {
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
         color: #48768D;
-        margin-bottom: 35px;
+        line-height: 28px;
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
         text-align: center;
       }
+      >h2.sub-title{
+        margin-bottom: -30px;
+      }
+      >img.splitter{
+        width: 100%;
+        height: auto;
+        margin-bottom: 10px;
+      }
       >.main-body{
         height: calc(100% - 130px);
         overflow: auto;
@@ -188,6 +208,8 @@ onMounted(() => {
           font-weight: 400;
           color: #48768D;
           line-height: 26px;
+          opacity: 0.5;
+          text-indent: 2em;
         }
       }
     }

src/views/RelicList.vue

@@ -24,7 +24,7 @@
         {{ int2zh(idx + 1) }} {{ item.label }}
       </button>
     </div>
-    <div class="splitter" />
+    <!-- <div class="splitter" /> -->
     <ul
       ref="relicListEl"
       class="relic-ul"
@@ -53,9 +53,9 @@
           </h3>
           <div
             class="desc"
-            :title="item.subtitle"
+            :title="item.author"
           >
-            {{ item.subtitle }}
+            {{ item.author }}
           </div>
         </div>
       </li>
@@ -107,9 +107,9 @@ function int2zh(idx) {
 .relic-list{
   height: 100%;
   position: relative;
-  background-image: url(@/assets/images/relic-list-bg.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
+  background-image: url(@/assets/images/unit-list-bg.jpg);
+  background-size: 100% auto;
+  background-repeat: no-repeat repeat;
   background-position: center center;
   display: flex;
   flex-direction: column;
@@ -117,10 +117,10 @@ function int2zh(idx) {
   align-items: center;
   >button.return{
     position: absolute;
-    top: 40px;
-    left: 53px;
-    width: 92px;
-    height: 92px;
+    top: 46px;
+    left: 54px;
+    width: 70px;
+    height: 70px;
     background-image: url(@/assets/images/btn-return.png);
     background-size: contain;
     background-repeat: no-repeat;
@@ -128,7 +128,7 @@ function int2zh(idx) {
   }
   >.tabbar{
     padding-left: 110px;
-    padding-right: 110px;
+    padding-right: 40px;
     flex: 0 0 auto;
     max-width: 100%;
     display: flex;
@@ -136,103 +136,88 @@ function int2zh(idx) {
     gap: 93px;
     overflow: auto;
     &::-webkit-scrollbar { height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-
     >button{
-
+      width: 262px;
+      height: 55px;
+      padding-right: 70px;
       position: relative;
       flex: 0 0 auto;
       font-size: 24px;
-      font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
-      color: #48768D;
+      color: #515151;
       line-height: 28px;
     }
     >button.active{
-      &::before{
-        content: '';
-        display: inline-block;
-        position: absolute;
-        left: -6px;
-        top: 50%;
-        transform: translate(-100%, -60%);
-        width: 50px;
-        height: 18px;
-        background-image: url(@/assets/images/tab-deco-left.png);
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center center;
-      }
-      &::after{
-        content: '';
-        display: inline-block;
-        position: absolute;
-        right: -6px;
-        top: 50%;
-        transform: translate(100%, -60%);
-        width: 50px;
-        height: 18px;
-        background-image: url(@/assets/images/tab-deco-right.png);
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center center;
-      }
+      color: #fff;
+      background-image: url(@/assets/images/tab-deco.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
     }
   }
-  >.splitter{
-    display: initial;
-    width: calc(1794 / 1920 * 100vw);
-    height: 0;
-    border-top: 1px dashed rgba(72, 118, 141, 1);
-  }
+  // >.splitter{
+  //   display: initial;
+  //   width: calc(1794 / 1920 * 100vw);
+  //   height: 0;
+  //   border-top: 1px dashed rgba(72, 118, 141, 1);
+  // }
   >ul.relic-ul{
     width: 100%;
     display: flex;
     align-items: center;
-    gap: 70px;
+    gap: 45px;
     overflow: auto;
     padding-bottom: 40px;
-    padding-left: 95px;
-    padding-right: 95px;
+    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: 63.17vh;
+      height: 642px;
       cursor: pointer;
+      background-image: url(@/assets/images/relic-item-bg.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
       >img{
-        width: 100%;
-        height: calc(100% - 141px);
+        width: 418px;
+        height: 514px;
         object-fit: cover;
-        background-color: #fff;
-        object-fit: contain;
       }
       >.not-img{
-        height: 141px;
         overflow: hidden;
-        padding-left: 10px;
-        padding-right: 10px;
+        white-space: pre;
+        text-overflow: ellipsis;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         >h3{
-          font-size: 32px;
-          font-family: Source Han Serif CN-Bold, Source Han Serif CN;
-          font-weight: bold;
-          color: #48768D;
+          font-size: 24px;
+          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;
-          margin-top: 28px;
-          margin-bottom: 20px;
         }
         >.desc{
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
           overflow: hidden;
-          font-size: 20px;
+          white-space: pre;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          font-size: 24px;
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;
-          color: #48768D;
+          color: rgba(0, 0, 0, 0.5);
           line-height: 28px;
         }
       }

src/views/UnitList.vue

@@ -4,9 +4,9 @@
   >
     <main>
       <div class="foreword-wrap">
-        <h3 class="foreword">
+        <!-- <h3 class="foreword">
           前言
-        </h3>
+        </h3> -->
         <div
           class="foreword normal-txt"
           v-html="data?.preface"
@@ -23,26 +23,20 @@
             },
           })"
         >
-          <h3>第{{ int2zh(idx + 1) }}部分 {{ item.label }}</h3>
+          <!-- <h3>第{{ int2zh(idx + 1) }}部分 {{ item.label }}</h3> -->
           <div
             class="normal-txt"
             v-html="item.info"
           />
           <button class="detail-entry">
-            藏品鉴赏
-            <img
-              class="arrow"
-              :src="require(`@/assets/images/entry-arrow.png`)"
-              alt=""
-              draggable="false"
-            >
+            作品鉴赏
           </button>
         </li>
       </ul>
       <dit class="conclusion">
-        <h3>
+        <!-- <h3>
           结语
-        </h3>
+        </h3> -->
         <div
           class="normal-txt"
           v-html="data?.epilogue"
@@ -88,110 +82,106 @@ export default {
   &::-webkit-scrollbar { width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
   h3{
     font-size: 30px;
-    font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
+    font-family: Source Han Sans CN-Light, Source Han Sans CN;
     font-weight: 400;
-    color: #404036;
+    color: #fff;
   }
   .normal-txt, :deep(p){
     font-size: 16px;
-    font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
-    font-weight: 400;
-    color: #404036;
+    font-family: Source Han Sans CN-Light, Source Han Sans CN;
+    font-weight: 300;
     line-height: 28px;
-    width: 73.6vw;
+    width: 1055px;
     text-indent: 2em;
   }
   >main{
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-left: calc(140 / 1920 * 100vw);
-    padding-right: calc(152 / 1920 * 100vw);
+    padding-top: 66px;
+    padding-bottom: 66px;
     >.foreword-wrap{
+      width: 1355px;
+      height: 406px;
+      background-image: url(@/assets/images/foreword-bg.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 100%;
-      >h3.foreword{
-        margin-top: 46px;
-        margin-bottom: 32px;
-      }
+      // >h3.foreword{
+      //   margin-top: 46px;
+      //   margin-bottom: 32px;
+      // }
       >div.foreword{
-        margin-bottom: 90px;
+        margin-top: 145px;
+        .normal-txt, :deep(p){
+          text-indent: initial;
+          color: #233953;
+        }
       }
     }
     >ul{
-      width: 100%;
       >li{
         display: flex;
         flex-direction: column;
         align-items: center;
         cursor: pointer;
         margin-bottom: 10px;
-        width: 100%;
-        &:hover{
-          background-color: rgba(57, 106, 168, 0.55);
-          >h3{
-            &::before{
-              content: '';
-              display: inline-block;
-              position: absolute;
-              left: -23px;
-              top: 50%;
-              transform: translate(-100%, -70%);
-              width: 78px;
-              height: 28px;
-              background-image: url(@/assets/images/title-deco-left.png);
-              background-size: contain;
-              background-repeat: no-repeat;
-              background-position: center center;
-            }
-            &::after{
-              content: '';
-              display: inline-block;
-              position: absolute;
-              right: -23px;
-              top: 50%;
-              transform: translate(100%, -70%);
-              width: 78px;
-              height: 28px;
-              background-image: url(@/assets/images/title-deco-right.png);
-              background-size: contain;
-              background-repeat: no-repeat;
-              background-position: center center;
-            }
-          }
-          >.normal-txt{
-            margin-bottom: 33px;
-          }
-          >button.detail-entry{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            >img.arrow{
-              margin-left: 9px;
-            }
-          }
-        }
-        >h3{
-          position: relative;
-          margin-top: 42px;
-          margin-bottom: 32px;
-        }
+        width: 1355px;
+        height: 406px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        position: relative;
+        // >h3{
+        //   position: relative;
+        //   margin-top: 42px;
+        //   margin-bottom: 32px;
+        // }
         >.normal-txt{
-          margin-bottom: 99px;
         }
         >button.detail-entry{
-          display: none;
-          width: 209px;
-          height: 48px;
-          margin-bottom: 18px;
+          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;
-          font-weight: bold;
           color: #fff;
           line-height: 28px;
-          border: 1px dotted #fff;
+        }
+      }
+      >li:nth-of-type(1){
+        background-image: url(@/assets/images/unit-1-bg.png);
+        >.normal-txt{
+          margin-top: 168px;
+          color: #6C4144;
+        }
+        >button.detail-entry{
+          background: #FE9B99;
+        }
+      }
+      >li:nth-of-type(2){
+        background-image: url(@/assets/images/unit-2-bg.png);
+        >.normal-txt{
+          margin-top: 187px;
+          color: #256868;
+        }
+        >button.detail-entry{
+          background: #69BE99;
+        }
+      }
+      >li:nth-of-type(3){
+        background-image: url(@/assets/images/unit-3-bg.png);
+        >.normal-txt{
+          margin-top: 181px;
+          color: #725E2C;
+        }
+        >button.detail-entry{
+          background: #FEBE5C;
         }
       }
     }
@@ -199,13 +189,19 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 100%;
-      >h3{
-        margin-top: 46px;
-        margin-bottom: 32px;
-      }
+      width: 1355px;
+      height: 406px;
+      background-image: url(@/assets/images/conclusion.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      // >h3{
+      //   margin-top: 46px;
+      //   margin-bottom: 32px;
+      // }
       >div{
-        margin-bottom: 90px;
+        margin-top: 187px;
+        color: #6C4144;
       }
     }
   }