语言切换问题

src/styles/index.scss

@@ -2,7 +2,8 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
   margin: 0;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -47,9 +48,9 @@ a:hover {
 
 //main-container全局样式
 .app-main {
-  min-height: 100%
+  min-height: 100%;
 }
 
 .app-container {
   padding: 20px;
-}
\ No newline at end of file
+}

src/views/index.vue

@@ -948,7 +948,11 @@ export default {
       this.scale = 1 - (scale - 1) / 100;
       console.log(this.scale);
     }
-
+    console.log(this.$i18n.locale);
+    let lang = localStorage.getItem("lang");
+    if (lang) {
+      this.$i18n.locale = lang;
+    }
     if (this.$i18n.locale == "zh") {
       this.$i18n.locale = "en";
     } else if (this.$i18n.locale == "en") {
@@ -1215,6 +1219,7 @@ export default {
         transition: opacity 0.8s ease;
       }
       &.big {
+
         .top-text {
           margin: 45.5px auto 10px auto;
         }
@@ -1276,12 +1281,12 @@ export default {
 
           .summary-points {
             &.points-1 {
-              width: 89px;
+              width: 150px;
               position: absolute;
               left: 0;
               top: -69px;
               .points-text {
-                width: 129px;
+                width: 150px;
               }
               .points-image {
                 position: absolute;
@@ -1314,7 +1319,7 @@ export default {
               width: 108px;
               position: absolute;
               right: 2.5px;
-              top: 35.5px;
+              top: 55.5px;
               .points-text {
                 width: 83px;
               }
@@ -1347,16 +1352,16 @@ export default {
             }
 
             &.points-5 {
-              width: 160px;
+              width: 200px;
               position: absolute;
               right: 2.5px;
               bottom: -79px;
               .points-text {
-                width: 144px;
+                width: 188px;
               }
               .points-image {
                 position: absolute;
-                left: 3px;
+                left: 43px;
                 top: -63px;
                 height: 50.5px;
                 width: 1px;
@@ -1639,7 +1644,7 @@ export default {
         display: flex;
         position: absolute;
         left: 0;
-        bottom: 0;
+        bottom: .5333rem;
         width: 100%;
         flex-direction: column;
         justify-content: center;
@@ -1658,6 +1663,9 @@ export default {
         transition: opacity 0.8s ease;
       }
       &.big {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
         .top-text {
           margin: 1.2133rem auto 0.2667rem auto;
         }
@@ -1665,7 +1673,9 @@ export default {
           margin: 0 auto 2rem auto;
         }
         .botton-box {
+          position: relative;
           bottom: 1.6rem;
+          margin-top: 2.1333rem;
           .tips-text {
             margin-top: 0.5867rem;
           }
@@ -1717,14 +1727,13 @@ export default {
 
           .summary-points {
             &.points-1 {
-              width: 2.3733rem;
+              width: 4rem;
               position: absolute;
               left: 0;
               top: -1.84rem;
               .points-text {
-                width: 2.3733rem;
+                width: 4rem;
               }
-
               .points-image {
                 position: absolute;
                 left: 0.68rem;
@@ -1756,13 +1765,13 @@ export default {
               width: 2.88rem;
               position: absolute;
               right: 0.0667rem;
-              top: 0;
+              top: 1.48rem;
               .points-text {
                 width: 2.2133rem;
               }
               .points-image {
                 position: absolute;
-                top: 1.48rem;
+                top: 0.5333rem;
                 left: 0.2133rem;
               }
               .line {
@@ -1789,23 +1798,23 @@ export default {
             }
 
             &.points-5 {
-              width: 4.2667rem;
+              width: 5.3333rem;
               position: absolute;
-              right: 0.0667rem;
+              right: .0667rem;
               bottom: -2.1067rem;
               .points-text {
-                width: 3.84rem;
+                width: 5.0133rem;
               }
               .points-image {
                 position: absolute;
-                left: 0.08rem;
+                left: 1.1467rem;
                 top: -1.68rem;
                 height: 1.3467rem;
-                width: 0.0267rem;
+                width: .0267rem;
                 overflow: hidden;
               }
               .line {
-                width: 0.0267rem;
+                width: .0267rem;
               }
             }
           }

src/views/startIndex.vue

@@ -161,7 +161,19 @@ export default {
       this.scale = 1 - (scale - 1) / 100;
       console.log(this.scale);
     }
-    this.$i18n.locale = "en";
+    let lang = localStorage.getItem("lang");
+    if (lang) {
+      this.$i18n.locale = lang;
+    } else {
+      this.$i18n.locale = "en";
+    }
+    if (this.$i18n.locale == "en") {
+      this.currentLanguage = 0;
+    } else if (this.$i18n.locale == "fr") {
+      this.currentLanguage = 1;
+    } else if (this.$i18n.locale == "es") {
+      this.currentLanguage = 2;
+    }
     this._isMobile = isMobile();
     if (!isMobile()) {
       document.getElementsByTagName("body")[0].style.minWidth = "750px";