样式优化

src/common/util.js

@@ -37,7 +37,7 @@ export function calcAdapt() {
 export const isBigScreen = () => {
   let width = 0;
   let height = 0;
-  if (document.body.clientWidth > 750) {
+  if (!isMobile()) {
     width = 750;
     height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
   } else {
@@ -46,7 +46,7 @@ export const isBigScreen = () => {
   }
   if (height === 0) {
     height = window.innerHeight;
-    if (document.body.clientWidth > 750) {
+    if (!isMobile()) {
       height = window.innerHeight > 1334 ? window.innerHeight : 1334;
     }
   }
@@ -64,7 +64,7 @@ export const isBigScreen = () => {
 export const getSystemInfo = () => {
   let width = 0;
   let height = 0;
-  if (document.body.clientWidth > 750) {
+  if (!isMobile()) {
     width = 750;
     height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
   } else {
@@ -74,7 +74,7 @@ export const getSystemInfo = () => {
 
   if (height === 0) {
     height = window.innerHeight;
-    if (document.body.clientWidth > 750) {
+    if (!isMobile()) {
       height = window.innerHeight > 1334 ? window.innerHeight : 1334;
     }
   }

src/views/complete.vue

@@ -28,7 +28,7 @@ let scale;
 const calcCoord = function () {
   let width = 0;
   let height = 0;
-  if (document.body.clientWidth > 750) {
+  if (!isMobile()) {
     width = 750;
     height =
       document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
@@ -38,7 +38,7 @@ const calcCoord = function () {
   }
   if (height === 0) {
     height = window.innerHeight;
-    if (document.body.clientWidth > 750) {
+    if (!isMobile()) {
       height = window.innerHeight > 1334 ? window.innerHeight : 1334;
     }
   }

src/views/index.vue

@@ -56,7 +56,7 @@ let scale;
 const calcCoord = function () {
   let width = 0;
   let height = 0;
-  if (document.body.clientWidth > 750) {
+  if (!isMobile()) {
     width = 750;
     height =
       document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
@@ -66,7 +66,7 @@ const calcCoord = function () {
   }
   if (height === 0) {
     height = window.innerHeight;
-    if (document.body.clientWidth > 750) {
+    if (!isMobile()) {
       height = window.innerHeight > 1334 ? window.innerHeight : 1334;
     }
   }
@@ -631,12 +631,10 @@ export default {
     if (!isMobile()) {
       document.getElementsByTagName("body")[0].style.minWidth = "750px";
       this.topHeiht = calcCoord({ minTop: 918, maxTop: 1142.6 }).top;
-      if (document.body.clientWidth > 750) {
-        this.pageHeight = 1334 + "px";
-        this.topHeiht = 1042.6;
-      }
+      this.pageHeight = 1334 + "px";
+      this.topHeiht = 1042.6;
     } else {
-      this.topHeiht = calcCoord({ minTop: 618, maxTop: 1142.6 }).top;
+      this.topHeiht = calcCoord({ minTop: 918, maxTop: 1142.6 }).top;
     }
 
     if (!this._isMobile) {
@@ -740,8 +738,8 @@ export default {
     .top {
       position: relative;
       width: 100%;
-      background: url("../assets/images/gesture/introduceBg.png") no-repeat
-        top center;
+      background: url("../assets/images/gesture/introduceBg.png") no-repeat top
+        center;
       overflow: hidden;
       .page_bg {
         width: 100%;
@@ -943,6 +941,7 @@ export default {
 .mobile {
   .main_content {
     width: 10rem;
+    height: 100vh;
     background: #ffffff;
     position: relative;
     display: flex;
@@ -1072,33 +1071,33 @@ export default {
       }
       &.small {
         .page_title {
-          top: 0.5333rem;
+          top: .8rem;
         }
         .page_bg2 {
-          width: 60%;
+          width: 80%;
           position: absolute;
-          left: 20%;
+          left: 10%;
           top: 0.8rem;
         }
         .page_tips {
           font-size: 0.2667rem;
           &.page_tips_1 {
             position: absolute;
-            top: 2.56rem;
-            left: calc(20% + 0.7333rem);
+            top: 3.3067rem;
+            left: calc(10% + 1.0667rem);
             width: 3.4667rem;
           }
           &.page_tips_2 {
             position: absolute;
             width: 5.7333rem;
-            left: calc(20% + 2.4533rem);
-            top: 5.6533rem;
+            left: calc(10% + 3.2rem);
+            top: 7.36rem;
           }
           &.page_tips_3 {
             position: absolute;
             width: 7.0667rem;
-            left: calc(20% + 0.8rem);
-            top: 7.04rem;
+            left: calc(10% + 1.0667rem);
+            top: 9.28rem;
           }
         }
       }