gloabl_award_front/src/views/AwardPage/components/TimeLine.vue

<template>
  <div
    ref="containerRef"
    class="timeline-container container flex flex-col align-center"
    :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 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)
            }}<template v-if="item.subLabel">
              {{ $t(item.subLabel) }}
            </template>
          </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, inject } from 'vue'
import { useI18n } from 'vue-i18n'
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 && !isPad.value)

const updateWindowWidth = () => {
  windowWidth.value = window.innerWidth
}

const containerRef = ref<HTMLElement | null>(null)
const timelineRef = ref<HTMLElement | null>(null)
const hasAnimated = ref(false)

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 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(
    isMobile.value && !isPad.value ? '.vertical-line' : '.timeline-line'
  )

  const tl = gsap.timeline()
  tl.addLabel('start')

  // 整体 timeline 的裁剪展开（仅横向使用）
  // 纵向时跳过裁剪动画，改用每个 item 从上方落下的动画
  if (timeline && !(isMobile.value && !isPad.value)) {
    tl.fromTo(
      timeline,
      {
        clipPath: 'inset(0 100% 0 0)'
      },
      {
        clipPath: 'inset(0 0% 0 0)',
        duration: 1.3,
        ease: 'power1.out'
      },
      'start'
    )
  }

  // 线条动画：横向 scaleX，纵向 scaleY
  // 纵向时线条与 item 动画同步进行
  if (line) {
    if (isMobile.value && !isPad.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'
      )
    }
  }

  // 标题与副标题（与 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'
    )
  }

  // 行内内容：桌面端用 .grid-cell，纵向用 .vertical-item
  // 纵向时，每个 item 从上方落下 + 渐显
  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 从上方落下 + 渐显
      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'
      )
    }
  }

  hasAnimated.value = true
}

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;

    // 主网格布局：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-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;

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

    // 标签行
    .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;
        // }
      }
    }

    // 时间行
    .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;
      }
    }
  }
  &.is-pad {
    background: url('@/assets/images/pad_version/timeline_bg.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>