适应小屏

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()
@@ -166,18 +170,18 @@ function int2zh(idx) {
     width: 100%;
     display: flex;
     align-items: center;
-    gap: 45px;
+    gap: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     overflow: auto;
     padding-bottom: 40px;
-    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'));
     &::-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: 642px;
+      width: calc(473 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(642 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       cursor: pointer;
       background-image: url(@/assets/images/relic-item-bg.png);
       background-size: 100% 100%;
@@ -188,8 +192,8 @@ function int2zh(idx) {
       justify-content: space-evenly;
       align-items: center;
       >img{
-        width: 418px;
-        height: 514px;
+        width: calc(418 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(514 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         object-fit: cover;
       }
       >.not-img{
@@ -200,11 +204,11 @@ function int2zh(idx) {
         flex-direction: column;
         align-items: center;
         >h3{
-          font-size: 24px;
+          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;
           color: #000000;
-          line-height: 28px;
+          line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           overflow: hidden;
           white-space: pre;
           text-overflow: ellipsis;
@@ -214,11 +218,11 @@ function int2zh(idx) {
           white-space: pre;
           text-overflow: ellipsis;
           overflow: hidden;
-          font-size: 24px;
+          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;
           color: rgba(0, 0, 0, 0.5);
-          line-height: 28px;
+          line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
       }
       &:hover{

src/views/UnitList.vue

@@ -33,7 +33,7 @@
           </button>
         </li>
       </ul>
-      <dit class="conclusion">
+      <div class="conclusion">
         <!-- <h3>
           结语
         </h3> -->
@@ -41,33 +41,28 @@
           class="normal-txt"
           v-html="data?.epilogue"
         />
-      </dit>
+      </div>
     </main>
   </div>
 </template>
 
-<script>
-import { mapState } from "vuex"
+<script setup>
 import { numberToWords } from "pixiu-number-toolkit"
+import { computed, ref } from "vue"
+import { useStore } from "vuex"
+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>
 
@@ -81,28 +76,28 @@ export default {
   overflow: auto;
   &::-webkit-scrollbar { width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
   h3{
-    font-size: 30px;
+    font-size: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: Source Han Sans CN-Light, Source Han Sans CN;
     font-weight: 400;
     color: #fff;
   }
   .normal-txt, :deep(p){
-    font-size: 16px;
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: Source Han Sans CN-Light, Source Han Sans CN;
     font-weight: 300;
-    line-height: 28px;
-    width: 1055px;
+    line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(1055 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     text-indent: 2em;
   }
   >main{
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 66px;
-    padding-bottom: 66px;
+    padding-top: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     >.foreword-wrap{
-      width: 1355px;
-      height: 406px;
+      width: calc(1355 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(406 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background-image: url(@/assets/images/foreword-bg.png);
       background-size: contain;
       background-repeat: no-repeat;
@@ -115,7 +110,7 @@ export default {
       //   margin-bottom: 32px;
       // }
       >div.foreword{
-        margin-top: 145px;
+        margin-top: calc(145 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         .normal-txt, :deep(p){
           text-indent: initial;
           color: #233953;
@@ -128,9 +123,9 @@ export default {
         flex-direction: column;
         align-items: center;
         cursor: pointer;
-        margin-bottom: 10px;
-        width: 1355px;
-        height: 406px;
+        margin-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: calc(1355 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(406 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
@@ -144,20 +139,20 @@ export default {
         }
         >button.detail-entry{
           position: absolute;
-          width: 186px;
-          height: 43px;
-          border-radius: 5px 5px 5px 5px;
-          bottom: 30px;
-          font-size: 20px;
+          width: calc(186 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(43 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          border-radius: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-family: Source Han Serif CN-Bold, Source Han Serif CN;
           color: #fff;
-          line-height: 28px;
+          line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
       }
       >li:nth-of-type(1){
         background-image: url(@/assets/images/unit-1-bg.png);
         >.normal-txt{
-          margin-top: 168px;
+          margin-top: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           color: #6C4144;
         }
         >button.detail-entry{
@@ -167,7 +162,7 @@ export default {
       >li:nth-of-type(2){
         background-image: url(@/assets/images/unit-2-bg.png);
         >.normal-txt{
-          margin-top: 187px;
+          margin-top: calc(187 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           color: #256868;
         }
         >button.detail-entry{
@@ -177,7 +172,7 @@ export default {
       >li:nth-of-type(3){
         background-image: url(@/assets/images/unit-3-bg.png);
         >.normal-txt{
-          margin-top: 181px;
+          margin-top: calc(181 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           color: #725E2C;
         }
         >button.detail-entry{
@@ -189,8 +184,8 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 1355px;
-      height: 406px;
+      width: calc(1355 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(406 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background-image: url(@/assets/images/conclusion.png);
       background-size: contain;
       background-repeat: no-repeat;
@@ -200,7 +195,7 @@ export default {
       //   margin-bottom: 32px;
       // }
       >div{
-        margin-top: 187px;
+        margin-top: calc(187 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         color: #6C4144;
       }
     }