Sfoglia il codice sorgente

wip: 客户案例未完成

Lee 12 ore fa
parent
commit
0639bd8ea5

BIN
app/assets/images/solution-cases-bg.png


+ 1 - 1
app/components/m-footer.vue

@@ -108,7 +108,7 @@
               <li>
                 <NuxtLink
                   class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
-                  to="/"
+                  to="/cases"
                 >
                   客户案例
                 </NuxtLink>

+ 3 - 3
app/components/m-header.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-13 15:41:49
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-23 11:32:02
+ * @LastEditTime: 2026-01-26 10:05:26
  * @Description: 
 -->
 <!--
@@ -122,7 +122,7 @@
           </div>
         </div>
 
-        <NuxtLink to="/" class="nav-link flex items-center">客户案例</NuxtLink>
+        <NuxtLink to="/cases" class="nav-link flex items-center">客户案例</NuxtLink>
         <NuxtLink to="/" class="nav-link flex items-center">知产专利</NuxtLink>
         <NuxtLink to="/about" class="nav-link flex items-center">关于绘家</NuxtLink>
         <!-- <NuxtLink to="/" class="nav-link flex items-center">联系合作</NuxtLink> -->
@@ -239,7 +239,7 @@
         </div>
 
         <NuxtLink
-          to="/"
+          to="/cases"
           class="mobile-nav-item flex items-center justify-between group"
           @click="isMobileMenuOpen = false"
         >

+ 137 - 0
app/components/solution/case-card.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Description: 解决方案-典型案例卡片组件
+-->
+<template>
+  <div class="case-card">
+    <div class="case-img-wrapper">
+      <img :src="caseItem.caseCover" class="case-img" :alt="caseItem.caseName" />
+    </div>
+    <div class="case-content">
+      <div class="case-header">
+        <h3 class="case-name pf-sc-semibold">{{ caseItem.caseName }}</h3>
+        <div v-if="showNav" class="case-nav-btns">
+          <!-- PC Prev -->
+          <i
+            class="i-custom-arrow-circle-left wh-32px transition-colors lt-sm:hidden"
+            :class="
+              isFirst
+                ? 'cursor-not-allowed opacity-50'
+                : 'cursor-pointer hover:i-custom-arrow-circle-left-active'
+            "
+            @click="$emit('prev')"
+          ></i>
+          <!-- Mobile Prev -->
+          <i
+            class="i-custom-button-previous-mobile wh-32px transition-all shrink-0 hidden lt-sm:block"
+            :class="[
+              isFirst
+                ? 'cursor-not-allowed i-custom-button-previous-mobile-disabled'
+                : 'cursor-pointer active:i-custom-button-previous-mobile-active',
+            ]"
+            @click="$emit('prev')"
+          ></i>
+
+          <!-- PC Next -->
+          <i
+            class="i-custom-arrow-circle-right wh-32px ml-12px transition-colors lt-sm:hidden"
+            :class="
+              isLast
+                ? 'cursor-not-allowed opacity-50'
+                : 'cursor-pointer hover:i-custom-arrow-circle-right-active'
+            "
+            @click="$emit('next')"
+          ></i>
+          <!-- Mobile Next -->
+          <i
+            class="i-custom-button-next-mobile wh-32px ml-12px transition-all shrink-0 hidden lt-sm:block"
+            :class="[
+              isLast
+                ? 'cursor-not-allowed i-custom-button-next-mobile-disabled'
+                : 'cursor-pointer active:i-custom-button-next-mobile-active',
+            ]"
+            @click="$emit('next')"
+          ></i>
+        </div>
+      </div>
+
+      <div class="case-section">
+        <h4 class="case-subtitle pf-sc-semibold">客户痛点</h4>
+        <div class="case-text pf-sc-regular">{{ caseItem.casePainPoint }}</div>
+      </div>
+      <div
+        class="case-section mt-24px bg-#F6F8FD p-16px rounded-8px lt-sm:mt-24px lt-sm:p-24px lt-sm:rounded-8px"
+      >
+        <h4 class="case-subtitle pf-sc-semibold">落地效果</h4>
+        <div class="case-text pf-sc-regular">
+          <div v-for="(effect, eIndex) in caseItem.caseEffect" :key="eIndex">
+            {{ effect }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  export interface CaseItem {
+    caseName: string
+    caseCover: string
+    casePainPoint: string
+    caseEffect: string[]
+  }
+
+  defineProps<{
+    caseItem: CaseItem
+    showNav?: boolean
+    isFirst?: boolean
+    isLast?: boolean
+  }>()
+
+  defineEmits<{
+    (e: 'prev'): void
+    (e: 'next'): void
+  }>()
+</script>
+
+<style scoped lang="scss">
+  .case-card {
+    @apply bg-white rounded-16px p-24px flex gap-40px items-stretch shadow-sm;
+    @apply lt-sm:flex-col lt-sm:p-32px lt-sm:gap-42px lt-sm:rounded-16px;
+  }
+
+  .case-img-wrapper {
+    @apply w-542px h-342px rounded-8px overflow-hidden flex-shrink-0;
+    @apply lt-sm:w-full lt-sm:h-320px lt-sm:rounded-12px;
+  }
+
+  .case-img {
+    @apply w-full h-full object-fill;
+  }
+
+  .case-content {
+    @apply flex-1 py-10px flex flex-col justify-center;
+  }
+
+  .case-header {
+    @apply flex justify-between items-center mb-30px;
+    @apply lt-sm:mb-24px;
+  }
+
+  .case-name {
+    @apply font-s-22px text-#091221 lt-sm:font-s-32px;
+  }
+
+  .case-nav-btns {
+    @apply flex items-center;
+  }
+
+  .case-subtitle {
+    @apply font-s-18px text-#091221 mb-12px;
+    @apply lt-sm:mb-12px lt-sm:font-s-28px;
+  }
+
+  .case-text {
+    @apply font-s-14px text-#091221/70 lh-24px;
+    @apply lt-sm:font-s-24px lt-sm:lh-normal;
+  }
+</style>

+ 1614 - 1
app/constants/common.ts

@@ -481,7 +481,7 @@ export const solutionPoints = [
         {
           name: '财务智能对账',
           funcDesc:
-            '系统自动抓取各支付渠道交易流水,与内部收费数据精准匹配,对异常情况自动标记并预警,大幅提升财务对账效率。/邮箱,支持随时查询、下载、打印,满足财务合规要求。',
+            '系统自动抓取各支付渠道交易流水,与内部收费数据精准匹配,对异常情况自动标记并预警,大幅提升财务对账效率。',
           funcPoints: ['自动匹配', '异常预警', '多维度报表'],
         },
         {
@@ -536,4 +536,1617 @@ export const solutionPoints = [
       ],
     },
   },
+  {
+    id: 'CTD-002',
+    title: '综合工单调度系统',
+    subTitle: '实现物业工单全流程闭环,提升服务响应效率',
+    description:
+      '覆盖报修、巡检、投诉等全场景工单,支持智能派单、进度跟踪、闭环评价,服务响应时长缩短至15分钟内',
+    corePoints: {
+      title: '传统工单管理的核心痛点',
+      points: [
+        {
+          point: '派单效率低',
+          pointDesc: '人工派单依赖经验,易出现派单不合理、跨区域派单,平均派单时长超30分钟',
+          icon: 'i-custom-pd效率',
+        },
+        {
+          point: '进度不透明',
+          pointDesc: '业主无法实时查看工单进度,反复咨询物业,客服沟通成本高,满意度低',
+          icon: 'i-custom-jd透明',
+        },
+        {
+          point: '闭环难追溯',
+          pointDesc: '工单完成后无统一评价机制,问题整改效果无法验证,同类问题重复发生',
+          icon: 'i-custom-bh追溯',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '综合工单调度系统核心功能',
+      function: [
+        {
+          name: '智能一键派单',
+          funcDesc:
+            '基于地理位置、人员技能、工单类型自动匹配最优处理人,支持手动调整,派单效率提升90%。',
+          funcPoints: ['智能匹配', '一键派单', '手动调整'],
+        },
+        {
+          name: '进度实时跟踪',
+          funcDesc:
+            '业主/物业可实时查看工单状态(待派单/处理中/已完成),处理人定位追踪,超时自动预警。',
+          funcPoints: ['状态可视化', '定位追踪', '超时预警'],
+        },
+        {
+          name: '多端协同处理',
+          funcDesc:
+            '支持物业端、工程师端、业主端多端同步,处理人可上传现场照片/视频,业主在线确认验收。',
+          funcPoints: ['多端同步', '现场取证', '在线验收'],
+        },
+        {
+          name: '闭环评价体系',
+          funcDesc: '工单完成后业主在线评价,差评自动触发复核工单,评价数据纳入服务人员绩效考核。',
+          funcPoints: ['在线评价', '差评复核', '绩效挂钩'],
+        },
+        {
+          name: '工单数据统计',
+          funcDesc: '自动生成工单完成率、响应时长、满意度等报表,支持按楼栋/类型/人员多维度分析。',
+          funcPoints: ['多维度报表', '趋势分析', '数据导出'],
+        },
+        {
+          name: '自定义工单模板',
+          funcDesc: '支持报修、投诉、巡检等多类型工单模板定制,可配置必填项、处理时限、流转规则。',
+          funcPoints: ['模板定制', '规则配置', '类型扩展'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '派单效率提升',
+          percent: '90%',
+        },
+        {
+          name: '响应时长缩短',
+          percent: '85%',
+        },
+        {
+          name: '工单完成率',
+          percent: '98%+',
+        },
+        {
+          name: '业主满意度提升',
+          percent: '75%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '三亚凤凰水城',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/sanya-cover.png',
+          casePainPoint:
+            '人工派单平均耗时40分钟,业主报修后无法跟踪进度,每月重复投诉超30起,工单完成率仅80%。',
+          caseEffect: [
+            '1. 派单时长从40分钟缩短至5分钟,节省2名调度人员;',
+            '2. 工单完成率提升至98%,重复投诉率下降90%;',
+            '3. 业主满意度从65分提升至90分,服务投诉量减少80%;',
+            '4. 基于工单数据优化人员配置,运维成本降低18%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'MPI-003',
+    title: '移动巡检巡更系统',
+    subTitle: '告别纸质记录,实现巡检全流程数字化管控',
+    description:
+      '基于GPS定位的移动巡检工具,支持拍照上传、异常上报、任务规划,巡检覆盖率提升至100%',
+    corePoints: {
+      title: '传统巡检巡更的核心痛点',
+      points: [
+        {
+          point: '打卡不规范',
+          pointDesc: '纸质签到、人工记录易造假,巡更人员漏检、代签现象频发,管理漏洞大',
+          icon: 'i-custom-dk规范',
+        },
+        {
+          point: '异常处理慢',
+          pointDesc: '巡检发现问题后需人工上报,信息传递滞后,小问题演变成大故障',
+          icon: 'i-custom-yc处理',
+        },
+        {
+          point: '数据无沉淀',
+          pointDesc: '巡检记录易丢失,无法形成历史数据,难以分析问题规律、优化巡检路线',
+          icon: 'i-custom-sj沉淀',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '移动巡检巡更系统核心功能',
+      function: [
+        {
+          name: 'GPS定位打卡',
+          funcDesc:
+            '巡检人员到达指定点位后才能打卡,支持人脸识别验证,杜绝代签、漏检,打卡数据实时上传。',
+          funcPoints: ['GPS定位', '人脸验证', '实时上传'],
+        },
+        {
+          name: '异常一键上报',
+          funcDesc:
+            '发现设备故障、安全隐患等问题时,可拍照/录视频+文字描述一键上报,自动生成整改工单。',
+          funcPoints: ['多媒体取证', '一键上报', '工单联动'],
+        },
+        {
+          name: '巡检任务规划',
+          funcDesc:
+            '管理员可按区域/设备类型制定巡检计划,系统自动推送任务至巡检人员端,支持加急任务插单。',
+          funcPoints: ['计划制定', '任务推送', '插单处理'],
+        },
+        {
+          name: '数据报表分析',
+          funcDesc:
+            '自动统计巡检完成率、异常发生率、整改完成率,生成巡检热力图,优化巡检路线和频次。',
+          funcPoints: ['完成率统计', '热力图分析', '路线优化'],
+        },
+        {
+          name: '离线巡检模式',
+          funcDesc:
+            '无网络环境下可正常记录巡检数据,联网后自动同步至后台,保障地下车库、偏远区域巡检不受影响。',
+          funcPoints: ['离线记录', '自动同步', '全场景适配'],
+        },
+        {
+          name: '电子巡检台账',
+          funcDesc:
+            '所有巡检记录、整改记录永久存储,支持按时间/区域/类型检索,满足物业合规检查需求。',
+          funcPoints: ['永久存储', '便捷检索', '合规备查'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '巡检覆盖率',
+          percent: '100%',
+        },
+        {
+          name: '异常处理时效提升',
+          percent: '85%',
+        },
+        {
+          name: '巡检造假率',
+          percent: '0%',
+        },
+        {
+          name: '台账整理时间缩短',
+          percent: '95%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '海口日月广场',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/riyue-cover.png',
+          casePainPoint:
+            '商业广场巡检点多(200+),人工巡更漏检率达25%,设备故障发现不及时,每月因设备故障损失超5万元;纸质台账整理需2人/天。',
+          caseEffect: [
+            '1. 巡检覆盖率达100%,漏检率降至0,设备故障发现时间从平均12小时缩短至1小时;',
+            '2. 异常整改完成率从70%提升至98%,每月故障损失减少80%;',
+            '3. 台账整理无需人工,节省2名行政人员,年度人力成本节省约12万元;',
+            '4. 基于巡检数据优化路线,巡检时长缩短30%,效率提升40%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'SPLM-004',
+    title: '智慧车场管理系统',
+    subTitle: '无人化管理,提升车场通行效率与收益',
+    description:
+      '集成车牌识别、无人值守、车位预约、临停计费等功能,车场通行效率提升50%,收益提升20%',
+    corePoints: {
+      title: '传统车场管理的核心痛点',
+      points: [
+        {
+          point: '通行效率低',
+          pointDesc: '人工收费、登记耗时,高峰期出入口拥堵,车主投诉多,体验差',
+          icon: 'i-custom-tx效率',
+        },
+        {
+          point: '收费漏洞多',
+          pointDesc: '人工收费易出现漏收、错收、私收,临停费流失率达15%-20%',
+          icon: 'i-custom-sf漏洞',
+        },
+        {
+          name: '管理成本高',
+          pointDesc: '需配置多名岗亭收费员、巡检员,人力成本占车场运营成本的60%以上',
+          icon: 'i-custom-gl成本',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '智慧车场管理系统核心功能',
+      function: [
+        {
+          name: '车牌识别通行',
+          funcDesc:
+            '高清摄像头自动识别车牌,固定车自动抬杆放行,临停车快速入场,通行时长缩短至2秒/车。',
+          funcPoints: ['高清识别', '无感通行', '黑名单预警'],
+        },
+        {
+          name: '无人值守计费',
+          funcDesc: '临停车离场时自动计费,支持微信/支付宝扫码缴费,支持无感支付,无需人工干预。',
+          funcPoints: ['自动计费', '扫码缴费', '无感支付'],
+        },
+        {
+          name: '车位预约管理',
+          funcDesc: '业主/访客可提前预约固定车位/临时车位,系统引导停车,提升车位利用率。',
+          funcPoints: ['在线预约', '导航引导', '利用率分析'],
+        },
+        {
+          name: '车场数据监控',
+          funcDesc: '实时监控车场车位余量、通行流量、收费数据,异常情况(如道闸故障)自动报警。',
+          funcPoints: ['实时监控', '异常报警', '数据大屏'],
+        },
+        {
+          name: '逃费追缴机制',
+          funcDesc: '对逃费车辆自动加入黑名单,下次入场时强制补缴欠费,支持线上追缴、短信提醒。',
+          funcPoints: ['黑名单管理', '欠费追缴', '短信提醒'],
+        },
+        {
+          name: '多车场统一管理',
+          funcDesc: '支持多个车场数据统一汇总、统一管理,总部可实时查看各车场运营数据,统一调价。',
+          funcPoints: ['统一管控', '数据汇总', '价格统一'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '通行效率提升',
+          percent: '50%',
+        },
+        {
+          name: '收费流失率',
+          percent: '0%',
+        },
+        {
+          name: '人力成本降低',
+          percent: '70%',
+        },
+        {
+          name: '车场收益提升',
+          percent: '20%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '海口国兴大道写字楼群',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/guoxing-cover.png',
+          casePainPoint:
+            '3栋写字楼车场共800个车位,高峰期出入口拥堵时长超15分钟,人工收费员6名,每月临停费流失约3万元,人力成本每月8万元。',
+          caseEffect: [
+            '1. 通行时长从平均10秒/车缩短至2秒/车,高峰期拥堵问题彻底解决;',
+            '2. 取消6名收费员,每月节省人力成本8万元,年度节省96万元;',
+            '3. 临停费流失率从18%降至0,每月增收3万元,年度增收36万元;',
+            '4. 车位利用率从75%提升至90%,车场整体收益提升22%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'DDC-005',
+    title: '数据决策中心',
+    subTitle: '用数据驱动物业精细化管理',
+    description:
+      '整合收费、工单、巡检、车场等全维度数据,可视化看板展示,支持多维度分析、预警、决策',
+    corePoints: {
+      title: '传统物业数据管理的核心痛点',
+      points: [
+        {
+          point: '数据孤岛',
+          pointDesc: '收费、工单、车场等数据分散在不同系统,无法统一汇总分析',
+          icon: 'i-custom-sj孤岛',
+        },
+        {
+          point: '分析效率低',
+          pointDesc: '人工整理数据、制作报表,耗时耗力,管理层无法实时掌握运营状况',
+          icon: 'i-custom-fx效率',
+        },
+        {
+          point: '决策无依据',
+          pointDesc: '凭经验做决策,无法精准识别管理漏洞、优化资源配置,运营效率低',
+          icon: 'i-custom-jc依据',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '数据决策中心核心功能',
+      function: [
+        {
+          name: '全维度数据整合',
+          funcDesc:
+            '打通收费、工单、巡检、车场、能耗等系统数据,实现数据一站式汇总,消除数据孤岛。',
+          funcPoints: ['数据打通', '一站式汇总', '实时同步'],
+        },
+        {
+          name: '可视化数据大屏',
+          funcDesc:
+            '以图表、数字看板形式展示核心指标(收费率、工单完成率、车位利用率等),支持多端查看。',
+          funcPoints: ['多图表展示', '核心指标监控', '多端适配'],
+        },
+        {
+          name: '多维度数据分析',
+          funcDesc: '支持按时间、区域、业态、人员等维度分析数据,自动生成对比报表、趋势报表。',
+          funcPoints: ['多维度分析', '对比报表', '趋势预测'],
+        },
+        {
+          name: '智能预警提醒',
+          funcDesc: '设置核心指标阈值,如收费率低于80%、工单超时率超10%时自动预警,推送至管理层。',
+          funcPoints: ['阈值设置', '自动预警', '分级推送'],
+        },
+        {
+          name: '自定义报表生成',
+          funcDesc: '支持管理层自定义报表维度、展示形式,一键导出Excel/PDF,满足不同汇报场景需求。',
+          funcPoints: ['自定义配置', '一键导出', '场景适配'],
+        },
+        {
+          name: '运营策略建议',
+          funcDesc:
+            '基于数据自动分析管理漏洞,如某区域工单超时率高,建议优化人员配置或调整派单规则。',
+          funcPoints: ['漏洞识别', '策略建议', '优化指引'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '数据汇总效率提升',
+          percent: '95%',
+        },
+        {
+          name: '决策响应速度提升',
+          percent: '80%',
+        },
+        {
+          name: '管理漏洞识别率',
+          percent: '100%',
+        },
+        {
+          name: '运营效率提升',
+          percent: '30%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '海南珠江物业(多项目管理)',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/zhujiang-cover.png',
+          casePainPoint:
+            '管理15个住宅/商业项目,各项目数据分散,每月整理数据需3人/周,管理层无法实时掌握各项目收费率、工单完成率,决策滞后。',
+          caseEffect: [
+            '1. 数据汇总从3人/周缩短至10分钟,节省95%的数据分析人力成本;',
+            '2. 管理层实时查看各项目核心指标,决策响应时间从平均3天缩短至1小时;',
+            '3. 通过数据发现2个项目工单超时率高,优化派单规则后超时率从15%降至3%;',
+            '4. 基于收费率趋势分析,调整催缴策略,整体收费率从82%提升至94%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'ALM-006',
+    title: '资产与租赁管理系统',
+    subTitle: '实现物业资产全生命周期数字化管理',
+    description: '覆盖商铺、写字楼、车位等资产租赁、租金收缴、合同管理,租金收缴率提升至98%+',
+    corePoints: {
+      title: '传统资产租赁管理的核心痛点',
+      points: [
+        {
+          point: '台账混乱',
+          pointDesc: '资产信息、租赁合同、租金记录靠Excel管理,易出错、易丢失,查询困难',
+          icon: 'i-custom-tz混乱',
+        },
+        {
+          point: '租金催收难',
+          pointDesc: '人工提醒租金缴纳,易遗漏,欠费追缴不及时,租金收缴率低于90%',
+          icon: 'i-custom-zj催收',
+        },
+        {
+          point: '合同管理弱',
+          pointDesc: '合同到期、续签无提醒,易出现漏签、超期租赁,法律风险高',
+          icon: 'i-custom-ht管理',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '资产与租赁管理系统核心功能',
+      function: [
+        {
+          name: '资产台账管理',
+          funcDesc: '录入商铺、写字楼、车位等资产信息,支持分类管理、地图标注,资产状态实时更新。',
+          funcPoints: ['分类管理', '地图标注', '状态更新'],
+        },
+        {
+          name: '租赁合同管理',
+          funcDesc: '在线录入合同信息,自动记录租期、租金、押金,合同到期/续签提前30天提醒。',
+          funcPoints: ['合同录入', '到期提醒', '续签管理'],
+        },
+        {
+          name: '租金智能催收',
+          funcDesc: '租金缴纳日前自动发送提醒,欠费后分级催收,支持线上缴费,欠费记录自动存档。',
+          funcPoints: ['自动提醒', '分级催收', '线上缴费'],
+        },
+        {
+          name: '租赁数据分析',
+          funcDesc: '统计空置率、租金收缴率、续租率等指标,分析各资产收益情况,优化租赁策略。',
+          funcPoints: ['空置率分析', '收益分析', '策略优化'],
+        },
+        {
+          name: '押金管理',
+          funcDesc:
+            '记录押金缴纳、退还信息,退还时自动核对费用(如水电费、物业费),避免押金纠纷。',
+          funcPoints: ['押金记录', '费用核对', '纠纷规避'],
+        },
+        {
+          name: '权限精细化管控',
+          funcDesc: '按角色分配资产查看、合同编辑、租金催收等权限,操作留痕,保障数据安全。',
+          funcPoints: ['角色权限', '操作留痕', '数据安全'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '租金收缴率',
+          percent: '98%+',
+        },
+        {
+          name: '合同漏签率',
+          percent: '0%',
+        },
+        {
+          name: '台账整理时间缩短',
+          percent: '90%',
+        },
+        {
+          name: '空置率降低',
+          percent: '15%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '儋州夏日广场商业综合体',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/xiaori-cover.png',
+          casePainPoint:
+            '商业综合体有120间商铺,Excel台账易出错,合同到期漏提醒3起/月,租金收缴率88%,空置率20%,人工催收需2人/月。',
+          caseEffect: [
+            '1. 租金收缴率从88%提升至98.5%,每月减少租金损失约5万元;',
+            '2. 合同漏签率降至0,法律风险大幅降低;',
+            '3. 台账整理无需人工,节省2名催收人员,年度节省人力成本约10万元;',
+            '4. 基于数据分析调整租金定价,空置率从20%降至5%,收益提升18%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'OCRR-008',
+    title: '一站式报修服务',
+    subTitle: '让业主报修零跑腿,物业响应更高效',
+    description:
+      '业主在线提交报修需求,系统智能派单、进度实时追踪,报修响应时长缩短至15分钟,完成率提升至98%+',
+    corePoints: {
+      title: '传统报修服务的核心痛点',
+      points: [
+        {
+          point: '报修渠道单一',
+          pointDesc: '业主需电话/到物业中心报修,漏记、错记频发,夜间/节假日报修无响应',
+          icon: 'i-custom-bx渠道',
+        },
+        {
+          point: '派单效率低',
+          pointDesc: '人工派单依赖经验,跨区域派单、技能不匹配,维修时长不可控',
+          icon: 'i-custom-bx派单',
+        },
+        {
+          point: '进度不透明',
+          pointDesc: '业主无法知晓维修进度,反复咨询物业,客服沟通成本高、满意度低',
+          icon: 'i-custom-bx进度',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '一站式报修服务核心功能',
+      function: [
+        {
+          name: '多端便捷报修',
+          funcDesc:
+            '业主可通过微信小程序/APP/公众号提交报修,支持图文/视频描述问题,自动定位报修位置。',
+          funcPoints: ['多端提交', '多媒体描述', '自动定位'],
+        },
+        {
+          name: '智能派单匹配',
+          funcDesc: '基于维修类型、人员技能、地理位置自动匹配最优维修人员,支持加急工单优先派单。',
+          funcPoints: ['技能匹配', '位置优先', '加急处理'],
+        },
+        {
+          name: '进度实时追踪',
+          funcDesc:
+            '业主/物业可实时查看报修状态(待派单/处理中/已完成),维修人员上传现场处理照片。',
+          funcPoints: ['状态可视化', '现场取证', '实时同步'],
+        },
+        {
+          name: '完工在线验收',
+          funcDesc: '维修完成后业主在线验收、评价,差评自动触发复核工单,确保维修质量。',
+          funcPoints: ['在线验收', '评价反馈', '差评复核'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '报修响应时长缩短',
+          percent: '85%',
+        },
+        {
+          name: '报修完成率',
+          percent: '98%+',
+        },
+        {
+          name: '报修投诉率降低',
+          percent: '80%',
+        },
+        {
+          name: '客服沟通成本降低',
+          percent: '75%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '文昌清澜半岛小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/qinglan-bx.png',
+          casePainPoint:
+            '业主报修需打电话/到物业中心,平均响应时长超1小时,每月因报修进度问题投诉超15起,维修完成率仅82%。',
+          caseEffect: [
+            '1. 报修响应时长从1小时缩短至15分钟,夜间报修也能快速派单;',
+            '2. 维修完成率提升至98.5%,报修投诉量减少85%;',
+            '3. 客服人员从3名减至1名,年度节省人力成本约6万元;',
+            '4. 业主报修好评率从70%提升至95%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'IAC-009',
+    title: '智能通行管理',
+    subTitle: '无卡通行更便捷,访客管理更高效',
+    description:
+      '集成人脸识别、远程开门、访客授权功能,业主通行无需实体卡,访客登记时长缩短至30秒/人',
+    corePoints: {
+      title: '传统通行管理的核心痛点',
+      points: [
+        {
+          point: '实体卡易丢失',
+          pointDesc: '门禁卡/停车卡易丢失、忘带,老年业主补办繁琐,物业补卡成本高',
+          icon: 'i-custom-tx卡',
+        },
+        {
+          point: '访客登记繁琐',
+          pointDesc: '访客需到岗亭登记身份、电话,高峰期拥堵,人工登记易泄露隐私',
+          icon: 'i-custom-tx访客',
+        },
+        {
+          point: '权限管理混乱',
+          pointDesc: '装修工、保洁等临时人员通行权限难管控,易出现权限超期、越权通行',
+          icon: 'i-custom-tx权限',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '智能通行管理核心功能',
+      function: [
+        {
+          name: '人脸识别通行',
+          funcDesc:
+            '业主录入人脸信息后,门禁/单元门自动识别开门,支持戴口罩识别,老年业主无需带卡。',
+          funcPoints: ['人脸开门', '戴口罩识别', '免卡通行'],
+        },
+        {
+          name: '远程授权开门',
+          funcDesc: '业主可通过小程序远程打开单元门/小区门,支持单次/限时授权,开门记录可查。',
+          funcPoints: ['远程开门', '限时授权', '记录可查'],
+        },
+        {
+          name: '访客二维码通行',
+          funcDesc: '业主在线生成访客二维码(设置有效时长),访客扫码即可通行,无需人工登记。',
+          funcPoints: ['二维码授权', '时长可控', '免登记'],
+        },
+        {
+          name: '临时权限管理',
+          funcDesc: '为装修工、保洁等人员设置临时通行权限,到期自动失效,支持批量授权/撤销。',
+          funcPoints: ['临时授权', '自动失效', '批量管理'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '通行效率提升',
+          percent: '80%',
+        },
+        {
+          name: '访客登记时长缩短',
+          percent: '90%',
+        },
+        {
+          name: '补卡成本降低',
+          percent: '100%',
+        },
+        {
+          name: '权限违规率',
+          percent: '0%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '海口蓝岛康城小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/landao-tx.png',
+          casePainPoint:
+            '老旧小区1200户,老年业主占比40%,门禁卡月均补办超50张,访客登记时长5分钟/人,高峰期门口拥堵严重。',
+          caseEffect: [
+            '1. 人脸识别通行覆盖率达98%,补卡成本降至0,老年业主通行满意度提升90%;',
+            '2. 访客登记时长从5分钟缩短至30秒,高峰期拥堵问题彻底解决;',
+            '3. 装修工权限自动管控,越权通行事件从每月3起降至0;',
+            '4. 岗亭人员从2名减至1名,年度节省人力成本约4万元。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'OPAR-007',
+    title: '线上便民缴费',
+    subTitle: '足不出户缴费用,物业收费更高效',
+    description: '集成物业费、水电费、停车费等全品类线上缴费,支持代缴、自动代扣,缴费率提升至95%+',
+    corePoints: {
+      title: '传统缴费服务的核心痛点',
+      points: [
+        {
+          point: '缴费渠道单一',
+          pointDesc: '业主需到物业中心现场缴费,工作日时间冲突,老年业主行动不便',
+          icon: 'i-custom-jf渠道',
+        },
+        {
+          point: '代缴不便',
+          pointDesc: '子女为老年业主代缴费用需线下代跑,流程繁琐,易遗漏',
+          icon: 'i-custom-jf代缴',
+        },
+        {
+          point: '票据获取难',
+          pointDesc: '现场缴费开票排队,电子票据无统一获取渠道,业主报销不便',
+          icon: 'i-custom-jf票据',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '线上便民缴费核心功能',
+      function: [
+        {
+          name: '全品类线上缴费',
+          funcDesc: '支持物业费、停车费、水电费、公摊费等全品类费用线上缴纳,微信/支付宝一键支付。',
+          funcPoints: ['全品类覆盖', '多渠道支付', '一键缴费'],
+        },
+        {
+          name: '亲友代缴功能',
+          funcDesc: '业主可分享房号给亲友,亲友无需绑定账号即可代缴费用,代缴记录可查。',
+          funcPoints: ['房号分享', '免绑定代缴', '记录可查'],
+        },
+        {
+          name: '自动代扣服务',
+          funcDesc: '业主绑定银行卡/微信零钱,到期自动代扣费用,避免忘缴、漏缴。',
+          funcPoints: ['自动代扣', '欠费提醒', '代扣记录'],
+        },
+        {
+          name: '电子票据自动生成',
+          funcDesc: '缴费完成后自动生成电子发票/收据,推送至业主微信/邮箱,支持随时下载打印。',
+          funcPoints: ['实时生成', '多端推送', '永久留存'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '线上缴费占比',
+          percent: '90%+',
+        },
+        {
+          name: '缴费率提升',
+          percent: '95%+',
+        },
+        {
+          name: '缴费投诉率降低',
+          percent: '85%',
+        },
+        {
+          name: '收费人员成本降低',
+          percent: '70%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '三亚凤凰水城小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/sanya-jf.png',
+          casePainPoint:
+            '小区3000户,业主多为候鸟老人,现场缴费需子女代跑,每月缴费高峰期物业收费窗口排队超1小时,缴费率仅82%。',
+          caseEffect: [
+            '1. 线上缴费占比达92%,缴费高峰期无排队现象,业主满意度提升90%;',
+            '2. 缴费率从82%提升至96%,每月欠费金额减少8万元;',
+            '3. 收费人员从4名减至1名,年度节省人力成本约18万元;',
+            '4. 电子票据获取率100%,业主报销投诉量降至0。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'CID-010',
+    title: '精准信息触达',
+    subTitle: '信息无遗漏,通知更精准',
+    description: '按楼栋/户型精准推送通知,支持已读/未读追踪,紧急信息触达率提升至100%',
+    corePoints: {
+      title: '传统信息通知的核心痛点',
+      points: [
+        {
+          point: '触达率低',
+          pointDesc: '通知靠张贴公告、电话通知,空置房/外出业主无法知晓,重要信息遗漏',
+          icon: 'i-custom-xx触达',
+        },
+        {
+          name: '精准度差',
+          pointDesc: '全小区推送相同通知,无关信息干扰业主,重要信息易被忽略',
+          icon: 'i-custom-xx精准',
+        },
+        {
+          point: '无反馈机制',
+          pointDesc: '无法确认业主是否查看通知,紧急通知(如停水停电)需反复确认',
+          icon: 'i-custom-xx反馈',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '精准信息触达核心功能',
+      function: [
+        {
+          name: '精准分区推送',
+          funcDesc: '按楼栋、单元、户型推送通知(如某栋楼停水仅推该栋业主),减少无关信息干扰。',
+          funcPoints: ['分区推送', '户型精准', '定向触达'],
+        },
+        {
+          name: '多渠道触达',
+          funcDesc: '支持微信推送+短信提醒双渠道,业主未读时自动补发,确保信息无遗漏。',
+          funcPoints: ['双渠道推送', '自动补发', '无遗漏'],
+        },
+        {
+          name: '已读状态追踪',
+          funcDesc: '系统记录业主通知已读/未读状态,未读业主可由物业管家单独提醒。',
+          funcPoints: ['状态追踪', '未读提醒', '数据统计'],
+        },
+        {
+          name: '应急通知加急',
+          funcDesc: '停水停电、消防演练等应急通知标记为“加急”,置顶展示+短信强提醒。',
+          funcPoints: ['加急标记', '置顶展示', '强提醒'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '信息触达率',
+          percent: '100%',
+        },
+        {
+          name: '未读提醒率',
+          percent: '100%',
+        },
+        {
+          name: '信息投诉率降低',
+          percent: '90%',
+        },
+        {
+          name: '通知确认成本降低',
+          percent: '95%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '儋州夏日广场小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/xiaori-xx.png',
+          casePainPoint:
+            '小区2500户,空置房占比30%,停水停电通知靠张贴,每月因信息遗漏引发的投诉超20起,物业需安排人员逐户电话确认。',
+          caseEffect: [
+            '1. 信息触达率达100%,因信息遗漏引发的投诉量降至0;',
+            '2. 应急通知未读业主由系统自动标记,物业仅需提醒未读业主,确认成本降低95%;',
+            '3. 精准分区推送后,业主无关信息投诉减少90%;',
+            '4. 物业客服人员无需专门处理通知咨询,工作效率提升60%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'NSAM-011',
+    title: '社区生活服务',
+    subTitle: '丰富社区生活,提升业主粘性',
+    description: '集成社区团购、二手交易、邻里互助等功能,业主月均活跃度提升至80%+',
+    corePoints: {
+      title: '传统社区生活的核心痛点',
+      points: [
+        {
+          point: '社区互动少',
+          pointDesc: '业主之间缺乏互动渠道,邻里关系淡漠,社区凝聚力低',
+          icon: 'i-custom-sq互动',
+        },
+        {
+          point: '便民服务少',
+          pointDesc: '业主日常需求(团购、家政、维修)需外部平台,无专属社区服务入口',
+          icon: 'i-custom-sq便民',
+        },
+        {
+          point: '资源整合弱',
+          pointDesc: '周边商家资源未整合,业主享受不到专属优惠,物业无增值收益',
+          icon: 'i-custom-sq资源',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '社区生活服务核心功能',
+      function: [
+        {
+          name: '社区团购服务',
+          funcDesc: '整合周边生鲜、商超资源,业主在线下单,小区自提点取货,享受社区专属优惠。',
+          funcPoints: ['资源整合', '专属优惠', '自提便捷'],
+        },
+        {
+          name: '二手物品交易',
+          funcDesc: '业主发布二手家具、家电等信息,在线沟通、线下交易,平台担保更安全。',
+          funcPoints: ['信息发布', '在线沟通', '交易担保'],
+        },
+        {
+          name: '邻里互助服务',
+          funcDesc: '业主发布求助信息(如代买、取快递),邻里接单互助,可设置小额感谢费。',
+          funcPoints: ['求助发布', '接单互助', '小额打赏'],
+        },
+        {
+          name: '便民服务预约',
+          funcDesc: '集成家政、保洁、维修等便民服务,业主在线预约,物业审核商家资质更放心。',
+          funcPoints: ['服务预约', '资质审核', '评价监督'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '业主月均活跃度',
+          percent: '80%+',
+        },
+        {
+          name: '邻里纠纷减少',
+          percent: '70%',
+        },
+        {
+          name: '物业增值收益提升',
+          percent: '20%',
+        },
+        {
+          name: '业主归属感提升',
+          percent: '85%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '海口国兴大道某小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/guoxing-sq.png',
+          casePainPoint:
+            '高端小区1800户,业主多为上班族,邻里互动极少,每月邻里纠纷超10起,物业无增值收益。',
+          caseEffect: [
+            '1. 业主月均活跃度从10%提升至85%,社区团购月订单超2000笔;',
+            '2. 邻里互助订单月均500笔,代买、取快递需求得到满足,业主归属感提升90%;',
+            '3. 邻里纠纷从每月10起降至3起,社区氛围明显改善;',
+            '4. 物业从团购佣金中获得每月约5000元增值收益,年度增收6万元。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'OVAD-012',
+    title: '业主评价与反馈',
+    subTitle: '以评促改,提升服务质量',
+    description: '全流程服务评价+差评闭环整改,业主服务满意度提升至92分以上',
+    corePoints: {
+      title: '传统评价反馈的核心痛点',
+      points: [
+        {
+          point: '评价渠道少',
+          pointDesc: '业主意见仅能通过电话/现场反馈,反馈门槛高,真实需求难收集',
+          icon: 'i-custom-pj渠道',
+        },
+        {
+          point: '差评无整改',
+          pointDesc: '业主差评后无跟进、无整改,问题重复出现,满意度持续降低',
+          icon: 'i-custom-pj整改',
+        },
+        {
+          point: '评价无应用',
+          pointDesc: '评价数据未纳入物业人员绩效考核,服务质量无提升动力',
+          icon: 'i-custom-pj应用',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '业主评价与反馈核心功能',
+      function: [
+        {
+          name: '全流程服务评价',
+          funcDesc: '报修、保洁、安保等服务完成后自动推送评价,支持星级评分+文字/语音反馈。',
+          funcPoints: ['全流程评价', '多形式反馈', '自动推送'],
+        },
+        {
+          name: '差评闭环整改',
+          funcDesc: '差评自动生成整改工单,指派专人处理,整改完成后同步给业主,业主二次评价。',
+          funcPoints: ['差评派单', '整改追踪', '二次评价'],
+        },
+        {
+          name: '意见征集功能',
+          funcDesc: '物业可发起专项意见征集(如物业费调整、社区改造),业主在线投票/留言。',
+          funcPoints: ['专项征集', '在线投票', '留言互动'],
+        },
+        {
+          name: '评价数据考核',
+          funcDesc: '评价数据自动统计,纳入物业人员/外包团队绩效考核,差评率与绩效挂钩。',
+          funcPoints: ['数据统计', '绩效挂钩', '排名公示'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '业主服务满意度',
+          percent: '92分+',
+        },
+        {
+          name: '差评整改完成率',
+          percent: '100%',
+        },
+        {
+          name: '重复投诉率降低',
+          percent: '85%',
+        },
+        {
+          name: '服务响应质量提升',
+          percent: '80%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '琼海博鳌湾小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/boao-pj.png',
+          casePainPoint:
+            '小区1500户,业主意见反馈渠道单一,每月有效反馈不足10条,差评无整改,服务满意度仅75分。',
+          caseEffect: [
+            '1. 业主月均反馈量提升至200条,真实需求收集更全面;',
+            '2. 差评整改完成率100%,重复投诉率从30%降至4.5%;',
+            '3. 业主服务满意度从75分提升至93分,获“琼海优质物业服务小区”称号;',
+            '4. 保洁、安保团队差评率与绩效挂钩后,服务质量提升80%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'PEE-013',
+    title: '人行出入口智能管理',
+    subTitle: '无感通行+精准管控,打造安全便捷的社区入口',
+    description:
+      '集成人脸识别门禁、访客二维码授权、远程开门等功能,通行效率提升80%,杜绝无关人员进入',
+    corePoints: {
+      title: '传统人行出入口管理的核心痛点',
+      points: [
+        {
+          point: '通行效率低',
+          pointDesc: '依赖实体门禁卡,业主忘带/丢失频繁,人工开门耗时,高峰期拥堵',
+          icon: 'i-custom-rx-tx',
+        },
+        {
+          point: '访客管理乱',
+          pointDesc: '访客需登记身份信息,流程繁琐且隐私易泄露,临时人员权限难管控',
+          icon: 'i-custom-rx-fk',
+        },
+        {
+          point: '安全隐患大',
+          pointDesc: '门禁卡易复制、代刷,无关人员可随意进入,社区安全无保障',
+          icon: 'i-custom-rx-aq',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '人行出入口智能管理核心功能',
+      function: [
+        {
+          name: '人脸识别无感通行',
+          funcDesc:
+            '业主录入人脸信息后,门禁自动识别开门,支持戴口罩、夜间识别,响应速度≤0.3秒/人。',
+          funcPoints: ['人脸识别', '无感通行', '全天候适配'],
+        },
+        {
+          name: '访客二维码授权',
+          funcDesc:
+            '业主通过小程序生成临时访客二维码(设置有效时长/使用次数),访客扫码即可通行,无需登记。',
+          funcPoints: ['二维码授权', '时长可控', '免登记'],
+        },
+        {
+          name: '远程开门与权限管控',
+          funcDesc:
+            '业主/物业可远程打开单元门/小区门,支持单次/限时授权;为装修工、保洁设置临时权限,到期自动失效。',
+          funcPoints: ['远程开门', '临时授权', '自动失效'],
+        },
+        {
+          name: '异常行为报警',
+          funcDesc:
+            '检测到陌生人尾随、翻越围栏等异常行为时,自动触发声光报警并推送至物业监控中心。',
+          funcPoints: ['异常检测', '声光报警', '实时推送'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '通行效率提升',
+          percent: '80%',
+        },
+        {
+          name: '访客登记时长缩短',
+          percent: '95%',
+        },
+        {
+          name: '无关人员进入率',
+          percent: '0%',
+        },
+        {
+          name: '人工开门成本降低',
+          percent: '70%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '海口观澜湖新城小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/guanlan-rx.png',
+          casePainPoint:
+            '小区3500户,业主门禁卡月均补办超80张,访客登记需5分钟/人,高峰期单元门拥堵;每年发生3-5起无关人员闯入事件。',
+          caseEffect: [
+            '1. 人脸识别通行覆盖率达98%,补办门禁卡成本降至0,业主通行满意度提升92%;',
+            '2. 访客登记时长从5分钟缩短至10秒,高峰期无拥堵,物业门岗人员从4名减至2名;',
+            '3. 无关人员进入率降至0,社区盗窃事件从每年4起降至0起;',
+            '4. 远程开门功能使用率达60%,老年业主无需带卡,子女可远程协助开门。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'VEE-014',
+    title: '车行出入口智能管理',
+    subTitle: '无人值守+无感支付,解决车场拥堵与收费漏洞',
+    description:
+      '集成车牌识别、自动抬杆、无感支付、临停计费等功能,通行时长缩短至2秒/车,收费流失率为0',
+    corePoints: {
+      title: '传统车行出入口管理的核心痛点',
+      points: [
+        {
+          point: '通行拥堵严重',
+          pointDesc: '人工识别车牌、收费耗时,高峰期出入口排队超15分钟,车主投诉多',
+          icon: 'i-custom-cx-yd',
+        },
+        {
+          point: '收费漏洞频发',
+          pointDesc: '人工收费易出现漏收、错收、私收,临停费流失率达15%-20%',
+          icon: 'i-custom-cx-sf',
+        },
+        {
+          point: '管理成本高昂',
+          pointDesc: '需配置多名岗亭收费员、巡检员,人力成本占车场运营成本的60%以上',
+          icon: 'i-custom-cx-gl',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '车行出入口智能管理核心功能',
+      function: [
+        {
+          name: '高清车牌识别',
+          funcDesc:
+            '高清摄像头自动识别蓝牌、黄牌、新能源车牌,识别准确率≥99.8%,固定车自动抬杆,临停车快速入场。',
+          funcPoints: ['高清识别', '准确率高', '快速入场'],
+        },
+        {
+          name: '无人值守计费',
+          funcDesc:
+            '临停车离场时自动计算费用,支持微信/支付宝扫码缴费、无感支付,无需人工干预,缴费后自动抬杆。',
+          funcPoints: ['自动计费', '无感支付', '无人值守'],
+        },
+        {
+          name: '车场数据监控',
+          funcDesc:
+            '实时监控车场车位余量、通行流量、收费数据,道闸故障、异常缴费等情况自动报警至物业中心。',
+          funcPoints: ['实时监控', '异常报警', '数据可视化'],
+        },
+        {
+          name: '逃费追缴机制',
+          funcDesc:
+            '对逃费车辆自动加入黑名单,下次入场时强制补缴欠费;支持线上追缴、短信提醒,杜绝收费漏洞。',
+          funcPoints: ['黑名单管理', '欠费追缴', '漏洞杜绝'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '通行时长缩短',
+          percent: '90%',
+        },
+        {
+          name: '收费流失率',
+          percent: '0%',
+        },
+        {
+          name: '人力成本降低',
+          percent: '70%',
+        },
+        {
+          name: '车主满意度提升',
+          percent: '85%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '三亚亚龙湾商业广场',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/yalong-cx.png',
+          casePainPoint:
+            '商业广场车场有500个车位,高峰期出入口拥堵超20分钟,配置收费员6名,每月临停费流失约4万元,人力成本每月9万元。',
+          caseEffect: [
+            '1. 通行时长从平均12秒/车缩短至2秒/车,高峰期拥堵问题彻底解决;',
+            '2. 取消6名收费员,每月节省人力成本9万元,年度节省108万元;',
+            '3. 临停费流失率从18%降至0,每月增收4万元,年度增收48万元;',
+            '4. 车场整体运营效率提升60%,车主投诉量减少90%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'CSM-015',
+    title: '社区安防监控智能管理',
+    subTitle: 'AI预警+全域覆盖,打造无死角安全社区',
+    description: '集成高空抛物监测、周界防护、AI行为分析等智能监控设备,安全事件识别率达98%+',
+    corePoints: {
+      title: '传统社区安防监控的核心痛点',
+      points: [
+        {
+          point: '监控有盲区',
+          pointDesc: '依赖人工布置监控点位,高空、死角等区域覆盖不全,安全隐患遗漏',
+          icon: 'i-custom-af-mq',
+        },
+        {
+          point: '预警不及时',
+          pointDesc: '需人工24小时盯屏,异常事件难以及时发现,事后追溯为主,无法预防',
+          icon: 'i-custom-af-yj',
+        },
+        {
+          point: '追溯效率低',
+          pointDesc: '事件发生后需人工逐段查看监控录像,耗时耗力,关键证据易丢失',
+          icon: 'i-custom-af-zs',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '社区安防监控智能管理核心功能',
+      function: [
+        {
+          name: '全域无死角覆盖',
+          funcDesc:
+            '针对高空抛物、周界围栏、儿童区域、消防通道等关键场景,部署高清智能摄像头,实现全域覆盖。',
+          funcPoints: ['关键场景覆盖', '高清摄像', '无死角'],
+        },
+        {
+          name: 'AI智能行为分析',
+          funcDesc:
+            '自动识别高空抛物、翻越围栏、徘徊逗留、消防通道占用等异常行为,实时触发声光报警。',
+          funcPoints: ['AI识别', '异常预警', '实时报警'],
+        },
+        {
+          name: '事件快速追溯',
+          funcDesc:
+            '支持按事件类型(如高空抛物)、时间、区域快速检索监控录像,自动生成事件片段,无需逐段查看。',
+          funcPoints: ['精准检索', '片段生成', '快速追溯'],
+        },
+        {
+          name: '监控数据联动',
+          funcDesc:
+            '监控设备与物业中心大屏、业主服务平台联动,异常事件实时推送至物业人员手机,可远程查看现场画面。',
+          funcPoints: ['多端联动', '实时推送', '远程查看'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '安全事件识别率',
+          percent: '98%+',
+        },
+        {
+          name: '预警响应时长缩短',
+          percent: '95%',
+        },
+        {
+          name: '事件追溯效率提升',
+          percent: '90%',
+        },
+        {
+          name: '社区安全事故减少',
+          percent: '85%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '海口海甸岛某高端小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/haidian-af.png',
+          casePainPoint:
+            '小区2000户,高层楼栋多,高空抛物投诉频发;周界围栏长,人工巡逻覆盖不全;事件追溯需2人/天查看监控。',
+          caseEffect: [
+            '1. 高空抛物识别率达99%,相关投诉从每月5起降至0起,成功锁定3起高空抛物行为;',
+            '2. 周界防护实现AI自动预警,翻越围栏事件从每年4起降至0起;',
+            '3. 事件追溯时间从2小时缩短至5分钟,节省大量人工成本;',
+            '4. 业主安全感满意度从75分提升至94分,获“海口安全示范社区”称号。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'SECM-016',
+    title: '智慧能耗智能管理',
+    subTitle: '精准计量+节能管控,降低物业运营成本',
+    description: '集成智能抄表、能耗监测、异常预警等功能,能耗数据自动统计,运营成本降低15%-20%',
+    corePoints: {
+      title: '传统能耗管理的核心痛点',
+      points: [
+        {
+          point: '抄表效率低',
+          pointDesc: '人工上门抄表耗时耗力,易出错、漏抄,抄表周期长,数据滞后',
+          icon: 'i-custom-nh-cb',
+        },
+        {
+          point: '能耗浪费严重',
+          pointDesc: '水电能耗异常(如漏水、漏电)无法及时发现,造成大量浪费,运营成本高',
+          icon: 'i-custom-nh-lf',
+        },
+        {
+          point: '数据无分析',
+          funcDesc: '能耗数据分散,无法统计分析能耗趋势,节能优化无依据',
+          icon: 'i-custom-nh-fx',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '智慧能耗智能管理核心功能',
+      function: [
+        {
+          name: '智能远程抄表',
+          funcDesc:
+            '部署智能水表、电表、燃气表,数据自动采集并上传至平台,无需人工上门,抄表准确率100%。',
+          funcPoints: ['远程抄表', '自动采集', '准确率100%'],
+        },
+        {
+          name: '能耗实时监测',
+          funcDesc:
+            '实时监控小区公共区域(电梯、路灯、水泵)及商户能耗数据,生成能耗趋势图表,支持多维度分析。',
+          funcPoints: ['实时监测', '趋势分析', '多维度统计'],
+        },
+        {
+          name: '异常能耗预警',
+          funcDesc:
+            '设置能耗阈值,当出现漏水、漏电、超负荷用电等异常时,自动触发预警,推送至物业人员及时处理。',
+          funcPoints: ['阈值设置', '异常预警', '及时处理'],
+        },
+        {
+          name: '节能策略优化',
+          funcDesc:
+            '基于能耗数据分析,提供节能建议(如调整路灯亮灯时间、优化电梯运行模式),降低无效能耗。',
+          funcPoints: ['节能建议', '策略优化', '成本降低'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '抄表人力成本降低',
+          percent: '100%',
+        },
+        {
+          name: '能耗浪费减少',
+          percent: '20%',
+        },
+        {
+          name: '运营成本降低',
+          percent: '15%-20%',
+        },
+        {
+          name: '能耗数据准确率',
+          percent: '100%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '儋州某商业综合体',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/danzhou-nh.png',
+          casePainPoint:
+            '商业综合体包含商场、写字楼、公寓,需8名抄表员每月上门抄表,抄表周期10天;每年因水管漏水、路灯长亮等浪费能耗成本约20万元。',
+          caseEffect: [
+            '1. 取消8名抄表员,年度节省人力成本约48万元;',
+            '2. 能耗异常预警响应时间从平均24小时缩短至1小时,漏水、漏电浪费减少90%;',
+            '3. 基于能耗分析优化电梯运行模式、路灯亮灯时间,年度能耗成本降低18%,节省约36万元;',
+            '4. 能耗数据实时同步至业主平台,商户能耗透明化,缴费争议减少85%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'CCF-017',
+    title: '便民充电设施智能管理',
+    subTitle: '安全充电+便捷支付,满足业主电动车充电需求',
+    description:
+      '集成智能充电桩、安全监测、线上预约缴费等功能,充电安全事故发生率为0,业主满意度提升90%',
+    corePoints: {
+      title: '传统充电设施管理的核心痛点',
+      points: [
+        {
+          point: '安全隐患大',
+          pointDesc: '私拉电线充电、充电桩过载充电,易引发火灾,安全风险高',
+          icon: 'i-custom-cd-aq',
+        },
+        {
+          point: '管理混乱',
+          pointDesc: '充电桩无预约功能,业主排队等待;充电费用现金收取,易出现漏收、错收',
+          icon: 'i-custom-cd-gl',
+        },
+        {
+          point: '维护不及时',
+          pointDesc: '充电桩故障无法及时发现,维修响应慢,业主充电体验差',
+          icon: 'i-custom-cd-wh',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '便民充电设施智能管理核心功能',
+      function: [
+        {
+          name: '智能安全充电',
+          funcDesc:
+            '充电桩具备过载保护、短路保护、漏电保护、高温断电功能,充电完成后自动断电,杜绝安全隐患。',
+          funcPoints: ['多重保护', '自动断电', '安全无忧'],
+        },
+        {
+          name: '线上预约缴费',
+          funcDesc:
+            '业主通过小程序预约充电桩、选择充电时长,支持微信/支付宝缴费,充电完成后自动结算。',
+          funcPoints: ['在线预约', '便捷缴费', '自动结算'],
+        },
+        {
+          name: '设备状态监测',
+          funcDesc: '实时监控充电桩运行状态,故障自动报警至物业,维修工单自动生成,维修进度可查。',
+          funcPoints: ['状态监测', '故障报警', '工单联动'],
+        },
+        {
+          name: '充电数据统计',
+          funcDesc:
+            '统计充电桩使用率、充电时长、收费金额等数据,支持物业优化充电桩布局和收费标准。',
+          funcPoints: ['数据统计', '使用率分析', '优化布局'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '充电安全事故率',
+          percent: '0%',
+        },
+        {
+          name: '业主充电满意度',
+          percent: '90%+',
+        },
+        {
+          name: '充电桩使用率提升',
+          percent: '60%',
+        },
+        {
+          name: '充电纠纷减少',
+          percent: '95%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '文昌某大型小区',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/wenchang-cd.png',
+          casePainPoint:
+            '小区3000户,业主电动车保有量约800辆,私拉电线充电现象频发,每年发生2起充电火灾隐患;原有10个充电桩无预约功能,业主排队冲突频发。',
+          caseEffect: [
+            '1. 新增50个智能充电桩,私拉电线现象彻底杜绝,充电安全事故率为0;',
+            '2. 线上预约功能使用率达95%,业主排队冲突从每月10起降至0起;',
+            '3. 充电桩使用率从40%提升至75%,满足业主充电需求,满意度提升92%;',
+            '4. 故障自动报警后,维修响应时长从24小时缩短至2小时,维修完成率100%。',
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'IOT-018',
+    title: '物联网平台统一管理',
+    subTitle: '设备互联+数据互通,实现硬件全生命周期管理',
+    description:
+      '整合人行、车行、安防、能耗等所有智能硬件数据,统一管控、远程运维,设备故障率降低30%',
+    corePoints: {
+      title: '传统硬件管理的核心痛点',
+      points: [
+        {
+          point: '设备孤岛',
+          pointDesc: '不同品牌、不同类型的硬件设备各自独立,数据不互通,无法统一管控',
+          icon: 'i-custom-wlw-sd',
+        },
+        {
+          point: '运维效率低',
+          pointDesc: '设备故障需人工现场排查,响应慢、维修成本高,影响业主使用',
+          icon: 'i-custom-wlw-yw',
+        },
+        {
+          point: '数据无价值',
+          pointDesc: '硬件数据分散存储,无法整合分析,无法为物业决策提供支撑',
+          icon: 'i-custom-wlw-sj',
+        },
+      ],
+    },
+    coreFunctions: {
+      title: '物联网平台统一管理核心功能',
+      function: [
+        {
+          name: '多设备兼容接入',
+          funcDesc:
+            '支持不同品牌、不同协议的智能硬件接入(如门禁、监控、充电桩、智能表),实现统一管控。',
+          funcPoints: ['多品牌兼容', '多协议支持', '统一管控'],
+        },
+        {
+          name: '设备远程运维',
+          funcDesc:
+            '实时监控所有硬件运行状态,故障自动报警并推送至运维人员;支持远程调试、参数配置,无需现场上门。',
+          funcPoints: ['远程监控', '故障报警', '远程调试'],
+        },
+        {
+          name: '数据整合分析',
+          funcDesc:
+            '整合所有硬件数据,生成设备使用率、故障率、能耗趋势等报表,为物业优化管理提供数据支撑。',
+          funcPoints: ['数据整合', '多维度报表', '决策支撑'],
+        },
+        {
+          name: '设备生命周期管理',
+          funcDesc:
+            '记录设备安装、调试、维修、更换等全生命周期信息,设置设备维保提醒,延长设备使用寿命。',
+          funcPoints: ['生命周期记录', '维保提醒', '寿命延长'],
+        },
+      ],
+    },
+    coreEffects: {
+      title: '方案落地核心效果',
+      effect: [
+        {
+          name: '设备故障率降低',
+          percent: '30%',
+        },
+        {
+          name: '运维成本降低',
+          percent: '40%',
+        },
+        {
+          name: '设备响应效率提升',
+          percent: '80%',
+        },
+        {
+          name: '数据利用率提升',
+          percent: '100%',
+        },
+      ],
+    },
+    typicalCases: {
+      title: '典型客户案例',
+      cases: [
+        {
+          caseName: '海南某物业集团(多项目管理)',
+          caseCover: 'https://huijia-website.oss-cn-beijing.aliyuncs.com/group-wlw.png',
+          casePainPoint:
+            '管理20个住宅/商业项目,各项目硬件设备品牌不一、协议不同,无法统一管控;每个项目需2名运维人员,设备故障响应时长超24小时。',
+          caseEffect: [
+            '1. 所有项目硬件设备统一接入物联网平台,实现“总部-项目”两级管控,无需项目单独配置运维人员;',
+            '2. 设备故障响应时长从24小时缩短至4小时,维修成本降低40%,年度节省运维成本约120万元;',
+            '3. 设备故障率从15%降至10.5%,业主因设备故障引发的投诉减少70%;',
+            '4. 基于硬件数据优化设备布局和维保计划,设备平均使用寿命延长2年。',
+          ],
+        },
+      ],
+    },
+  },
 ]

+ 152 - 0
app/pages/cases/index.vue

@@ -0,0 +1,152 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2026-01-26 09:26:13
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2026-01-26 11:08:17
+ * @Description: 客户案例列表页
+-->
+<template>
+  <div class="cases-page bg-#f6f8fd min-h-screen">
+    <!-- Header/Banner -->
+    <div class="cases-header py-226px text-center bg-white lt-sm:py-160px">
+      <div class="landing-container">
+        <h1 class="font-s-48px text-#000000 pf-sc-semibold lt-sm:font-s-64px">解决方案标杆案例</h1>
+      </div>
+    </div>
+
+    <!-- Cases List -->
+    <div class="landing-container py-60px lt-sm:py-120px lt-sm:px-32px">
+      <div class="flex flex-col gap-40px lt-sm:gap-64px">
+        <solution-case-card
+          v-for="(item, index) in pagedCases"
+          :key="index"
+          :case-item="item"
+          class="hover:shadow-lg transition-shadow duration-300"
+        />
+      </div>
+
+      <!-- Pagination -->
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="currentPage"
+          :page-size="pageSize"
+          :total="total"
+          layout="prev, pager, next, jumper, ->, slot"
+          background
+          @current-change="handlePageChange"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <section-cta />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { solutionPoints } from '@/constants/common'
+  import { type CaseItem } from '~/components/solution/case-card.vue'
+
+  // Flatten all cases from solutions
+  const allCases = computed<CaseItem[]>(() => {
+    return solutionPoints.flatMap((solution) => solution.typicalCases?.cases || [])
+  })
+
+  // Pagination
+  const currentPage = ref(1)
+  const pageSize = ref(5)
+  const total = computed(() => allCases.value.length)
+
+  const pagedCases = computed(() => {
+    const start = (currentPage.value - 1) * pageSize.value
+    const end = start + pageSize.value
+    return allCases.value.slice(start, end)
+  })
+
+  const handlePageChange = () => {
+    window.scrollTo({ top: 450, behavior: 'smooth' })
+  }
+
+  useSeoMeta({
+    title: '客户案例 - 绘家科技',
+    description: '绘家科技智慧物业解决方案标杆案例,展示数字化转型成果与客户价值。',
+  })
+</script>
+
+<style scoped lang="scss">
+  .cases-header {
+    @apply bg-cover bg-center bg-no-repeat;
+    background-image: url('@/assets/images/solution-cases-bg.png');
+  }
+
+  .pagination-wrapper {
+    @apply mt-60px flex justify-center lt-sm:mt-80px;
+
+    :deep(.el-pagination) {
+      @apply flex items-center gap-12px flex-nowrap justify-center;
+      @apply lt-sm:gap-8px;
+
+      button,
+      .el-pager li {
+        @apply bg-white border border-#E2E8F0 rounded-4px font-s-14px text-#64748B min-w-40px h-40px flex items-center justify-center transition-all duration-300;
+        @apply lt-sm:min-w-64px lt-sm:h-64px lt-sm:font-s-24px;
+
+        &:not(:disabled):not(.disabled):hover {
+          @apply border-#0F67F8! text-#0F67F8!;
+        }
+
+        &.is-active {
+          @apply bg-#0F67F8! border-#0F67F8! text-white!;
+        }
+
+        &:disabled,
+        &.disabled {
+          @apply opacity-50 cursor-not-allowed bg-white! border-#E2E8F0! text-#64748B!;
+        }
+      }
+
+      &.is-background {
+        .btn-prev,
+        .btn-next {
+          @apply mx-0!;
+        }
+
+        .el-pager li {
+          @apply mx-4px!;
+        }
+      }
+
+      .el-icon {
+        @apply lt-sm:font-s-24px;
+      }
+
+      .el-pagination__jump {
+        @apply ml-24px font-s-14px text-#64748B flex items-center gap-8px;
+        @apply lt-sm:ml-18px lt-sm:font-s-22px lt-sm:gap-8px;
+
+        .el-input {
+          @apply w-56px! mx-0!;
+          @apply lt-sm:w-80px!;
+
+          .el-input__wrapper {
+            @apply shadow-none! border border-#E2E8F0! px-0! h-40px! rounded-4px!;
+            @apply lt-sm:h-64px!;
+
+            &.is-focus {
+              @apply border-#0F67F8!;
+            }
+          }
+
+          input {
+            @apply text-center! font-s-14px! text-#091221! h-full!;
+            @apply lt-sm:font-s-24px!;
+          }
+        }
+
+        .el-pagination__goto,
+        .el-pagination__classifier {
+          @apply lt-sm:m-0;
+        }
+      }
+    }
+  }
+</style>

+ 10 - 112
app/pages/solutions/[id].vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-22 14:08:24
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-23 11:26:02
+ * @LastEditTime: 2026-01-26 10:28:46
  * @Description: 解决方案详情页
 -->
 <template>
@@ -110,74 +110,14 @@
       <div class="landing-container lt-sm:px-32px">
         <h2 class="section-title pf-sc-semibold">{{ solution.typicalCases.title }}</h2>
         <div class="mt-60px lt-sm:mt-48px">
-          <div class="case-card">
-            <div class="case-img-wrapper">
-              <img :src="currentCase.caseCover" class="case-img" :alt="currentCase.caseName" />
-            </div>
-            <div class="case-content">
-              <div class="case-header">
-                <h3 class="case-name pf-sc-semibold">{{ currentCase.caseName }}</h3>
-                <div v-if="(solution.typicalCases.cases?.length ?? 0) > 1" class="case-nav-btns">
-                  <!-- PC Prev -->
-                  <i
-                    class="i-custom-arrow-circle-left wh-32px transition-colors lt-sm:hidden"
-                    :class="
-                      activeCaseIndex === 0
-                        ? 'cursor-not-allowed opacity-50'
-                        : 'cursor-pointer hover:i-custom-arrow-circle-left-active'
-                    "
-                    @click="prevCase"
-                  ></i>
-                  <!-- Mobile Prev -->
-                  <i
-                    class="i-custom-button-previous-mobile wh-32px transition-all shrink-0 hidden lt-sm:block"
-                    :class="[
-                      activeCaseIndex === 0
-                        ? 'cursor-not-allowed i-custom-button-previous-mobile-disabled'
-                        : 'cursor-pointer active:i-custom-button-previous-mobile-active',
-                    ]"
-                    @click="prevCase"
-                  ></i>
-
-                  <!-- PC Next -->
-                  <i
-                    class="i-custom-arrow-circle-right wh-32px ml-12px transition-colors lt-sm:hidden"
-                    :class="
-                      activeCaseIndex === solution.typicalCases.cases.length - 1
-                        ? 'cursor-not-allowed opacity-50'
-                        : 'cursor-pointer hover:i-custom-arrow-circle-right-active'
-                    "
-                    @click="nextCase"
-                  ></i>
-                  <!-- Mobile Next -->
-                  <i
-                    class="i-custom-button-next-mobile wh-32px ml-12px transition-all shrink-0 hidden lt-sm:block"
-                    :class="[
-                      activeCaseIndex === solution.typicalCases.cases.length - 1
-                        ? 'cursor-not-allowed i-custom-button-next-mobile-disabled'
-                        : 'cursor-pointer active:i-custom-button-next-mobile-active',
-                    ]"
-                    @click="nextCase"
-                  ></i>
-                </div>
-              </div>
-
-              <div class="case-section">
-                <h4 class="case-subtitle pf-sc-semibold">客户痛点</h4>
-                <div class="case-text pf-sc-regular">{{ currentCase.casePainPoint }}</div>
-              </div>
-              <div
-                class="case-section mt-24px bg-#F6F8FD p-16px rounded-8px lt-sm:mt-24px lt-sm:p-24px lt-sm:rounded-8px"
-              >
-                <h4 class="case-subtitle pf-sc-semibold">落地效果</h4>
-                <div class="case-text pf-sc-regular">
-                  <div v-for="(effect, eIndex) in currentCase.caseEffect" :key="eIndex">
-                    {{ effect }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          <solution-case-card
+            :case-item="currentCase"
+            :show-nav="(solution.typicalCases.cases?.length ?? 0) > 1"
+            :is-first="activeCaseIndex === 0"
+            :is-last="activeCaseIndex === (solution.typicalCases.cases?.length ?? 0) - 1"
+            @prev="prevCase"
+            @next="nextCase"
+          />
         </div>
       </div>
     </section>
@@ -281,7 +221,7 @@
 
   /* Pain Points */
   .pain-card {
-    @apply bg-white rounded-16px p-40px border border-#E2E8F0 hover:shadow-md transition-all duration-300 text-center flex flex-col items-center;
+    @apply bg-white rounded-16px p-40px border border-#E2E8F0 shadow-sm transition-all duration-300 text-center flex flex-col items-center;
     @apply lt-sm:rounded-16px lt-sm:p-40px;
   }
 
@@ -349,46 +289,4 @@
     @apply bg-cover bg-center bg-no-repeat;
     background-image: url('~/assets/images/case-bg.png');
   }
-
-  /* Typical Cases */
-  .case-card {
-    @apply bg-white rounded-16px p-24px flex gap-40px items-stretch shadow-sm;
-    @apply lt-sm:flex-col lt-sm:p-32px lt-sm:gap-42px lt-sm:rounded-16px;
-  }
-
-  .case-img-wrapper {
-    @apply w-542px h-342px rounded-8px overflow-hidden flex-shrink-0;
-    @apply lt-sm:w-full lt-sm:h-320px lt-sm:rounded-12px;
-  }
-
-  .case-img {
-    @apply w-full h-full object-fill;
-  }
-
-  .case-content {
-    @apply flex-1 py-10px flex flex-col justify-center;
-  }
-
-  .case-header {
-    @apply flex justify-between items-center mb-30px;
-    @apply lt-sm:mb-24px;
-  }
-
-  .case-name {
-    @apply font-s-22px text-#091221;
-  }
-
-  .case-nav-btns {
-    @apply flex items-center;
-  }
-
-  .case-subtitle {
-    @apply font-s-18px text-#091221 mb-12px;
-    @apply lt-sm:mb-12px;
-  }
-
-  .case-text {
-    @apply font-s-14px text-#091221/70 lh-24px;
-    @apply lt-sm:font-s-24px lt-sm:lh-normal;
-  }
 </style>

+ 1 - 1
uno.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-05-07 20:59:28
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-26 09:10:30
+ * @LastEditTime: 2026-01-26 10:24:28
  * @Description:
  */
 import {