gx

scene/src/assets/styles/base.css

@@ -48,6 +48,14 @@ textarea {
   --themeColor2: #f58543;
   --pcIconWidth: 48px;
   --appIconWidthH: 36px;
+  --design-width: 1920;
+  --design-height: 920;
+}
+@media only screen and (max-width: 600px) {
+  :root {
+    --design-width: 750;
+    --design-height: 1440;
+  }
 }
 /* 找不到页面 */
 .noFindPage {

scene/src/assets/styles/utils.scss

@@ -0,0 +1,7 @@
+@function vh-calc($num) {
+  @return calc(100vh * ($num / var(--design-height)));
+}
+
+@function vw-calc($num) {
+  @return calc(100vw * ($num / var(--design-width)));
+}

scene/src/pages/A4base/index.module.scss

@@ -1,3 +1,5 @@
+@use '@/assets/styles/utils.scss';
+
 .A4base {
   position: relative;
   top: 50%;
@@ -22,22 +24,22 @@
   :global {
     .A4base-title3 {
       transform: translate(-50%, -89%);
-      width: 900px;
-      height: 340px;
+      width: utils.vw-calc(900);
+      height: utils.vw-calc(340);
     }
     .A4base-logo {
       transform: translate(-233%, -271%);
-      width: 400px;
-      height: 162px;
+      width: utils.vw-calc(400);
+      height: utils.vw-calc(162);
     }
     .A4base-content {
-      width: 1150px;
-      height: 500px;
+      width: utils.vw-calc(1150);
+      height: utils.vw-calc(500);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      transform: translate(-50%, -280px);
+      transform: translate(-50%, utils.vw-calc(-280));
       .A4base-title2 {
         width: 68%;
         height: 100%;
@@ -54,23 +56,23 @@
 
     .A4base-pic1 {
       transform: translate(-178%, 43%);
-      width: 530px;
-      height: 304px;
+      width: utils.vw-calc(530);
+      height: utils.vw-calc(304);
     }
     .A4base-pic2 {
       transform: translate(48%, -321%);
-      width: 621px;
-      height: 140px;
+      width: utils.vw-calc(621);
+      height: utils.vw-calc(140);
     }
     .A4base-time {
       transform: translate(207%, 115%);
-      width: 322px;
-      height: 206px;
+      width: utils.vw-calc(322);
+      height: utils.vw-calc(206);
     }
     .A4base-button {
-      transform: translate(-50%, 264%);
-      width: 224px;
-      height: 120px;
+      transform: translate(-50%, utils.vw-calc(264));
+      width: utils.vw-calc(224);
+      height: utils.vw-calc(120);
       cursor: pointer;
     }
   }