Jelajahi Sumber

fix: 首页各步骤的位移缩放

任一存 1 tahun lalu
induk
melakukan
83ae068a45
1 mengubah file dengan 16 tambahan dan 32 penghapusan
  1. 16 32
      src/views/HomeView.vue

+ 16 - 32
src/views/HomeView.vue

@@ -482,18 +482,8 @@ onMounted(() => {
     position: absolute;
     left: 50%;
     top: 50%;
-    width: 551.84px;
-    // height: calc(
-    //     941 / v-bind("windowSizeWhenDesignForRef") *
-    //       v-bind("windowSizeInCssForRef")
-    // );
-    // height: 937.05px;
-    height: 97%;
-    // height: calc(
-    //     961 / v-bind("windowSizeWhenDesignForRef") *
-    //       v-bind("windowSizeInCssForRef")
-    //   );
-    // background: green;
+    width: calc(99vh / 937 * 552);
+    height: 99vh;
     transform: translate(-50%, -50%);
     z-index: 1;
     transition: top 1.5s ease, left 1.5s ease, width 1.5s ease, height 1.5s ease;
@@ -519,31 +509,25 @@ onMounted(() => {
   }
   > .painting-wrap2 {
     left: 63%;
-    top: 46%;
-    width: calc(551.84px * 1.45);
-    height: calc(937.05px * 1.45);
+    top: 45%;
+    width: calc(125vh / 937 * 552);
+    height: calc(125vh);
   }
 
   > .painting-wrap3 {
-    left: 50%;
-    top: 0%;
-    width: calc(551.84px * 5.45);
-    height: calc(937.05px * 5.45);
+    left: 60%;
+    top: -20%;
+    width: calc(600vh / 937 * 552);
+    height: 600vh;
   }
 
   > .hotspot-wrap {
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-46%, -50%);
-    width: 551.84px;
-    // height: 937.05px;
-    // height: 100%;
-    height: calc(
-        941 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-    z-index: 7;
+    width: calc(99vh / 937 * 552);
+    height: 99vh;
+    transform: translate(-50%, -50%);
     pointer-events: none;
     will-change: transform;
     backface-visibility: hidden;
@@ -559,8 +543,8 @@ onMounted(() => {
 
     > .hotspot-1 {
       position: absolute;
-      top: 100px;
-      right: 25px;
+      top: 11vh;
+      right: 0;
       pointer-events: initial;
     }
 
@@ -573,8 +557,8 @@ onMounted(() => {
 
     > .hotspot-3 {
       position: absolute;
-      bottom: 0px;
-      right: 25px;
+      bottom: 0vh;
+      right: -1vh;
       pointer-events: initial;
     }
   }