修改首页

src/views/index.vue

@@ -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;
@@ -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;
       }
     }
   }