搞搞搞

README.md

@@ -4,9 +4,8 @@
 访问url：https://houseoss.4dkankan.com/project/yzdyh-pc/monument/index.html#/
 
 # todo
-日用木器介绍要以日用木器开头
+晓钰给的更新图
 
-适应json文件结构变化（设计子单元？）
+傻逼甲方又反馈了修改点
 
-清朱漆描金三…… contain
-清朱漆描金花卉…… contain
+回到上一页时滚动进度复原，看来要手动实现了。

public/data/weddingData.json

@@ -89,7 +89,7 @@
               {
                 "id": 8,
                 "imgs": ["./shilihz/1（8）.JPG"],
-                "title": "民国嵌螺钿“一品当朝”双喜纹贴盒",
+                "title": "民国嵌螺钿“一品当朝”双喜纹帖盒",
                 "author": "长35厘米，宽17厘米，高7厘米",
                 "subtitle": "",
                 "content": "<p>帖盒，也称喜礼盒，明清盛行，原为古人见客前呈送身份名帖用的盒子，后逐渐演变成婚嫁所用。造型轻便小巧，方便媒人携带，传送佳音。此帖盒红漆地上嵌螺钿装饰，盖面饰“一品当朝”“囍”字纹，寓意对美好婚姻生活的向往。</p>"

src/router/index.js

@@ -30,7 +30,7 @@ const routes = [
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes
+  routes,
 })
 
 router.beforeEach((to, from) => {
@@ -40,4 +40,4 @@ router.beforeEach((to, from) => {
   }
 })
 
-export default router
+export default router

src/views/RelicDetail.vue

@@ -71,8 +71,20 @@ const store = useStore()
 
 const $env = inject('$env')
 
+const unitInfo = computed(() => {
+  return store.state.data?.list[route.query.unitIdx]
+})
+const relicList = computed(() => {
+  return [
+    ...unitInfo.value.list,
+    ...unitInfo.value.sub.map((item) => {
+      return item.list
+    }).flat(Infinity)
+  ]
+})
+
 const relicInfo = computed(() => {
-  return store.state.data?.list[route.query.unitIdx]?.list[route.query.relicIdx]
+  return relicList.value[route.query.relicIdx]
 })
 
 setTimeout(() => {

src/views/RelicList.vue

@@ -31,7 +31,7 @@
       @wheel="onRelicListWheel"
     >
       <li
-        v-for="(item, idx) in unitInfo?.list"
+        v-for="(item, idx) in relicList"
         :key="`${route.query.unitIdx}-${idx}`"
         @click="router.push({
           name:'RelicDetail',
@@ -89,16 +89,27 @@ function onTabbarWheel(e) {
 const unitInfo = computed(() => {
   return store.state.data?.list[route.query.unitIdx]
 })
+const relicList = computed(() => {
+  return [
+    ...unitInfo.value.list,
+    ...unitInfo.value.sub.map((item) => {
+      return item.list
+    }).flat(Infinity)
+  ]
+})
 
 function getImgInlineStyle(title) {
-  if (['清朱漆描金三屉四门柜', '清朱漆描金花卉诗文六门柜'].includes(title)) {
-    return {
-      objectFit: 'contain',
-    }
-  } else {
-    return {
-    }
+  return {
+    objectFit: 'contain',
   }
+  // if (['清朱漆描金三屉四门柜', '清朱漆描金花卉诗文六门柜'].includes(title)) {
+  //   return {
+  //     objectFit: 'contain',
+  //   }
+  // } else {
+  //   return {
+  //   }
+  // }
 }
 
 const relicListEl = ref(null)
@@ -203,6 +214,7 @@ function int2zh(idx) {
         height: calc(582 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         object-fit: cover;
         border: 1px solid #C9AD83;
+        background-color: #f0eef0;
       }
       >.not-img{
         margin-top: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/views/UnitList.vue

@@ -11,7 +11,6 @@
       </div>
       <ul>
         <li>
-          <h2>明媒正娶</h2>
           <div
             class="normal-txt p-1"
             v-html="data?.list[0]?.info"
@@ -66,7 +65,6 @@
           />
         </li>
         <li>
-          <h2>十里红妆</h2>
           <div
             class="normal-txt p-1"
             v-html="data?.list[1]?.info"
@@ -123,7 +121,6 @@
           />
         </li>
         <li>
-          <h2>火红新房</h2>
           <div
             class="normal-txt p-1"
             v-html="data?.list[2]?.info"
@@ -144,6 +141,15 @@
             draggable="false"
           >
           <p class="p-3">
+            日用木器包括梳洗物件、盛食物件等，贯穿了吃穿洗漱的方方面面，是实用器具，其精美的造型、吉祥的纹样皆传递出人们对美好生活的无限追求。
+          </p>
+          <img
+            class="img-title-2"
+            src="@/assets/images/unit-title-3-3.png"
+            alt=""
+            draggable="false"
+          >
+          <p class="p-4">
             女红是纺纱、织布、刺绣等针线手工的概称，这是女子一生操持家务的基本技艺。出嫁前，新娘身上的嫁衣、婚房的装饰、用具等各类陪嫁礼品都少不了女子的精心制作；而为人妻母后，家人的服饰鞋袜、配件钱袋也都出自她们之手。一件件女红用品传递出了女性的心灵手巧和勤劳智慧。
           </p>
           <button
@@ -245,7 +251,7 @@ function int2zh(idx) {
         background-position: center center;
         position: relative;
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        padding-top: calc(145 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-top: calc(160 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         >button.detail-entry{
           position: absolute;
           width: calc(162 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -259,13 +265,6 @@ function int2zh(idx) {
         background-image: url(@/assets/images/unit-1-bg.png);
         height: calc(951 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         color: #7F0007;
-        >h2{
-          font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
-          font-weight: 400;
-          line-height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          margin-bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
         >.p-1{
           text-indent: 2em;
           margin-bottom: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -305,14 +304,6 @@ function int2zh(idx) {
         background-image: url(@/assets/images/unit-2-bg.png);
         height: calc(1042 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         color: #215430;
-        >h2{
-          font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
-          font-weight: 400;
-          color: #FFE6B6;
-          line-height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          margin-bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
         >.p-1{
           text-indent: 2em;
           margin-bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -368,17 +359,9 @@ function int2zh(idx) {
       }
       >li:nth-of-type(3){
         background-image: url(@/assets/images/unit-3-bg.png);
-        height: calc(644 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(746 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         color: #96618A;
         font-weight: 300;
-        >h2{
-          font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
-          font-weight: 400;
-          color: #BC437D;
-          line-height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
         >.p-1{
           text-indent: 2em;
           margin-bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -396,6 +379,14 @@ function int2zh(idx) {
           margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
         >.p-3{
+          text-align: center;
+          margin-bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >img.img-title-3{
+          height: calc(68 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >.p-4{
           text-indent: 2em;
         }
         >button.detail-entry{