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 
- 图片宽度改为 100%，高度 80px，固定在顶部
- 使用 background-size: cover 保持图片比例填充
- 悬停时图片依然保持 100% 宽度
- 标题移至图片下方（top: 100px）
- 内容区域从图片下方开始（top: 80px -> 150px）
- 优化层级关系和过渡效果

🤖 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:26:16 +08:00
parent 7d60564e81
commit a42d69e0a3
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
css/index.css
View File

@@ -1177,20 +1177,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 40px; padding-top: 80px;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
} }
/* 卡片顶部图标 */ /* 卡片顶部图片 - 撑满宽度 */
.resolve-card-inner::after { .resolve-card-inner::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 30px; top: 0;
left: 50%; left: 0;
transform: translateX(-50%); width: 100%;
width: 60px; height: 80px;
height: 60px; background-size: cover;
background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1256,17 +1255,17 @@
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2; z-index: 2;
position: relative; position: relative;
margin-top: 140px; margin-top: 100px;
} }
/* 内容区域 - 默认隐藏 */ /* 内容区域 - 默认隐藏 */
.resolve-card-content { .resolve-card-content {
position: absolute; position: absolute;
top: 0; top: 80px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 100px 24px 32px 24px; padding: 32px 24px;
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1317,30 +1316,31 @@
opacity: 1; opacity: 1;
} }
/* 悬停时图标移到左上角 */ /* 悬停时图片依然撑满宽度 */
.resolve-card:hover .resolve-card-inner::after { .resolve-card:hover .resolve-card-inner::after {
top: 30px; width: 100%;
left: 30px;
transform: translateX(0);
} }
/* 悬停时标题变为横向并移到顶部 */ /* 悬停时标题变为横向并移到图片下方 */
.resolve-card:hover .resolve-card-title { .resolve-card:hover .resolve-card-title {
writing-mode: horizontal-tb; writing-mode: horizontal-tb;
text-orientation: mixed; text-orientation: mixed;
letter-spacing: 2px; letter-spacing: 2px;
position: absolute; position: absolute;
top: 42px; top: 100px;
left: 100px; left: 24px;
right: 24px;
margin-top: 0; margin-top: 0;
color: #38BDF8; color: #38BDF8;
text-shadow: 0 0 20px rgba(56, 189, 248, 0.5); text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
text-align: left;
} }
/* 悬停时显示内容 */ /* 悬停时显示内容 */
.resolve-card:hover .resolve-card-content { .resolve-card:hover .resolve-card-content {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
top: 150px;
} }
.resolve-card:hover .resolve-card-link { .resolve-card:hover .resolve-card-link {