style: bloom&slogan&timeline移动端

src/views/AwardPage/components/Bloom.vue

@@ -1,22 +1,13 @@
 <template>
-	<div class="bloom flex flex-col align-center">
-		<div
-			class="title"
-			ref="titleRef"
-		>
+  <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"
-		>
+    <div class="season" ref="subtitleRef">
       {{ $t('AwardsPage.themeOf2026') }}
     </div>
-		<div
-			class="desc"
-			ref="textRef"
-		>
+    <div class="desc" ref="textRef">
       <p class="section-1">
         {{ $t('AwardsPage.bloomText.desc1.regular1') }}
         <span class="arial-bold">
@@ -48,11 +39,12 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 
 const { t } = useI18n()
+const isMobile = inject<boolean>('isMobile')
 
 const titleRef = ref<HTMLElement | null>(null)
 const subtitleRef = ref<HTMLElement | null>(null)
@@ -62,9 +54,7 @@
 let bloomObserver: IntersectionObserver | null = null
 
 const setupBloomInitialState = () => {
-		const titleEls = [titleRef.value, subtitleRef.value].filter(
-			Boolean
-		) as HTMLElement[]
+  const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
   if (titleEls.length) {
     gsap.set(titleEls, {
       opacity: 0,
@@ -85,9 +75,7 @@
 
 const playBloomAnimation = () => {
   if (hasPlayedBloomAnim.value) return
-		const titleEls = [titleRef.value, subtitleRef.value].filter(
-			Boolean
-		) as HTMLElement[]
+  const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
   const textEl = textRef.value
   if (!titleEls.length || !textEl) return
 
@@ -132,8 +120,8 @@
     setupBloomInitialState()
     if ('IntersectionObserver' in window) {
       bloomObserver = new IntersectionObserver(
-					entries => {
-						entries.forEach(entry => {
+        (entries) => {
+          entries.forEach((entry) => {
             if (entry.isIntersecting) {
               playBloomAnimation()
             }
@@ -168,7 +156,7 @@
 .bloom {
   height: 108rem;
   padding-top: 12.8rem;
-		font-family: 'Poppins';
+  font-family: 'PoppinsBold';
   background: url('@/assets/images/award/bloom_bg.png') no-repeat;
   background-size: 100% 100%;
   .title {
@@ -183,6 +171,7 @@
   .season {
     font-size: 3rem;
     color: #c7342c;
+    font-family: 'PoppinsMedium';
     margin-bottom: 6.6rem;
   }
   .desc {
@@ -199,5 +188,24 @@
       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>

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);
       }
     }
   }

src/views/AwardPage/components/TimeLine.vue

@@ -2,25 +2,37 @@
   <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>
+
+    <!-- 纵向时间线：移动端或宽度 <= 1200px -->
     <div
-			class="timeline-point"
+      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="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"
-					>
+          <div class="sub-label" v-if="item.subLabel">
             {{ $t(item.subLabel) }}
           </div>
         </div>
@@ -28,35 +40,20 @@
       <!-- 图标行 -->
       <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 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"
-				>
+        <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="grid-cell desc-cell" v-for="item in points" :key="'desc-' + item.time">
           <div class="txt">
             {{ $t(item.desc) }}
           </div>
@@ -67,12 +64,22 @@
 </template>
 
 <script setup lang="ts">
-	import { nextTick, onBeforeUnmount, onMounted, ref, computed } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, computed, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 
 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(() => showVertical.value)
+
+const updateWindowWidth = () => {
+  windowWidth.value = window.innerWidth
+}
+
 const containerRef = ref<HTMLElement | null>(null)
 const timelineRef = ref<HTMLElement | null>(null)
 const hasAnimated = ref(false)
@@ -114,17 +121,17 @@
   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 line = containerRef.value.querySelector(
+    showVertical.value ? '.vertical-line' : '.timeline-line'
+  )
 
   const tl = gsap.timeline()
-
-		// 我们使用一个统一的开始 label，使横线、timeline 裁剪与所有文字同时启动，
-		// 点图标在它们完成后立即开始。
   tl.addLabel('start')
 
-		// 整体 timeline 的裁剪展开（与 start 同步）
-		if (timeline) {
+  // 整体 timeline 的裁剪展开（仅横向使用）
+  // 纵向时跳过裁剪动画，改用每个 item 从上方落下的动画
+  if (timeline && !showVertical.value) {
     tl.fromTo(
       timeline,
       {
@@ -139,8 +146,21 @@
     )
   }
 
-		// 线条动画（与 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,
         {
@@ -152,6 +172,7 @@
         'start'
       )
     }
+  }
 
   // 标题与副标题（与 start 同步）
   if (title && subtitle) {
@@ -169,13 +190,30 @@
     )
   }
 
-		// 行内文字（标签、时间、描述、图标）与 start 同步开始
-		const textItems = containerRef.value.querySelectorAll('.grid-cell')
+  // 行内内容：桌面端用 .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,
         {
-					// autoAlpha: 0.5,
           duration: 0.7,
           stagger: 0.08,
           ease: 'power2.out'
@@ -183,6 +221,7 @@
         'start'
       )
     }
+  }
 
   hasAnimated.value = true
 }
@@ -190,11 +229,15 @@
 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 => {
+    (entries) => {
+      entries.forEach((entry) => {
         if (entry.isIntersecting) {
           playAnimation()
         }
@@ -206,6 +249,9 @@
 })
 
 onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', updateWindowWidth)
+  }
   if (observer && containerRef.value) {
     observer.unobserve(containerRef.value)
   }
@@ -367,5 +413,103 @@
       }
     }
   }
+  &.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>

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('/')
 })