diff --git a/src/lang/en.ts b/src/lang/en.ts index be1b835..3392750 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -1,6 +1,7 @@ export default { AwardsPage: { submitApplication: 'Submit your Application', + submitMobile:'Apply', contactUs: 'Contact Us', contactHeader: 'We\'re here to help', contactDesc:'For questions on eligibility, competition rules,\n judging criteria, or any other enquiries,\n feel free to reach out via our official email.', diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts index c872579..08f50d5 100644 --- a/src/lang/zh-cn.ts +++ b/src/lang/zh-cn.ts @@ -1,6 +1,7 @@ export default { AwardsPage: { submitApplication: '提交申请', + submitMobile: '申请', contactUs: '联系我们', contactHeader: '有关比赛,欢迎咨询', contactDesc: diff --git a/src/views/AwardPage/container.vue b/src/views/AwardPage/container.vue index 54498b7..a90b6cd 100644 --- a/src/views/AwardPage/container.vue +++ b/src/views/AwardPage/container.vue @@ -8,7 +8,7 @@
-
{{ $t('AwardsPage.contactUs') }}
+
{{ $t('AwardsPage.contactUs') }}
@@ -100,7 +100,9 @@ import { useRoute, useRouter } from 'vue-router' import { useI18n } from 'vue-i18n' import { getCookie, setCookie } from '@/utils/cookie' import { useMessage } from '@/components/Message/message' +import { useIsMobile } from '@/utils/isMobile' +const { isMobile } = useIsMobile() const { success, error } = useMessage() const route = useRoute() @@ -128,11 +130,15 @@ const handleCloseQRcode = () => { type BtnType = 'index' | 'form' const btnType = ref('index') const btnText = computed(() => { - if (btnType.value === 'index') { - return locale.value === 'CHINESE_SIMPLIFIED' ? '提交申请' : 'Submit your Application' - } - if (btnType.value === 'form') { - return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back to Introduction' + if (isMobile.value) { + return t('AwardsPage.submitMobile') + } else { + if (btnType.value === 'index') { + return t('AwardsPage.submitApplication') + } + if (btnType.value === 'form') { + return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back to Introduction' + } } }) @@ -459,4 +465,29 @@ const handleBtnClick = () => { } } } + +@media screen and (max-width: 1200px) { + .header-wrapper { + .header { + padding-left: 6.6rem; + padding-right: 6.6rem; + + .header-right { + column-gap: 2rem; + .contact-icon { + width: 3.4rem; + height: 2.6rem; + } + .language{ + padding: 0 0.56rem; + } + } + } + } + .footer{ + row-gap: 0.8rem; + flex-direction: column; + justify-content: center; + } +}