style: 移动端适配

src/App.vue

@@ -10,4 +10,19 @@ import RouteCache from '@/components/RouteCache.vue'
 #app {
   font-size: 1.6rem;
 }
+html,
+body {
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+  &::-webkit-scrollbar-thumb {
+    display: none;
+  }
+  &::-webkit-scrollbar-track {
+    display: none;
+  }
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
 </style>

src/assets/css/style.css

@@ -18,7 +18,6 @@ body,
 #app {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 @keyframes loading {
   0% {

src/assets/css/style.less

@@ -20,7 +20,6 @@ body,
 #app {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
 @keyframes loading {

src/lang/en.ts

@@ -8,7 +8,7 @@ export default {
     sendEmail: 'Send Email',
     copyMail: 'Successfully copied to clipboard!',
     sendEmailFailed: 'Failed to open email client, we have copied the email to your clipboard.',
-    applicationDeadline: 'Application Deadline:15th July 2026',
+    applicationDeadline: 'Application Deadline:\n15th July 2026',
     howToApply: 'How to Apply',
     stepByStep: 'Step by step',
     step1Title: 'Step 1. Become an\nAiDA Subscriber​',
@@ -145,7 +145,7 @@ export default {
       'Please review your submitted information in the AiDA in-platform message.\nYou may edit it if needed. Competition updates and results will be sent via email.',
     deadlinePassed: 'Application Deadline Passed',
     deadlinePassedDesc:
-      'The submission deadline for AiDA Global Fashion Award 2026 has ended.\nWe are no longer accepting new applications.',
+      'The submission deadline for AiDA Global Design Award 2026 has ended.\nWe are no longer accepting new applications.',
     uploadInProgress: 'Upload in progress…',
     uploadSuccess: 'Uploaded Successfully',
     uploadFailed: 'Upload failed',

src/lang/zh-cn.ts

@@ -9,7 +9,7 @@ export default {
     sendEmail: '发送邮件',
     copyMail:'已成功复制到剪贴板',
     sendEmailFailed: '无法打开邮件客户端，我们已将邮箱地址复制到您的剪贴板。',
-    applicationDeadline: '申请期限：2026年7月15日',
+    applicationDeadline: '申请期限：\n2026年7月15日',
     howToApply: '申请方法',
     stepByStep: '步骤指南',
     step1Title: '1. 成为 AiDA 订阅用户',

src/views/AwardPage/components/ApplySection.vue

@@ -569,10 +569,12 @@ ul {
               padding: 0 6rem 6.4rem;
               font-size: 2rem;
               margin-top: 2rem;
-              .list-items li::before {
+              .list-items {
+                li::before {
                   border-radius: 50%;
                 }
               }
+            }
             .context {
               white-space: normal;
               padding: 0 6rem;

src/views/AwardPage/components/Bloom.vue

@@ -191,7 +191,8 @@ p {
   &.mobile {
     background: url('@/assets/images/mobile_version_background/bloom_bg.png') no-repeat;
     background-size: 100% 100%;
-    height: 83.1rem;
+    // height: 83.1rem;
+    height: 110vw;
     padding-top: 6rem;
     .title {
       font-size: 3.2rem;
@@ -202,7 +203,8 @@ p {
       margin-bottom: 6.2rem;
     }
     .desc {
-      padding: 0 6.5rem 0 6.7rem;
+      // padding: 0 6.5rem 0 6.7rem;
+      padding: 0 8.5vw;
       font-size: 2rem;
       line-height: 3rem;
     }

src/views/AwardPage/components/SelectionSection.vue

@@ -191,7 +191,7 @@ onBeforeUnmount(() => {
       grid-column-gap: 6rem;
       grid-row-gap: 7rem;
       .item {
-        width: 21rem;
+        width: initial;
         height: initial;
         &:nth-of-type(3) {
 					width: 30rem;

src/views/AwardPage/components/TimeLine.vue

@@ -2,14 +2,14 @@
   <div
     ref="containerRef"
     class="timeline-container container flex flex-col align-center"
-    :class="{ mobile: isMobileOrNarrow, vertical: showVertical }"
+    :class="{ mobile: isMobileOrNarrow, vertical: isMobile }"
   >
     <div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
     <div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div>
 
     <!-- 纵向时间线：移动端或宽度 <= 1200px -->
     <div
-      v-if="showVertical"
+      v-if="isMobile"
       class="timeline-point timeline-vertical flex flex-col"
       ref="timelineRef"
     >
@@ -73,8 +73,7 @@ const { t } = useI18n()
 const isMobile = inject<boolean>('isMobile')
 const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1201)
 
-const showVertical = computed(() => !!isMobile || windowWidth.value <= 1200)
+const isMobileOrNarrow = computed(() => isMobile.value)
-const isMobileOrNarrow = computed(() => showVertical.value)
 
 const updateWindowWidth = () => {
   windowWidth.value = window.innerWidth
@@ -123,7 +122,7 @@ const playAnimation = () => {
   const subtitle = containerRef.value.querySelector('.desc')
   const timeline = containerRef.value.querySelector('.timeline-point')
   const line = containerRef.value.querySelector(
-    showVertical.value ? '.vertical-line' : '.timeline-line'
+    isMobile.value ? '.vertical-line' : '.timeline-line'
   )
 
   const tl = gsap.timeline()
@@ -131,7 +130,7 @@ const playAnimation = () => {
 
   // 整体 timeline 的裁剪展开（仅横向使用）
   // 纵向时跳过裁剪动画，改用每个 item 从上方落下的动画
-  if (timeline && !showVertical.value) {
+  if (timeline && !isMobile.value) {
     tl.fromTo(
       timeline,
       {
@@ -149,7 +148,7 @@ const playAnimation = () => {
   // 线条动画：横向 scaleX，纵向 scaleY
   // 纵向时线条与 item 动画同步进行
   if (line) {
-    if (showVertical.value) {
+    if (isMobile.value) {
       tl.from(
         line,
         {
@@ -192,11 +191,11 @@ const playAnimation = () => {
 
   // 行内内容：桌面端用 .grid-cell，纵向用 .vertical-item
   // 纵向时，每个 item 从上方落下 + 渐显
-  const textItems = showVertical.value
+  const textItems = isMobile.value
     ? containerRef.value.querySelectorAll('.vertical-item')
     : containerRef.value.querySelectorAll('.grid-cell')
   if (textItems && textItems.length) {
-    if (showVertical.value) {
+    if (isMobile.value) {
       // 纵向：每个 item 从上方落下 + 渐显
       tl.from(
         textItems,

src/views/AwardPage/container.vue

@@ -91,6 +91,7 @@
         {{ $t('AwardsPage.sendEmail') }}
       </div>
     </div>
+    <!-- <div class="contact-modal-mobile-wrapper"></div> -->
   </div>
 </template>
 
@@ -261,20 +262,6 @@ const handleBtnClick = () => {
 </script>
 
 <style lang="less" scoped>
-.award-container {
-  overflow: auto;
-  height: 100vh;
-  // 隐藏滚动条箭头，只显示滚动条本体
-  box-sizing: border-box;
-
-  &::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
 .header-wrapper {
   .header-placeholder {
     height: 8rem;
@@ -478,13 +465,13 @@ const handleBtnClick = () => {
           width: 3.4rem;
           height: 2.6rem;
         }
-        .language{
+        .language {
           padding: 0 0.56rem;
         }
       }
     }
   }
-  .footer{
+  .footer {
     row-gap: 0.8rem;
     flex-direction: column;
     justify-content: center;

src/views/AwardPage/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="award-page" :class="{ 'is-zh': isZh }">
+  <div class="award-page" :class="{ 'is-zh': isZh, mobile: isMobile }">
-    <div class="banner"  :class="{ 'mobile': isMobile }">
+    <div class="banner" :class="{ mobile: isMobile }">
       <video
         :src="bannerUrl"
         autoplay
@@ -59,11 +59,16 @@ const isZh = computed(() => {
 })
 
 const bannerUrl = computed(() => {
+  let url = null
   if (isMobile.value) {
-    return isZh.value ? bannerZhMobile : bannerMobile
+    console.log('移动端-----------')
+    url = isZh.value ? bannerZhMobile : bannerMobile
   } else {
-    return isZh.value ? bannerZh : banner
+    url = isZh.value ? bannerZh : banner
   }
+  console.log('url-----------', url)
+
+  return url
 })
 
 const handleSubmitApplication = () => {
@@ -138,12 +143,18 @@ const handleSubmitApplication = () => {
     }
   }
 }
-@media screen and (max-width: 1200px) {
+
-  .banner {
+.banner.mobile {
-    height: 123.4rem;
+  height: auto;
   .submit-btn {
-      bottom: 57rem;
+    top: 48%;
-      left: 6.6rem;
+    left: 8%;
+    width: 48rem;
+    .ddl {
+      white-space: pre-line;
+      text-align: left;
+      padding-left: 4rem;
+      bottom: -6rem;
     }
   }
 }