feat: 解决方案成功案例优化 - 新增3个案例，横向滚动展示，自动循环播放

src/views/Solutions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { images } from '@/assets/images'
 
 
@@ -106,9 +106,49 @@ const successCases = [
   {
     name: '自媒体乡村文化宣传agent',
     details: '自媒体乡村文化宣传 Agent 主要服务于乡村振兴、文旅推广、地方宣传、非遗传播、农产品品牌和基层融媒体等场景。该 Agent 可围绕一个村庄、乡镇或区域，自动整理当地历史故事、民俗文化、传统建筑、非遗技艺、特色饮食、节庆活动、自然景观、乡贤人物和农特产品等内容资源，并将其转化为适合短视频、图文、直播和宣传片的传播素材。系统可生成乡村故事脚本、文旅推介文案、人物采访提纲、农产品卖点包装、路线推荐、活动策划方案和账号栏目规划。相比传统宣传方式，该 Agent 更注重把地方资源讲成"有情绪、有记忆点、有传播力"的内容，避免宣传空泛化。对于乡镇政府、文旅公司、乡村运营团队和本地自媒体而言，它能够帮助乡村建立持续输出能力，提升地方文化影响力、游客吸引力和农产品品牌价值。'
+  },
+  {
+    name: '某企业知识库搭建与安全agent',
+    details: '某企业知识库搭建与安全 Agent 面向中大型企业内部资料管理、员工培训、业务协同和信息安全管控等场景，重点解决企业知识分散、资料查找困难、经验沉淀不足和权限管理混乱等问题。该 Agent 可将企业内部制度文件、项目资料、产品手册、合同模板、培训文档、会议纪要、客户案例、技术方案等内容进行统一采集、清洗、分类和结构化管理，形成可持续更新的企业知识库。员工在使用时，可通过自然语言直接提问，系统自动匹配相关资料并生成准确回答，提高内部办公效率。同时，该 Agent 具备权限分级、敏感信息识别、访问记录追踪和数据安全提示能力，可根据部门、岗位和角色设置不同查看权限，避免核心资料外泄。对于企业管理者而言，它不仅是一个资料查询工具，更是企业知识资产沉淀、组织经验复用和内部安全治理的重要平台。'
+  },
+  {
+    name: '餐饮智能获客agent',
+    details: '餐饮智能获客 Agent 主要服务于餐饮门店、连锁品牌、本地生活商家和外卖运营团队，围绕"引流—转化—复购—私域沉淀"构建智能化获客体系。传统餐饮获客往往依赖人工发券、平台投流和门店活动，存在成本高、效果不稳定、客户留存弱等问题。该 Agent 可根据门店位置、菜品特色、消费人群、客单价、周边竞品和节假日热点，自动生成营销活动方案、团购套餐设计、短视频脚本、小红书种草文案、朋友圈海报文案和顾客评价回复话术。同时，系统可分析顾客消费记录、复购周期、菜品偏好和活动转化数据，帮助门店识别高价值客户，并生成会员唤醒、生日关怀、社群促活和优惠券推送策略。该案例的核心价值在于帮助餐饮商家从"被动等客"转向"主动获客"，提升到店率、复购率和线上曝光度。'
+  },
+  {
+    name: '某公司财税管理系统agent',
+    details: '某公司财税管理系统 Agent 面向企业财务管理、税务申报、票据归集、成本控制和经营分析等场景，重点解决中小企业财税工作繁琐、数据分散、人工核对效率低和合规风险难以及时发现的问题。该 Agent 可对接企业发票、合同、银行流水、报销单据、采购销售数据和财务报表，实现票据自动识别、分类归档、费用归集和数据核验。系统可根据企业经营情况，辅助生成月度财务分析、税负测算、成本结构分析、现金流预警和异常支出提醒，并为财务人员提供税务申报、发票管理、合同付款节点和报销合规性检查建议。对于管理层而言，该 Agent 能将复杂财务数据转化为清晰的经营看板，帮助企业及时掌握收入、成本、利润和税务风险情况。该案例不仅提升财务部门工作效率，也有助于企业建立更规范、更透明、更安全的财税管理体系。'
   }
 ]
 
+// 将案例复制多份用于无缝循环滚动
+const scrollCases = computed(() => {
+  // 复制多份确保滚动时有足够内容
+  return [...successCases, ...successCases, ...successCases]
+})
+
+// 滚动位置状态
+const scrollPosition = ref(0)
+
+// 自动滚动逻辑
+let scrollInterval: number | null = null
+
+onMounted(() => {
+  const scrollSpeed = 0.3 // 滚动速度
+  scrollInterval = window.setInterval(() => {
+    const totalCases = successCases.length
+    const itemWidth = 100 / 3 // 每次显示3个，每个占33.33%
+    const maxScroll = (totalCases / 3) * 100 // 滚动到所有案例都展示完
+    scrollPosition.value = (scrollPosition.value + scrollSpeed) % maxScroll
+  }, 50)
+})
+
+onUnmounted(() => {
+  if (scrollInterval !== null) {
+    clearInterval(scrollInterval)
+  }
+})
+
 const selectedCase = ref<{ name: string; details: string } | null>(null)
 
 const openCaseDetail = (caseItem: typeof successCases[0]) => {
@@ -243,24 +283,33 @@ const closeCaseDetail = () => {
           <h2 class="text-3xl font-bold text-gray-900 mb-4">成功案例</h2>
           <p class="text-gray-600">我们在各行业的成功实践</p>
         </div>
-        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="relative h-32 overflow-hidden">
           <div 
-            v-for="(caseItem, index) in successCases" 
+            class="absolute inset-0 flex transition-transform duration-500 ease-in-out"
-            :key="index"
+            :style="{ transform: `translateX(-${scrollPosition}%)` }"
-            class="bg-gray-50 rounded-xl p-6 border border-gray-100 hover:border-primary-200 hover:shadow-lg transition-all duration-300 cursor-pointer"
-            @click="openCaseDetail(caseItem)"
           >
-            <div class="flex items-start space-x-4">
+            <div 
-                <div class="w-10 h-10 bg-accent-100 rounded-lg flex items-center justify-center flex-shrink-0">
+              v-for="(caseItem, index) in scrollCases" 
-                  <svg class="w-5 h-5 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              :key="index"
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+              class="flex-shrink-0 w-1/3 px-3"
-                  </svg>
+            >
-                </div>
+              <div 
-                <div>
+                class="bg-gray-50 rounded-xl p-6 border border-gray-100 hover:border-primary-200 hover:shadow-lg transition-all duration-300 cursor-pointer h-full flex items-center justify-center"
-                  <h4 class="font-semibold text-gray-900 mb-1">{{ caseItem.name }}</h4>
+                @click="openCaseDetail(caseItem)"
-                  <p class="text-sm text-gray-600">基于Agent技术的智能解决方案</p>
+              >
+                <div class="flex items-center space-x-4">
+                  <div class="w-10 h-10 bg-accent-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg class="w-5 h-5 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                    </svg>
+                  </div>
+                  <div class="text-center">
+                    <h4 class="font-semibold text-gray-900 mb-1">{{ caseItem.name }}</h4>
+                    <p class="text-sm text-gray-600">基于Agent技术的智能解决方案</p>
+                  </div>
                 </div>
               </div>
+            </div>
           </div>
         </div>
       </div>