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

<!--
 * @Author: LiZhiWei
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-19 12:12:17
 * @Description: 
-->
<template>
  <div class="landing">
    <section class="hero">
      <div class="hero-content flex items-center pb-48px pt-200px lt-sm:pt-80px">
        <div class="text-left w-full lt-sm:text-center">
          <div class="hero-title">智慧社区整体解决方案</div>
          <div class="hero-subtitle">
            绘家科技助力物业管理数字化转型，提升服务品质与业主满意度。
          </div>

          <div
            class="mt-35px flex items-center gap-48px lt-sm:justify-center lt-sm:mt-20px lt-sm:gap-76px"
          >
            <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 py-120px transition-all duration-1000 ease-out"
      :class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
    >
      <div class="text-center mb-45px">
        <div
          class="font-s-36px font-semibold text-#000000 mb-4px lh-60px lt-sm:font-s-48px lt-sm:lh-60px"
        >
          物业管理正面临这些挑战
        </div>
        <div
          class="font-s-16px text-#091221/70 lh-30px lt-sm:font-s-24px lt-sm:px-110px lt-sm:mt-16px lt-sm:lh-40px"
        >
          传统物业管理模式效率低下、成本高昂、服务体验差，急需数字化转型
        </div>
      </div>

      <div class="solution-list" ref="solutionListRef" @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="font-s-22px text-#000000 pf-sc-semibold transition-all lt-sm:font-s-32px"
              :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="font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular text-overflow transition-all lt-sm:font-s-24px lt-sm:mt-8px lt-sm:lh-normal"
              :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="mt-24px flex flex-col gap-8px transition-all lt-sm:mt-48px"
              :class="[
                index === activeIndex
                  ? 'opacity-100 translate-y-0 delay-200 duration-500'
                  : 'opacity-0 translate-y-20px delay-0 duration-200',
              ]"
            >
              <div v-for="item in solution.hoverItems" :key="item.title" class="flex flex-col">
                <div class="flex gap-8px items-center font-s-14px lt-sm:font-s-24px lt-sm:gap-12px">
                  <i class="i-custom-check-one wh-18px lt-sm:wh-32px"></i>
                  <div
                    class="flex items-center gap-8px lt-sm:flex-col lt-sm:items-start lt-sm:gap-8px"
                  >
                    <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="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"
              :class="[
                index === activeIndex
                  ? 'opacity-100 translate-y-0 delay-300 duration-500'
                  : '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="wh-280px lt-sm:wh-264px absolute bottom--37px lt-sm:bottom--26px right-0 transition-all ease-out"
              :class="[
                index === activeIndex
                  ? 'opacity-100 scale-100 delay-100 duration-700'
                  : 'opacity-0 scale-50 delay-0 duration-300',
              ]"
            />
          </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="wh-40px ml-2px bg-white rounded-10px flex-center transition-all ease-in-out"
              :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="mt-18px font-s-18px text-#091221 pf-sc-semibold transition-all"
              :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="mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px transition-all"
              :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 wh-48px absolute bottom-24px left-24px transition-all"
              :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="font-s-36px text-#000000 pf-sc-semibold flex-center lh-60px lt-sm:font-s-48px lt-sm:lh-60px"
      >
        一体化智慧解决方案
      </div>
      <div
        class="font-s-16px text-#091221/70 pf-sc-regular lh-30px flex-center mt-4px lt-sm:font-s-24px lt-sm:lh-40px lt-sm:text-center lt-sm:px-60px"
      >
        绘家科技提供从软件到硬件的完整解决方案，覆盖物业管理的全场景需求
      </div>
      <div class="mt-24px flex-center flex-col lt-sm:mt-40px">
        <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 pt-45px lt-sm:pt-40px lt-sm:w-full">
          <Transition name="tab-fade" mode="out-in">
            <div :key="activeAbilityTab.id" class="grid grid-cols-3 gap-24px lt-sm:grid-cols-2">
              <div
                v-for="ability in abilities[activeAbilityTab.id]"
                :key="ability.title"
                class="ability-card"
              >
                <i :class="ability.icon" class="wh-48px lt-sm:wh-78px"></i>
                <div
                  class="mt-16px font-s-18px lt-sm:font-s-32px font-semibold text-#091221 pf-sc-semibold"
                >
                  {{ ability.title }}
                </div>
                <div
                  class="mt-8px flex-1 font-s-14px lt-sm:font-s-24px lt-sm:mt-16px text-#091221/70 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 pt-120px pb-46px transition-all duration-1000 ease-out lt-sm:pt-120px lt-sm:pb-60px lt-sm:px-32px"
      :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
    >
      <div class="text-center mb-60px lt-sm:mb-60px lt-sm:px-32px">
        <div
          class="font-s-36px font-semibold text-#000000 pf-sc-semibold mb-4px lh-60px lt-sm:font-s-48px lt-sm:mb-16px"
        >
          知识产权和案例
        </div>
        <div
          class="font-s-16px text-#091221/70 pf-sc-regular lh-30px lt-sm:font-s-24px lt-sm:lh-40px"
        >
          绘家科技凭借强大的技术实力和丰富的实践经验，为客户提供卓越的智慧社区解决方案
        </div>
      </div>

      <div class="cases-list" ref="casesListRef" @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="w-full h-218px rounded-12px lt-sm:h-320px lt-sm:rounded-24px"
              alt=""
            />
            <div
              class="font-s-18px font-semibold text-#091221 pf-sc-semibold mt-24px lt-sm:font-s-32px lt-sm:mt-32px"
            >
              {{ caseItem.title }}
            </div>
            <div
              class="mt-8px font-s-14px lh-24px text-#091221/70 pf-sc-regular lt-sm:font-s-24px lt-sm:lh-36px lt-sm:mt-16px"
            >
              {{ caseItem.desc }}
            </div>
            <div class="mt-24px flex flex-col gap-8px lt-sm:mt-32px lt-sm:gap-16px flex-1">
              <div
                v-for="point in caseItem.points"
                :key="point.title"
                class="flex items-center gap-8px lt-sm:gap-12px"
              >
                <i class="i-custom-check-one wh-20px mt-2px lt-sm:wh-32px"></i>
                <div
                  class="font-s-14px font-semibold text-#091221 pf-sc-semibold lt-sm:font-s-24px"
                >
                  {{ point.title }}
                </div>
                <div class="font-s-14px text-#091221/70 pf-sc-regular lt-sm:font-s-24px">
                  {{ point.itemDesc }}
                </div>
              </div>
            </div>

            <button class="cases-btn">
              {{ caseItem.btnText }}
              <i class="i-custom-arrow-right-c wh-18px lt-sm:wh-32px lt-sm:text-white"></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 py-60px overflow-hidden transition-all duration-1000 ease-out"
      :class="[isPartnershipVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
    >
      <div class="flex-center gap-32px mb-40px">
        <div class="h-2px w-320px bg-[linear-gradient(90deg,transparent_0%,#E5E9F5_100%)]"></div>
        <div class="text-center font-s-18px lh-21px text-#9CA0A7 pf-sc-regular whitespace-nowrap">
          与合作伙伴携手，深入产业共创价值
        </div>
        <div class="h-2px w-320px bg-[linear-gradient(90deg,#E5E9F5_0%,transparent_100%)]"></div>
      </div>

      <div class="relative flex flex-col gap-0px -mt-24px">
        <!-- 第一行 -->
        <InspiraMarquee class="[--duration:80s] [--gap:24px] mb--31px">
          <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="[--duration:80s] [--delay:-20s] [--gap:24px]">
          <div v-for="partner in partnersRow2" :key="partner" class="partner-item">
            <img :src="partner" alt="" class="wh-full object-contain" />
          </div>
        </InspiraMarquee>
        <!-- 左右渐变遮罩 -->
        <div
          class="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-[linear-gradient(to_right,#fff,transparent)]"
        ></div>
        <div
          class="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-[linear-gradient(to_left,#fff,transparent)]"
        ></div>
      </div>
    </section>
    <section id="history" ref="timelineRef" class="history">
      <div
        class="flex flex-col items-center transition-all duration-1000"
        :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-40px opacity-0']"
      >
        <div
          class="pf-sc-semibold font-semibold font-s-36px text-#000000 lh-60px text-center mb-4px"
        >
          发展历程
        </div>
        <div class="font-s-16px text-#091221/70 pf-sc-regular text-center lh-30px mb-50px">
          从探索到引领，绘家科技每一步都坚实有力
        </div>

        <!-- 上部内容区 -->
        <div class="w-full h-255px flex py-50px items-center">
          <!-- 左侧大年份 -->
          <div class="relative pl-127px w-600px shrink-0 h-170px overflow-hidden">
            <Transition name="year-flow">
              <div
                :key="currentYearData?.year"
                class="absolute left-127px top-0 h-full flex items-center w-full"
              >
                <span
                  class="text-170px font-bold text-#0F67F8 pf-sc-bold select-none leading-none"
                  style="
                    -webkit-text-stroke: 1px #2563eb;
                    text-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
                  "
                >
                  {{ currentYearData?.year }}
                </span>
              </div>
            </Transition>
          </div>

          <!-- 右侧事件描述 -->
          <div class="flex-1 h-full relative overflow-hidden">
            <Transition name="content-flow">
              <div
                :key="currentYearData?.year + '-' + currentEventIndex"
                class="absolute left-0 top-14px w-full flex flex-col pr-114px"
              >
                <div class="flex justify-between items-center w-full">
                  <span
                    class="text-22px font-semibold lh-30.8px text-#091221 pf-sc-semibold flex-1 content-stagger-1"
                  >
                    {{ currentEventData?.month }}
                  </span>
                  <!-- 右上方小切换 -->
                  <div
                    v-if="(currentYearData?.events?.length ?? 0) > 1"
                    class="flex gap-12px content-stagger-1 relative z-10"
                  >
                    <i
                      class="i-custom-arrow-circle-left wh-32px transition-all"
                      :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 wh-32px transition-all"
                      :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="h-2px w-34px bg-#0F67F8 mt-11px content-stagger-2 origin-left"></div>
                <div
                  class="w-full font-s-20px lh-35px text-#091221/70 pf-sc-regular mt-26px content-stagger-3"
                >
                  {{ currentEventData?.content }}
                </div>
              </div>
            </Transition>
          </div>
        </div>

        <!-- 时间轴 -->
        <div class="w-full relative pt-47px pb-60px">
          <!-- 轨道容器 -->
          <div class="relative h-16px w-full bg-white rounded-full px-60px">
            <!-- 进度条：从轨道最左侧开始到当前点 -->
            <div
              class="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"
              :style="progressStyle"
            ></div>

            <!-- 内部轨道（用于定位时间点） -->
            <div class="relative h-full w-full">
              <!-- 时间点列表 -->
              <div
                v-for="(item, index) in historyYears"
                :key="item.year"
                class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 flex flex-col items-center cursor-pointer group z-2"
                :style="getTimelineNodePositionStyle(index)"
                @click="selectYear(index)"
              >
                <!-- 圆点 -->
                <div
                  class="rounded-full transition-all duration-300 relative bg-white"
                  :class="getTimelineDotClasses(index)"
                  :style="getTimelineDotStyle(index)"
                ></div>
                <!-- 年份文字 -->
                <span
                  class="absolute top-24px text-16px transition-all duration-300 whitespace-nowrap"
                  :class="getTimelineYearTextClasses(index)"
                >
                  {{ item.year }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部大切换 -->
        <div class="flex gap-24px mt-45px">
          <i
            class="wh-56px i-custom-button-previous hover:i-custom-button-previous-active flex-center cursor-pointer"
            :class="{
              'opacity-30 cursor-not-allowed hover:i-custom-button-previous!':
                currentYearIndex === 0,
            }"
            @click="prevYear"
          ></i>
          <i
            class="wh-56px i-custom-button-next hover:i-custom-button-next-active flex-center cursor-pointer"
            :class="{
              'opacity-30 cursor-not-allowed hover:i-custom-button-next!':
                currentYearIndex === historyYears.length - 1,
            }"
            @click="nextYear"
          ></i>
        </div>
      </div>
    </section>
    <section class="cta py-60px flex-center flex-col">
      <div class="pf-sc-semibold font-s-40px lh-56px text-center">开启您的智慧社区转型之旅</div>
      <div class="font-s-18px text-#232325 pf-sc-light">
        提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
      </div>
      <button
        class="h-52px! mt-22px w-268px! bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80"
        @click="openConsultation"
      >
        <span class="font-s-16px">立即咨询</span>
        <i class="i-custom-arrow-right wh-18px"></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 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;
    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/banner.png');

    .hero-content {
      @extend %landing-container;
    }

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

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

    .hero-actions {
      @apply mt-35px flex items-center gap-16px 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 lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px;
    }

    .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 lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px;
    }

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

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

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

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

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

  .solution-list {
    @apply flex h-365px w-full gap-24px;
    @screen lt-sm {
      @apply h-auto gap-16px overflow-x-auto overflow-y-hidden px-24px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
    }
  }

  .solution-card {
    @apply lt-sm:flex-[0_0_90%] lt-sm:min-h-750px lt-sm:w-630px;
    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;
      }
    }

    @screen lt-sm {
      scroll-snap-align: center;

      &:not(.active) {
        transform: scale(0.96);
        opacity: 0.5;
      }

      &.active {
        transform: scale(1);
        opacity: 1;
      }

      &:first-child {
        margin-left: 36px;
      }

      &:last-child {
        margin-right: 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;
    }
    button {
      @apply lt-sm:w-270px lt-sm:h-95px lt-sm:rounded-16px lt-sm:mt-102px lt-sm:px-;
    }
  }

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

  .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 lt-sm:py-120px lt-sm:px-32px;
    @extend %landing-container;
    background-size: 100% 100%;
    background-image: url('@/assets/images/bg-ability.png');
  }

  .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;
    @screen lt-sm {
      width: 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-28px;
  }

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

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

  .tab-content {
    @apply lt-sm:w-full;
  }

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

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

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

      &:last-child {
        margin-right: 42px;
      }
    }
  }

  .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;
    @screen lt-sm {
      @apply mt-48px h-96px rounded-8px px-32px font-s-28px bg-#0F67F8 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;
    }
  }

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

  .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;
    @extend %landing-container;
    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/history-bg.png');
  }

  /* 发展历程动画 - 新版流式 */
  .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);
  }

  .content-flow-enter-active,
  .content-flow-leave-active {
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

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

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

  /* 内容交错动画 */
  .content-flow-enter-active .content-stagger-1 {
    transition: all 0.4s ease-out 0.1s;
  }
  .content-flow-enter-active .content-stagger-2 {
    transition: all 0.4s ease-out 0.2s;
  }
  .content-flow-enter-active .content-stagger-3 {
    transition: all 0.4s ease-out 0.3s;
  }

  .content-flow-enter-from .content-stagger-1,
  .content-flow-enter-from .content-stagger-2,
  .content-flow-enter-from .content-stagger-3 {
    opacity: 0;
    transform: translateX(15px);
  }

  .content-flow-enter-from .content-stagger-2 {
    transform: scaleX(0);
  }

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

  .cta {
    @apply w-full h-276px;
    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/bg-3.png');
  }
</style>