bugfix: 移动端适配

This commit is contained in:
2026-03-27 13:57:02 +08:00
parent 14b951d3fb
commit e7d967554a
5 changed files with 29 additions and 16 deletions

View File

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

View File

@@ -18,7 +18,7 @@ export default {
step2Title: '2. 通过 AiDA 设计您的作品', step2Title: '2. 通过 AiDA 设计您的作品',
step2Desc: '申请者必须仅使用AiDA\n平台完成设计作品。', step2Desc: '申请者必须仅使用AiDA\n平台完成设计作品。',
step2ListTitle: '您的作品应清楚体现以下内容:', step2ListTitle: '您的作品应清楚体现以下内容:',
step2List: ['· AiDA在创作中的应用方式', '· 您的设计理念和创意方向', '· AI与人类创意的融合'], step2List: ['AiDA在创作中的应用方式', '您的设计理念和创意方向', 'AI与人类创意的融合'],
step3Title: '3. 准备提交材料', step3Title: '3. 准备提交材料',
processVideo: '创作过程视频', processVideo: '创作过程视频',
processVideoDesc: '请提供一段屏幕录制视频,展示您\n使用AiDA的创作过程。', processVideoDesc: '请提供一段屏幕录制视频,展示您\n使用AiDA的创作过程。',

View File

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

View File

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

View File

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