石碑展改版；改方案：不同的展用不同的代码分支开发。

src/App.vue

@@ -7,18 +7,17 @@ import { mapMutations } from "vuex"
 // import { onClickOutside } from '@vueuse/core'
 export default {
   inject: ['$uaInfo', '$env'],
-  methods: {
-    ...mapMutations([
-      'setData',
-    ])
-  },
   mounted() {
-    const query = new URLSearchParams(location.href.split('?')[1])
-    api.getData(query.get('themeIdx')).then((res) => {
+    api.getData().then((res) => {
       console.log('res: ', res)
       this.setData(res)
     })
   },
+  methods: {
+    ...mapMutations([
+      'setData',
+    ])
+  },
 }
 </script>
 

src/api.js

@@ -14,21 +14,10 @@ import axios from "axios"
 // })
 
 export default {
-  getData(idx) {
-    let url = 'https://houseoss.4dkankan.com/project/yzdyh-h5/'
-    switch (idx) {
-    case '0': // 石碑
-      url += 'monument/monumentData.json'
-      break
-    case '1': // 舟辑
-      url += 'book-fair/bookFairData.json'
-      break
-    default:
-      break
-    }
+  getData() {
     return axios({
       method: 'get',
-      url,
+      url: 'https://houseoss.4dkankan.com/project/yzdyh-h5/monument/monumentData.json',
       headers: {
         "Content-Type": "application/json",
       },

src/views/Home.vue

@@ -8,8 +8,7 @@
       class="logo"
     >
     <div
-      v-if="$route.query.themeIdx === '0'"
-      class="theme-0"
+      class="worthless"
     >
       <img
         src="@/assets/images/home-title.jpg"
@@ -22,27 +21,6 @@
         @click="onClickBegin"
       />
     </div>
-    <div
-      v-if="$route.query.themeIdx === '1'"
-      class="theme-1"
-    >
-      <img
-        src="@/assets/images/home-title-1.png"
-        alt=""
-        class="title"
-        draggable="false"
-      >
-      <img
-        class="title-en"
-        src="@/assets/images/home-title-en-1.png"
-        alt=""
-        draggable="false"
-      >
-      <button
-        class="begin"
-        @click="onClickBegin"
-      />
-    </div>
   </div>
 </template>
 
@@ -66,9 +44,6 @@ export default {
     onClickBegin() {
       this.$router.push({
         name: 'UnitList',
-        query: {
-          themeIdx: this.$route.query.themeIdx,
-        }
       })
     }
   },
@@ -87,7 +62,7 @@ export default {
     width: 364px;
     z-index: 3;
   }
-  >.theme-0{
+  >.worthless{
     position: absolute;
     left: 0;
     top: 0;
@@ -117,39 +92,5 @@ export default {
       background-position: center center;
     }
   }
-  >.theme-1{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url(@/assets/images/home-bg-1.jpg);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    >.title{
-      position: absolute;
-      top: calc(106 / 1080 * 100vh);
-      right: 122px;
-      height: calc(814 / 1080 * 100vh);
-    }
-    >.title-en{
-      position: absolute;
-      left: 92px;
-      bottom: 93px;
-      height: calc(372 / 1080 * 100vh);
-    }
-    >button.begin{
-      position: absolute;
-      bottom: 39px;
-      left: calc(837 / 1920 * 100vw);
-      width: 129px;
-      height: 129px;
-      background-image: url(@/assets/images/btn_start-1.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
-    }
-  }
 }
 </style>

src/views/RelicList.vue

@@ -1,15 +1,11 @@
 <template>
   <div
     class="relic-list"
-    :class="[`type-${$route.query.themeIdx}`]"
   >
     <button
       class="return"
       @click="router.push({
         name: 'UnitList',
-        query: {
-          themeIdx: route.query.themeIdx,
-        }
       })"
     />
     <div
@@ -40,7 +36,6 @@
         @click="router.push({
           name:'RelicDetail',
           query: {
-            themeIdx: route.query.themeIdx,
             unitIdx: route.query.unitIdx,
             relicIdx: idx,
           }
@@ -96,7 +91,6 @@ function onClickTabItem(idx) {
   router.push({
     name: route.name,
     query: {
-      themeIdx: route.query.themeIdx,
       unitIdx: idx,
     }
   })
@@ -211,90 +205,4 @@ function onClickTabItem(idx) {
     }
   }
 }
-
-.relic-list.type-1{
-  background-image: url(@/assets/images/relic-list-bg-1.jpg);
-  >button.return{
-    width: 92px;
-    height: 92px;
-    background-image: url(@/assets/images/btn-return-1.png);
-  }
-  >.tabbar{
-    gap: 50px;
-    &::-webkit-scrollbar {} /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-    >button{
-      flex: 0 0 auto;
-      width: 180px;
-      height: 70px;
-      background-image: url(@/assets/images/tab-item-normal.png);
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center center;
-      color: #48768D;
-    }
-    >button.active{
-      background-image: url(@/assets/images/tab-item-active.png);
-    }
-  }
-  >.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;
-    overflow: auto;
-    padding-bottom: 40px;
-    padding-left: 95px;
-    padding-right: 95px;
-    &::-webkit-scrollbar { height: 8px;}
-    &::-webkit-scrollbar-thumb { background: rgba(186, 172, 153, 1); border-radius: 4px; }
-    >li{
-      flex: 0 0 auto;
-      width: 473px;
-      height: 63.17vh;
-      cursor: pointer;
-      &:hover{
-        box-shadow: 6px 6px 10px 0px rgba(65,42,18,0.75);
-      }
-      >img{
-        width: 100%;
-        height: calc(100% - 141px);
-        object-fit: cover;
-      }
-      >.not-img{
-        height: 141px;
-        overflow: hidden;
-        padding-left: 10px;
-        padding-right: 10px;
-        >h3{
-          font-size: 32px;
-          font-family: Source Han Serif CN-Bold, Source Han Serif CN;
-          font-weight: bold;
-          color: #404036;
-          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;
-          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-          font-weight: 400;
-          color: #404036;
-          line-height: 28px;
-        }
-      }
-    }
-  }
-}
 </style>

src/views/UnitList.vue

@@ -1,44 +1,60 @@
 <template>
   <div
     class="unit-list"
-    :class="[`type-${$route.query.themeIdx}`]"
   >
     <main>
-      <h3 class="foreword">
-        前言
-      </h3>
-      <div
-        class="foreword normal-txt"
-        v-html="data?.preface"
-      />
+      <div class="foreword-area">
+        <h3 class="foreword">
+          前言
+        </h3>
+        <div
+          class="foreword normal-txt"
+          v-html="data?.preface"
+        />
+      </div>
       <ul>
         <li
           v-for="(item, idx) in data?.list"
           :key="item.id"
-          @click="$router.push({
-            name: 'RelicList',
-            query: {
-              unitIdx: idx,
-              themeIdx: $route.query.themeIdx,
-            },
-          })"
         >
-          <h3>第{{ int2zh(idx + 1) }}部分{{ item.label }}</h3>
+          <h3>
+            <span>{{ item.label }}</span>
+            <img
+              class="deco"
+              :src="require(`@/assets/images/title-deco-${idx + 1}.png`)"
+              alt=""
+              draggable="false"
+            >
+          </h3>
+          <div class="splitter">
+            <div class="deco" />
+          </div>
           <div
             class="normal-txt"
             v-html="item.info"
           />
-          <button class="detail-entry">
+          <button
+            class="detail-entry"
+            @click="$router.push({
+              name: 'RelicList',
+              query: {
+                unitIdx: idx,
+              },
+            })"
+          >
             藏品鉴赏
-            <img
-              class="arrow"
-              :src="require(`@/assets/images/entry-arrow-${$route.query.themeIdx}.png`)"
-              alt=""
-              draggable="false"
-            >
           </button>
         </li>
       </ul>
+      <div class="conclusion">
+        <h3>
+          结语
+        </h3>
+        <div
+          class="normal-txt"
+          v-html="data?.epilogue"
+        />
+      </div>
     </main>
   </div>
 </template>
@@ -73,22 +89,21 @@ export default {
   height: 100%;
   position: relative;
   background-image: url(@/assets/images/unit-list-bg.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-repeat: no-repeat repoeat;
   background-position: center center;
   overflow: auto;
   &::-webkit-scrollbar { width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
   h3{
+    color: #fff;
     font-size: 30px;
     font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
     font-weight: 400;
-    color: #404036;
   }
   .normal-txt, :deep(p){
     font-size: 16px;
     font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
     font-weight: 400;
-    color: #404036;
     line-height: 28px;
     width: 73.6vw;
     text-indent: 2em;
@@ -97,64 +112,77 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    >h3.foreword{
-      margin-top: 46px;
-      margin-bottom: 32px;
-    }
-    >div.foreword{
-      margin-bottom: 90px;
+    width: calc(1640 / 1920 * 100vw);
+    margin-left: auto;
+    margin-right: auto;
+    div.foreword-area{
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-image: url(@/assets/images/foreword-bg-0.jpg);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      >h3.foreword{
+        margin-top: 69px;
+        margin-bottom: 32px;
+      }
+      >div.foreword{
+        margin-bottom: 55px;
+        color: #fff;
+      }
     }
     >ul{
+      margin-top: 32px;
       >li{
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 76.4vw;
-        cursor: pointer;
-        margin-bottom: 10px;
-        &:hover{
-          box-shadow: 3px 6px 19px 0px rgba(61, 34, 3, 0.2);
-          >h3{
-            &::before{
-              content: '';
-              display: inline-block;
-              position: absolute;
-              left: -12px;
-              top: 50%;
-              transform: translate(-100%, -50%);
-              width: 38px;
-              height: 38px;
-              background-image: url(@/assets/images/title-deco.png);
-              background-size: contain;
-              background-repeat: no-repeat;
-              background-position: center center;
-            }
-          }
-          >.normal-txt{
-            margin-bottom: 33px;
+        margin-bottom: 32px;
+        >h3{
+          position: relative;
+          margin-top: 60px;
+          margin-bottom: 22px;
+          >span{
+            position: relative;
+            z-index: 1;
           }
-          >button.detail-entry{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            >img.arrow{
-              margin-left: 9px;
-            }
+          >img.deco{
+            position: absolute;
+            left: 50%;
+            top: 30%;
+            transform: translate(-50%, -50%);
+            width: 200%;
+            z-index: 0;
           }
         }
-        >h3{
+        >.splitter{
+          width: calc(1398 / 1455 * 100%);
+          margin-left: auto;
+          margin-right: auto;
+          background-color: red;
+          margin-bottom: 40px;
           position: relative;
-          margin-top: 42px;
-          margin-bottom: 32px;
+          >.deco{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%) rotate(45deg);
+            width: 9px;
+            height: 9px;
+          }
         }
         >.normal-txt{
-          margin-bottom: 99px;
+          margin-bottom: 25px;
         }
         >button.detail-entry{
-          display: none;
-          width: 209px;
-          height: 48px;
-          background-image: url(@/assets/images/relic-list-page-entry-button-deco.png);
+          cursor: pointer;
+          position: relative;
+          left: 3px;
+          width: 175px;
+          height: 51px;
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center center;
@@ -164,80 +192,89 @@ export default {
           font-weight: bold;
           color: #7F0007;
           line-height: 28px;
+          padding-right: 6px;
+          padding-bottom: 6px;
         }
       }
-    }
-  }
-}
-
-.unit-list.type-1{
-  background-image: url(@/assets/images/unit-list-bg-1.jpg);
-  &::-webkit-scrollbar { width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-  h3{
-  }
-  p{
-  }
-  >main{
-    >h3.foreword{
-    }
-    .normal-txt, :deep(p){
-    }
-    >ul{
-      >li{
-        &: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-1.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-1.png);
-              background-size: contain;
-              background-repeat: no-repeat;
-              background-position: center center;
-            }
+      >li:nth-of-type(1){
+        box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);
+        >.normal-txt{
+          color: #9A8660;
+        }
+        >.splitter{
+          border-top: 1px solid rgba(162, 143, 108, 1);
+          >.deco{
+            border: 1px solid rgba(162, 143, 108, 1);
           }
-          >.normal-txt{
+        }
+        >button.detail-entry{
+          background-image: url(@/assets/images/unit-entry-btn-bg-1.png);
+        }
+      }
+      >li:nth-of-type(2){
+        background: linear-gradient(180deg, rgba(100, 102, 103, 0.8) 0%, rgba(100,102,103,0.39) 74%, rgba(100,102,103,0) 100%);
+        >.normal-txt{
+          color: #fff;
+        }
+        >.splitter{
+          border-top: 1px solid rgba(255, 255, 255, 1);
+          >.deco{
+            border: 1px solid rgba(255, 255, 255, 1);
           }
-          >button.detail-entry{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            >img.arrow{
-            }
+        }
+        >button.detail-entry{
+          background-image: url(@/assets/images/unit-entry-btn-bg-2.png);
+        }
+      }
+      >li:nth-of-type(3){
+        background: linear-gradient(180deg, rgba(96,76,63,0.5) 0%, rgba(96,76,63,0.37) 70%, rgba(96,76,63,0) 100%);
+        >.normal-txt{
+          color: #fff;
+        }
+        >.splitter{
+          border-top: 1px solid rgba(255, 255, 255, 1);
+          >.deco{
+            border: 1px solid rgba(255, 255, 255, 1);
           }
         }
-        >h3{
+        >button.detail-entry{
+          background-image: url(@/assets/images/unit-entry-btn-bg-3.png);
         }
+      }
+      >li:nth-of-type(4){
+        background: linear-gradient(180deg, rgba(192, 207, 220, 0.8) 0%, rgba(192,207,220,0.47) 74%, rgba(192,207,220,0) 100%);
         >.normal-txt{
+          color: rgba(41, 67, 99, 1);
+        }
+        >.splitter{
+          border-top: 1px solid rgba(41, 67, 99, 1);
+          >.deco{
+            border: 1px solid rgba(41, 67, 99, 1);
+          }
         }
         >button.detail-entry{
-          display: none;
-          background-image: none;
-          color: #fff;
-          border: 1px dotted #fff;
+          background-image: url(@/assets/images/unit-entry-btn-bg-4.png);
         }
       }
     }
+    div.conclusion{
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-image: url(@/assets/images/conclusion-bg.jpg);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      >h3{
+        margin-top: 69px;
+        margin-bottom: 32px;
+      }
+      >div{
+        margin-bottom: 120px;
+        color: #fff;
+      }
+    }
   }
 }
 </style>