统一css尺寸方案

src/temp.js

@@ -1,69 +0,0 @@
-<div
-class="scene"
-style="width: calc(467 / 1080 * 100vh); height: calc(204 / 1080 * 100vh); top: calc(420 / 1080 * 100vh); left: calc(40 / 1080 * 100vh);"
->
-<img
-  class=""
-  src="@/assets/images/bg-6.jpg"
-  alt=""
-  draggable="false"
->
-<div class="text-wrap">
-  <span>拾遗 （已完成）</span>
-  <div class="bottom-right">
-    <img
-      class="fraction"
-      src=""
-      alt=""
-      draggable="false"
-    >
-
-  </div>
-</div>
-</div>
-<div
-class="scene"
-style="width: calc(234 / 1080 * 100vh); height: calc(186 / 1080 * 100vh); top: calc(634 / 1080 * 100vh); left: calc(40 / 1080 * 100vh);"
->
-<img
-  class=""
-  src="@/assets/images/bg-4.jpg"
-  alt=""
-  draggable="false"
->
-<div class="text-wrap">
-  <span>民居 （已完成）</span>
-  <div class="bottom-right">
-    <img
-      class="fraction"
-      src=""
-      alt=""
-      draggable="false"
-    >
-
-  </div>
-</div>
-</div>
-<div
-class="scene"
-style="width: calc(223 / 1080 * 100vh); height: calc(186 / 1080 * 100vh); top: calc(634 / 1080 * 100vh); left: calc(283 / 1080 * 100vh);"
->
-<img
-  class=""
-  src="@/assets/images/bg-2.jpg"
-  alt=""
-  draggable="false"
->
-<div class="text-wrap">
-  <span>牌坊 （已完成）</span>
-  <div class="bottom-right">
-    <img
-      class="fraction"
-      src=""
-      alt=""
-      draggable="false"
-    >
-
-  </div>
-</div>
-</div>

src/views/Bag.vue

@@ -10,10 +10,10 @@
         class="scene"
         :class="isJigsawUnlock(item) ? 'unlock' : 'lock'"
         :style="{
-          width: `calc(${item.width} / 1080 * 100vh)`,
-          height: `calc(${item.height} / 1080 * 100vh)`,
-          top: `calc(${item.top} / 1080 * 100vh)`,
-          left: `calc(${item.left} / 1080 * 100vh)`,
+          width: `calc(${item.width} / ${windowSizeWhenDesign} * ${unit})`,
+          height: `calc(${item.height} / ${windowSizeWhenDesign} * ${unit})`,
+          top: `calc(${item.top} / ${windowSizeWhenDesign} * ${unit})`,
+          left: `calc(${item.left} / ${windowSizeWhenDesign} * ${unit})`,
         }"
         @click="onClickSceneEntry(item)"
       >
@@ -69,9 +69,18 @@
 
 <script>
 import { ElMessage, ElMessageBox } from 'element-plus'
+import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
 
 export default {
   name: 'BagView',
+  setup () {
+    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+
+    return {
+      windowSizeWhenDesign,
+      unit
+    }
+  },
   data() {
     return {
       sceneList: [
@@ -208,9 +217,9 @@ export default {
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
-    width: 92.59vh;
-    height: 80.56vh;
-    padding: calc(50 / 1080 * 100vh) calc(40 / 1080 * 100vh);
+    width: calc(1000 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(870 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    padding: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit')) calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     flex: 0 0 auto;
     >.scene {
       position: absolute;
@@ -229,13 +238,13 @@ export default {
         background: rgba(255,255,255,0.7);
         bottom: 0;
         width: 100%;
-        height: calc(40 / 1080 * 100vh);
-        padding-left: calc(9 / 1080 * 100vh);
-        padding-right: calc(9 / 1080 * 100vh);
+        height: calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+        padding-left: calc(9 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+        padding-right: calc(9 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
         display: flex;
         justify-content: space-between;
         align-items: center;
-        font-size: calc(16 / 1080 * 100vh);
+        font-size: calc(16 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
         font-family: Source Han Sans CN-Bold, Source Han Sans CN;
         font-weight: bold;
         >span {
@@ -245,6 +254,8 @@ export default {
           justify-content: center;
           align-items: center;
           >img.fraction {
+            width: calc(20 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+            height: calc(18 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
           }
         }
       }
@@ -261,20 +272,20 @@ export default {
     }
   }
   >.right-wrap {
-    width: 53vh;
+    width: calc(700 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     height: 100vh;
     counter-reset: game-rule;
     display: flex;
     flex-direction: column;
     justify-content: center;
     >img.title {
-      width: calc(311 / 1080 * 100vh);
-      height: calc(74 / 1080 * 100vh);
-      margin-bottom: calc(60 / 1080 * 100vh);
+      width: calc(311 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(74 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      margin-bottom: calc(60 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     }
     >p {
       margin-bottom: 1em;
-      font-size: calc(30 / 1080 * 100vh);
+      font-size: calc(30 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       line-height: 1.5;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
       font-weight: bold;
@@ -287,13 +298,13 @@ export default {
       }
     }
     >button.build {
-      margin-top: calc(60 / 1080 * 100vh);
+      margin-top: calc(60 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       background-image: url(@/assets/images/btn-build-town-lock.png);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
-      width: calc(323 / 1080 * 100vh);
-      height: calc(120 / 1080 * 100vh);
+      width: calc(323 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(120 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       margin-left: auto;
       margin-right: auto;
       &.functional {

src/views/Level3.vue

@@ -299,10 +299,10 @@ export default {
   }
   button.watch {
     position: absolute;
-    top: calc(100vh * 148 / 1080 - 7vh);
-    right: calc(100vh * 188 / 1080);
-    width: calc(100vh * 274 / 1080);
-    height: calc(100vh * 238 / 1080);
+    top: calc(148 / v-bind('windowSizeWhenDesign') * v-bind('unit') - 7 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    right: calc(188 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    width: calc(274 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(238 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     background-image: url(@/assets/images/btn-watch.png);
     background-size: cover;
     background-repeat: no-repeat;
@@ -314,10 +314,10 @@ export default {
   }
   button.learn {
     position: absolute;
-    top: calc(100vh * 438 / 1080 - 7vh);
-    right: calc(100vh * 22 / 1080);
-    width: calc(100vh * 260 / 1080);
-    height: calc(100vh * 236 / 1080);
+    top: calc(438 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    right: calc(22 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    width: calc(260 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(236 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     background-image: url(@/assets/images/btn-learn.png);
     background-size: cover;
     background-repeat: no-repeat;
@@ -329,10 +329,10 @@ export default {
   }
   button.record {
     position: absolute;
-    top: calc(100vh * 712 / 1080 - 7vh);
-    right: calc(100vh * 180 / 1080);
-    width: calc(100vh * 262 / 1080);
-    height: calc(100vh * 238 / 1080);
+    top: calc(712 / v-bind('windowSizeWhenDesign') * v-bind('unit') - 7 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    right: calc(180 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    width: calc(262 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(238 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     background-image: url(@/assets/images/btn-record.png);
     background-size: cover;
     background-repeat: no-repeat;