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

157
css/index.css
View File

@@ -1142,6 +1142,163 @@
margin-top: 60px; margin-top: 60px;
} }
/* 新的竖向卡片布局 */
.resolve-content-new {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 60px;
flex-wrap: wrap;
}
/* 竖向长方形卡片 */
.resolve-card {
width: 120px;
height: 400px;
position: relative;
border-radius: 16px;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.resolve-card a {
display: block;
width: 100%;
height: 100%;
}
.resolve-card-inner {
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(16px);
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 16px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 卡片发光边框效果 */
.resolve-card-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
padding: 1px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.3));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s ease;
}
/* 标题 - 默认竖向显示 */
.resolve-card-title {
color: #F9FAFB;
font-size: 24px;
font-weight: 700;
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: 8px;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
position: relative;
}
/* 内容区域 - 默认隐藏 */
.resolve-card-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 32px 24px;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1;
}
.resolve-card-desc {
color: rgba(203, 213, 225, 0.9);
line-height: 1.7;
font-size: 15px;
}
.resolve-card-link {
color: rgba(148, 163, 184, 0.9);
font-size: 14px;
font-weight: 500;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
margin-top: 20px;
}
.resolve-card-link .icon-arrow-right {
margin-left: 5px;
transition: transform 0.3s ease;
}
/* 悬停效果 */
.resolve-card:hover {
width: 320px;
z-index: 10;
}
.resolve-card:hover .resolve-card-inner {
background: rgba(15, 23, 42, 0.9);
box-shadow:
0 20px 50px rgba(56, 189, 248, 0.25),
0 0 50px rgba(56, 189, 248, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border-color: rgba(56, 189, 248, 0.4);
}
.resolve-card:hover .resolve-card-inner::before {
opacity: 1;
}
/* 悬停时标题变为横向并移到顶部 */
.resolve-card:hover .resolve-card-title {
writing-mode: horizontal-tb;
text-orientation: mixed;
letter-spacing: 2px;
position: absolute;
top: 32px;
left: 24px;
color: #38BDF8;
text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}
/* 悬停时显示内容 */
.resolve-card:hover .resolve-card-content {
opacity: 1;
transform: translateY(0);
}
.resolve-card:hover .resolve-card-link {
color: #38BDF8;
}
.resolve-card:hover .resolve-card-link .icon-arrow-right {
transform: translateX(5px);
}
/* 解决方案卡片 - 错落悬浮效果 */ /* 解决方案卡片 - 错落悬浮效果 */
.resolve-content .resolve-box { .resolve-content .resolve-box {
position: relative; position: relative;

142
index.html
View File

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