style: 5月15之前文案
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export default {
|
||||
AwardsPage: {
|
||||
submitApplication: '提交申请',
|
||||
beforeStart:'申请开启在即...',
|
||||
submitMobile: '申请',
|
||||
contactUs: '联系我们',
|
||||
contactHeader: '有关比赛,欢迎咨询',
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user