重新设计"全场景全栈解决方案"板块为幻灯片展示形式
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- 将竖向卡片布局改为上下两层结构 - 上层：7个解决方案标签按钮，支持点击切换 - 下层：幻灯片内容区（左侧文案+右侧图片） - 添加3秒自动播放功能，支持循环切换 - 添加实时进度条显示播放进度 - 鼠标悬停时暂停，离开时恢复播放 - 采用玻璃态毛玻璃背景和科技感渐变配色 - 优化响应式布局，适配桌面、平板和手机端 - 添加流畅的淡入淡出切换动画和光晕效果 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
249
index.html
249
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>
|
||||
|
||||
Reference in New Issue
Block a user