bugfix: 移动端适配
This commit is contained in:
@@ -20,6 +20,7 @@ body,
|
|||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overscroll-behavior: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes loading {
|
@keyframes loading {
|
||||||
|
|||||||
@@ -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的创作过程。',
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user