feat: 重写快捷方式组件,使用圆形图标

This commit is contained in:
wkc
2026-02-27 14:15:25 +08:00
parent 0e95d9d2b1
commit f432870d17

View File

@@ -2,7 +2,7 @@
<div class="quick-entry-container"> <div class="quick-entry-container">
<div class="section-title"> <div class="section-title">
<i class="el-icon-s-grid title-icon"></i> <i class="el-icon-s-grid title-icon"></i>
<span>快捷入口</span> <span>快捷方式</span>
</div> </div>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">
@@ -12,7 +12,7 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-title">导入历史项目</div> <div class="card-title">导入历史项目</div>
<div class="card-desc">从历史项目中快速创建新项目</div> <div class="card-desc">从历史项目中导入配置</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@@ -23,7 +23,7 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-title">创建季度初核</div> <div class="card-title">创建季度初核</div>
<div class="card-desc">按季度创建初核排查项目</div> <div class="card-desc">创建季度初核</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@@ -34,7 +34,7 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-title">创建新员工排查</div> <div class="card-title">创建新员工排查</div>
<div class="card-desc">针对新入职员工的初核排查</div> <div class="card-desc">创建新员工排查</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@@ -45,7 +45,7 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-title">创建高风险专项</div> <div class="card-title">创建高风险专项</div>
<div class="card-desc">针对高风险人员的专项排查</div> <div class="card-desc">创建高风险专项</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@@ -123,7 +123,7 @@ export default {
.card-icon { .card-icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 4px; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -134,19 +134,19 @@ export default {
color: white; color: white;
&.import-icon { &.import-icon {
background-color: #667eea; background-color: #6B7280;
} }
&.quarterly-icon { &.quarterly-icon {
background-color: #f5576c; background-color: #3B82F6;
} }
&.employee-icon { &.employee-icon {
background-color: #4facfe; background-color: #10B981;
} }
&.highrisk-icon { &.highrisk-icon {
background-color: #F56C6C; background-color: #F59E0B;
} }
} }