feat: 移动端适配

src/views/AwardPage/components/TimeLine.vue

@@ -2,13 +2,17 @@
   <div
     ref="containerRef"
     class="timeline-container container flex flex-col align-center"
-    :class="{ mobile: isMobile && !isPad, vertical: isMobile && !isPad ,'is-pad': isPad}"
+    :class="{ mobile: isMobile && !isPad, vertical: isMobile && !isPad, 'is-pad': isPad }"
   >
     <div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
     <div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div>
 
     <!-- 纵向时间线：移动端（排除平板） -->
-    <div v-if="isMobile && !isPad" class="timeline-point timeline-vertical flex flex-col" ref="timelineRef">
+    <div
+      v-if="isMobile && !isPad"
+      class="timeline-point timeline-vertical flex flex-col"
+      ref="timelineRef"
+    >
       <div class="vertical-line"></div>
       <div v-for="(item, index) in points" :key="'vertical-' + item.time" class="vertical-item">
         <div class="vertical-node">
@@ -16,7 +20,12 @@
         </div>
         <div class="vertical-content">
           <div class="vertical-time">{{ $t(item.time) }}</div>
-          <div class="vertical-label">{{ $t(item.label) }}</div>
+          <div class="vertical-label">
+            {{ $t(item.label)
+            }}<template v-if="item.subLabel">
+              {{ $t(item.subLabel) }}
+            </template>
+          </div>
           <div class="vertical-desc">{{ $t(item.desc) }}</div>
         </div>
       </div>
@@ -64,7 +73,7 @@ import { nextTick, onBeforeUnmount, onMounted, ref, computed, inject } from 'vue
 import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 
-const { t } = useI18n()
+// const { t } = useI18n()
 
 const isMobile = inject<boolean>('isMobile')
 const isPad = inject<boolean>('isPad')
@@ -188,9 +197,10 @@ const playAnimation = () => {
 
   // 行内内容：桌面端用 .grid-cell，纵向用 .vertical-item
   // 纵向时，每个 item 从上方落下 + 渐显
-  const textItems = isMobile.value && !isPad.value
-    ? containerRef.value.querySelectorAll('.vertical-item')
-    : containerRef.value.querySelectorAll('.grid-cell')
+  const textItems =
+    isMobile.value && !isPad.value
+      ? containerRef.value.querySelectorAll('.vertical-item')
+      : containerRef.value.querySelectorAll('.grid-cell')
   if (textItems && textItems.length) {
     if (isMobile.value && !isPad.value) {
       // 纵向：每个 item 从上方落下 + 渐显