pc 样式调整为375*667

src/common/util.js

@@ -49,8 +49,8 @@ export const getSystemInfo = () => {
   let width = 0;
   let height = 0;
   if (!isMobile()) {
-    width = 750;
-    height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
+    width = 375;
+    height = document.body.clientHeight > 667 ? document.body.clientHeight : 667;
   } else {
     width = document.body.clientWidth;
     height = document.body.clientHeight;
@@ -59,7 +59,7 @@ export const getSystemInfo = () => {
   if (height === 0) {
     height = window.innerHeight;
     if (!isMobile()) {
-      height = window.innerHeight > 1334 ? window.innerHeight : 1334;
+      height = window.innerHeight > 667 ? window.innerHeight : 667;
     }
   }
   let scale = height / width;

src/components/lightButton.vue

@@ -46,9 +46,9 @@ export default {
     top: 0;
   }
   &.pc {
-    width: 436px;
-    height: 77.7px;
-    line-height: 77.7px;
+    width: 218px;
+    height: 38.85px;
+    line-height: 38.85px;
   }
   &.mobile {
     width: 5.8133rem;
@@ -60,11 +60,11 @@ export default {
   .btn-text {
     width: 100%;
     text-align: center;
-    font-size: 44px;
+    font-size: 22px;
     letter-spacing: 0.2em;
     font-weight: bold;
     &.len {
-      font-size: 24px;
+      font-size: 12px;
     }
   }
   .btn-img {

src/views/complete.vue

@@ -33,9 +33,9 @@ const calcCoord = function () {
   let width = 0;
   let height = 0;
   if (!isMobile()) {
-    width = 750;
+    width = 375;
     height =
-      document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
+      document.body.clientHeight > 667 ? document.body.clientHeight : 667;
   } else {
     width = document.body.clientWidth;
     height = document.body.clientHeight;
@@ -43,7 +43,7 @@ const calcCoord = function () {
   if (height === 0) {
     height = window.innerHeight;
     if (!isMobile()) {
-      height = window.innerHeight > 1334 ? window.innerHeight : 1334;
+      height = window.innerHeight > 667 ? window.innerHeight : 667;
     }
   }
   scale = height / width;
@@ -107,9 +107,11 @@ export default {
   height: 100%;
 }
 .pc {
+  height: 100vh;
+  align-items: center;
   .main_content {
-    width: 750px;
-    min-height: 1334px;
+    width: 375px;
+    height: 667px;
     background: #ffffff;
     position: relative;
     display: flex;
@@ -120,72 +122,72 @@ export default {
       position: absolute;
       left: 0;
       top: 0;
-      width: 750px;
+      width: 375px;
       z-index: 0;
     }
   }
   .massage-complete-modal {
     box-sizing: border-box;
-    width: 660px;
-    min-height: 620px;
-    padding: 80px 0 125px;
+    width: 330px;
+    min-height: 310px;
+    padding: 40px 0 62.5px;
     background: #fff;
     display: flex;
     flex-direction: column;
     align-items: center;
-    border-radius: 14px 14px;
+    border-radius: 7px 7px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
     &.noBaby {
-      height: 420px;
+      height: 210px;
       .bottom {
-        margin-top: 100px;
+        margin-top: 50px;
       }
     }
     .nickname {
-      font-size: 46px;
+      font-size: 23px;
       color: #fb7c76;
       font-family: "Gotham-Book";
-      text-shadow: 2px 2px 4px #ffffff;
+      text-shadow: 1px 1px 2px #ffffff;
       span {
-        font-size: 60px;
+        font-size: 30px;
       }
     }
     .title {
-      margin-top: 41px;
+      margin-top: 20.5px;
       color: #fb7c76;
-      font-size: 46px;
-      height: 53px;
+      font-size: 23px;
+      line-height: 26.5012px;
       font-weight: bolder;
       .icon {
-        width: 69px;
-        height: 45px;
+        width: 34.5px;
+        height: 22.5px;
       }
     }
     .subTitle {
       width: 100%;
       text-align: center;
       color: #fb7c76;
-      font-size: 26px;
-      margin-top: 20px;
+      font-size: 13px;
+      margin-top: 10px;
       font-weight: bolder;
       &.underline {
         text-decoration: underline;
       }
     }
     .record {
-      margin-top: 100px;
-      margin-bottom: 100px;
-      width: 559px;
-      height: 96px;
-      line-height: 96px;
-      border-radius: 48px 48px;
-      font-size: 34.67px;
+      margin-top: 50px;
+      margin-bottom: 50px;
+      width: 280px;
+      height: 48px;
+      line-height: 48px;
+      border-radius: 24px 24px;
+      font-size: 17.3362px;
       color: #999999;
       background-color: #f5f5f5;
       text-align: center;
-      text-shadow: 2px 2px 4px #ffffff;
+      text-shadow: 1px 1px 2px #ffffff;
       display: flex;
       flex-direction: row;
       justify-content: center;