feat(首页): 替换功能卡片图标并优化样式

添加新的SVG图标资源并替换原有的Element UI图标
调整卡片样式包括间距、颜色和悬停效果
This commit is contained in:
houakang
2026-04-12 15:59:19 +08:00
parent ca389824a1
commit 9bca7a1dff
5 changed files with 196 additions and 10 deletions

View File

@@ -17,21 +17,21 @@
<div class="card-section flex gap-8 items-center">
<div class="feature-card">
<div class="card-icon">
<el-icon :size="42"><Document /></el-icon>
<img src="@/assets/icons/document-organization.svg" width="42" height="42" />
</div>
<div class="card-title">智能文档处理</div>
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
</div>
<div class="feature-card">
<div class="card-icon">
<el-icon :size="42"><Document /></el-icon>
<img src="@/assets/icons/official-document.svg" width="42" height="42" />
</div>
<div class="card-title">智能文档处理</div>
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
</div>
<div class="feature-card">
<div class="card-icon">
<el-icon :size="42"><Document /></el-icon>
<img src="@/assets/icons/pdf.svg" width="42" height="42" />
</div>
<div class="card-title">智能文档处理</div>
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
@@ -194,7 +194,7 @@ function handleKeydown(e) {
border-radius: 8px;
display: flex;
flex-direction: column;
padding: 25px 16px;
padding: 16px;
gap: 8px;
background: #ffffff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
@@ -203,26 +203,31 @@ function handleKeydown(e) {
.card-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: #409eff;
margin-top: 9px;
margin-bottom: 4px;
}
.card-icon img {
transition: transform 0.3s ease;
}
.card-icon img:hover {
transform: rotate(-15deg);
}
.card-title {
font-weight: 600;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.55px;
color: #303133;
color: #1a1a1a;
}
.card-desc {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #909399;
color: #8a9097;
}
/* 底部:输入框 */