feat: 平板端适配

src/views/AwardPage/components/TimeLine.vue

@@ -2,17 +2,13 @@
   <div
     ref="containerRef"
     class="timeline-container container flex flex-col align-center"
-    :class="{ mobile: isMobileOrNarrow, vertical: isMobile }"
+    :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>
 
-    <!-- 纵向时间线：移动端或宽度 <= 1200px -->
-    <div
-      v-if="isMobile"
-      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">
@@ -71,9 +67,10 @@ import { gsap } from 'gsap'
 const { t } = useI18n()
 
 const isMobile = inject<boolean>('isMobile')
+const isPad = inject<boolean>('isPad')
 const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1201)
 
-const isMobileOrNarrow = computed(() => isMobile.value)
+const isMobileOrNarrow = computed(() => isMobile.value && !isPad.value)
 
 const updateWindowWidth = () => {
   windowWidth.value = window.innerWidth
@@ -122,7 +119,7 @@ const playAnimation = () => {
   const subtitle = containerRef.value.querySelector('.desc')
   const timeline = containerRef.value.querySelector('.timeline-point')
   const line = containerRef.value.querySelector(
-    isMobile.value ? '.vertical-line' : '.timeline-line'
+    isMobile.value && !isPad.value ? '.vertical-line' : '.timeline-line'
   )
 
   const tl = gsap.timeline()
@@ -130,7 +127,7 @@ const playAnimation = () => {
 
   // 整体 timeline 的裁剪展开（仅横向使用）
   // 纵向时跳过裁剪动画，改用每个 item 从上方落下的动画
-  if (timeline && !isMobile.value) {
+  if (timeline && !(isMobile.value && !isPad.value)) {
     tl.fromTo(
       timeline,
       {
@@ -148,7 +145,7 @@ const playAnimation = () => {
   // 线条动画：横向 scaleX，纵向 scaleY
   // 纵向时线条与 item 动画同步进行
   if (line) {
-    if (isMobile.value) {
+    if (isMobile.value && !isPad.value) {
       tl.from(
         line,
         {
@@ -191,11 +188,11 @@ const playAnimation = () => {
 
   // 行内内容：桌面端用 .grid-cell，纵向用 .vertical-item
   // 纵向时，每个 item 从上方落下 + 渐显
-  const textItems = isMobile.value
+  const textItems = isMobile.value && !isPad.value
     ? containerRef.value.querySelectorAll('.vertical-item')
     : containerRef.value.querySelectorAll('.grid-cell')
   if (textItems && textItems.length) {
-    if (isMobile.value) {
+    if (isMobile.value && !isPad.value) {
       // 纵向：每个 item 从上方落下 + 渐显
       tl.from(
         textItems,
@@ -510,5 +507,9 @@ onBeforeUnmount(() => {
       }
     }
   }
+  &.is-pad {
+    background: url('@/assets/images/pad_version/timeline_bg.png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 </style>