重新设计"全场景全栈解决方案"板块为幻灯片展示形式

- 将竖向卡片布局改为上下两层结构
- 上层：7个解决方案标签按钮，支持点击切换
- 下层：幻灯片内容区（左侧文案+右侧图片）
- 添加3秒自动播放功能，支持循环切换
- 添加实时进度条显示播放进度
- 鼠标悬停时暂停，离开时恢复播放
- 采用玻璃态毛玻璃背景和科技感渐变配色
- 优化响应式布局，适配桌面、平板和手机端
- 添加流畅的淡入淡出切换动画和光晕效果

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

css/index.css

@@ -2624,3 +2624,320 @@ html {
 #index .qrcode-popup .desc {
   color: rgba(203, 213, 225, 0.8);
 }
+
+/* ============================================
+   全场景全栈解决方案 - 新设计（上下两层）
+   ============================================ */
+
+/* 解决方案容器 */
+.solution-wrapper {
+  margin-top: 60px;
+  position: relative;
+}
+
+/* 上层：按钮导航 */
+.solution-tabs {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 40px;
+  flex-wrap: wrap;
+}
+
+.solution-tab {
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 600;
+  color: rgba(226, 232, 240, 0.8);
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 30px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 按钮光晕效果 */
+.solution-tab::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
+  transform: translate(-50%, -50%);
+  transition: width 0.5s ease, height 0.5s ease;
+}
+
+.solution-tab:hover {
+  color: #38BDF8;
+  border-color: rgba(56, 189, 248, 0.4);
+  background: rgba(15, 23, 42, 0.8);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
+}
+
+.solution-tab:hover::before {
+  width: 200px;
+  height: 200px;
+}
+
+.solution-tab.active {
+  color: #ffffff;
+  background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+  border-color: transparent;
+  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
+}
+
+.solution-tab.active::before {
+  display: none;
+}
+
+/* 下层：幻灯片容器 */
+.solution-slider {
+  position: relative;
+  min-height: 450px;
+  overflow: hidden;
+}
+
+/* 单个幻灯片 */
+.solution-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  transform: translateX(100px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+  pointer-events: none;
+}
+
+.solution-slide.active {
+  position: relative;
+  opacity: 1;
+  transform: translateX(0);
+  pointer-events: auto;
+}
+
+/* 幻灯片内容区域 */
+.solution-content {
+  display: flex;
+  align-items: center;
+  gap: 60px;
+  padding: 40px;
+  background: rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  border-radius: 20px;
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* 左侧文字区域 */
+.solution-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.solution-text h3 {
+  font-size: 32px;
+  font-weight: 700;
+  color: #F9FAFB;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.solution-subtitle {
+  font-size: 16px;
+  color: rgba(148, 163, 184, 0.9);
+  margin-bottom: 24px;
+  font-weight: 500;
+}
+
+.solution-desc {
+  color: rgba(203, 213, 225, 0.85);
+  line-height: 1.8;
+  margin-bottom: 32px;
+}
+
+.solution-desc p {
+  margin-bottom: 12px;
+  font-size: 15px;
+}
+
+.solution-desc p:last-child {
+  margin-bottom: 0;
+}
+
+/* 了解详情链接 */
+.solution-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 32px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 30px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3);
+}
+
+.solution-link:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5);
+}
+
+.solution-link .icon-arrow-right {
+  transition: transform 0.3s ease;
+}
+
+.solution-link:hover .icon-arrow-right {
+  transform: translateX(5px);
+}
+
+/* 右侧图片区域 */
+.solution-image {
+  flex-shrink: 0;
+  width: 400px;
+  height: 350px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  background: rgba(15, 23, 42, 0.5);
+}
+
+.solution-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: brightness(1.1);
+  transition: transform 0.5s ease;
+}
+
+.solution-slide.active .solution-image img {
+  transform: scale(1.05);
+}
+
+/* 图片光晕效果 */
+.solution-image::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+.solution-slide.active .solution-image::after {
+  opacity: 1;
+}
+
+/* 进度指示器 */
+.solution-progress {
+  margin-top: 40px;
+  height: 4px;
+  background: rgba(148, 163, 184, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar {
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 2px;
+  transition: width 0.1s linear;
+}
+
+/* 响应式设计 */
+@media (max-width: 1199px) {
+  .solution-content {
+    gap: 40px;
+    padding: 32px;
+  }
+
+  .solution-image {
+    width: 350px;
+    height: 300px;
+  }
+
+  .solution-text h3 {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 991px) {
+  .solution-content {
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .solution-image {
+    width: 100%;
+    max-width: 500px;
+    height: 300px;
+  }
+
+  .solution-tabs {
+    gap: 12px;
+  }
+
+  .solution-tab {
+    padding: 10px 24px;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 767px) {
+  .solution-wrapper {
+    margin-top: 40px;
+  }
+
+  .solution-content {
+    padding: 24px;
+  }
+
+  .solution-text h3 {
+    font-size: 24px;
+  }
+
+  .solution-subtitle {
+    font-size: 14px;
+  }
+
+  .solution-desc p {
+    font-size: 14px;
+  }
+
+  .solution-image {
+    height: 250px;
+  }
+
+  .solution-slider {
+    min-height: auto;
+  }
+
+  .solution-tabs {
+    gap: 8px;
+  }
+
+  .solution-tab {
+    padding: 8px 20px;
+    font-size: 13px;
+  }
+}

index.html

@@ -245,83 +245,186 @@
         <h2>全场景全栈解决方案</h2>
         <div class="section-desc">专业构架师针对丰富的业务场景，为千行百业构建稳定、易用的高性价比解决方案。</div>
       </div>
-      <div class="resolve-content-new">
-        <div class="resolve-card">
-          <a href="./solution/e-commerce.html">
-            <div class="resolve-card-inner">
-              <h4 class="resolve-card-title">电商</h4>
-              <div class="resolve-card-content">
-                <div class="resolve-card-desc">提供完整的电商云解决方案，有效应对大促、秒杀等高并发场景，保障系统稳定运行。通过弹性扩容、智能调度等技术手段，助力电商平台快速响应业务需求，提升用户体验。支持多种营销活动场景，实现营销创新与业务增收的双重目标，帮助企业在激烈的市场竞争中脱颖而出。</div>
-                <p class="resolve-card-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
-              </div>
-            </div>
-          </a>
+      <!-- 新设计：上下两层布局 -->
+      <div class="solution-wrapper">
+        <!-- 上层：按钮导航 -->
+        <div class="solution-tabs">
+          <button class="solution-tab active" data-index="0">
+            <span>电商</span>
+          </button>
+          <button class="solution-tab" data-index="1">
+            <span>金融</span>
+          </button>
+          <button class="solution-tab" data-index="2">
+            <span>游戏</span>
+          </button>
+          <button class="solution-tab" data-index="3">
+            <span>文旅</span>
+          </button>
+          <button class="solution-tab" data-index="4">
+            <span>教育</span>
+          </button>
+          <button class="solution-tab" data-index="5">
+            <span>医疗</span>
+          </button>
+          <button class="solution-tab" data-index="6">
+            <span>农业</span>
+          </button>
         </div>
-        <div class="resolve-card">
-          <a href="./solution/finance.html">
-            <div class="resolve-card-inner">
-              <h4 class="resolve-card-title">金融</h4>
-              <div class="resolve-card-content">
-                <div class="resolve-card-desc">为金融机构提供安全可靠的云计算基础设施，满足金融行业严格的监管要求和安全标准。助力金融机构打造面向垂直场景的创新金融产品，实现与用户之间的高效触达。提供风险控制、数据分析、智能客服等全方位技术支持，推动金融科技创新，提升金融服务效率和用户体验。</div>
-                <p class="resolve-card-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
+
+        <!-- 下层：幻灯片内容 -->
+        <div class="solution-slider">
+          <!-- 电商 -->
+          <div class="solution-slide active">
+            <div class="solution-content">
+              <div class="solution-text">
+                <h3>电商解决方案</h3>
+                <p class="solution-subtitle">应对高并发、大促等复杂场景</p>
+                <div class="solution-desc">
+                  <p>提供完整的电商云解决方案，有效应对大促、秒杀等高并发场景，保障系统稳定运行。</p>
+                  <p>通过弹性扩容、智能调度等技术手段，助力电商平台快速响应业务需求，提升用户体验。</p>
+                  <p>支持多种营销活动场景，实现营销创新与业务增收的双重目标。</p>
+                </div>
+                <a href="./solution/e-commerce.html" class="solution-link">
+                  了解详情 <span class="iconfont icon-arrow-right"></span>
+                </a>
+              </div>
+              <div class="solution-image">
+                <img src="/web/BlackFruit-web/assets/img/index/solution-1.png" alt="电商解决方案">
               </div>
             </div>
-          </a>
+          </div>
+
+          <!-- 金融 -->
+          <div class="solution-slide">
+            <div class="solution-content">
+              <div class="solution-text">
+                <h3>金融解决方案</h3>
+                <p class="solution-subtitle">安全可靠的金融级云服务</p>
+                <div class="solution-desc">
+                  <p>为金融机构提供安全可靠的云计算基础设施，满足金融行业严格的监管要求和安全标准。</p>
+                  <p>助力金融机构打造面向垂直场景的创新金融产品，实现与用户之间的高效触达。</p>
+                  <p>提供风险控制、数据分析、智能客服等全方位技术支持，推动金融科技创新。</p>
+                </div>
+                <a href="./solution/finance.html" class="solution-link">
+                  了解详情 <span class="iconfont icon-arrow-right"></span>
+                </a>
+              </div>
+              <div class="solution-image">
+                <img src="/web/BlackFruit-web/assets/img/index/solution-2.png" alt="金融解决方案">
+              </div>
+            </div>
+          </div>
+
+          <!-- 游戏 -->
+          <div class="solution-slide">
+            <div class="solution-content">
+              <div class="solution-text">
+                <h3>游戏解决方案</h3>
+                <p class="solution-subtitle">低延迟、高并发的游戏云平台</p>
+                <div class="solution-desc">
+                  <p>构建高质量、全方位、深度体验的游戏云平台，提供低延迟、高并发的游戏运行环境。</p>
+                  <p>支持游戏快速部署、弹性扩容，满足各类游戏场景需求。</p>
+                  <p>通过智能运维、数据分析等技术手段，提升游戏研发效率，优化玩家游戏体验。</p>
+                </div>
+                <a href="./solution/game.html" class="solution-link">
+                  了解详情 <span class="iconfont icon-arrow-right"></span>
+                </a>
+              </div>
+              <div class="solution-image">
+                <img src="/web/BlackFruit-web/assets/img/index/solution-3.png" alt="游戏解决方案">
+              </div>
+            </div>
+          </div>
+
+          <!-- 文旅 -->
+          <div class="solution-slide">
+            <div class="solution-content">
+              <div class="solution-text">
+                <h3>文旅解决方案</h3>
+                <p class="solution-subtitle">科技赋能智慧文旅</p>
+                <div class="solution-desc">
+                  <p>通过"科技+文化旅游"的深度融合创新及落地应用，推动文旅行业全面信息化、智慧化发展。</p>
+                  <p>提供智慧景区、智慧酒店、智慧旅行社等全场景解决方案，实现景区管理数字化、游客服务智能化。</p>
+                  <p>利用大数据、人工智能等技术，优化旅游资源配置，提升游客体验。</p>
+                </div>
+                <a href="./solution/travel.html" class="solution-link">
+                  了解详情 <span class="iconfont icon-arrow-right"></span>
+                </a>
+              </div>
+              <div class="solution-image">
+                <img src="/web/BlackFruit-web/assets/img/index/solution-7.png" alt="文旅解决方案">
+              </div>
+            </div>
+          </div>
+
+          <!-- 教育 -->
+          <div class="solution-slide">
+            <div class="solution-content">
+              <div class="solution-text">
+                <h3>教育解决方案</h3>
+                <p class="solution-subtitle">打造云时代教育新模式</p>
+                <div class="solution-desc">
+                  <p>实现教育数据互联互通、教学过程可视化、师生互动高交互的云上教育环境，打造云时代教育治理新模式。</p>
+                  <p>提供在线课堂、智慧校园、教育管理等全方位解决方案，支持大规模在线教学和混合式教学模式。</p>
+                  <p>通过人工智能、大数据等技术，实现个性化教学和精准教学评估。</p>
+                </div>
+                <a href="./solution/education.html" class="solution-link">
+                  了解详情 <span class="iconfont icon-arrow-right"></span>
+                </a>
+              </div>
+              <div class="solution-image">
+                <img src="/web/BlackFruit-web/assets/img/index/solution-4.png" alt="教育解决方案">
+              </div>
+            </div>
+          </div>
+
+          <!-- 医疗 -->
+          <div class="solution-slide">
+            <div class="solution-content">
+              <div class="solution-text">
+                <h3>医疗解决方案</h3>
+                <p class="solution-subtitle">构建数字化医疗生态</p>
+                <div class="solution-desc">
+                  <p>协助医疗机构打造医疗数据资源共享、医疗资源再利用、医疗知识再生产的数字化医疗生态循环体系。</p>
+                  <p>提供远程医疗、智慧医院、医疗影像云等解决方案，支持医疗数据安全存储和高效分析。</p>
+                  <p>通过云计算、人工智能等技术，辅助临床决策，提升医疗服务质量和效率。</p>
+                </div>
+                <a href="./solution/medical.html" class="solution-link">
+                  了解详情 <span class="iconfont icon-arrow-right"></span>
+                </a>
+              </div>
+              <div class="solution-image">
+                <img src="/web/BlackFruit-web/assets/img/index/solution-5.png" alt="医疗解决方案">
+              </div>
+            </div>
+          </div>
+
+          <!-- 农业 -->
+          <div class="solution-slide">
+            <div class="solution-content">
+              <div class="solution-text">
+                <h3>农业解决方案</h3>
+                <p class="solution-subtitle">推动智慧农业转型升级</p>
+                <div class="solution-desc">
+                  <p>助力农业企业构建智慧农业生产服务体系，提升农业精细化种植与智能化管理水平。</p>
+                  <p>提供农业物联网、农产品溯源、智能灌溉等全链条解决方案，实现农业生产全过程数字化监控和管理。</p>
+                  <p>通过大数据分析和人工智能技术，优化种植方案，提高农作物产量和品质。</p>
+                </div>
+                <a href="./solution/agriculture.html" class="solution-link">
+                  了解详情 <span class="iconfont icon-arrow-right"></span>
+                </a>
+              </div>
+              <div class="solution-image">
+                <img src="/web/BlackFruit-web/assets/img/index/solution-6.png" alt="农业解决方案">
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="resolve-card">
-          <a href="./solution/game.html">
-            <div class="resolve-card-inner">
-              <h4 class="resolve-card-title">游戏</h4>
-              <div class="resolve-card-content">
-                <div class="resolve-card-desc">构建高质量、全方位、深度体验的游戏云平台，提供低延迟、高并发的游戏运行环境。支持游戏快速部署、弹性扩容，满足各类游戏场景需求。通过智能运维、数据分析等技术手段，提升游戏研发效率，优化玩家游戏体验。为游戏开发者提供从开发、测试到运营的全生命周期支持。</div>
-                <p class="resolve-card-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
-              </div>
-            </div>
-          </a>
-        </div>
-        <div class="resolve-card">
-          <a href="./solution/travel.html">
-            <div class="resolve-card-inner">
-              <h4 class="resolve-card-title">文旅</h4>
-              <div class="resolve-card-content">
-                <div class="resolve-card-desc">通过"科技+文化旅游"的深度融合创新及落地应用，推动文旅行业全面信息化、智慧化发展。提供智慧景区、智慧酒店、智慧旅行社等全场景解决方案，实现景区管理数字化、游客服务智能化。利用大数据、人工智能等技术，优化旅游资源配置，提升游客体验，助力文旅产业高质量发展。</div>
-                <p class="resolve-card-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
-              </div>
-            </div>
-          </a>
-        </div>
-        <div class="resolve-card">
-          <a href="./solution/education.html">
-            <div class="resolve-card-inner">
-              <h4 class="resolve-card-title">教育</h4>
-              <div class="resolve-card-content">
-                <div class="resolve-card-desc">实现教育数据互联互通、教学过程可视化、师生互动高交互的云上教育环境，打造云时代教育治理新模式。提供在线课堂、智慧校园、教育管理等全方位解决方案，支持大规模在线教学和混合式教学模式。通过人工智能、大数据等技术，实现个性化教学和精准教学评估，推动教育公平和教育现代化。</div>
-                <p class="resolve-card-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
-              </div>
-            </div>
-          </a>
-        </div>
-        <div class="resolve-card">
-          <a href="./solution/medical.html">
-            <div class="resolve-card-inner">
-              <h4 class="resolve-card-title">医疗</h4>
-              <div class="resolve-card-content">
-                <div class="resolve-card-desc">协助医疗机构打造医疗数据资源共享、医疗资源再利用、医疗知识再生产的数字化医疗生态循环体系，提高医疗资源配置效率。提供远程医疗、智慧医院、医疗影像云等解决方案，支持医疗数据安全存储和高效分析。通过云计算、人工智能等技术，辅助临床决策，提升医疗服务质量和效率。</div>
-                <p class="resolve-card-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
-              </div>
-            </div>
-          </a>
-        </div>
-        <div class="resolve-card">
-          <a href="./solution/agriculture.html">
-            <div class="resolve-card-inner">
-              <h4 class="resolve-card-title">农业</h4>
-              <div class="resolve-card-content">
-                <div class="resolve-card-desc">助力农业企业构建智慧农业生产服务体系，提升农业精细化种植与智能化管理水平。提供农业物联网、农产品溯源、智能灌溉等全链条解决方案，实现农业生产全过程数字化监控和管理。通过大数据分析和人工智能技术，优化种植方案，提高农作物产量和品质，推动传统农业向现代智慧农业转型升级。</div>
-                <p class="resolve-card-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
-              </div>
-            </div>
-          </a>
+
+        <!-- 进度指示器 -->
+        <div class="solution-progress">
+          <div class="progress-bar"></div>
         </div>
       </div>
     </div>

js/index.js

@@ -258,4 +258,103 @@ $(function () {
   $("#cps-box").click(function () {
     location.href = "partner/cps.html";
   });
+
+  // ============================================
+  // 全场景全栈解决方案 - 幻灯片功能
+  // ============================================
+
+  (function () {
+    const $tabs = $('.solution-tab');
+    const $slides = $('.solution-slide');
+    const $progressBar = $('.progress-bar');
+    const totalSlides = $slides.length;
+    let currentIndex = 0;
+    let autoPlayTimer = null;
+    let progressTimer = null;
+    const autoPlayDuration = 3000; // 3秒自动切换
+    const progressInterval = 100; // 进度条更新间隔
+
+    // 切换到指定幻灯片
+    function switchSlide(index) {
+      if (index === currentIndex) return;
+
+      // 更新幻灯片
+      $slides.removeClass('active');
+      $slides.eq(index).addClass('active');
+
+      // 更新按钮
+      $tabs.removeClass('active');
+      $tabs.eq(index).addClass('active');
+
+      currentIndex = index;
+
+      // 重置进度条
+      resetProgress();
+    }
+
+    // 切换到下一张
+    function nextSlide() {
+      const nextIndex = (currentIndex + 1) % totalSlides;
+      switchSlide(nextIndex);
+    }
+
+    // 重置进度条
+    function resetProgress() {
+      $progressBar.css('width', '0%');
+      clearInterval(progressTimer);
+
+      let progress = 0;
+      const step = (progressInterval / autoPlayDuration) * 100;
+
+      progressTimer = setInterval(function () {
+        progress += step;
+        if (progress >= 100) {
+          progress = 100;
+          clearInterval(progressTimer);
+        }
+        $progressBar.css('width', progress + '%');
+      }, progressInterval);
+    }
+
+    // 启动自动播放
+    function startAutoPlay() {
+      stopAutoPlay();
+      resetProgress();
+      autoPlayTimer = setInterval(nextSlide, autoPlayDuration);
+    }
+
+    // 停止自动播放
+    function stopAutoPlay() {
+      if (autoPlayTimer) {
+        clearInterval(autoPlayTimer);
+        autoPlayTimer = null;
+      }
+      if (progressTimer) {
+        clearInterval(progressTimer);
+        progressTimer = null;
+      }
+    }
+
+    // 按钮点击事件
+    $tabs.on('click', function () {
+      const index = $(this).data('index');
+      switchSlide(index);
+      startAutoPlay();
+    });
+
+    // 鼠标悬停时暂停自动播放
+    $('.solution-wrapper').on('mouseenter', function () {
+      stopAutoPlay();
+    });
+
+    // 鼠标离开时恢复自动播放
+    $('.solution-wrapper').on('mouseleave', function () {
+      startAutoPlay();
+    });
+
+    // 初始化
+    if (totalSlides > 0) {
+      startAutoPlay();
+    }
+  })();
 });