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

<!--
 * @Author: LiZhiWei
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-15 17:57:13
 * @Description: 
-->
<template>
  <div class="landing">
    <section class="hero">
      <div class="hero-content flex items-center pb-48px pt-200px">
        <div class="text-left">
          <div class="font-s-48px font-semibold text-#000000">智慧社区整体解决方案</div>
          <p class="font-s-18px text-#091221/70">
            绘家科技助力物业管理数字化转型，提升服务品质与业主满意度。
          </p>

          <div class="mt-35px flex items-center gap-48px">
            <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">60w+</div>
              <div class="metric-label">服务人群</div>
            </div>
          </div>
          <div class="mt-35px flex flex-wrap items-center gap-16px">
            <button
              class="btn-primary w-127px h-56px! rounded-8px text-white font-s-18px pf-sc-semibold"
            >
              查看方案
            </button>
            <button
              class="btn-outline w-127px h-56px! border-[1px] border-#0F67F8! font-s-18px font-semibold text-#0F67F8! bg-white rounded-8px hover:opacity-80"
              @click="openConsultation"
            >
              立即咨询
            </button>
          </div>
        </div>
      </div>
    </section>

    <section
      id="solution"
      ref="solutionRef"
      class="solution h-744px pt-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">物业管理正面临这些挑战</div>
        <div class="font-s-16px text-#091221/70">
          传统物业管理模式效率低下、成本高昂、服务体验差，急需数字化转型
        </div>
      </div>

      <div class="flex h-365px w-full gap-24px">
        <div
          v-for="(solution, index) in solutions"
          :key="solution.id"
          class="relative flex h-full cursor-pointer overflow-hidden rounded-16px transition-[flex,background-color] duration-500 ease-in-out"
          :class="[
            index === activeIndex
              ? 'flex-[1_1_0%] bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]'
              : 'flex-[0_0_220px] bg-[linear-gradient(180deg,#E8F6FD_50.48%,#A5D7FD_100%)]',
          ]"
          @mouseenter="activeIndex = index"
        >
          <Transition
            mode="out-in"
            enter-active-class="transition-opacity duration-500 ease-in-out"
            enter-from-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="transition-opacity duration-200 ease-in-out"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
          >
            <div v-if="index === activeIndex" class="wh-full pt-40px px-48px">
              <div class="font-s-22px text-#000000 pf-sc-semibold">
                {{ solution.hoverTitle }}
              </div>
              <div
                class="font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular whitespace-nowrap"
              >
                {{ solution.hoverDesc }}
              </div>
              <div class="mt-24px flex flex-col gap-8px">
                <div v-for="item in solution.hoverItems" :key="item.title" class="flex flex-col">
                  <div class="flex gap-8px items-center font-s-14px">
                    <i class="i-custom-check-one wh-18px"></i>
                    <span class="text-#091221 pf-sc-semibold">
                      {{ item.title }}
                    </span>
                    <span class="text-#091221/70 pf-sc-regular">
                      {{ item.itemDesc }}
                    </span>
                  </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"
                @click="openConsultation"
              >
                <span class="font-s-16px">立即咨询</span>
                <i class="i-custom-arrow-right wh-18px"></i>
              </button>
              <img
                :src="solution.hoverImg"
                alt=""
                class="wh-280px position-absolute bottom--37px right-0"
              />
            </div>
            <div v-else class="wh-full pt-40px px-24px">
              <div class="wh-40px ml-2px bg-white rounded-10px flex-center">
                <img :src="solution.img" alt="" class="wh-35px" />
              </div>

              <div class="mt-18px font-s-18px text-#091221 pf-sc-semibold">
                {{ solution.title }}
              </div>
              <div class="mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px">
                {{ solution.desc }}
              </div>
              <i
                class="i-custom-circle-right-up wh-48px position-absolute bottom-24px left-24px"
              ></i>
            </div>
          </Transition>
        </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">
        一体化智慧解决方案
      </div>
      <div class="font-s-16px text-#091221/70 pf-sc-regular lh-30px flex-center mt-4px">
        我们的一体化智慧解决方案整合了智能收费、智能运维、智能监控等多个功能模块，实现了物业管理的全流程数字化管理。
      </div>
      <div class="mt-24px flex-center flex-col">
        <div class="relative flex items-center rounded-14px border border-#ECEFF6 bg-#F6F8FD p-6px">
          <!-- 滑块背景 -->
          <div
            class="absolute w-136px h-[calc(100%-12px)] transition-all duration-300 ease-out rounded-8px bg-#0F67F8"
            :style="abilityTabIndicatorStyle"
          ></div>

          <div
            v-for="tab in abilityTabs"
            :key="tab.title"
            class="relative z-1 cursor-pointer py-14px px-20px text-center font-s-16px transition-colors duration-300 pf-sc-regular"
            :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">
          <Transition name="tab-fade" mode="out-in">
            <div :key="activeAbilityTab.id" class="grid grid-cols-3 gap-24px">
              <div
                v-for="ability in abilities[activeAbilityTab.id]"
                :key="ability.title"
                class="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)]"
              >
                <i :class="ability.icon" class="wh-48px"></i>
                <div class="mt-16px font-s-18px font-semibold text-#091221 pf-sc-semibold">
                  {{ ability.title }}
                </div>
                <div class="mt-8px flex-1 font-s-14px text-#091221/70 pf-sc-regular">
                  {{ ability.desc }}
                </div>
                <div
                  class="mt-24px flex items-center gap-8px font-s-16px pf-sc-regular text-#0F67F8 transition-colors hover:text-#0A50FF cursor-pointer"
                >
                  查看详情
                  <i
                    class="i-custom-arrow-right-c color-#0F67F8 wh-18px 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"
      :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
    >
      <div class="text-center mb-60px">
        <div class="font-s-36px font-semibold text-#000000 pf-sc-semibold mb-12px">
          知识产权和案例
        </div>
        <div class="font-s-16px text-#091221/70 pf-sc-regular">
          绘家科技凭借强大的技术实力和丰富的实践经验，为客户提供卓越的智慧社区解决方案
        </div>
      </div>

      <div class="flex gap-24px">
        <div
          v-for="caseItem in cases"
          :key="caseItem.title"
          class="group flex-1 overflow-hidden rounded-16px bg-#F6F8FD p-32px transition-all duration-300"
        >
          <div class="flex flex-col">
            <img :src="caseItem.img" class="w-full h-218px rounded-12px" alt="" />
            <div class="font-s-18px font-semibold text-#091221 pf-sc-semibold mt-24px">
              {{ caseItem.title }}
            </div>
            <div class="mt-8px font-s-14px lh-24px text-#091221/70 pf-sc-regular">
              {{ caseItem.desc }}
            </div>
            <div class="mt-24px flex flex-col gap-8px">
              <div
                v-for="point in caseItem.points"
                :key="point.title"
                class="flex items-center gap-8px"
              >
                <i class="i-custom-check-one wh-20px mt-2px"></i>
                <div class="font-s-14px font-semibold text-#091221 pf-sc-semibold">
                  {{ point.title }}
                </div>
                <div class="font-s-14px text-#091221/70 pf-sc-regular">
                  {{ point.itemDesc }}
                </div>
              </div>
            </div>

            <button
              class="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"
            >
              {{ caseItem.btnText }}
              <i class="i-custom-arrow-right-c wh-18px"></i>
            </button>
          </div>
        </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="flex-center h-80px w-200px bg-white rounded-8px shadow-[0_2px_8px_2px_rgba(0,0,0,0.06)] px-24px"
          >
            <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="flex-center h-80px w-200px bg-white rounded-8px shadow-[0_2px_8px_2px_rgba(0,0,0,0.06)] px-24px"
          >
            <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-12px"
        >
          发展历程
        </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 v-if="currentYearData" class="relative pl-127px w-600px shrink-0">
            <span
              class="text-170px font-bold text-#0F67F8 pf-sc-bold select-none"
              style="-webkit-text-stroke: 1px #2563eb; text-shadow: 0 0 20px rgba(37, 99, 235, 0.1)"
            >
              {{ currentYearData.year }}
            </span>
          </div>

          <!-- 右侧事件描述 -->
          <div v-if="currentEventData" class="flex-1 h-full flex flex-col justify-start pt-14px">
            <div class="flex justify-between items-center">
              <span class="text-22px font-semibold lh-30.8px text-#091221 pf-sc-semibold flex-1">
                {{ currentEventData.month }}
              </span>
              <!-- 右上方小切换 -->
              <div v-if="(currentYearData?.events?.length ?? 0) > 1" class="flex gap-12px">
                <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',
                  ]"
                  @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',
                  ]"
                  @click="nextEvent"
                ></i>
              </div>
            </div>
            <div class="h-2px w-34px bg-#0F67F8 mt-11px"></div>
            <div class="flex-1 text-20px lh-35px text-#091221/70 pf-sc-regular mt-26px pr-114px">
              {{ currentEventData.content }}
            </div>
          </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 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 * 136}px)`,
    }
  })

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

    .metric {
      @apply flex items-start flex-col;

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

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

  .solution {
    @extend %landing-container;
  }

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

  .cases {
    @extend %landing-container;
  }

  .partnership {
    @extend %landing-container;
    @media screen and (min-width: 1920px) {
      padding-left: 220px;
      padding-right: 220px;
    }
  }

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

  @for $i from 1 through 10 {
    .grid > div:nth-child(#{$i}) {
      animation-delay: #{$i * 0.05}s;
    }
  }

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

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