style: 5月15之前文案

This commit is contained in:
2026-04-21 10:27:20 +08:00
parent 18dcf18fb7
commit f6d027474a
4 changed files with 39 additions and 13 deletions

View File

@@ -1,6 +1,7 @@
export default {
AwardsPage: {
submitApplication: 'Submit your Application',
beforeStart: 'Application Open Soon...',
submitMobile: 'Apply',
contactUs: 'Contact Us',
contactHeader: "We're here to help",

View File

@@ -1,6 +1,7 @@
export default {
AwardsPage: {
submitApplication: '提交申请',
beforeStart:'申请开启在即...',
submitMobile: '申请',
contactUs: '联系我们',
contactHeader: '有关比赛,欢迎咨询',

View File

@@ -29,9 +29,9 @@
</div>
</div>
<div class="gap" />
<div class="submit flex align-center" @click="handleBtnClick">
<div class="submit flex align-center" :class="{ before: !start }" @click="handleBtnClick">
<div class="text">{{ btnText }}</div>
<img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
<img v-if="start" src="@/assets/images/award/arrow.png" alt="" class="arrow" />
</div>
</div>
<div v-else class="header-right mobile" @click="handleChangeDrawer">
@@ -151,7 +151,11 @@
v-if="showDrawer || drawerClosing"
>
<div class="drawer-wrapper" @animationend="handleDrawerAnimationEnd">
<div class="drawer-item flex align-center space-between" @click="handleBtnClick">
<div
class="drawer-item flex align-center space-between"
:class="{ before: !start }"
@click="handleBtnClick"
>
<span class="text">{{ btnText }}</span>
<img src="@/assets/images/award/drawer-arrow.png" class="drawer-icon arrow" />
</div>
@@ -230,11 +234,17 @@ const handleCloseQRcode = () => {
showQRcode.value = false
}
const start = computed(() => {
const targetDate = new Date('2026-05-15T00:00:00')
const now = new Date()
return now > targetDate
})
type BtnType = 'index' | 'form'
const btnType = ref<BtnType>('index')
const btnText = computed(() => {
if (btnType.value === 'index') {
return t('AwardsPage.submitApplication')
return start.value ? t('AwardsPage.submitApplication') : t('AwardsPage.beforeStart')
}
if (btnType.value === 'form') {
return t('AwardApply.backToIntroduction')
@@ -370,6 +380,7 @@ const handleChangeLanguage = (language) => {
}
const handleBtnClick = () => {
if (!start.value) return
const lang = route.params.lang ? `/${route.params.lang}` : ''
if (btnType.value === 'index') {
router.push({ path: `${lang}/contestants`, query: { ...route.query } })
@@ -436,6 +447,9 @@ const handleBtnClick = () => {
.submit {
cursor: pointer;
column-gap: 1rem;
&.before {
color: #a8a8a8;
}
.arrow {
width: 2.4rem;
height: 2.4rem;
@@ -512,6 +526,9 @@ const handleBtnClick = () => {
}
}
}
&.before {
color: #a8a8a8;
}
}
.gap {

View File

@@ -12,9 +12,13 @@
x5-playsinline
:controls="false"
></video>
<div class="submit-btn flex flex-center" @click="handleSubmitApplication">
<div>{{ $t('AwardsPage.submitApplication') }}</div>
<img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
<div
class="submit-btn flex flex-center"
:class="{ before: !start }"
@click="handleSubmitApplication"
>
<div>{{ start ? $t('AwardsPage.submitApplication') : $t('AwardsPage.beforeStart') }}</div>
<img v-if="start" src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
<div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
</div>
</div>
@@ -57,12 +61,10 @@ provide('isMobile', isMobile)
provide('isPad', isTablet)
onMounted(() => {
// router.replace('/')
// setTimeout(() => {
// console.log('是否平板-------', isTablet.value)
// console.log('是否移动端-------', isMobile.value)
// }, 1000)
const start = computed(() => {
const targetDate = new Date('2026-05-15T00:00:00')
const now = new Date()
return now > targetDate
})
const isZh = computed(() => {
@@ -82,6 +84,7 @@ const bannerUrl = computed(() => {
})
const handleSubmitApplication = () => {
if (!start.value) return
router.push({
path: '/contestants',
query: {
@@ -127,6 +130,10 @@ const handleSubmitApplication = () => {
bottom: 15.7rem;
backdrop-filter: blur(5px);
cursor: pointer;
&.before {
cursor: default;
color: #a8a8a8;
}
.arrow {
width: 3.83rem;
height: 3.83rem;