huijia-website/app/pages/index/index.vue

<!--
 * @Author: LiZhiWei
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-20 10:16:16
 * @Description: 
-->
<template>
  <div class="landing">
    <section class="hero">
      <div class="hero-content">
        <div class="hero-text">
          <div class="hero-title">智慧社区整体解决方案</div>
          <div class="hero-subtitle">
            绘家科技助力物业管理数字化转型，提升服务品质与业主满意度。
          </div>

          <div class="hero-metrics">
            <div class="metric">
              <div class="metric-value">300+</div>
              <div class="metric-label">服务客户</div>
            </div>
            <div class="metric">
              <div class="metric-value">800+</div>
              <div class="metric-label">管理小区</div>
            </div>
            <div class="metric">
              <div class="metric-value">50w+</div>
              <div class="metric-label">管理房屋</div>
            </div>
          </div>
          <div class="hero-actions">
            <button class="btn-primary hero-btn-primary">查看方案</button>
            <button class="hero-btn-outline" @click="openConsultation">免费咨询</button>
          </div>
        </div>
      </div>
    </section>

    <section
      id="solution"
      ref="solutionRef"
      class="solution transition-all duration-1000 ease-out"
      :class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
    >
      <div class="solution-header">
        <div class="solution-title">物业管理正面临这些挑战</div>
        <div class="solution-desc">
          传统物业管理模式效率低下、成本高昂、服务体验差，急需数字化转型
        </div>
      </div>

      <div ref="solutionListRef" class="solution-list" @scroll="handleSolutionScroll">
        <div
          v-for="(solution, index) in solutions"
          :key="solution.id"
          class="solution-card"
          :class="[
            index === activeIndex
              ? 'active bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]'
              : 'bg-[linear-gradient(180deg,#E8F6FD_50.48%,#A5D7FD_100%)] lt-sm:bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]',
          ]"
          @mouseenter="activeIndex = index"
        >
          <!-- Hover State Content -->
          <div
            class="solution-card-hover"
            :class="[
              index === activeIndex
                ? 'opacity-100 translate-y-0 duration-500'
                : 'opacity-0 translate-y-20px pointer-events-none duration-300 mobile-show',
            ]"
          >
            <div
              class="solution-card-title pf-sc-semibold text-overflow"
              :class="[
                index === activeIndex
                  ? 'opacity-100 translate-y-0 delay-100 duration-500'
                  : 'opacity-0 translate-y-20px delay-0 duration-200',
              ]"
            >
              <span class="lt-sm:hidden">{{ solution.hoverTitle }}</span>
              <span>{{ solution.title }}解决方案</span>
            </div>
            <div
              class="solution-card-desc pf-sc-regular"
              :class="[
                index === activeIndex
                  ? 'opacity-100 translate-y-0 delay-150 duration-500'
                  : 'opacity-0 translate-y-20px delay-0 duration-200',
              ]"
            >
              <span>{{ solution.hoverDesc }}</span>
            </div>
            <div
              class="solution-card-items"
              :class="[
                index === activeIndex
                  ? 'opacity-100 translate-y-0 delay-400 duration-700'
                  : 'opacity-0 translate-y-20px delay-0 duration-300',
              ]"
            >
              <div v-for="item in solution.hoverItems" :key="item.title" class="solution-card-item">
                <div class="solution-card-item-header">
                  <i class="i-custom-check-one solution-card-item-icon"></i>
                  <div class="solution-card-item-content">
                    <span class="text-#091221 pf-sc-semibold">
                      {{ item.title }}
                    </span>
                    <span class="text-#091221/70 pf-sc-regular line-clamp-1">
                      {{ item.itemDesc }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <button
              class="solution-card-btn pf-sc-regular"
              :class="[
                index === activeIndex
                  ? 'opacity-100 translate-y-0 delay-500 duration-700'
                  : 'opacity-0 translate-y-20px delay-0 duration-200',
              ]"
              @click="openConsultation"
            >
              <span class="font-s-16px lt-sm:font-s-26px">立即咨询</span>
              <i class="i-custom-arrow-right wh-18px lt-sm:wh-28px"></i>
            </button>
            <img
              :src="solution.hoverImg"
              alt=""
              class="solution-card-img"
              :class="[
                index === activeIndex
                  ? 'opacity-100 scale-100 delay-200 duration-500'
                  : 'opacity-0 scale-50 delay-0 duration-500',
              ]"
            />
          </div>

          <!-- Normal State Content -->
          <div
            class="solution-card-normal"
            :class="[
              index === activeIndex
                ? 'opacity-0 pointer-events-none duration-300'
                : 'opacity-100 duration-500',
            ]"
          >
            <div
              class="solution-card-icon-wrapper"
              :class="[
                index === activeIndex
                  ? 'scale-150 opacity-0 delay-0 duration-300'
                  : 'scale-100 opacity-100 delay-0 duration-500',
              ]"
            >
              <img :src="solution.img" alt="" class="wh-35px" />
            </div>

            <div
              class="solution-card-normal-title pf-sc-semibold"
              :class="[
                index === activeIndex
                  ? 'opacity-0 translate-y-10px delay-0 duration-200'
                  : 'opacity-100 translate-y-0 delay-100 duration-500',
              ]"
            >
              {{ solution.title }}
            </div>
            <div
              class="solution-card-normal-desc pf-sc-regular"
              :class="[
                index === activeIndex
                  ? 'opacity-0 translate-y-10px delay-0 duration-200'
                  : 'opacity-100 translate-y-0 delay-150 duration-500',
              ]"
            >
              {{ solution.desc }}
            </div>
            <i
              class="i-custom-circle-right-up solution-card-normal-arrow"
              :class="[
                index === activeIndex
                  ? 'opacity-0 scale-50 delay-0 duration-200'
                  : 'opacity-100 scale-100 delay-100 duration-500',
              ]"
            ></i>
          </div>
        </div>
      </div>

      <div class="solution-dots lt-sm:flex hidden">
        <div
          v-for="(_, index) in solutions"
          :key="index"
          class="dot"
          :class="{ active: index === activeIndex }"
          @click="scrollToSolution(index)"
        ></div>
      </div>
    </section>
    <section
      id="ability"
      ref="abilityRef"
      class="ability transition-all duration-1000 ease-out"
      :class="[isAbilityVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
    >
      <div class="ability-title pf-sc-semibold">一体化智慧解决方案</div>
      <div class="ability-desc pf-sc-regular">
        绘家科技提供从软件到硬件的完整解决方案，覆盖物业管理的全场景需求
      </div>
      <div class="ability-content">
        <div class="ability-tabs">
          <!-- 滑块背景 -->
          <div class="ability-tab-indicator" :style="abilityTabIndicatorStyle"></div>

          <div
            v-for="tab in abilityTabs"
            :key="tab.title"
            class="ability-tab-item"
            :class="[
              activeAbilityTab.id === tab.id ? 'text-white' : 'text-#091221 hover:text-#0F67F8',
            ]"
            @click="handleAbilityTabClick(tab)"
          >
            {{ tab.title }}
          </div>
        </div>
        <div class="tab-content">
          <Transition name="tab-fade" mode="out-in">
            <div :key="activeAbilityTab.id" class="ability-grid">
              <div
                v-for="ability in abilities[activeAbilityTab.id]"
                :key="ability.title"
                class="ability-card"
              >
                <i :class="ability.icon" class="ability-card-icon"></i>
                <div class="ability-card-title pf-sc-semibold">
                  {{ ability.title }}
                </div>
                <div class="ability-card-desc pf-sc-regular">
                  {{ ability.desc }}
                </div>
                <div class="ability-card-link">
                  查看详情
                  <i
                    class="i-custom-arrow-right-c color-#0F67F8 wh-18px lt-sm:wh-28px transition-transform group-hover:translate-x-4px"
                  ></i>
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </section>
    <section
      id="cases"
      ref="casesRef"
      class="cases transition-all duration-1000 ease-out"
      :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
    >
      <div class="cases-header">
        <div class="cases-title pf-sc-semibold">知识产权和案例</div>
        <div class="cases-desc pf-sc-regular">
          绘家科技凭借强大的技术实力和丰富的实践经验，为客户提供卓越的智慧社区解决方案
        </div>
      </div>

      <div ref="casesListRef" class="cases-list" @scroll="handleCaseScroll">
        <div
          v-for="(caseItem, index) in cases"
          :key="caseItem.title"
          class="cases-card"
          :class="{ active: index === activeCaseIndex }"
        >
          <div class="flex flex-col h-full">
            <img :src="caseItem.img" class="cases-card-img" alt="" />
            <div class="cases-card-title pf-sc-semibold">
              {{ caseItem.title }}
            </div>
            <div class="cases-card-desc pf-sc-regular">
              {{ caseItem.desc }}
            </div>
            <div class="cases-card-points">
              <div v-for="point in caseItem.points" :key="point.title" class="cases-card-point">
                <i class="i-custom-check-one cases-card-point-icon"></i>
                <div class="cases-card-point-title pf-sc-semibold">
                  {{ point.title }}
                </div>
                <div class="cases-card-point-desc pf-sc-regular">
                  {{ point.itemDesc }}
                </div>
              </div>
            </div>

            <button class="cases-btn">
              {{ caseItem.btnText }}
              <i class="i-custom-arrow-right-c cases-card-btn-icon"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="cases-dots lt-sm:flex hidden">
        <div
          v-for="(_, index) in cases"
          :key="index"
          class="dot"
          :class="{ active: index === activeCaseIndex }"
          @click="scrollToCase(index)"
        ></div>
      </div>
    </section>
    <section
      id="partnership"
      ref="partnershipRef"
      class="partnership transition-all duration-1000 ease-out"
      :class="[isPartnershipVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
    >
      <div class="partnership-header">
        <div class="partnership-line-left"></div>
        <div class="partnership-title pf-sc-regular">与合作伙伴携手，深入产业共创价值</div>
        <div class="partnership-line-right"></div>
      </div>

      <div class="partnership-content">
        <!-- 第一行 -->
        <InspiraMarquee class="partnership-marquee-row1">
          <div v-for="partner in partnersRow1" :key="partner" class="partner-item">
            <img :src="partner" alt="" class="wh-full object-contain" />
          </div>
        </InspiraMarquee>
        <!-- 第二行 -->
        <InspiraMarquee reverse class="partnership-marquee-row2">
          <div v-for="partner in partnersRow2" :key="partner" class="partner-item">
            <img :src="partner" alt="" class="wh-full object-contain" />
          </div>
        </InspiraMarquee>
        <!-- 左右渐变遮罩 -->
        <div class="partnership-mask-left"></div>
        <div class="partnership-mask-right"></div>
      </div>
    </section>
    <section id="history" ref="timelineRef" class="history">
      <div
        class="history-container"
        :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-40px opacity-0']"
      >
        <div class="history-title pf-sc-semibold">发展历程</div>
        <div class="history-subtitle pf-sc-regular">从探索到引领，绘家科技每一步都坚实有力</div>

        <!-- 上部内容区 -->
        <div class="history-top">
          <!-- 左侧大年份 -->
          <div class="history-year-wrapper">
            <Transition name="year-flow">
              <div :key="currentYearData?.year" class="history-year-content">
                <span class="history-year-text pf-sc-bold">
                  {{ currentYearData?.year }}
                </span>
              </div>
            </Transition>
          </div>

          <!-- 右侧事件描述 -->
          <div class="history-event-wrapper">
            <Transition name="event-fade" mode="out-in">
              <div
                :key="currentYearData?.year + '-' + currentEventIndex"
                class="history-event-content"
              >
                <div class="history-event-header">
                  <span class="history-event-month pf-sc-semibold">
                    {{ currentEventData?.month }}
                  </span>
                  <!-- 右上方小切换 -->
                  <div
                    v-if="(currentYearData?.events?.length ?? 0) > 1"
                    class="history-event-controls"
                  >
                    <i
                      class="i-custom-arrow-circle-left history-event-arrow"
                      :class="[
                        currentEventIndex === 0
                          ? 'opacity-30 cursor-not-allowed'
                          : 'cursor-pointer hover:i-custom-arrow-circle-left-active hover:scale-110 active:scale-95',
                      ]"
                      @click="prevEvent"
                    ></i>
                    <i
                      class="i-custom-arrow-circle-right history-event-arrow"
                      :class="[
                        currentEventIndex === (currentYearData?.events?.length ?? 0) - 1
                          ? 'opacity-30 cursor-not-allowed'
                          : 'cursor-pointer hover:i-custom-arrow-circle-right-active hover:scale-110 active:scale-95',
                      ]"
                      @click="nextEvent"
                    ></i>
                  </div>
                </div>
                <div class="history-event-line"></div>
                <div class="history-event-desc pf-sc-regular">
                  {{ currentEventData?.content }}
                </div>
              </div>
            </Transition>
          </div>
        </div>

        <!-- 时间轴 -->
        <div class="history-timeline lt-sm:hidden">
          <!-- 轨道容器 -->
          <div class="history-timeline-track">
            <!-- 进度条：从轨道最左侧开始到当前点 -->
            <div class="history-timeline-progress" :style="progressStyle"></div>

            <!-- 内部轨道（用于定位时间点） -->
            <div class="history-timeline-nodes">
              <!-- 时间点列表 -->
              <div
                v-for="(item, index) in historyYears"
                :key="item.year"
                class="history-timeline-node"
                :style="getTimelineNodePositionStyle(index)"
                @click="selectYear(index)"
              >
                <!-- 圆点 -->
                <div
                  class="history-timeline-dot"
                  :class="getTimelineDotClasses(index)"
                  :style="getTimelineDotStyle(index)"
                ></div>
                <!-- 年份文字 -->
                <span class="history-timeline-year" :class="getTimelineYearTextClasses(index)">
                  {{ item.year }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- Mobile Timeline -->
        <div class="history-timeline-mobile lt-sm:flex hidden">
          <i
            class="i-custom-button-previous-mobile history-mobile-btn"
            :class="[
              currentYearIndex === 0
                ? 'cursor-not-allowed i-custom-button-previous-mobile-disabled'
                : 'active:i-custom-button-previous-mobile-active',
            ]"
            @click="prevYear"
          ></i>

          <div class="history-mobile-track-container">
            <div class="history-mobile-track-line"></div>
            <div class="history-mobile-nodes">
              <div
                v-for="(yearIndex, i) in mobileTimelineIndices"
                :key="i"
                class="history-mobile-node"
                :class="{ invisible: yearIndex < 0 || yearIndex >= historyYears.length }"
                @click="yearIndex >= 0 && yearIndex < historyYears.length && selectYear(yearIndex)"
              >
                <div
                  class="history-mobile-dot"
                  :class="{ active: yearIndex === currentYearIndex }"
                ></div>
                <div
                  class="history-mobile-year"
                  :class="{ active: yearIndex === currentYearIndex }"
                >
                  {{ historyYears[yearIndex]?.year }}
                </div>
              </div>
            </div>
          </div>

          <i
            class="i-custom-button-next-mobile history-mobile-btn"
            :class="[
              currentYearIndex === historyYears.length - 1
                ? 'cursor-not-allowed i-custom-button-next-mobile-disabled'
                : 'active:i-custom-button-next-mobile-active',
            ]"
            @click="nextYear"
          ></i>
        </div>

        <!-- 底部大切换 -->
        <div class="history-nav">
          <i
            class="i-custom-button-previous history-nav-btn"
            :class="{
              'opacity-30 cursor-not-allowed hover:i-custom-button-previous!':
                currentYearIndex === 0,
            }"
            @click="prevYear"
          ></i>
          <i
            class="i-custom-button-next history-nav-btn"
            :class="{
              'opacity-30 cursor-not-allowed hover:i-custom-button-next!':
                currentYearIndex === historyYears.length - 1,
            }"
            @click="nextYear"
          ></i>
        </div>
      </div>
    </section>
    <section class="cta">
      <div class="cta-title pf-sc-semibold">开启您的智慧社区转型之旅</div>
      <div class="cta-desc pf-sc-light">
        提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
      </div>
      <button class="cta-btn pf-sc-regular" @click="openConsultation">
        <span class="cta-btn-text">立即咨询</span>
        <i class="i-custom-arrow-right cta-btn-icon"></i>
      </button>
    </section>
  </div>
</template>

<script setup lang="ts">
  import {
    abilityTabs,
    solutions,
    abilities,
    cases,
    partnersRow1,
    partnersRow2,
    historyYears,
  } from '@/constants/common'

  const { openConsultation } = useConsultation()

  const activeIndex = ref(0)
  const solutionListRef = ref<HTMLElement | null>(null)

  const handleSolutionScroll = (e: Event) => {
    const el = e.target as HTMLElement
    const scrollLeft = el.scrollLeft
    const width = el.offsetWidth
    // 计算当前处于中间的卡片索引
    // 卡片宽度为 85%，加上 gap 16px
    const cardWidth = width * 0.85
    const gap = 16
    const newIndex = Math.round(scrollLeft / (cardWidth + gap))
    if (newIndex !== activeIndex.value) {
      activeIndex.value = newIndex
    }
  }

  const scrollToSolution = (index: number) => {
    if (!solutionListRef.value) return
    const width = solutionListRef.value.offsetWidth
    const cardWidth = width * 0.85
    const gap = 16
    solutionListRef.value.scrollTo({
      left: index * (cardWidth + gap),
      behavior: 'smooth',
    })
  }

  const activeCaseIndex = ref(0)
  const casesListRef = ref<HTMLElement | null>(null)

  const handleCaseScroll = (e: Event) => {
    const el = e.target as HTMLElement
    const scrollLeft = el.scrollLeft
    const width = el.offsetWidth
    const cardWidth = width * 0.9
    const gap = 16
    const newIndex = Math.round(scrollLeft / (cardWidth + gap))
    if (newIndex !== activeCaseIndex.value) {
      activeCaseIndex.value = newIndex
    }
  }

  const scrollToCase = (index: number) => {
    if (!casesListRef.value) return
    const width = casesListRef.value.offsetWidth
    const cardWidth = width * 0.9
    const gap = 16
    casesListRef.value.scrollTo({
      left: index * (cardWidth + gap),
      behavior: 'smooth',
    })
  }
  const solutionRef = ref<HTMLElement | null>(null)
  const abilityRef = ref<HTMLElement | null>(null)
  const partnershipRef = ref<HTMLElement | null>(null)
  const casesRef = ref<HTMLElement | null>(null)
  const timelineRef = ref<HTMLElement | null>(null)
  const isSolutionVisible = ref(false)
  const isAbilityVisible = ref(false)
  const isPartnershipVisible = ref(false)
  const isCasesVisible = ref(false)
  const isTimelineVisible = ref(false)

  // 发展历程状态
  const currentYearIndex = ref(historyYears.length - 1)
  const currentEventIndex = ref(0)

  const currentYearData = computed(() => {
    const data = historyYears[currentYearIndex.value]
    return data || historyYears[0]
  })
  const currentEventData = computed(() => {
    const events = currentYearData.value?.events || []
    return events[currentEventIndex.value] || events[0]
  })

  const mobileTimelineIndices = computed(() => {
    const total = historyYears.length
    if (total <= 0) return []
    // Always return 3 positions centered on currentYearIndex
    const prev = currentYearIndex.value - 1
    const curr = currentYearIndex.value
    const next = currentYearIndex.value + 1
    return [prev, curr, next]
  })

  const progressStyle = computed(() => {
    const totalSteps = Math.max(historyYears.length - 1, 1)
    if (currentYearIndex.value === totalSteps) {
      return {
        width: '100%',
      }
    }
    const percentage = currentYearIndex.value / totalSteps
    return {
      width: `calc(60px + ${percentage} * (100% - 120px))`,
    }
  })

  const nextYear = () => {
    if (currentYearIndex.value < historyYears.length - 1) {
      currentYearIndex.value++
      currentEventIndex.value = 0
    }
  }

  const prevYear = () => {
    if (currentYearIndex.value > 0) {
      currentYearIndex.value--
      currentEventIndex.value = 0
    }
  }

  const nextEvent = () => {
    const events = currentYearData.value?.events || []
    if (currentEventIndex.value < events.length - 1) {
      currentEventIndex.value++
    }
  }

  const prevEvent = () => {
    if (currentEventIndex.value > 0) {
      currentEventIndex.value--
    }
  }

  const selectYear = (index: number) => {
    currentYearIndex.value = index
    currentEventIndex.value = 0
  }

  const activeAbilityTab = ref<AbilityTab>(abilityTabs[0] as AbilityTab)

  const abilityTabIndicatorStyle = computed(() => {
    const activeTabIndex = abilityTabs.findIndex((tab) => tab.id === activeAbilityTab.value.id)
    return {
      transform: `translateX(${activeTabIndex * 100}%)`,
    }
  })

  const handleAbilityTabClick = (tab: AbilityTab) => {
    activeAbilityTab.value = tab
  }

  onMounted(() => {
    const revealSections = [
      { elRef: solutionRef, visible: isSolutionVisible },
      { elRef: abilityRef, visible: isAbilityVisible },
      { elRef: partnershipRef, visible: isPartnershipVisible },
      { elRef: casesRef, visible: isCasesVisible },
      { elRef: timelineRef, visible: isTimelineVisible },
    ]

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const matched = revealSections.find((item) => item.elRef.value === entry.target)
            if (matched) {
              matched.visible.value = true
            }
            observer.unobserve(entry.target)
          }
        })
      },
      { threshold: 0.1 }
    )

    revealSections.forEach(({ elRef }) => {
      if (elRef.value) {
        observer.observe(elRef.value)
      }
    })
  })

  const getTimelineNodePositionStyle = (index: number) => {
    return { left: `${(index / (historyYears.length - 1)) * 100}%` }
  }

  const getTimelineDotClasses = (index: number) => {
    return [
      index < currentYearIndex.value
        ? 'wh-13px'
        : 'wh-16px border-#0F67F8 group-hover:border-[#2563EB]  border-1',
      index === currentYearIndex.value
        ? 'wh-16px scale-150 outline-6px outline-#CEE0FF outline-solid border-none'
        : '',
    ]
  }

  const getTimelineDotStyle = (index: number) => {
    if (index === currentYearIndex.value) {
      return { background: 'linear-gradient(90deg, #779EFF 0%, #0A50FF 100%)' }
    }
    if (index < currentYearIndex.value) {
      return { background: '#FFFFFF' }
    }
    return {}
  }

  const getTimelineYearTextClasses = (index: number) => {
    return [
      index === currentYearIndex.value
        ? 'text-#2563EB font-bold pf-sc-bold scale-110'
        : 'text-#94A3B8 group-hover:text-[#64748B]',
    ]
  }
</script>
<style scoped lang="scss">
  .landing {
    @apply lt-sm:pt-120px;
    color: var(--hj-text);
    background: var(--hj-bg);
  }

  .hero {
    @apply h-680px relative overflow-hidden;
    @apply lt-sm:w-full lt-sm:h-auto lt-sm:aspect-[750/880];

    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/banner.png');

    @screen lt-sm {
      @apply w-full h-auto;
      aspect-ratio: 750/880;
      background-image: url('@/assets/images/banner-mobile.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .hero-content {
      @extend %landing-container;
      @apply flex items-center pb-48px pt-200px;
      @apply lt-sm:pt-80px;
    }

    .hero-text {
      @apply text-left w-full;
      @apply lt-sm:text-center;
    }

    .hero-metrics {
      @apply mt-35px flex items-center gap-48px;
      @apply lt-sm:justify-center lt-sm:mt-20px lt-sm:gap-76px;
    }

    .hero-title {
      @apply font-s-48px font-semibold text-#000000;
      @apply lt-sm:font-s-58px;
    }

    .hero-subtitle {
      @apply font-s-18px text-#091221/70;
      @apply lt-sm:mt-12px lt-sm:font-s-26px lt-sm:px-25px;
      @apply lt-xs:px-0;
    }

    .hero-actions {
      @apply mt-35px flex items-center gap-16px;
      @apply lt-sm:justify-center lt-sm:absolute lt-sm:bottom-80px lt-sm:left-1/2 lt-sm:-translate-x-1/2;
    }

    .hero-btn-primary {
      @apply w-127px h-56px rounded-8px text-white font-s-18px pf-sc-semibold;
      @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
    }

    .hero-btn-outline {
      @apply w-127px h-56px bg-white border-#0F67F8 border-1 rounded-8px hover:opacity-80 font-s-18px font-semibold text-#0F67F8;
      @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
    }

    .metric {
      @apply flex items-start flex-col;
      @apply lt-sm:items-center;

      .metric-value {
        @apply font-s-32px font-semibold text-#0F67F8;
        @apply lt-sm:font-s-52px;
      }

      .metric-label {
        @apply font-s-14px text-#384146;
        @apply lt-sm:font-s-24px;
      }
    }
  }

  .solution {
    @extend %landing-container;
    @apply py-120px lt-sm:py-120px lt-sm:px-0;
  }

  .solution-header {
    @apply text-center mb-45px;
  }

  .solution-title {
    @apply font-s-36px font-semibold text-#000000 mb-4px lh-60px;
    @apply lt-sm:font-s-48px lt-sm:lh-60px;
  }

  .solution-desc {
    @apply font-s-16px text-#091221/70 lh-30px;
    @apply lt-sm:font-s-24px lt-sm:px-110px lt-sm:mt-16px lt-sm:lh-40px;
  }

  .solution-list {
    @apply flex h-365px w-full gap-24px;
    @apply lt-sm:h-auto lt-sm:gap-16px lt-sm:overflow-x-auto lt-sm:overflow-y-hidden lt-sm:px-24px;
    @apply lt-sm:[scroll-snap-type:x_mandatory] lt-sm:[scrollbar-width:none];
    &::-webkit-scrollbar {
      @apply lt-sm:hidden;
    }
  }

  .solution-card {
    position: relative;
    display: flex;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    border-radius: 24px;
    will-change: transform, opacity;
    transition:
      transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 600ms ease,
      flex 600ms ease-in-out,
      background-color 600ms ease-in-out;

    @media (min-width: 768px) {
      &.active {
        flex: 1 1 0%;
      }
      &:not(.active) {
        flex: 0 0 220px;
      }
    }

    @apply lt-sm:flex-[0_0_90%] lt-sm:min-h-750px lt-sm:w-630px;
    @apply lt-sm:[scroll-snap-align:center];

    &:not(.active) {
      @apply lt-sm:scale-96 lt-sm:opacity-50;
    }

    &.active {
      @apply lt-sm:scale-100 lt-sm:opacity-100;
    }

    &:first-child {
      @apply lt-sm:ml-36px;
    }

    &:last-child {
      @apply lt-sm:mr-36px;
    }
  }

  .solution-card-hover {
    @apply h-full w-full pt-40px px-48px absolute left-0 top-0 transition-all ease-in-out;
    @apply lt-sm:relative lt-sm:pt-40px lt-sm:px-36px lt-sm:pb-32px lt-sm:opacity-100 lt-sm:translate-y-0 lt-sm:pointer-events-auto;

    &.mobile-show {
      @apply lt-sm:opacity-100 lt-sm:translate-y-0 lt-sm:pointer-events-auto;
    }
  }

  .solution-card-title {
    @apply font-s-22px text-#000000 transition-all;
    @apply lt-sm:font-s-32px;
  }

  .solution-card-desc {
    @apply font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular text-overflow transition-all;
    @apply lt-sm:font-s-24px lt-sm:mt-8px lt-sm:lh-normal;
  }

  .solution-card-items {
    @apply mt-24px flex flex-col gap-8px transition-all;
    @apply lt-sm:mt-48px;
  }

  .solution-card-item {
    @apply flex flex-col;
  }

  .solution-card-item-header {
    @apply flex gap-8px items-center font-s-14px;
    @apply lt-sm:font-s-24px lt-sm:gap-12px;
  }

  .solution-card-item-icon {
    @apply wh-18px;
    @apply lt-sm:wh-32px;
  }

  .solution-card-item-content {
    @apply flex items-center gap-8px;
    @apply lt-sm:flex-col lt-sm:items-start lt-sm:gap-8px;
  }

  .solution-card-btn {
    @apply mt-56px h-48px w-268px bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80 transition-all;
    @apply lt-sm:w-270px lt-sm:h-95px lt-sm:rounded-16px lt-sm:mt-102px;
  }

  .solution-card-img {
    @apply wh-280px absolute bottom--37px right-0 transition-all duration-1000 ease-in-out;
    @apply lt-sm:wh-264px lt-sm:bottom--26px;
  }

  .solution-card-normal {
    @apply h-full w-220px pt-40px px-24px absolute left-0 top-0 transition-all ease-in-out;
    @apply lt-sm:hidden;
  }

  .solution-card-icon-wrapper {
    @apply wh-40px ml-2px bg-white rounded-10px flex-center transition-all ease-in-out;
  }

  .solution-card-normal-title {
    @apply mt-18px font-s-18px text-#091221 pf-sc-semibold transition-all;
  }

  .solution-card-normal-desc {
    @apply mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px transition-all;
  }

  .solution-card-normal-arrow {
    @apply wh-48px absolute bottom-24px left-24px transition-all;
  }

  .solution-dots {
    @apply lt-sm:mt-40px flex-center lt-sm:gap-16px;
    .dot {
      @apply lt-sm:w-60px lt-sm:h-10px bg-#E5E9F5 rounded-full transition-all cursor-pointer;
      &.active {
        @apply bg-#0F67F8;
      }
    }
  }

  .ability {
    @apply py-120px;
    @extend %landing-container;
    @apply lt-sm:py-120px lt-sm:px-32px;
    background-size: 100% 100%;
    background-image: url('@/assets/images/bg-ability.png');

    @screen lt-sm {
      background-size: 100% 100%;
      background-image: url('@/assets/images/bg-ability-mobile.png');
    }
  }

  .ability-title {
    @apply font-s-36px text-#000000 pf-sc-semibold flex-center lh-60px;
    @apply lt-sm:font-s-48px lt-sm:lh-60px;
  }

  .ability-desc {
    @apply font-s-16px text-#091221/70 pf-sc-regular lh-30px flex-center mt-4px;
    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:text-center lt-sm:px-60px;
  }

  .ability-content {
    @apply mt-24px flex-center flex-col;
    @apply lt-sm:mt-40px;
  }

  .ability-tabs {
    @apply relative flex items-center rounded-14px border border-#ECEFF6 bg-#F6F8FD p-6px;
    @apply lt-sm:rounded-16px lt-sm:p-8px lt-sm:w-[calc(100%-40px)];
  }

  .ability-tab-indicator {
    @apply absolute w-136px h-[calc(100%-12px)] transition-all duration-300 ease-out rounded-8px bg-#0F67F8;
    @apply lt-sm:w-[calc((100%-16px)/3)] lt-sm:h-[calc(100%-16px)] lt-sm:rounded-12px;
  }

  .ability-tab-item {
    @apply relative z-1 cursor-pointer py-14px px-20px text-center font-s-16px transition-colors duration-300 pf-sc-regular;
    @apply lt-sm:flex-1 lt-sm:px-0 lt-sm:py-20px lt-sm:font-s-24px;
  }

  .tab-content {
    @apply pt-45px;
    @apply lt-sm:pt-40px lt-sm:w-full;
  }

  .ability-grid {
    @apply grid grid-cols-3 gap-24px;
    @apply lt-sm:grid-cols-2 lt-sm:gap-25px;
  }

  .ability-card {
    @apply group relative flex flex-col rounded-16px border border-#ECEFF6 bg-[linear-gradient(0deg,_#FFFFFF_0%,_rgba(255,255,255,0.6)_100%)] p-24px transition-all duration-300 hover:border-#0F67F8/30 hover:shadow-[0_8px_24px_rgba(15,103,248,0.08)];
    @apply lt-sm:p-24px lt-sm:rounded-16px;
  }

  .ability-card-icon {
    @apply wh-48px;
    @apply lt-sm:wh-78px;
  }

  .ability-card-title {
    @apply mt-16px font-s-18px font-semibold text-#091221 pf-sc-semibold;
    @apply lt-sm:font-s-32px;
  }

  .ability-card-desc {
    @apply mt-8px flex-1 font-s-14px text-#091221/70 pf-sc-regular;
    @apply lt-sm:font-s-24px lt-sm:mt-16px;
  }

  .ability-card-link {
    @apply mt-24px flex items-center gap-8px font-s-16px pf-sc-regular text-#0F67F8 transition-colors hover:text-#0A50FF cursor-pointer;
    @apply lt-sm:mt-48px lt-sm:font-s-28px;
  }

  .cases {
    @apply pt-120px pb-46px lt-sm:pt-120px lt-sm:pb-60px lt-sm:px-32px;
    @extend %landing-container;
  }

  .cases-header {
    @apply text-center mb-60px lt-sm:mb-60px lt-sm:px-32px;
  }

  .cases-title {
    @apply font-s-36px font-semibold text-#000000 mb-4px lh-60px;
    @apply lt-sm:font-s-48px lt-sm:mb-16px;
  }

  .cases-desc {
    @apply font-s-16px text-#091221/70 lh-30px;
    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:px-70px;
  }

  .cases-list {
    @apply flex gap-24px;
    @apply lt-sm:gap-36px lt-sm:overflow-x-auto lt-sm:overflow-y-hidden lt-sm:px-0 lt-sm:pb-10px;
    @apply lt-sm:[scroll-snap-type:x_mandatory] lt-sm:[scrollbar-width:none];
    &::-webkit-scrollbar {
      @apply lt-sm:hidden;
    }
  }

  .cases-card {
    @apply group flex-1 overflow-hidden rounded-16px bg-#F6F8FD p-32px transition-all duration-300;
    @apply lt-sm:flex-none lt-sm:w-[calc(100vw-84px)] lt-sm:min-w-[calc(100vw-84px)] lt-sm:p-32px lt-sm:rounded-16px;
    @apply lt-sm:[scroll-snap-align:center];

    &:first-child {
      @apply lt-sm:ml-42px;
    }

    &:last-child {
      @apply lt-sm:mr-42px;
    }
  }

  .cases-card-img {
    @apply w-full h-218px rounded-12px;
    @apply lt-sm:h-320px lt-sm:rounded-12px;
  }

  .cases-card-title {
    @apply font-s-18px font-semibold text-#091221 mt-24px;
    @apply lt-sm:font-s-32px lt-sm:mt-32px;
  }

  .cases-card-desc {
    @apply mt-8px font-s-14px lh-24px text-#091221/70;
    @apply lt-sm:font-s-24px lt-sm:lh-36px lt-sm:mt-16px;
  }

  .cases-card-points {
    @apply mt-24px flex flex-col gap-8px flex-1;
    @apply lt-sm:mt-32px lt-sm:gap-16px;
  }

  .cases-card-point {
    @apply flex items-center gap-8px;
    @apply lt-sm:gap-12px;
  }

  .cases-card-point-icon {
    @apply wh-20px mt-2px;
    @apply lt-sm:wh-32px;
  }

  .cases-card-point-title {
    @apply font-s-14px font-semibold text-#091221;
    @apply lt-sm:font-s-24px;
  }

  .cases-card-point-desc {
    @apply font-s-14px text-#091221/70;
    @apply lt-sm:font-s-24px;
  }

  .cases-btn {
    @apply mt-56px flex items-center justify-between gap-8px rounded-8px bg-white px-16px py-15px font-s-16px text-#0F67F8 transition-all hover:bg-#0F67F8 hover:text-white;
    @apply lt-sm:mt-48px lt-sm:h-96px lt-sm:rounded-8px lt-sm:px-32px lt-sm:font-s-28px lt-sm:bg-#0F67F8 lt-sm:text-white;
  }

  .cases-card-btn-icon {
    @apply wh-18px;
    @apply lt-sm:wh-32px lt-sm:text-white;
  }

  .cases-dots {
    @apply lt-sm:mt-40px lt-sm:flex-center lt-sm:gap-16px;
    .dot {
      @apply lt-sm:w-60px lt-sm:h-10px bg-#E5E9F5 rounded-full transition-all cursor-pointer;
      &.active {
        @apply bg-#0F67F8;
      }
    }
  }

  .partnership {
    @extend %landing-container;
    @media screen and (min-width: 1920px) {
      padding-left: 220px;
      padding-right: 220px;
    }
    @apply py-60px overflow-hidden;
    @apply lt-sm:py-60px lt-sm:px-0;
  }

  .partnership-header {
    @apply flex-center gap-32px mb-40px;
    @apply lt-sm:mb-40px lt-sm:gap-30px;
  }

  .partnership-line-left {
    @apply h-2px w-320px bg-[linear-gradient(90deg,transparent_0%,#E5E9F5_100%)];
    @apply lt-sm:w-85px;
  }

  .partnership-title {
    @apply text-center font-s-18px lh-21px text-#9CA0A7 whitespace-nowrap;
    @apply lt-sm:font-s-28px;
  }

  .partnership-line-right {
    @apply h-2px w-320px bg-[linear-gradient(90deg,#E5E9F5_0%,transparent_100%)];
    @apply lt-sm:w-85px;
  }

  .partnership-content {
    @apply relative flex flex-col gap-0px -mt-24px;
  }

  .partnership-marquee-row1 {
    @apply [--duration:80s] [--gap:24px] mb--31px;
  }

  .partnership-marquee-row2 {
    @apply [--duration:80s] [--delay:-20s] [--gap:24px];
  }

  .partnership-mask-left {
    @apply pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-[linear-gradient(to_right,#fff,transparent)];
  }

  .partnership-mask-right {
    @apply pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-[linear-gradient(to_left,#fff,transparent)];
  }

  .partner-item {
    @apply flex-center h-80px w-200px bg-white rounded-8px shadow-[0_2px_8px_2px_rgba(0,0,0,0.06)] px-24px;
    @apply lt-sm:h-105px lt-sm:w-290px;
  }

  .tab-fade-enter-active {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .tab-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .tab-fade-enter-from {
    opacity: 0;
    transform: translateX(30px);
  }

  .tab-fade-leave-to {
    opacity: 0;
    transform: translateX(-30px);
  }

  /* 卡片级联动画 */
  .grid > div {
    animation: card-slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  .grid > div:nth-child(1) {
    animation-delay: 0.05s;
  }
  .grid > div:nth-child(2) {
    animation-delay: 0.1s;
  }
  .grid > div:nth-child(3) {
    animation-delay: 0.15s;
  }
  .grid > div:nth-child(4) {
    animation-delay: 0.2s;
  }
  .grid > div:nth-child(5) {
    animation-delay: 0.25s;
  }
  .grid > div:nth-child(6) {
    animation-delay: 0.3s;
  }
  .grid > div:nth-child(7) {
    animation-delay: 0.35s;
  }
  .grid > div:nth-child(8) {
    animation-delay: 0.4s;
  }

  @keyframes card-slide-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .btn-primary {
    @apply bg-gradient-to-r from-[#779EFF] to-[#0A50FF];

    border: none;
    outline: none;
    //hover 背景颜色
    &:hover {
      opacity: 0.8;
    }
  }

  .history {
    @apply overflow-hidden relative py-60px;
    @apply lt-sm:pt-60px lt-sm:pb-160px lt-sm:px-32px;
    @extend %landing-container;
    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/history-bg.png');
  }

  .history-container {
    @apply flex flex-col items-center transition-all duration-1000;
  }

  .history-title {
    @apply font-semibold font-s-36px text-#000000 lh-60px text-center mb-4px;
    @apply lt-sm:font-s-48px lt-sm:lh-60px;
  }

  .history-subtitle {
    @apply font-s-16px text-#091221/70 text-center lh-30px mb-50px;
    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:mb-88px;
  }

  .history-top {
    @apply w-full h-255px flex py-50px items-center;
    @apply lt-sm:h-176px;
  }

  .history-year-wrapper {
    @apply relative pl-127px w-600px shrink-0 h-170px overflow-hidden;
    @apply lt-sm:hidden;
  }

  .history-year-content {
    @apply absolute left-127px top-0 h-full flex items-center w-full;
  }

  .history-year-text {
    @apply text-170px font-bold text-#0F67F8 select-none leading-none;
    -webkit-text-stroke: 1px #2563eb;
    text-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
  }

  .history-event-wrapper {
    @apply flex-1 h-full relative overflow-hidden pt-14px;
    @apply lt-sm:h-176px lt-sm:pt-0;
  }

  .history-event-content {
    @apply absolute left-0 top-14px w-full flex flex-col pr-114px;
    @apply lt-sm:pr-0 static;
  }

  .history-event-header {
    @apply flex justify-between items-center w-full;
    @apply lt-sm:h-45px;
  }

  .history-event-month {
    @apply font-s-22px font-semibold lh-30.8px text-#091221 flex-1;
    @apply lt-sm:font-s-32px lt-sm:lh-30.8px;
  }

  .history-event-controls {
    @apply flex gap-12px relative z-10;
    @apply lt-sm:gap-16px;
  }

  .history-event-arrow {
    @apply wh-32px transition-all;
    @apply lt-sm:wh-45px;
  }

  .history-event-line {
    @apply h-2px w-34px bg-#0F67F8 mt-11px origin-left;
    @apply lt-sm:h-4px lt-sm:w-68px lt-sm:mt-25px;
  }

  .history-event-desc {
    @apply w-full font-s-20px lh-35px text-#091221/70 mt-26px;
    @apply lt-sm:font-s-24px lt-sm:mt-26px lt-sm:lh-normal;
  }

  .history-timeline {
    @apply w-full relative pt-47px pb-60px;
    @apply lt-sm:py-0 lt-sm:mt-70px;
  }

  .history-timeline-track {
    @apply relative h-16px w-full bg-white rounded-full px-60px;
    @apply lt-sm:h-16px lt-sm:px-60px;
  }

  .history-timeline-progress {
    @apply absolute left-0 top-0 h-full bg-gradient-to-r from-[#60A5FA] to-[#2563EB] rounded-full transition-all duration-500 ease-out z-1;
  }

  .history-timeline-nodes {
    @apply relative h-full w-full;
  }

  .history-timeline-node {
    @apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 flex flex-col items-center cursor-pointer group z-2;
  }

  .history-timeline-dot {
    @apply rounded-full transition-all duration-300 relative bg-white;
    @apply lt-sm:wh-14px;
  }

  .history-timeline-year {
    @apply absolute top-24px text-16px transition-all duration-300 whitespace-nowrap;
  }

  .history-nav {
    @apply flex gap-24px mt-45px;
    @apply lt-sm:hidden;
  }

  .history-nav-btn {
    @apply wh-56px flex-center cursor-pointer;
  }

  /* 发展历程动画 - 新版流式 */
  .year-flow-enter-active,
  .year-flow-leave-active {
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .year-flow-enter-from {
    opacity: 0;
    transform: translateY(100%) scale(0.9);
  }

  .year-flow-leave-to {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
  }

  /* 事件内容渐隐渐显 */
  .event-fade-enter-active,
  .event-fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .event-fade-enter-from,
  .event-fade-leave-to {
    opacity: 0;
  }

  /* 时间轴圆点呼吸效果 */

  .cta {
    @apply w-full h-276px py-60px flex-center flex-col;
    @apply lt-sm:h-345px lt-sm:py-60px;
    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/bg-3.png');
    @screen lt-sm {
      background-size: cover;
      background-position: center;
      background-image: url('@/assets/images/bg-3-mobile.png');
    }
  }

  .cta-title {
    @apply font-s-40px lh-56px text-center;
    @apply lt-sm:font-s-40px lt-sm:lh-56px;
  }

  .cta-desc {
    @apply font-s-18px text-#232325;
    @apply lt-sm:font-s-18px lt-sm:mt-24px;
  }

  .cta-btn {
    @apply h-52px mt-22px w-268px bg-#0F67F8 text-white rounded-8px px-16px flex items-center justify-between hover:opacity-80;
    @apply lt-sm:h-84px lt-sm:w-391px lt-sm:mt-24px lt-sm:rounded-8px;
  }

  .cta-btn-text {
    @apply font-s-16px;
    @apply lt-sm:font-s-26px;
  }

  .cta-btn-icon {
    @apply i-custom-arrow-right wh-18px;
  }

  .history-timeline-mobile {
    @apply flex items-center justify-between w-full px-0;
    @apply lt-sm:mt-70px;
  }

  .history-mobile-btn {
    @apply shrink-0 cursor-pointer transition-all absolute;
    @apply lt-sm:wh-64px z-10;
    &.i-custom-button-previous-mobile {
      @apply left-0;
    }
    &.i-custom-button-next-mobile {
      @apply right-0;
    }
  }

  .history-mobile-track-container {
    @apply relative flex-1;
  }

  .history-mobile-track-line {
    @apply absolute left-0 right-0 bg-white rounded-full;
    @apply lt-sm:h-16px lt-sm:top-1/2 lt-sm:translate-y--1/2;
  }

  .history-mobile-nodes {
    @apply hidden relative w-full h-full justify-between items-center z-1;
    @apply lt-sm:px-100px lt-sm:h-16px lt-sm:flex;
  }

  .history-mobile-node {
    @apply relative flex flex-col items-center cursor-pointer;
    @apply lt-sm:w-60px;
    &.invisible {
      @apply transition-none;
      .history-mobile-dot,
      .history-mobile-year {
        @apply transition-none;
      }
    }
  }

  .history-mobile-dot {
    @apply rounded-full bg-white transition-all z-2 border-#0F67F8 border-1;
    @apply lt-sm:wh-18px;

    &.active {
      @apply scale-150  outline-#CEE0FF outline-solid border-none bg-[linear-gradient(90deg,#779EFF_0%,#0A50FF_100%)];
      @apply lt-sm:wh-22px lt-sm:outline-8px;
    }
  }

  .history-mobile-year {
    @apply hidden absolute text-#091221/60 pf-sc-regular transition-all whitespace-nowrap;
    @apply lt-sm:font-s-22px lt-sm:top-58px lt-sm:block;
    &.active {
      @apply text-#0F67F8 font-semibold scale-110;
    }
  }
</style>