页面优化

src/views/index.vue

 <template>
   <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
     <div class="main_content" id="main" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
-      <div class="top" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}" :style="{'height':topHeiht}">
+      <div class="top" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
         <div class="page_title">{{$t('strings.homeTitle')}}</div>
-        <div class="picture-box" :style="{'transform': scale>0?'scale('+scale+')':''}">
+        <div class="picture-box">
           <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>
@@ -207,7 +207,7 @@ export default {
           errorTitle: "错误",
           keyErrorText: "密钥禁止使用",
           originErrorText: "不允许CORS",
-          noCameraErrorText: "相机未授权",
+          noCameraErrorText: "相机未授权"
         }
       };
       let _englishLanguagePack = {
@@ -317,7 +317,7 @@ export default {
           errorTitle: "Error",
           keyErrorText: "Key Forbidden",
           originErrorText: "Not allowed by CORS",
-          noCameraErrorText: "Camera not detected",
+          noCameraErrorText: "Camera not detected"
         }
       };
       let _frenchLanguagePack = {
@@ -434,7 +434,7 @@ export default {
           errorTitle: "Erreur",
           keyErrorText: "Interdire l'utilisation des clés",
           originErrorText: "Cors not allowed",
-          noCameraErrorText: "Caméra non détectée",
+          noCameraErrorText: "Caméra non détectée"
         }
       };
       let _spanishLanguagePack = {
@@ -549,7 +549,7 @@ export default {
           errorTitle: "Error",
           keyErrorText: "Desactivar la clave",
           originErrorText: "CORS no permite",
-          noCameraErrorText: "Cámara no detectada",
+          noCameraErrorText: "Cámara no detectada"
         }
       };
       switch (this.currentLanguage) {
@@ -758,8 +758,10 @@ export default {
     .top {
       position: relative;
       width: 100%;
+      height: calc(var(--vh, 1vh) * 100);
       background: url("../assets/images/gesture/introduceBg.png") no-repeat top
         center;
+      background-size: 100% 100%;
       overflow: hidden;
       .page_bg {
         width: 100%;
@@ -784,10 +786,10 @@ export default {
       }
       .picture-box {
         position: absolute;
-        bottom: 0;
+        top: 0;
         left: 0;
         width: 100%;
-        height: 100%;
+        height: calc(var(--vh, 1vh) * 100);
         .page_bg2 {
           width: 100%;
           position: absolute;
@@ -857,10 +859,13 @@ export default {
     .bottom {
       flex: 1;
       width: 375px;
+      height: 150px;
       display: flex;
       justify-content: center;
       align-items: center;
-      position: relative;
+      position: absolute;
+      left: 0;
+      bottom: 0;
       .bottomBtn {
         display: flex;
         flex-direction: column;
@@ -1019,8 +1024,10 @@ export default {
     .top {
       position: relative;
       width: 100%;
+      height: calc(var(--vh, 1vh) * 100);
       background: url("../assets/images/gesture/introduceBg.png") no-repeat top
         center;
+      background-size: 100% 100%;
       overflow: hidden;
       flex: 1;
       .page_bg {
@@ -1031,7 +1038,7 @@ export default {
       }
 
       .page_title {
-        font-size: .56rem;
+        font-size: 0.56rem;
         font-family: Source Han Sans SC;
         font-weight: bold;
         color: #f68682;
@@ -1046,10 +1053,10 @@ export default {
       }
       .picture-box {
         position: absolute;
-        bottom: 0;
+        top: 0;
         left: 0;
         width: 100%;
-        height: 100%;
+        height: calc(var(--vh, 1vh) * 100);
         .page_bg2 {
           width: 100%;
           position: absolute;
@@ -1116,12 +1123,14 @@ export default {
     .bottom {
       flex: 1;
       width: 10rem;
+      height: 4rem;
       display: flex;
       justify-content: center;
       align-items: center;
-      position: relative;
-      min-height: 3rem;
-      max-height: 3.4rem;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+
       .bottomBtn {
         display: flex;
         justify-content: center;