feat: container移动端

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.',

src/lang/zh-cn.ts

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

src/views/AwardPage/container.vue

@@ -8,7 +8,7 @@
         <div class="header-right flex align-center">
           <div class="contact flex align-center" @click="handleContactClick">
             <img src="@/assets/images/award/mail.png" class="contact-icon" />
-            <div class="text">{{ $t('AwardsPage.contactUs') }}</div>
+            <div class="text" v-if="!isMobile">{{ $t('AwardsPage.contactUs') }}</div>
           </div>
           <div class="gap" />
           <div class="language flex align-center">
@@ -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,12 +130,16 @@ const handleCloseQRcode = () => {
 type BtnType = 'index' | 'form'
 const btnType = ref<BtnType>('index')
 const btnText = computed(() => {
+  if (isMobile.value) {
+    return t('AwardsPage.submitMobile')
+  } else {
     if (btnType.value === 'index') {
-    return locale.value === 'CHINESE_SIMPLIFIED' ? '提交申请' : 'Submit your Application'
+      return t('AwardsPage.submitApplication')
     }
     if (btnType.value === 'form') {
       return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back to Introduction'
     }
+  }
 })
 
 watch(
@@ -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;
+  }
+}
 </style>