调整UI样式

src/common/util.js

@@ -35,29 +35,13 @@ export function calcAdapt() {
 }
 
 export const isBigScreen = () => {
-  let width = 0;
-  let height = 0;
-  if (!isMobile()) {
-    width = 750;
-    height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
-  } else {
-    width = document.body.clientWidth;
-    height = document.body.clientHeight;
-  }
-  if (height === 0) {
-    height = window.innerHeight;
-    if (!isMobile()) {
-      height = window.innerHeight > 1334 ? window.innerHeight : 1334;
-    }
-  }
-  let scale = height / width;
-  let k = +scale.toFixed(2);
-  if (k >= 2.16) {
-    k = 2.16;
-  } else if (k <= 1.78) {
-    k = 1.78;
-  }
-  if (k > 1.78) return true
+  let { scale } = getSystemInfo();
+  if (scale > 2) return true
+  return false
+}
+export const isSmallScreen = () => {
+  let { scale } = getSystemInfo();
+  if (scale < 1) return true
   return false
 }
 
@@ -79,7 +63,7 @@ export const getSystemInfo = () => {
     }
   }
   let scale = height / width;
-
+  scale = parseFloat(scale.toFixed(2))
   return {
     windowWidth: width,
     windowHeight: height,

src/views/index.vue

 <template>
   <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
-    <div class="main_content">
-      <div class="top" :class="{'small':_isMobile && !isBig}" :style="{'height':topHeiht}">
+    <div class="main_content" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
+      <div class="top" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}" :style="{'height':topHeiht}">
         <div class="page_title">{{$t('strings.homeTitle')}}</div>
-        <div class="picture-box">
+        <div class="picture-box" :style="{'transform': scale>0?'scale('+scale+')':''}">
           <img class="page_bg2" src="../assets/images/gesture/swiper1big_new.png" alt srcset />
           <div class="page_tips_1 page_tips">{{$t('strings.homeText1')}}</div>
           <div class="page_tips_2 page_tips">{{$t('strings.homeText2')}}</div>
@@ -45,7 +45,14 @@
 </template>
 
 <script>
-import { calcAdapt, isBigScreen, authCamera, isMobile } from "../common/util";
+import {
+  calcAdapt,
+  isBigScreen,
+  isSmallScreen,
+  authCamera,
+  isMobile,
+  getSystemInfo
+} from "../common/util";
 import lightButton from "../components/lightButton.vue";
 
 let calcs = calcAdapt();
@@ -82,6 +89,7 @@ export default {
       showNoCameraDialog: false,
       topHeiht: 0,
       isBig: isBigScreen(),
+      isSmall: isSmallScreen(),
       scale: scale,
       currentLanguage: 0,
       showPopup: false,
@@ -93,7 +101,8 @@ export default {
       cTb: calcCoord({ minTop: 30, maxTop: 30 }).top + "px", // title bottom
       cCs: calcCoord({ minTop: 20, maxTop: 40 }).top + "px", // content
       pageHeight: "",
-      _isMobile: false
+      _isMobile: false,
+      scale: 0
     };
   },
   components: {
@@ -653,6 +662,11 @@ export default {
     }
   },
   created() {
+    let { scale } = getSystemInfo();
+    if (scale > 1 && scale < 2) {
+      this.scale = 1 - (scale - 1) / 100;
+      console.log(this.scale);
+    }
     this.$i18n.locale = "en";
     this._isMobile = isMobile();
     if (!isMobile()) {
@@ -972,7 +986,7 @@ export default {
     position: relative;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
 
     .global_box {
@@ -1035,6 +1049,7 @@ export default {
       background: url("../assets/images/gesture/introduceBg.png") no-repeat top
         center;
       overflow: hidden;
+      flex: 1;
       .page_bg {
         width: 100%;
         position: absolute;
@@ -1070,7 +1085,7 @@ export default {
         }
 
         .page_tips {
-          font-size: 0.32rem;
+          font-size: 0.2933rem;
           color: #7d7c7a;
           text-align: left;
           font-weight: bold;
@@ -1134,6 +1149,7 @@ export default {
       align-items: center;
       position: relative;
       min-height: 3.8rem;
+      max-height: 4.2rem;
       .info {
         align-self: flex-start;
         color: #999;
@@ -1228,6 +1244,15 @@ export default {
         }
       }
     }
+
+    &.big {
+      .top {
+        flex: none;
+      }
+      .bottom {
+        max-height: none;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file