diff --git a/src/assets/images/mobile_version_background/Background4.png b/src/assets/images/mobile_version_background/Background4.png
new file mode 100644
index 0000000..c1f798d
Binary files /dev/null and b/src/assets/images/mobile_version_background/Background4.png differ
diff --git a/src/assets/images/mobile_version_background/Background6.png b/src/assets/images/mobile_version_background/Background6.png
new file mode 100644
index 0000000..3aa0cf2
Binary files /dev/null and b/src/assets/images/mobile_version_background/Background6.png differ
diff --git a/src/assets/images/mobile_version_background/background3.png b/src/assets/images/mobile_version_background/background3.png
new file mode 100644
index 0000000..aef4a7e
Binary files /dev/null and b/src/assets/images/mobile_version_background/background3.png differ
diff --git a/src/assets/images/mobile_version_background/background5.png b/src/assets/images/mobile_version_background/background5.png
new file mode 100644
index 0000000..6a11109
Binary files /dev/null and b/src/assets/images/mobile_version_background/background5.png differ
diff --git a/src/assets/images/mobile_version_background/bloom_bg.png b/src/assets/images/mobile_version_background/bloom_bg.png
new file mode 100644
index 0000000..de5c3b8
Binary files /dev/null and b/src/assets/images/mobile_version_background/bloom_bg.png differ
diff --git a/src/assets/images/mobile_version_background/timeline_bg.png b/src/assets/images/mobile_version_background/timeline_bg.png
new file mode 100644
index 0000000..7695518
Binary files /dev/null and b/src/assets/images/mobile_version_background/timeline_bg.png differ
diff --git a/src/views/AwardPage/components/Bloom.vue b/src/views/AwardPage/components/Bloom.vue
index fea4ae9..2f6526b 100644
--- a/src/views/AwardPage/components/Bloom.vue
+++ b/src/views/AwardPage/components/Bloom.vue
@@ -1,203 +1,211 @@
 <template>
-	<div class="bloom flex flex-col align-center">
-		<div
-			class="title"
-			ref="titleRef"
-		>
-			{{ $t('AwardsPage.bloomYourCreativity') }}
-		</div>
+  <div class="bloom flex flex-col align-center" :class="{ mobile: isMobile }">
+    <div class="title" ref="titleRef">
+      {{ $t('AwardsPage.bloomYourCreativity') }}
+    </div>
 
-		<div
-			class="season"
-			ref="subtitleRef"
-		>
-			{{ $t('AwardsPage.themeOf2026') }}
-		</div>
-		<div
-			class="desc"
-			ref="textRef"
-		>
-			<p class="section-1">
-				{{ $t('AwardsPage.bloomText.desc1.regular1') }}
-				<span class="arial-bold">
-					{{ $t('AwardsPage.bloomText.desc1.bold1') }}
-				</span>
-				{{ $t('AwardsPage.bloomText.desc1.regular2') }}
-				<span class="arial-bold">
-					{{ $t('AwardsPage.bloomText.desc1.bold2') }}
-				</span>
-				{{ $t('AwardsPage.bloomText.desc1.regular3') }}
-				<span class="arial-bold">
-					{{ $t('AwardsPage.bloomText.desc1.bold3') }}
-				</span>
-				{{ $t('AwardsPage.bloomText.desc1.regular4') }}
-				<span class="arial-bold">
-					{{ $t('AwardsPage.bloomText.desc1.bold4') }}
-				</span>
-				{{ $t('AwardsPage.bloomText.desc1.regular5') }}
-			</p>
-			<p class="section-2">
-				{{ $t('AwardsPage.bloomText.desc2.regular1') }}
-				<span class="arial-bold">
-					{{ $t('AwardsPage.bloomText.desc2.bold1') }}
-				</span>
-				{{ $t('AwardsPage.bloomText.desc2.regular2') }}
-			</p>
-		</div>
-	</div>
+    <div class="season" ref="subtitleRef">
+      {{ $t('AwardsPage.themeOf2026') }}
+    </div>
+    <div class="desc" ref="textRef">
+      <p class="section-1">
+        {{ $t('AwardsPage.bloomText.desc1.regular1') }}
+        <span class="arial-bold">
+          {{ $t('AwardsPage.bloomText.desc1.bold1') }}
+        </span>
+        {{ $t('AwardsPage.bloomText.desc1.regular2') }}
+        <span class="arial-bold">
+          {{ $t('AwardsPage.bloomText.desc1.bold2') }}
+        </span>
+        {{ $t('AwardsPage.bloomText.desc1.regular3') }}
+        <span class="arial-bold">
+          {{ $t('AwardsPage.bloomText.desc1.bold3') }}
+        </span>
+        {{ $t('AwardsPage.bloomText.desc1.regular4') }}
+        <span class="arial-bold">
+          {{ $t('AwardsPage.bloomText.desc1.bold4') }}
+        </span>
+        {{ $t('AwardsPage.bloomText.desc1.regular5') }}
+      </p>
+      <p class="section-2">
+        {{ $t('AwardsPage.bloomText.desc2.regular1') }}
+        <span class="arial-bold">
+          {{ $t('AwardsPage.bloomText.desc2.bold1') }}
+        </span>
+        {{ $t('AwardsPage.bloomText.desc2.regular2') }}
+      </p>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
-	import { useI18n } from 'vue-i18n'
-	import { gsap } from 'gsap'
+import { ref, onMounted, onBeforeUnmount, nextTick, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { gsap } from 'gsap'
 
-	const { t } = useI18n()
+const { t } = useI18n()
+const isMobile = inject<boolean>('isMobile')
 
-	const titleRef = ref<HTMLElement | null>(null)
-	const subtitleRef = ref<HTMLElement | null>(null)
-	const textRef = ref<HTMLElement | null>(null)
+const titleRef = ref<HTMLElement | null>(null)
+const subtitleRef = ref<HTMLElement | null>(null)
+const textRef = ref<HTMLElement | null>(null)
 
-	const hasPlayedBloomAnim = ref(false)
-	let bloomObserver: IntersectionObserver | null = null
+const hasPlayedBloomAnim = ref(false)
+let bloomObserver: IntersectionObserver | null = null
 
-	const setupBloomInitialState = () => {
-		const titleEls = [titleRef.value, subtitleRef.value].filter(
-			Boolean
-		) as HTMLElement[]
-		if (titleEls.length) {
-			gsap.set(titleEls, {
-				opacity: 0,
-				// start larger than final size, then animate down to scale:1
-				scale: 1.6,
-				transformOrigin: '50% 50%'
-			})
-		}
+const setupBloomInitialState = () => {
+  const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
+  if (titleEls.length) {
+    gsap.set(titleEls, {
+      opacity: 0,
+      // start larger than final size, then animate down to scale:1
+      scale: 1.6,
+      transformOrigin: '50% 50%'
+    })
+  }
 
-		if (textRef.value) {
-			// start below and hidden
-			gsap.set(textRef.value, {
-				opacity: 0,
-				y: 60
-			})
-		}
-	}
+  if (textRef.value) {
+    // start below and hidden
+    gsap.set(textRef.value, {
+      opacity: 0,
+      y: 60
+    })
+  }
+}
 
-	const playBloomAnimation = () => {
-		if (hasPlayedBloomAnim.value) return
-		const titleEls = [titleRef.value, subtitleRef.value].filter(
-			Boolean
-		) as HTMLElement[]
-		const textEl = textRef.value
-		if (!titleEls.length || !textEl) return
+const playBloomAnimation = () => {
+  if (hasPlayedBloomAnim.value) return
+  const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
+  const textEl = textRef.value
+  if (!titleEls.length || !textEl) return
 
-		const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+  const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
 
-		tl.to(titleEls, {
-			opacity: 1,
-			scale: 1,
-			duration: 0.9,
-			ease: 'back.out(1.6)',
-			stagger: 0.12
-		})
+  tl.to(titleEls, {
+    opacity: 1,
+    scale: 1,
+    duration: 0.9,
+    ease: 'back.out(1.6)',
+    stagger: 0.12
+  })
 
-		tl.to(
-			textEl,
-			{
-				opacity: 1,
-				y: -12,
-				scale: 1.05,
-				duration: 0.3,
-				ease: 'power2.out'
-			},
-			'-=0.3'
-		)
-		tl.to(
-			textEl,
-			{
-				y: 0,
-				scale: 1,
-				duration: 0.18,
-				ease: 'bounce.out'
-			},
-			'+=0.08'
-		)
+  tl.to(
+    textEl,
+    {
+      opacity: 1,
+      y: -12,
+      scale: 1.05,
+      duration: 0.3,
+      ease: 'power2.out'
+    },
+    '-=0.3'
+  )
+  tl.to(
+    textEl,
+    {
+      y: 0,
+      scale: 1,
+      duration: 0.18,
+      ease: 'bounce.out'
+    },
+    '+=0.08'
+  )
 
-		hasPlayedBloomAnim.value = true
-		bloomObserver?.disconnect()
-	}
+  hasPlayedBloomAnim.value = true
+  bloomObserver?.disconnect()
+}
 
-	onMounted(() => {
-		nextTick(() => {
-			setupBloomInitialState()
-			if ('IntersectionObserver' in window) {
-				bloomObserver = new IntersectionObserver(
-					entries => {
-						entries.forEach(entry => {
-							if (entry.isIntersecting) {
-								playBloomAnimation()
-							}
-						})
-					},
-					{ threshold: 0.3 }
-				)
-				if (titleRef.value) {
-					bloomObserver.observe(titleRef.value)
-				}
-			} else {
-				// fallback
-				playBloomAnimation()
-			}
-		})
-	})
+onMounted(() => {
+  nextTick(() => {
+    setupBloomInitialState()
+    if ('IntersectionObserver' in window) {
+      bloomObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              playBloomAnimation()
+            }
+          })
+        },
+        { threshold: 0.3 }
+      )
+      if (titleRef.value) {
+        bloomObserver.observe(titleRef.value)
+      }
+    } else {
+      // fallback
+      playBloomAnimation()
+    }
+  })
+})
 
-	onBeforeUnmount(() => {
-		bloomObserver?.disconnect()
-	})
+onBeforeUnmount(() => {
+  bloomObserver?.disconnect()
+})
 </script>
 
 <style scoped lang="less">
-	p {
-		margin: 0;
-		padding: 0;
-	}
-	.arial-bold {
-		font-family: 'ArialBold';
-		font-weight: 700;
-	}
-	.bloom {
-		height: 108rem;
-		padding-top: 12.8rem;
-		font-family: 'Poppins';
-		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
-		background-size: 100% 100%;
-		.title {
-			font-size: 4rem;
-			font-weight: 600;
-			color: #232323;
-			margin-bottom: 2.4rem;
-		}
-		.logo {
-			margin-bottom: 2.2rem;
-		}
-		.season {
-			font-size: 3rem;
-			color: #c7342c;
-			margin-bottom: 6.6rem;
-		}
-		.desc {
-			font-family: 'Arial';
-			font-weight: 400;
-			font-size: 2.4rem;
-			color: #585858;
-			text-align: center;
-			padding: 0 21.5rem;
-			line-height: 4.5rem;
-			margin-bottom: 12.3rem;
-			white-space: pre-line;
-			.section-2 {
-				margin-top: 4rem;
-			}
-		}
-	}
+p {
+  margin: 0;
+  padding: 0;
+}
+.arial-bold {
+  font-family: 'ArialBold';
+  font-weight: 700;
+}
+.bloom {
+  height: 108rem;
+  padding-top: 12.8rem;
+  font-family: 'PoppinsBold';
+  background: url('@/assets/images/award/bloom_bg.png') no-repeat;
+  background-size: 100% 100%;
+  .title {
+    font-size: 4rem;
+    font-weight: 600;
+    color: #232323;
+    margin-bottom: 2.4rem;
+  }
+  .logo {
+    margin-bottom: 2.2rem;
+  }
+  .season {
+    font-size: 3rem;
+    color: #c7342c;
+    font-family: 'PoppinsMedium';
+    margin-bottom: 6.6rem;
+  }
+  .desc {
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 2.4rem;
+    color: #585858;
+    text-align: center;
+    padding: 0 21.5rem;
+    line-height: 4.5rem;
+    margin-bottom: 12.3rem;
+    white-space: pre-line;
+    .section-2 {
+      margin-top: 4rem;
+    }
+  }
+  &.mobile {
+    background: url('@/assets/images/mobile_version_background/bloom_bg.png') no-repeat;
+    background-size: 100% 100%;
+    height: 83.1rem;
+    padding-top: 6rem;
+    .title {
+      font-size: 3.2rem;
+      margin-bottom: 0.8rem;
+    }
+    .season {
+      font-size: 2.4rem;
+      margin-bottom: 6.2rem;
+    }
+    .desc {
+      padding: 0 6.5rem 0 6.7rem;
+      font-size: 2rem;
+      line-height: 3rem;
+    }
+  }
+}
 </style>
diff --git a/src/views/AwardPage/components/Slogan.vue b/src/views/AwardPage/components/Slogan.vue
index 8fa41b1..3b2327c 100644
--- a/src/views/AwardPage/components/Slogan.vue
+++ b/src/views/AwardPage/components/Slogan.vue
@@ -183,6 +183,7 @@ onUnmounted(() => {
         content: '';
         position: absolute;
         background-color: #8d8d8d;
+        transform: scaleX(0);
       }
       /* 第一行的两个item底部需要分隔线 */
       &:nth-child(1)::after,
@@ -202,6 +203,7 @@ onUnmounted(() => {
         height: 100%;
         width: 0.1rem;
         background-color: #8d8d8d;
+        transform: scaleY(0);
       }
 
       &:nth-child(4)::before {
@@ -212,7 +214,7 @@ onUnmounted(() => {
         width: 0.1rem;
         height: 100%;
         background-color: #8d8d8d;
-        transform: translateX(-100%);
+        transform: translateX(-100%) scaleY(0);
       }
     }
   }
@@ -221,26 +223,26 @@ onUnmounted(() => {
       &:nth-child(1)::before {
         transform-origin: bottom;
         transform: scaleY(0);
-        animation: growUp 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-        animation-delay: calc(var(--delay) + 0.5s);
+        animation: growUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        // animation-delay: calc(var(--delay) + 0.5s);
       }
       &:nth-child(1)::after {
         transform-origin: right;
         transform: scaleX(0);
-        animation: growRight 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-        animation-delay: calc(var(--delay) + 0.5s);
+        animation: growRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        // animation-delay: calc(var(--delay) + 0.5s);
       }
       &:nth-child(2)::after {
         transform-origin: left;
         transform: scaleX(0);
-        animation: growLeft 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-        animation-delay: calc(var(--delay) + 0.5s);
+        animation: growLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        // animation-delay: calc(var(--delay) + 0.5s);
       }
       &:nth-child(4)::before {
         transform: translateX(-100%) scaleY(0);
         transform-origin: top;
-        animation: growDown 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-        animation-delay: calc(var(--delay) + 0.5s);
+        animation: growDown 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        // animation-delay: calc(var(--delay) + 0.5s);
       }
     }
   }
diff --git a/src/views/AwardPage/components/TimeLine.vue b/src/views/AwardPage/components/TimeLine.vue
index 68ce67a..dcdebb0 100644
--- a/src/views/AwardPage/components/TimeLine.vue
+++ b/src/views/AwardPage/components/TimeLine.vue
@@ -1,371 +1,515 @@
 <template>
-	<div
-		ref="containerRef"
-		class="timeline-container container flex flex-col align-center"
-	>
-		<div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
-		<div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div>
-		<div
-			class="timeline-point"
-			ref="timelineRef"
-		>
-			<!-- 顶部标签行 -->
-			<div class="grid-row labels-row">
-				<div
-					class="grid-cell label-cell"
-					v-for="item in points"
-					:key="'label-' + item.time"
-				>
-					<div class="main-label">{{ $t(item.label) }}</div>
-					<div
-						class="sub-label"
-						v-if="item.subLabel"
-					>
-						{{ $t(item.subLabel) }}
-					</div>
-				</div>
-			</div>
-			<!-- 图标行 -->
-			<div class="grid-row icons-row">
-				<div class="timeline-line"></div>
-				<div
-					class="grid-cell icon-cell"
-					v-for="item in points"
-					:key="'icon-' + item.time"
-				>
-					<img
-						src="@/assets/images/award/point.png"
-						class="point-icon"
-					/>
-				</div>
-			</div>
-			<!-- 时间行 -->
-			<div class="grid-row times-row">
-				<div
-					class="grid-cell time-cell"
-					v-for="item in points"
-					:key="'time-' + item.time"
-				>
-					{{ $t(item.time) }}
-				</div>
-			</div>
+  <div
+    ref="containerRef"
+    class="timeline-container container flex flex-col align-center"
+    :class="{ mobile: isMobileOrNarrow, vertical: showVertical }"
+  >
+    <div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
+    <div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div>
 
-			<!-- 描述行 -->
-			<div class="grid-row descs-row">
-				<div
-					class="grid-cell desc-cell"
-					v-for="item in points"
-					:key="'desc-' + item.time"
-				>
-					<div class="txt">
-						{{ $t(item.desc) }}
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+    <!-- 纵向时间线：移动端或宽度 <= 1200px -->
+    <div
+      v-if="showVertical"
+      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">
+          <img src="@/assets/images/award/point.png" class="point-icon" alt="" />
+        </div>
+        <div class="vertical-content">
+          <div class="vertical-time">{{ $t(item.time) }}</div>
+          <div class="vertical-label">{{ $t(item.label) }}</div>
+          <div class="vertical-desc">{{ $t(item.desc) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 横向时间线：桌面端 -->
+    <div v-else class="timeline-point" ref="timelineRef">
+      <!-- 顶部标签行 -->
+      <div class="grid-row labels-row">
+        <div class="grid-cell label-cell" v-for="item in points" :key="'label-' + item.time">
+          <div class="main-label">{{ $t(item.label) }}</div>
+          <div class="sub-label" v-if="item.subLabel">
+            {{ $t(item.subLabel) }}
+          </div>
+        </div>
+      </div>
+      <!-- 图标行 -->
+      <div class="grid-row icons-row">
+        <div class="timeline-line"></div>
+        <div class="grid-cell icon-cell" v-for="item in points" :key="'icon-' + item.time">
+          <img src="@/assets/images/award/point.png" class="point-icon" alt="" />
+        </div>
+      </div>
+      <!-- 时间行 -->
+      <div class="grid-row times-row">
+        <div class="grid-cell time-cell" v-for="item in points" :key="'time-' + item.time">
+          {{ $t(item.time) }}
+        </div>
+      </div>
+
+      <!-- 描述行 -->
+      <div class="grid-row descs-row">
+        <div class="grid-cell desc-cell" v-for="item in points" :key="'desc-' + item.time">
+          <div class="txt">
+            {{ $t(item.desc) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-	import { nextTick, onBeforeUnmount, onMounted, ref, computed } from 'vue'
-	import { useI18n } from 'vue-i18n'
-	import { gsap } from 'gsap'
+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 containerRef = ref<HTMLElement | null>(null)
-	const timelineRef = ref<HTMLElement | null>(null)
-	const hasAnimated = ref(false)
+const isMobile = inject<boolean>('isMobile')
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1201)
 
-	const points = ref([
-		{
-			label: 'AwardsPage.timelineApplicationLabel',
-			subLabel: 'AwardsPage.timelineDeadlineLabel',
-			time: 'AwardsPage.timeJul15',
-			desc: 'AwardsPage.applicationDeadlineDesc'
-		},
-		{
-			label: 'AwardsPage.twentyFinalistsAnnounced',
-			subLabel: 'AwardsPage.announcedLabel',
-			time: 'AwardsPage.timeAug30',
-			desc: 'AwardsPage.twentyFinalistsDesc'
-		},
-		{
-			label: 'AwardsPage.finalistSubmission',
-			subLabel: 'AwardsPage.submissionLabel',
-			time: 'AwardsPage.timeSept30',
-			desc: 'AwardsPage.finalistSubmissionDesc'
-		},
-		{
-			label: 'AwardsPage.receivingOutfits',
-			subLabel: 'AwardsPage.fromFinalistsLabel',
-			time: 'AwardsPage.timeOctober',
-			desc: 'AwardsPage.receivingOutfitsDesc'
-		},
-		{
-			label: 'AwardsPage.awardCeremony',
-			subLabel: 'AwardsPage.ceremonyLabel',
-			time: 'AwardsPage.timeNov12',
-			desc: 'AwardsPage.awardCeremonyDesc'
-		}
-	])
+const showVertical = computed(() => !!isMobile || windowWidth.value <= 1200)
+const isMobileOrNarrow = computed(() => showVertical.value)
 
-	const playAnimation = () => {
-		if (!containerRef.value || hasAnimated.value) return
-		const title = containerRef.value.querySelector('.timeline-title')
-		const subtitle = containerRef.value.querySelector('.desc')
-		const line = containerRef.value.querySelector('.timeline-line')
-		const timeline = containerRef.value.querySelector('.timeline-point')
+const updateWindowWidth = () => {
+  windowWidth.value = window.innerWidth
+}
 
-		const tl = gsap.timeline()
+const containerRef = ref<HTMLElement | null>(null)
+const timelineRef = ref<HTMLElement | null>(null)
+const hasAnimated = ref(false)
 
-		// 我们使用一个统一的开始 label，使横线、timeline 裁剪与所有文字同时启动，
-		// 点图标在它们完成后立即开始。
-		tl.addLabel('start')
+const points = ref([
+  {
+    label: 'AwardsPage.timelineApplicationLabel',
+    subLabel: 'AwardsPage.timelineDeadlineLabel',
+    time: 'AwardsPage.timeJul15',
+    desc: 'AwardsPage.applicationDeadlineDesc'
+  },
+  {
+    label: 'AwardsPage.twentyFinalistsAnnounced',
+    subLabel: 'AwardsPage.announcedLabel',
+    time: 'AwardsPage.timeAug30',
+    desc: 'AwardsPage.twentyFinalistsDesc'
+  },
+  {
+    label: 'AwardsPage.finalistSubmission',
+    subLabel: 'AwardsPage.submissionLabel',
+    time: 'AwardsPage.timeSept30',
+    desc: 'AwardsPage.finalistSubmissionDesc'
+  },
+  {
+    label: 'AwardsPage.receivingOutfits',
+    subLabel: 'AwardsPage.fromFinalistsLabel',
+    time: 'AwardsPage.timeOctober',
+    desc: 'AwardsPage.receivingOutfitsDesc'
+  },
+  {
+    label: 'AwardsPage.awardCeremony',
+    subLabel: 'AwardsPage.ceremonyLabel',
+    time: 'AwardsPage.timeNov12',
+    desc: 'AwardsPage.awardCeremonyDesc'
+  }
+])
 
-		// 整体 timeline 的裁剪展开（与 start 同步）
-		if (timeline) {
-			tl.fromTo(
-				timeline,
-				{
-					clipPath: 'inset(0 100% 0 0)'
-				},
-				{
-					clipPath: 'inset(0 0% 0 0)',
-					duration: 1.3,
-					ease: 'power1.out'
-				},
-				'start'
-			)
-		}
+const playAnimation = () => {
+  if (!containerRef.value || hasAnimated.value) return
+  const title = containerRef.value.querySelector('.timeline-title')
+  const subtitle = containerRef.value.querySelector('.desc')
+  const timeline = containerRef.value.querySelector('.timeline-point')
+  const line = containerRef.value.querySelector(
+    showVertical.value ? '.vertical-line' : '.timeline-line'
+  )
 
-		// 线条动画（与 start 同步）
-		if (line) {
-			tl.from(
-				line,
-				{
-					scaleX: 0,
-					transformOrigin: '0% 50%',
-					duration: 1.3,
-					ease: 'power1.out'
-				},
-				'start'
-			)
-		}
+  const tl = gsap.timeline()
+  tl.addLabel('start')
 
-		// 标题与副标题（与 start 同步）
-		if (title && subtitle) {
-			tl.from(
-				[title, subtitle],
-				{
-					scaleX: 0,
-					autoAlpha: 0.5,
-					transformOrigin: '50% 50%',
-					duration: 0.6,
-					stagger: 0.1,
-					ease: 'power2.out'
-				},
-				'start'
-			)
-		}
+  // 整体 timeline 的裁剪展开（仅横向使用）
+  // 纵向时跳过裁剪动画，改用每个 item 从上方落下的动画
+  if (timeline && !showVertical.value) {
+    tl.fromTo(
+      timeline,
+      {
+        clipPath: 'inset(0 100% 0 0)'
+      },
+      {
+        clipPath: 'inset(0 0% 0 0)',
+        duration: 1.3,
+        ease: 'power1.out'
+      },
+      'start'
+    )
+  }
 
-		// 行内文字（标签、时间、描述、图标）与 start 同步开始
-		const textItems = containerRef.value.querySelectorAll('.grid-cell')
-		if (textItems && textItems.length) {
-			tl.from(
-				textItems,
-				{
-					// autoAlpha: 0.5,
-					duration: 0.7,
-					stagger: 0.08,
-					ease: 'power2.out'
-				},
-				'start'
-			)
-		}
+  // 线条动画：横向 scaleX，纵向 scaleY
+  // 纵向时线条与 item 动画同步进行
+  if (line) {
+    if (showVertical.value) {
+      tl.from(
+        line,
+        {
+          scaleY: 0,
+          transformOrigin: '0% 0%',
+          duration: 1.0,
+          ease: 'power1.out'
+        },
+        'start'
+      )
+    } else {
+      tl.from(
+        line,
+        {
+          scaleX: 0,
+          transformOrigin: '0% 50%',
+          duration: 1.3,
+          ease: 'power1.out'
+        },
+        'start'
+      )
+    }
+  }
 
-		hasAnimated.value = true
-	}
+  // 标题与副标题（与 start 同步）
+  if (title && subtitle) {
+    tl.from(
+      [title, subtitle],
+      {
+        scaleX: 0,
+        autoAlpha: 0.5,
+        transformOrigin: '50% 50%',
+        duration: 0.6,
+        stagger: 0.1,
+        ease: 'power2.out'
+      },
+      'start'
+    )
+  }
 
-	let observer: IntersectionObserver | null = null
+  // 行内内容：桌面端用 .grid-cell，纵向用 .vertical-item
+  // 纵向时，每个 item 从上方落下 + 渐显
+  const textItems = showVertical.value
+    ? containerRef.value.querySelectorAll('.vertical-item')
+    : containerRef.value.querySelectorAll('.grid-cell')
+  if (textItems && textItems.length) {
+    if (showVertical.value) {
+      // 纵向：每个 item 从上方落下 + 渐显
+      tl.from(
+        textItems,
+        {
+          y: -60,
+          opacity: 0,
+          duration: 0.6,
+          stagger: 0.15,
+          ease: 'power2.out'
+        },
+        'start+=0.2'
+      )
+    } else {
+      // 横向：保持原有动画
+      tl.from(
+        textItems,
+        {
+          duration: 0.7,
+          stagger: 0.08,
+          ease: 'power2.out'
+        },
+        'start'
+      )
+    }
+  }
 
-	onMounted(async () => {
-		await nextTick()
-		if (!containerRef.value) return
-		observer = new IntersectionObserver(
-			entries => {
-				entries.forEach(entry => {
-					if (entry.isIntersecting) {
-						playAnimation()
-					}
-				})
-			},
-			{ threshold: 0.3 }
-		)
-		observer.observe(containerRef.value)
-	})
+  hasAnimated.value = true
+}
 
-	onBeforeUnmount(() => {
-		if (observer && containerRef.value) {
-			observer.unobserve(containerRef.value)
-		}
-		observer = null
-	})
+let observer: IntersectionObserver | null = null
+
+onMounted(async () => {
+  if (typeof window !== 'undefined') {
+    windowWidth.value = window.innerWidth
+    window.addEventListener('resize', updateWindowWidth)
+  }
+  await nextTick()
+  if (!containerRef.value) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          playAnimation()
+        }
+      })
+    },
+    { threshold: 0.3 }
+  )
+  observer.observe(containerRef.value)
+})
+
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', updateWindowWidth)
+  }
+  if (observer && containerRef.value) {
+    observer.unobserve(containerRef.value)
+  }
+  observer = null
+})
 </script>
 
 <style scoped lang="less">
-	.timeline-container {
-		background: url('@/assets/images/award/timeline_bg.png') no-repeat;
-		background-size: 100% 100%;
-		position: relative;
-		padding: 12.8rem 0 15.9rem;
-		width: 100%;
-		color: #fff;
-		.timeline-title {
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 4rem;
-			text-align: center;
-			vertical-align: middle;
-			margin-bottom: 2.4rem;
-		}
-		.logo {
-			margin: 2.4rem 0 2.2rem 0;
-		}
-		.desc {
-			font-family: 'Arial';
-			font-size: 3rem;
-			font-weight: 400;
-			color: #f95750;
-		}
-		.timeline-point {
-			overflow: hidden;
-			will-change: clip-path;
-			flex: 1;
-			width: 100%;
-			margin-top: 11rem;
-			padding: 0 13.8rem;
-			position: relative;
-			z-index: 2;
+.timeline-container {
+  background: url('@/assets/images/award/timeline_bg.png') no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  padding: 12.8rem 0 15.9rem;
+  width: 100%;
+  color: #fff;
+  .timeline-title {
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 4rem;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 2.4rem;
+  }
+  .logo {
+    margin: 2.4rem 0 2.2rem 0;
+  }
+  .desc {
+    font-family: 'Arial';
+    font-size: 3rem;
+    font-weight: 400;
+    color: #f95750;
+  }
+  .timeline-point {
+    overflow: hidden;
+    will-change: clip-path;
+    flex: 1;
+    width: 100%;
+    margin-top: 11rem;
+    padding: 0 13.8rem;
+    position: relative;
+    z-index: 2;
 
-			// 主网格布局：5列
-			display: grid;
-			grid-template-columns: repeat(5, 1fr);
-			grid-template-rows: auto auto auto auto;
-			grid-column-gap: 0;
-			grid-row-gap: 0;
+    // 主网格布局：5列
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: auto auto auto auto;
+    grid-column-gap: 0;
+    grid-row-gap: 0;
 
-			// 所有 grid 子行的通用样式
-			.grid-row {
-				display: grid;
-				grid-template-columns: repeat(5, 1fr);
-				grid-column: 1 / -1;
-			}
+    // 所有 grid 子行的通用样式
+    .grid-row {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-column: 1 / -1;
+    }
 
-			.grid-cell {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				text-align: center;
-			}
+    .grid-cell {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
 
-			// 图标行
-			.icons-row {
-				align-items: center;
-				height: 6.4rem;
-				position: relative;
-				z-index: 2;
-				margin-bottom: 1.6rem;
+    // 图标行
+    .icons-row {
+      align-items: center;
+      height: 6.4rem;
+      position: relative;
+      z-index: 2;
+      margin-bottom: 1.6rem;
 
-				.timeline-line {
-					position: absolute;
-					top: 50%;
-					left: -22rem;
-					right: -21.2rem;
-					height: 0.15rem;
-					background: linear-gradient(
-						90deg,
-						rgba(199, 52, 44, 0) 0%,
-						rgba(199, 52, 44, 0.719626) 25.96%,
-						#c7342c 51.44%,
-						rgba(199, 52, 44, 0.762376) 75.96%,
-						rgba(199, 52, 44, 0) 100%
-					);
-					transform: translateY(-50%);
-					z-index: 1;
-					pointer-events: none;
-				}
+      .timeline-line {
+        position: absolute;
+        top: 50%;
+        left: -22rem;
+        right: -21.2rem;
+        height: 0.15rem;
+        background: linear-gradient(
+          90deg,
+          rgba(199, 52, 44, 0) 0%,
+          rgba(199, 52, 44, 0.719626) 25.96%,
+          #c7342c 51.44%,
+          rgba(199, 52, 44, 0.762376) 75.96%,
+          rgba(199, 52, 44, 0) 100%
+        );
+        transform: translateY(-50%);
+        z-index: 1;
+        pointer-events: none;
+      }
 
-				.icon-cell {
-					position: relative;
-					.point-icon {
-						width: 6.4rem;
-						height: 6.4rem;
-						display: block;
-						position: relative;
-						z-index: 2;
-					}
-				}
-			}
+      .icon-cell {
+        position: relative;
+        .point-icon {
+          width: 6.4rem;
+          height: 6.4rem;
+          display: block;
+          position: relative;
+          z-index: 2;
+        }
+      }
+    }
 
-			// 标签行
-			.labels-row {
-				margin-bottom: 8rem;
-				position: relative;
-				z-index: 2;
-				.label-cell {
-					flex-direction: column;
-					color: #fff;
-					font-family: 'PoppinsBold';
-					font-weight: 600;
-					font-size: 2.8rem;
-					white-space: pre-line;
-					justify-content: center;
-					min-height: 6rem;
-				
-					// .sub-label {
-					// 	font-family: 'Arial';
-					// 	font-weight: 400;
-					// 	font-size: 1.4rem;
-					// 	color: rgba(255, 255, 255, 0.8);
-					// 	margin-top: 0.4rem;
-					// }
-				}
-			}
+    // 标签行
+    .labels-row {
+      margin-bottom: 8rem;
+      position: relative;
+      z-index: 2;
+      .label-cell {
+        flex-direction: column;
+        color: #fff;
+        font-family: 'PoppinsBold';
+        font-weight: 600;
+        font-size: 2.8rem;
+        white-space: pre-line;
+        justify-content: center;
+        min-height: 6rem;
 
-			// 时间行
-			.times-row {
-				margin-bottom: 6rem;
-				z-index: 2;
-				position: relative;
-				.time-cell {
-					color: #f95750;
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2.8rem;
-					line-height: 4.5rem;
-				}
-			}
+        // .sub-label {
+        // 	font-family: 'Arial';
+        // 	font-weight: 400;
+        // 	font-size: 1.4rem;
+        // 	color: rgba(255, 255, 255, 0.8);
+        // 	margin-top: 0.4rem;
+        // }
+      }
+    }
 
-			// 描述行
-			.descs-row {
-				.desc-cell {
-					.txt {
-						font-family: 'Arial';
-						font-weight: 400;
-						font-size: 2rem;
-						text-align: center;
-						color: #e0e0e0;
-						width: 100%;
-						max-width: 31.2rem;
-						min-height: 10.2rem;
-						white-space: pre-line;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-					}
-				}
-			}
-		}
-	}
+    // 时间行
+    .times-row {
+      margin-bottom: 6rem;
+      z-index: 2;
+      position: relative;
+      .time-cell {
+        color: #f95750;
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2.8rem;
+        line-height: 4.5rem;
+      }
+    }
+
+    // 描述行
+    .descs-row {
+      .desc-cell {
+        .txt {
+          font-family: 'Arial';
+          font-weight: 400;
+          font-size: 2rem;
+          text-align: center;
+          color: #e0e0e0;
+          width: 100%;
+          max-width: 31.2rem;
+          min-height: 10.2rem;
+          white-space: pre-line;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  &.mobile {
+    height: auto;
+    min-height: 127.4rem;
+    padding: 6rem 7rem 6.6rem;
+    background: url('@/assets/images/mobile_version_background/timeline_bg.png') no-repeat;
+    background-size: 100% 100%;
+    .timeline-vertical {
+      display: flex;
+      width: 100%;
+      margin-top: 4rem;
+      padding: 0;
+      position: relative;
+      overflow: hidden;
+      will-change: clip-path;
+      justify-content: center;
+      row-gap: 6rem;
+      .vertical-line {
+        position: absolute;
+        left: 1.5rem; // 与节点中心对齐 (3.2rem/2 - 0.1rem)
+        top: 2.4rem;
+        bottom: 2.4rem;
+        width: 0.2rem;
+        background: linear-gradient(
+          180deg,
+          rgba(199, 52, 44, 0) 0%,
+          rgba(199, 52, 44, 0.72) 20%,
+          #c7342c 50%,
+          rgba(199, 52, 44, 0.76) 80%,
+          rgba(199, 52, 44, 0) 100%
+        );
+        z-index: 1;
+        transform-origin: 0% 0%;
+      }
+
+      .vertical-item {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        gap: 2rem;
+        padding-bottom: 3.2rem;
+        z-index: 2;
+        will-change: transform, opacity;
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+
+      .vertical-node {
+        flex-shrink: 0;
+        width: 3.2rem;
+        height: 3.2rem;
+        margin-left: 0;
+        margin-top: 0.4rem;
+        position: relative;
+        z-index: 2;
+
+        .point-icon {
+          width: 100%;
+          height: 100%;
+          display: block;
+          object-fit: contain;
+        }
+      }
+
+      .vertical-content {
+        flex: 1;
+        text-align: left;
+        min-width: 0;
+      }
+
+      .vertical-time {
+        font-family: 'Arial';
+        font-size: 2rem;
+        font-weight: 400;
+        color: #f95750;
+        line-height: 1.4;
+        margin-bottom: 0.4rem;
+      }
+
+      .vertical-label {
+        font-family: 'PoppinsBold';
+        font-weight: 600;
+        font-size: 2.2rem;
+        color: #fff;
+        line-height: 1.35;
+        margin-bottom: 0.8rem;
+      }
+
+      .vertical-desc {
+        font-family: 'Arial';
+        font-size: 2rem;
+        font-weight: 400;
+        color: #e0e0e0;
+        line-height: 1.5;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/AwardPage/index.vue b/src/views/AwardPage/index.vue
index 6f16840..962c99b 100644
--- a/src/views/AwardPage/index.vue
+++ b/src/views/AwardPage/index.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import JudgesSection from './components/JudgesSection.vue'
@@ -48,6 +48,8 @@ const { isMobile } = useIsMobile()
 const router = useRouter()
 const { locale } = useI18n()
 
+provide('isMobile', isMobile)
+
 onMounted(() => {
   router.replace('/')
 })
@@ -141,7 +143,7 @@ const handleSubmitApplication = () => {
     height: 123.4rem;
     .submit-btn {
       bottom: 57rem;
-			left: 6.6rem;
+      left: 6.6rem;
     }
   }
 }