注册页面移动端样式调整

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,13 @@
             </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' }
+                ]"
+				style="white-space: nowrap;"
+              >
                 {{ item?.detail }}
               </span>
             </div>
@@ -43,18 +50,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>
@@ -204,7 +218,7 @@ export default defineComponent({
               '支持草图创意和设计灵感教学',
               '基础3D设计功能'
             ],
-            btn: '立即开始'
+            btn: '订阅'
           },
           {
             title: '教育版',
@@ -317,7 +331,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',
@@ -348,7 +362,7 @@ export default defineComponent({
               'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
               'Customer and Technical Support'
             ],
-            btn: 'Get Started'
+            btn: 'Subscribe'
           },
           {
             title: 'Academic',
@@ -620,6 +634,7 @@ export default defineComponent({
         border-radius: 1.3rem;
         margin: 0;
         margin-bottom: 2.8rem;
+		padding: 2rem;
         padding-bottom: 1.3rem;
       }
       .product_signUp_box {
@@ -655,14 +670,13 @@ export default defineComponent({
         font-weight: 400;
         font-size: 1.4rem;
         color: #797878;
-        margin-bottom: 1.2rem;
         font-family: 'pingfang_regular';
         &.academic {
           margin-bottom: 0.4rem;
         }
         @media (max-width: 767px) {
           font-size: 1.25rem;
-          margin-bottom: 1.25rem;
+          // margin-bottom: 1.25rem;
         }
       }
       .price {
@@ -697,8 +711,9 @@ export default defineComponent({
           font-size: 3.6rem;
           letter-spacing: -0.06rem;
           color: #1b223c;
+          margin: 0.3rem 0;
           @media (max-width: 767px) {
-            font-size: 3.14rem;
+            font-size: 3rem;
           }
         }
         > span {
@@ -712,6 +727,7 @@ export default defineComponent({
           }
           @media (max-width: 767px) {
             font-size: 1.2rem;
+			margin-top: 1rem;
             // margin-left: 0.7rem;
             // margin-bottom: 1rem;
           }
@@ -725,7 +741,6 @@ export default defineComponent({
         font-size: 1.4rem;
         position: absolute;
         width: 12.41rem;
-        height: 3.4rem;
         line-height: 3.4rem;
         text-align: center;
         top: 0;
@@ -744,6 +759,9 @@ export default defineComponent({
           border-top-right-radius: 1.1rem;
           border-bottom-left-radius: 0.4rem;
           font-size: 1rem;
+		  line-height: 2.5rem;
+		  font-weight: 500;
+		  width: 9rem;
         }
       }
       .product_detail {
@@ -761,13 +779,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;
@@ -813,11 +828,63 @@ export default defineComponent({
         .product_detail {
           padding-top: 3.1rem;
           justify-content: space-evenly;
+          li {
+            font-size: 1.6rem;
+          }
+        }
+      }
       @media (max-width: 767px) {
-            padding-top: 0;
+        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;
       }
     }
   }