|
|
@@ -20,7 +20,8 @@
|
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" v-for="(v,i) in dataList" :key="i">
|
|
|
<div class="card-panel">
|
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
|
- <svg-icon icon-class="example" class-name="card-panel-icon" />
|
|
|
+<!-- <svg-icon icon-class="example" class-name="card-panel-icon" />-->
|
|
|
+ <img class="card-item-icon" :src="require(`../assets/icons/home/${v.taskTypeText}.png`)" alt="">
|
|
|
<div class="card-icon-text">
|
|
|
{{v.taskTypeText}}
|
|
|
</div>
|
|
|
@@ -29,7 +30,10 @@
|
|
|
<div class="card-panel-text">
|
|
|
{{v.statusText}}
|
|
|
</div>
|
|
|
- <count-to :start-val="0" :end-val="v.nums" :duration="3000" class="card-panel-num" />
|
|
|
+ <span v-if="!v.nums" style="font-size: 20px;">0</span>
|
|
|
+ <span v-else @click="clickNum(v)" >
|
|
|
+ <count-to :start-val="0" :end-val="v.nums" :duration="3000" class="card-panel-num" />
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -120,6 +124,9 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
imageUrl,
|
|
|
+ clickNum(item){
|
|
|
+ console.log(item,'666')
|
|
|
+ },
|
|
|
showMsg(v){
|
|
|
this.show = true;
|
|
|
this.selectMsg = v;
|
|
|
@@ -163,11 +170,17 @@ export default {
|
|
|
border-radius: 4px;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
+ .el-tabs--border-card{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
.chart-wrapper{
|
|
|
.el-card__body{
|
|
|
padding: 0;
|
|
|
}
|
|
|
}
|
|
|
+ .card-panel-num{
|
|
|
+ color:#1ea8e9;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -184,6 +197,7 @@ export default {
|
|
|
margin: 0 0 10px 0;
|
|
|
padding-left: 4px;
|
|
|
color:#fff;
|
|
|
+ line-height: 26px;
|
|
|
font-weight: bold;
|
|
|
letter-spacing: 2px;
|
|
|
background: linear-gradient(to right, #71bfe3, #fff);
|
|
|
@@ -194,9 +208,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.tab-panel{
|
|
|
- height: 455px;
|
|
|
+ height: 457px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
+//css 透明的属性=
|
|
|
+.card-item-icon{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ &:hover{
|
|
|
+ opacity:.8;
|
|
|
+ }
|
|
|
+}
|
|
|
.msg-item{
|
|
|
font-size: 15px;
|
|
|
padding: 0 10px;
|
|
|
@@ -241,7 +263,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
&:hover{
|
|
|
- background-color: #1ea8e9;
|
|
|
+ background-color: #6eb9ec;
|
|
|
color:#fff;
|
|
|
transition: all .38s ease-out;
|
|
|
}
|
|
|
@@ -252,7 +274,6 @@ export default {
|
|
|
display: flex;
|
|
|
flex:1;
|
|
|
justify-content: space-between;
|
|
|
- cursor: pointer;
|
|
|
font-size: 12px;
|
|
|
color: #666;
|
|
|
background: #fff;
|
|
|
@@ -303,6 +324,7 @@ export default {
|
|
|
|
|
|
.card-panel-num {
|
|
|
font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|