style: 移动端样式

src/component/mainPage/signUp/index.vue

@@ -22,7 +22,8 @@
           :class="[
             { recommended: item.recommended },
             { monthly: monthlyOrYearly === 'monthly' },
-            { yearly: monthlyOrYearly === 'yearl' }
+            { yearly: monthlyOrYearly === 'yearl' },
+            { academic: item.type === 'academic' }
           ]"
         >
           <div class="product_signUp_box">
@@ -33,7 +34,12 @@
             </div>
             <div class="price" v-if="item.type != 'academic'">
               <div>{{ item?.price }}</div>
-              <span :class="{ yearl: monthlyOrYearly == 'yearl' }">
+              <span
+                :class="[
+                  { yearl: monthlyOrYearly == 'yearl' },
+                  { personal: item.type === 'personal' }
+                ]"
+              >
                 {{ item?.detail }}
               </span>
             </div>
@@ -43,18 +49,25 @@
             </div>
             <ul
               class="product_detail"
-              :class="{ academic: item.type == 'academic' && !isSelectSuccessively }"
+              :class="[
+                { academic: item.type == 'academic' && !isSelectSuccessively },
+                { chinese: isSelectSuccessively }
+              ]"
             >
               <li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
             </ul>
             <div
-              class="gallery_btn gallery_btn_radius"
+              class="gallery_btn gallery_btn_radius submit"
               v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'"
               @click="createAccount"
             >
               {{ item?.btn }}
             </div>
-            <div class="gallery_btn gallery_btn_radius" v-else @click="handleContactUs">
+            <div
+              class="gallery_btn gallery_btn_radius submit"
+              v-else
+              @click="handleContactUs"
+            >
               {{ item?.btn }}
             </div>
           </div>
@@ -317,7 +330,7 @@ export default defineComponent({
           {
             title: 'Free',
             img: CChargeIcon,
-            type: 'personal',
+            type: 'free',
             info: 'Your AI Fashion Design Assistant',
             price: 'HK$0',
             detail: '5 days · 50 credits',
@@ -661,7 +674,7 @@ export default defineComponent({
         }
         @media (max-width: 767px) {
           font-size: 1.25rem;
-          margin-bottom: 1.25rem;
+          // margin-bottom: 1.25rem;
         }
       }
       .price {
@@ -761,13 +774,10 @@ export default defineComponent({
           // margin-bottom: 0.3rem;
           font-size: 1.3rem;
           font-weight: 500;
-          @media (max-width: 767px) {
-            font-size: 1.15rem;
-          }
-        }
-        li:last-child {
-          margin-bottom: 0;
         }
+        // li:last-child {
+        //   margin-bottom: 0;
+        // }
       }
       .gallery_btn {
         line-height: 4.6rem;
@@ -777,7 +787,7 @@ export default defineComponent({
         font-size: 1.7rem;
         font-weight: 500;
         background-color: #1b223c;
-		&:hover {
+        &:hover {
           background-color: #fff;
         }
         @media (max-width: 767px) {
@@ -813,15 +823,64 @@ export default defineComponent({
         .product_detail {
           padding-top: 3.1rem;
           justify-content: space-evenly;
-          @media (max-width: 767px) {
-            padding-top: 0;
-            justify-content: flex-end;
-          }
-          li{
+          li {
             font-size: 1.6rem;
           }
         }
       }
+      @media (max-width: 767px) {
+        width: 31.9rem;
+        height: 41.1rem;
+        padding: 2.09rem 2.09rem 2.11rem;
+        &.academic {
+          height: 52rem;
+        }
+        .product_signUp_box {
+          .img {
+            width: 3.4rem;
+            height: 3.4rem;
+          }
+          .title {
+            font-size: 2.3rem;
+            margin-bottom: 0;
+            letter-spacing: 0.05rem;
+          }
+          .info {
+            font-size: 1.2rem;
+          }
+          .price {
+            margin-bottom: 0;
+            div {
+              font-size: 3.1rem;
+            }
+            span {
+              font-size: 1.26rem;
+              &.personal {
+                font-size: 0.95rem;
+              }
+            }
+          }
+          .product_detail {
+            padding-top: 2rem;
+            justify-content: flex-end;
+            margin-bottom: 0;
+            &.chinese{
+              justify-content: space-evenly;
+            }
+            li {
+              font-size: 1.15rem;
+            }
+          }
+          .submit {
+            margin-top: 2rem;
+          }
+        }
+      }
+    }
+    .submit {
+      @media (max-width: 767px) {
+        margin-top: 2rem;
+      }
     }
   }
 }

src/views/Register.vue

@@ -79,7 +79,8 @@ import {
   nextTick,
   computed,
   onMounted,
-  onBeforeUnmount
+  onBeforeUnmount,
+  watch
 } from 'vue'
 import { setCookie, getCookie, WriteCookie, clonAllCookie } from '@/tool/cookie'
 import { Https } from '@/tool/https'
@@ -131,6 +132,20 @@ export default defineComponent({
         }
       }, 500)
     }
+
+    watch(
+      () => data.isSelectSuccessively,
+      val => {
+        let str = ''
+        if (val) {
+          str = 'CHINESE_SIMPLIFIED'
+        } else {
+          str = 'ENGLISH'
+        }
+        localStorage.setItem('loginLanguage', str)
+      }
+    )
+
     onMounted(() => {
       updataIsMoblie()
       const savedLang = localStorage.getItem('loginLanguage')