适应小屏

src/views/RelicList.vue

@@ -68,6 +68,10 @@ import { useRoute, useRouter } from "vue-router"
 import { ref, computed, inject } from "vue"
 import { useStore } from "vuex"
 import { numberToWords } from "pixiu-number-toolkit"
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
 
 const route = useRoute()
 const router = useRouter()
@@ -179,13 +183,13 @@ function int2zh(idx) {
     gap: 30px;
     overflow: auto;
     padding-bottom: 10px;
-    padding-left: 70px;
-    padding-right: 70px;
+    padding-left: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     >li{
       font-size: 0;
       flex: 0 0 auto;
-      width: 469px;
-      height: 713px;
+      width: calc(469 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(713 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       cursor: pointer;
       background-image: url(@/assets/images/relic-item-bg.png);
       background-size: 100% 100%;
@@ -195,9 +199,9 @@ function int2zh(idx) {
       flex-direction: column;
       align-items: center;
       >img{
-        margin-top: 25px;
-        width: 424px;
-        height: 631px;
+        margin-top: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: calc(424 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(631 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         object-fit: cover;
       }
       >.not-img{
@@ -208,7 +212,7 @@ function int2zh(idx) {
         flex-direction: column;
         align-items: center;
         >h3{
-          font-size: 22px;
+          font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;
           color: #000000;
@@ -222,7 +226,7 @@ function int2zh(idx) {
           white-space: pre;
           text-overflow: ellipsis;
           overflow: hidden;
-          font-size: 18px;
+          font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           line-height: 1.1;
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;

src/views/UnitList.vue

@@ -31,7 +31,7 @@
           <button class="detail-entry" />
         </li>
       </ul>
-      <dit class="conclusion">
+      <div class="conclusion">
         <!-- <h3>
           结语
         </h3> -->
@@ -39,34 +39,30 @@
           class="normal-txt"
           v-html="data?.epilogue"
         />
-      </dit>
+      </div>
     </main>
   </div>
 </template>
 
-<script>
-import { mapState } from "vuex"
+<script setup>
+import { computed } from "vue"
+import { useStore } from "vuex"
 import { numberToWords } from "pixiu-number-toolkit"
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
 
-export default {
-  data() {
-    return {
-      isExpand: false,
-    }
-  },
-  computed: {
-    ...mapState([
-      'data'
-    ])
-  },
-  mounted() {
-  },
-  methods: {
-    int2zh(idx) {
-      return numberToWords(idx, "zh")
-    }
-  },
+const store = useStore()
+
+const data = computed(() => {
+  return store.state.data
+})
+
+function int2zh(idx) {
+  return numberToWords(idx, "zh")
 }
+
 </script>
 
 <style lang="less" scoped>
@@ -82,25 +78,25 @@ export default {
   //   color: #fff;
   // }
   .normal-txt, :deep(p){
-    font-size: 14px;
+    font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: Source Han Sans CN-Light, Source Han Sans CN;
     font-weight: 300;
-    line-height: 25px;
-    width: 1326px;
+    line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(1326 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     text-indent: 2em;
   }
   >main{
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 47px;
-    padding-bottom: 47px;
+    padding-top: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     background-image: url(@/assets/images/unit-list-bg.jpg);
     background-size: 100% auto;
     background-repeat: no-repeat repeat;
     >.foreword-wrap{
-      width: 1564px;
-      height: 483px;
+      width: calc(1564 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(483 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background-image: url(@/assets/images/foreword-bg.png);
       background-size: contain;
       background-repeat: no-repeat;
@@ -113,8 +109,8 @@ export default {
       //   margin-bottom: 32px;
       // }
       >div.foreword{
-        margin-top: 155px;
-        width: 1310px;
+        margin-top: calc(155 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: calc(1310 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         .normal-txt, :deep(p){
           text-align: center;
           text-indent: initial;
@@ -128,8 +124,8 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
-        width: 1564px;
-        height: 369px;
+        width: calc(1564 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(369 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
@@ -140,14 +136,14 @@ export default {
         //   margin-bottom: 32px;
         // }
         >.normal-txt{
-          margin-top: 155px;
-          width: 1326px;
+          margin-top: calc(155 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(1326 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
         >button.detail-entry{
           position: absolute;
-          width: 216px;
-          height: 66px;
-          bottom: 60px;
+          width: calc(216 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          bottom: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center center;
@@ -203,8 +199,8 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 1564px;
-      height: 318px;
+      width: calc(1564 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(318 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background-image: url(@/assets/images/conclusion.png);
       background-size: contain;
       background-repeat: no-repeat;
@@ -214,9 +210,9 @@ export default {
       //   margin-bottom: 32px;
       // }
       >div{
-        margin-top: 155px;
+        margin-top: calc(155 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         color: #533D23;
-        width: 1310px;
+        width: calc(1310 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
   }