bugfix: 移动端适配

src/assets/css/style.less

@@ -20,6 +20,7 @@ body,
 #app {
   width: 100%;
   height: 100%;
+  overscroll-behavior: none;
 }
 
 @keyframes loading {

src/lang/zh-cn.ts

@@ -14,11 +14,11 @@ export default {
     howToApply: '申请方法',
     stepByStep: '步骤指南',
     step1Title: '1. 成为 AiDA 订阅用户',
-    step1Desc: '所有申请者在提交时必须是\n活跃的AiDA 订阅用户。\n您可以选择按月或按年订阅。​',
+    step1Desc: '所有申请者在提交时必须是\n活跃的AiDA订阅用户。\n您可以选择按月或按年订阅。​',
     step2Title: '2. 通过 AiDA 设计您的作品',
     step2Desc: '申请者必须仅使用AiDA\n平台完成设计作品。​',
     step2ListTitle: '您的作品应清楚体现以下内容：',
-    step2List: ['· AiDA在创作中的应用方式', '· 您的设计理念和创意方向', '· AI与人类创意的融合'],
+    step2List: ['AiDA在创作中的应用方式', '您的设计理念和创意方向', 'AI与人类创意的融合'],
     step3Title: '3. 准备提交材料',
     processVideo: '创作过程视频',
     processVideoDesc: '请提供一段屏幕录制视频,展示您\n使用AiDA的创作过程。​',

src/views/AwardPage/components/ApplySection.vue

@@ -32,7 +32,7 @@
             :class="{ 'flex-col': isMobile && !isPad }"
           >
             <div class="context" v-for="el in item.desc">
-              {{ $t(el) }}
+              {{ isMobile ? $t(el).replace(/\n/g, '') : $t(el) }}
             </div>
             <div class="list" v-if="item.listTitle">
               <div class="list-title">{{ $t(item.listTitle) }}</div>

src/views/AwardPage/components/SelectionSection.vue

@@ -134,7 +134,7 @@ onBeforeUnmount(() => {
   }
   .sub-title {
     color: #f95750;
-    font-family: 'Popins';
+    font-family: 'PopinsMedium';
     font-weight: 400;
     font-size: 3rem;
     margin-bottom: 11.8rem;

src/views/AwardPage/contestants.vue

@@ -41,8 +41,13 @@
       :class="{ mobile: isMobile, tablet: isTablet }"
     >
       <div class="form-header" v-if="showStep(0) && (isMobile || isTablet)">
-        <div class="form-title poppins-bold">
-          {{ t('AwardApply.emailVerification') }}
+        <div class="form-title poppins-bold flex align-center">
+          <span> {{ t('AwardApply.emailVerification') }}</span>
+          <img
+            v-if="hasValidEmail && isMobile"
+            src="@/assets/images/award/checked.png"
+            class="checked-icon"
+          />
         </div>
         <div class="desc">{{ t('AwardApply.aidaUsersOnly') }}</div>
       </div>
@@ -68,7 +73,7 @@
                   {{ isCountingDown ? formatCountdown(countdown) : t('AwardApply.sendCode') }}
                 </div>
                 <img
-                  v-if="hasValidEmail"
+                  v-if="hasValidEmail && !isMobile"
                   src="@/assets/images/award/checked.png"
                   alt=""
                   class="checked-icon"
@@ -84,7 +89,7 @@
             class="email-box verify-box full-row"
             v-show="showStep(0)"
           >
-            <a-form-item name="verify" required :label="t('AwardApply.verifyCode')">
+            <a-form-item name="" required :rules="[]" :label="t('AwardApply.verifyCode')">
               <div class="email-wrapper flex align-center">
                 <a-input
                   v-model:value="mobileVerifyCode"
@@ -94,7 +99,7 @@
                   {{ t('AwardApply.verify') }}
                 </div>
                 <img
-                  v-if="hasValidEmail"
+                  v-if="hasValidEmail && !isMobile"
                   src="@/assets/images/award/checked.png"
                   alt=""
                   class="checked-icon"
@@ -238,7 +243,7 @@
                       {{ pdfList[0]?.name }}
                     </div>
                     <div @click="handleRemoveFile('pdf')" class="delete-file" title="delete file">
-                      <SvgIcon name="CDelete" color="red" />
+                      <SvgIcon name="CDelete" color="red" :size="isMobile ? '30' : '16'" />
                     </div>
                   </div>
                 </div>
@@ -295,7 +300,7 @@
                       {{ videoList[0]?.name }}
                     </div>
                     <div @click="handleRemoveFile('video')" class="delete-file" title="delete file">
-                      <SvgIcon name="CDelete" color="red" />
+                      <SvgIcon name="CDelete" color="red" :size="isMobile ? '30' : '16'" />
                     </div>
                   </div>
                 </div>
@@ -317,7 +322,7 @@
           :class="{ mobile: isMobile, tablet: isTablet }"
           v-show="showStep(3)"
         >
-          <div class="confitions-title poppins-bold">
+          <div class="conditions-title poppins-bold">
             {{ t('AwardApply.termsAndConditions') }}
           </div>
           <div class="condition-list flex flex-col">
@@ -767,7 +772,7 @@ const handleVerifyCode = async () => {
     },
     fullData: true
   }).then((res) => {
-    // console.log('coderes', res)
+    console.log('coderes', res)
 
     form.value.secureToken = res.data.secureToken
     // form.value.secureToken = '123456'
@@ -1480,6 +1485,13 @@ onUnmounted(() => {
       padding: 3rem 3rem 0;
       height: auto;
       padding-bottom: 2.4rem;
+      .form-title {
+        column-gap: 1.2rem;
+        .checked-icon {
+          width: 3rem;
+          height: 3rem;
+        }
+      }
     }
     .form-content {
       padding: 0 3rem 20rem;
@@ -1497,13 +1509,13 @@ onUnmounted(() => {
   text-align: center;
   margin: 6rem 3rem 0;
   background-color: #454545;
-  height: 5rem;
+  height: 8rem;
+  line-height: 8rem;
   border-radius: 0.8rem;
   color: #fff;
-  line-height: 5rem;
   font-family: 'PoppinsBold';
   font-weight: 600;
-  font-size: 2.4rem;
+  font-size: 2.6rem;
   cursor: pointer;
   &.back {
     margin: 6rem 6.6rem 0;