tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: svg-icon组件颜色无法显示问题修复

Browse Source 
Former-commit-id: 35e4c7754d862589b404d61f71f22cbce9c40628
This commit is contained in:
horizons
2022-09-09 22:33:23 +08:00
parent af8fe4d2c9
commit 37c2197e76
4 changed files with 24 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/views/dashboard/index.vue
View File

@@ -22,8 +22,8 @@ import Team from './components/Team/index.vue';
<el-row :gutter="40" class="card-panel__col">
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="uv" class-name="card-panel-icon" />
<div class="card-panel-icon-wrapper icon-user">
<svg-icon icon-class="uv" size="4em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">访问数</div>
@@ -35,7 +35,7 @@ import Team from './components/Team/index.vue';
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
<svg-icon icon-class="message" size="4em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">消息数</div>
@@ -47,7 +47,7 @@ import Team from './components/Team/index.vue';
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
<svg-icon icon-class="money" size="4em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">收入金额</div>
@@ -58,7 +58,7 @@ import Team from './components/Team/index.vue';
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
<svg-icon icon-class="shopping" size="4em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">订单数</div>
@@ -171,16 +171,28 @@ import Team from './components/Team/index.vue';
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
.icon-message {
color: #36a3f7;
}
.icon-user {
color: #40c9c6;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3;
}
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-user {
background: #e77541;
}
.icon-people {
background: #40c9c6;
}
@@ -197,42 +209,6 @@ import Team from './components/Team/index.vue';
}
}
.icon-people {
color: #40c9c6;
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.icon-message {
color: #36a3f7;
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.icon-money {
color: #f4516c;
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.icon-shopping {
color: #34bfa3;
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;