fix: 组件重命名

app/components/inspira/marquee.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2026-01-14 16:44:03
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2026-01-19 14:38:35
+ * @Description: 
+-->
+<template>
+  <div
+    class="group flex overflow-hidden py-24px lt-sm:py-48px [--duration:40s] [--gap:1rem] [gap:var(--gap)]"
+    :class="vertical ? 'flex-col' : 'flex-row'"
+  >
+    <div
+      v-for="i in 2"
+      :key="i"
+      class="flex shrink-0 [gap:var(--gap)]"
+      :class="[
+        vertical ? 'animate-marquee-vertical flex-col' : 'animate-marquee flex-row',
+        pauseOnHover ? 'group-hover:[animation-play-state:paused]' : '',
+      ]"
+      :style="{
+        animationDirection: reverse ? 'reverse' : 'normal',
+      }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    vertical?: boolean
+    reverse?: boolean
+    pauseOnHover?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    vertical: false,
+    reverse: false,
+    pauseOnHover: false,
+  })
+</script>
+
+<style scoped>
+  .animate-marquee {
+    animation: marquee var(--duration) linear infinite;
+    animation-delay: var(--delay, 0s);
+  }
+
+  .animate-marquee-vertical {
+    animation: marquee-vertical var(--duration) linear infinite;
+    animation-delay: var(--delay, 0s);
+  }
+
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+  }
+</style>

app/components/Header.vue → app/components/m-header.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-13 15:41:49
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-22 17:54:04
+ * @LastEditTime: 2026-01-23 08:40:01
  * @Description: 
 -->
 <!--
@@ -18,10 +18,15 @@
 
       <nav class="hidden sm:flex items-center gap-52px text-16px text-#334155 h-full">
         <NuxtLink to="/" class="nav-link flex items-center">首页</NuxtLink>
-        <div class="group h-full flex items-center">
+        <div
+          class="group h-full flex items-center"
+          @mouseenter="isProductsMenuOpen = true"
+          @mouseleave="isProductsMenuOpen = false"
+        >
           <NuxtLink to="/" class="nav-link flex items-center">产品中心</NuxtLink>
           <div
-            class="fixed left-0 top-80px w-full hidden bg-white shadow-lg border-t border-gray-100 group-hover:block z-50 animate-fade-in-down"
+            v-show="isProductsMenuOpen"
+            class="fixed left-0 top-80px w-full bg-white shadow-lg border-t border-gray-100 z-50 animate-fade-in-down"
           >
             <div class="landing-container py-32px flex justify-start">
               <div class="grid grid-cols-2 gap-24px">
@@ -32,6 +37,7 @@
                   target="_blank"
                   rel="noopener noreferrer"
                   class="product-card group/item"
+                  @click="isProductsMenuOpen = false"
                 >
                   <i :class="[item.icon, 'product-icon']"></i>
                   <div class="flex flex-col justify-center py-14px">
@@ -266,6 +272,7 @@
   const { y } = useWindowScroll()
 
   const isMobileMenuOpen = ref(false)
+  const isProductsMenuOpen = ref(false)
   const isSolutionsMenuOpen = ref(false)
   const isMobileSolutionsOpen = ref(false)
   const isMobileProductsOpen = ref(false)

app/components/section/Cta.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2026-01-22 11:06:36
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2026-01-23 08:28:08
+ * @Description: 
+-->
 <template>
   <section class="cta">
     <div class="cta-title pf-sc-semibold">开启您的智慧社区转型之旅</div>
@@ -51,5 +58,6 @@
 
   .cta-btn-icon {
     @apply i-custom-arrow-right wh-18px;
+    @apply lt-sm:wh-26px;
   }
 </style>

app/components/section/ability.vue

@@ -0,0 +1,213 @@
+<template>
+  <section
+    id="ability"
+    ref="abilityRef"
+    class="ability transition-all duration-1000 ease-out"
+    :class="[isAbilityVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
+  >
+    <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>
+              <NuxtLink class="ability-card-link" :to="`/solutions/${ability.id}`">
+                查看详情
+                <i
+                  class="i-custom-arrow-right-c color-#0F67F8 wh-18px lt-sm:wh-28px transition-transform group-hover:translate-x-4px"
+                ></i>
+              </NuxtLink>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { abilityTabs, abilities } from '@/constants/common'
+
+  const abilityRef = ref<HTMLElement | null>(null)
+  const { isVisible: isAbilityVisible } = useScrollReveal(abilityRef)
+
+  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
+  }
+</script>
+
+<style scoped lang="scss">
+  .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;
+  }
+
+  .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);
+    }
+  }
+</style>

app/components/section/cases.vue

@@ -0,0 +1,196 @@
+<template>
+  <section
+    id="cases"
+    ref="casesRef"
+    class="cases transition-all duration-1000 ease-out"
+    :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
+  >
+    <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>
+</template>
+
+<script setup lang="ts">
+  import { cases } from '@/constants/common'
+
+  const casesRef = ref<HTMLElement | null>(null)
+  const { isVisible: isCasesVisible } = useScrollReveal(casesRef)
+  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',
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+  .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;
+      }
+    }
+  }
+</style>

app/components/section/cta.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2026-01-22 11:06:36
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2026-01-23 08:28:08
+ * @Description: 
+-->
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+  const { openConsultation } = useConsultation()
+</script>
+
+<style scoped lang="scss">
+  .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;
+    @apply lt-sm:wh-26px;
+  }
+</style>

app/components/section/hero.vue

@@ -0,0 +1,119 @@
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+  const { openConsultation } = useConsultation()
+</script>
+
+<style scoped lang="scss">
+  .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-56px;
+    }
+
+    .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;
+      }
+    }
+  }
+
+  .btn-primary {
+    @apply bg-gradient-to-r from-[#779EFF] to-[#0A50FF];
+    border: none;
+    outline: none;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+</style>

app/components/section/history.vue

@@ -0,0 +1,521 @@
+<template>
+  <section id="history" ref="timelineRef" class="history">
+    <div
+      class="history-container"
+      :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-50px 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>
+
+      <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>
+          <TransitionGroup
+            :name="'timeline-' + slideDirection"
+            tag="div"
+            class="history-mobile-nodes"
+          >
+            <div
+              v-for="yearIndex in mobileTimelineIndices"
+              :key="yearIndex"
+              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>
+          </TransitionGroup>
+        </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>
+</template>
+
+<script setup lang="ts">
+  import { historyYears } from '@/constants/common'
+
+  const timelineRef = ref<HTMLElement | null>(null)
+  const { isVisible: isTimelineVisible } = useScrollReveal(timelineRef)
+
+  const currentYearIndex = ref(historyYears.length - 1)
+  const currentEventIndex = ref(0)
+  const slideDirection = ref<'next' | 'prev'>('next')
+
+  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 []
+    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) {
+      slideDirection.value = 'next'
+      currentYearIndex.value++
+      currentEventIndex.value = 0
+    }
+  }
+
+  const prevYear = () => {
+    if (currentYearIndex.value > 0) {
+      slideDirection.value = 'prev'
+      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) => {
+    slideDirection.value = index > currentYearIndex.value ? 'next' : 'prev'
+    currentYearIndex.value = index
+    currentEventIndex.value = 0
+  }
+
+  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">
+  .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');
+    @screen lt-sm {
+      background-image: url('@/assets/images/history-bg-mobile.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;
+  }
+
+  .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;
+    }
+  }
+
+  /* Timeline Animation */
+  .timeline-next-move,
+  .timeline-prev-move {
+    transition: all 0.5s ease;
+  }
+
+  .timeline-next-enter-active,
+  .timeline-next-leave-active,
+  .timeline-prev-enter-active,
+  .timeline-prev-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .timeline-next-leave-active {
+    position: absolute;
+    left: 100px;
+  }
+
+  .timeline-prev-leave-active {
+    position: absolute;
+    right: 100px;
+  }
+
+  .timeline-next-enter-from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  .timeline-next-leave-to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  .timeline-prev-enter-from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  .timeline-prev-leave-to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+</style>

app/components/section/partnership.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2026-01-20 10:51:08
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2026-01-22 10:46:24
+ * @Description: 
+-->
+<template>
+  <section
+    id="partnership"
+    ref="partnershipRef"
+    class="partnership transition-all duration-1000 ease-out"
+    :class="[isPartnershipVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
+  >
+    <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">
+      <inspira-marquee 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>
+      </inspira-marquee>
+      <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>
+</template>
+
+<script setup lang="ts">
+  import { partnersRow1, partnersRow2 } from '@/constants/common'
+  const partnershipRef = ref<HTMLElement | null>(null)
+  const { isVisible: isPartnershipVisible } = useScrollReveal(partnershipRef)
+</script>
+
+<style scoped lang="scss">
+  .partnership {
+    @extend %landing-container;
+    @media screen and (min-width: 1480px) {
+      padding-left: calc((100vw - 1480px) / 2);
+      padding-right: calc((100vw - 1480px) / 2);
+    }
+    @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;
+  }
+</style>

app/components/section/solution.vue

@@ -0,0 +1,359 @@
+<template>
+  <section
+    id="solution"
+    ref="solutionRef"
+    class="solution transition-all duration-1000 ease-out"
+    :class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
+  >
+    <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"
+        @click="scrollToSolution(index)"
+      >
+        <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-300',
+            ]"
+          />
+        </div>
+
+        <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>
+</template>
+
+<script setup lang="ts">
+  import { solutions } from '@/constants/common'
+
+  const solutionRef = ref<HTMLElement | null>(null)
+  const { isVisible: isSolutionVisible } = useScrollReveal(solutionRef)
+  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
+    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 (window.innerWidth >= 640) return
+    if (!solutionListRef.value) return
+
+    activeIndex.value = index
+
+    const width = solutionListRef.value.offsetWidth
+    const cardWidth = width * 0.85
+    const gap = 16
+    solutionListRef.value.scrollTo({
+      left: index * (cardWidth + gap),
+      behavior: 'smooth',
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+  .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-300 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;
+      }
+    }
+  }
+</style>

app/layouts/default/index.vue

@@ -2,15 +2,15 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-09 17:32:06
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-15 09:52:51
+ * @LastEditTime: 2026-01-23 08:34:19
  * @Description: 
 -->
 <template>
   <div>
-    <Header />
+    <m-header />
     <slot />
-    <Footer />
-    <ConsultationModal v-model="isConsultationOpen" />
+    <m-footer />
+    <consultation-modal v-model="isConsultationOpen" />
   </div>
 </template>