- 卡片高度从 400px 增加到 500px - 悬停时图片高度从 80px 展开到 140px - 标题和内容区域位置相应调整 - 每个解决方案的文案从1-2句扩展到3-4句 - 详细描述各行业解决方案的核心价值和技术特点 - 优化文字行高为 1.8,字号调整为 14px - 保持图片撑满宽度的展开效果 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1154,7 +1154,7 @@
|
||||
/* 竖向长方形卡片 */
|
||||
.resolve-card {
|
||||
width: 150px;
|
||||
height: 400px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -1255,7 +1255,7 @@
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
margin-top: 100px;
|
||||
margin-top: 140px;
|
||||
}
|
||||
|
||||
/* 内容区域 - 默认隐藏 */
|
||||
@@ -1277,8 +1277,8 @@
|
||||
|
||||
.resolve-card-desc {
|
||||
color: rgba(203, 213, 225, 0.9);
|
||||
line-height: 1.7;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.resolve-card-link {
|
||||
@@ -1316,9 +1316,10 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 悬停时图片依然撑满宽度 */
|
||||
/* 悬停时图片高度展开 */
|
||||
.resolve-card:hover .resolve-card-inner::after {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
/* 悬停时标题变为横向并移到图片下方 */
|
||||
@@ -1327,7 +1328,7 @@
|
||||
text-orientation: mixed;
|
||||
letter-spacing: 2px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
top: 160px;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
margin-top: 0;
|
||||
@@ -1340,7 +1341,7 @@
|
||||
.resolve-card:hover .resolve-card-content {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
top: 150px;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
.resolve-card:hover .resolve-card-link {
|
||||
|
||||
Reference in New Issue
Block a user