yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化"全场景全栈解决方案"为竖向卡片展开效果
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 删除汽车解决方案
- 保留7个解决方案：电商、金融、游戏、文旅、教育、医疗、农业
- 改为竖向长方形卡片布局（120px x 400px）
- 标题默认竖向排列，使用 writing-mode: vertical-rl
- 鼠标悬停时卡片宽度展开至 320px
- 悬停时标题变为横向并移至顶部
- 悬停时显示描述和查看详情链接
- 添加发光边框和阴影效果
- 使用 cubic-bezier 缓动函数实现流畅过渡

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
2025-11-25 01:12:58 +08:00
parent 3a989aac60
commit d0801ae40e
2 changed files with 228 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
index.html
View File

@@ -245,83 +245,83 @@
<h2>全场景全栈解决方案</h2>
<div class="section-desc">专业构架师针对丰富的业务场景，为千行百业构建稳定、易用的高性价比解决方案。</div>
</div>
<div class="resolve-content ">
<div class="fboxRow">
<div class="resolve-box">
<a href="./solution/e-commerce.html">
<div>
<h4>电商</h4>
<div class="title-desc">有效应对大促带来的业务高并发问题，助力电商客户快速实现营销创新与业务增收。</div>
<p class="resolve-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
<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>
</a>
</div>
<div class="resolve-box">
<a href="./solution/finance.html">
<div>
<h4>金融</h4>
<div class="title-desc">助力金融机构打造面向垂直场景的创新方案，实现金融机构与用户之间的高效触达。</div>
<p class="resolve-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
</div>
</a>
</div>
<div class="resolve-box">
<a href="./solution/game.html">
<div>
<h4>游戏</h4>
<div class="title-desc">构建高质量、全方位、深度体验的游戏云平台，提升研发效率，增强交互体验。</div>
<p class="resolve-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
</div>
</a>
</div>
<div class="resolve-box">
<a href="./solution/auto.html">
<div>
<h4>汽车</h4>
<div class="title-desc">面向汽车行业提供全场景信息化解决方案，助力车企打造更开放的新型连接生态。</div>
<p class="resolve-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
</div>
</a>
</div>
</div>
</a>
</div>
<div class="fboxRow">
<div class="resolve-box">
<a href="./solution/travel.html">
<div>
<h4>文旅</h4>
<div class="title-desc">通过“科技+文化旅游”的融合创新及落地应用，推动文旅行业信息化、智慧化发展。</div>
<p class="resolve-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
<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>
</a>
</div>
<div class="resolve-box">
<a href="./solution/education.html">
<div>
<h4>教育</h4>
<div class="title-desc">实现数据互联、可视化、高交互的云上教育环境，打造云时代教育治理新模式。</div>
<p class="resolve-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
</div>
</a>
</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>
</a>
</div>
<div class="resolve-box">
<a href="./solution/medical.html">
<div>
<h4>医疗</h4>
<div class="title-desc">协助医疗机构打造资源共享、再利用、再生产的数据生态循环，提高资源配置效率。</div>
<p class="resolve-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
</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>
</a>
</div>
<div class="resolve-box">
<a href="./solution/agriculture.html">
<div>
<h4>农业</h4>
<div class="title-desc">助力农企构建智慧农业生产服务体系，提升农业精细化种植与管理水平。</div>
<p class="resolve-link">查看详情 <span class="iconfont icon-arrow-right"></span></p>
</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>
</a>
</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>
</div>
</div>