Merge remote-tracking branch 'origin/master' into flexible

src/App.vue

@@ -411,6 +411,14 @@ button.logo{
     }
   }
 }
+
+.img-title{
+  font-family: Source Han Sans SC light;
+  line-height: 34px;
+  letter-spacing: 3px !important;
+  text-align: center;
+  font-size: 18px;
+}
 </style>
 
 <style lang="less" scoped>

src/components/CameraContent-1-1-2.vue

@@ -280,8 +280,6 @@ const tab1ContentPageNumber = ref(1)
       }
       >.img-title{
         margin-top: -2.5em;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: "Source Han Sans SC light";
       }
     }
   }

src/components/CameraContent-1-2-2.vue

@@ -160,8 +160,6 @@ const activeTabIdx = ref(0)
       }
       >.img-title{
         margin-top: 0.5em;
-        font-size: 20px;
-        font-family: "Source Han Sans SC light";
       }
     }
   }
@@ -342,8 +340,6 @@ const activeTabIdx = ref(0)
       }
       >.img-title{
         margin-top: -1em;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: "Source Han Sans SC light";
       }
     }
     >.tab-3-content{

src/components/CameraContent-2-1-2.vue

@@ -24,6 +24,9 @@
             :src="require(`@/assets/images/CameraContent-2-1-2-img-${currentSwitchIdx + 1}.png`)"
             alt=""
           >
+          <div class="img-title">
+            元大都水系图
+          </div>
         </div>
       </div>
     </div>
@@ -208,29 +211,16 @@ const next = () => {
         // border: 1px solid #FFE88B;
         // padding: 15px 10px;
         position: relative;
-        >.btn-left {
-          width: 50px;
-          height: 50px;
-          position: absolute;
-          left: -25px;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 2;
-          cursor: pointer;
-        }
-        >.btn-right {
-          width: 50px;
-          height: 50px;
-          position: absolute;
-          right: -25px;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 2;
-          cursor: pointer;
-        }
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         >.detail-img {
           width: 100%;
         }
+        >.img-title{
+          margin-top: 0.5em;
+        }
       }
     }
   }

src/components/CameraContent-2-2-1.vue

@@ -137,9 +137,7 @@ const emit = defineEmits(['close'])
       }
       >.img-title{
         flex: 0 0 auto;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         margin-top: 0.5em;
-        font-family: "Source Han Sans SC light";
       }
     }
   }

src/components/CameraContent-3-2-2.vue

@@ -212,8 +212,6 @@ const next = () => {
         }
         >.img-title{
           margin-top: 0.5em;
-          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: "Source Han Sans SC light";
         }
       }
     }

src/components/CameraContent-3-2-3.vue

@@ -119,8 +119,6 @@ const title = '表演元曲的著名演员'
         }
         >.img-title{
           margin-top: 0.5em;
-          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: "Source Han Sans SC light";
         }
       }
       >.content-wrap__right {

src/views/RelicList.vue

@@ -60,13 +60,17 @@
           <span
             class="name"
             :class="{
-              wide: item['名称'].length > 11
+              wide: item['名称'].length > 11,
+              smallFontSize: item['名称'].length > 18
             }"
             :title="item['名称']"
             v-html="item['名称']"
           />
           <img
             class=""
+            :style="{
+              transform: item['名称'] === '地狮角石' ? 'translate(0, 15%)' : '',
+            }"
             :src="getRelicThumbUrl(idx)"
             alt=""
             draggable="false"
@@ -448,9 +452,12 @@ const handleScroll = debounce(() => {
           padding-right: 0.7em;
           z-index: 1;
         }
+        >.name.smallFontSize{
+          padding-right: calc(20 / @page-height-design-px * 100vh * 0.83);;
+          font-size: calc(14 / @page-height-design-px * 100vh * 0.83);
+        }
         >img {
           position: absolute;
-          left: 0;
           left: 50%;
           translate: -50% 0;
           object-fit: contain;