dashboard

src/views/dashboard/index.vue

@@ -1,25 +1,26 @@
 <template>
-  <el-card style="min-height:calc(100vh - 84px);background: url('../../../static/bg.jpg') no-repeat;background-size:100% 100%">
+  <el-card style="min-height:calc(100vh - 84px);background: rgb(236,243,250);background-size:100% 100%">
     <div class="dashboard-container">
       <div class="sudoku_row" >
-        <div class="dashboard-text" style="color:white">用户名：{{ name }}</div>
+        <div class="dashboard-text" style="color:black">用户名：{{ name }}</div>
         <el-divider content-position="right" style="margin:24px">消息通知</el-divider>
-        <el-card v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item ">
+        <el-card v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item">
           <div>
             <el-badge :value="sudoku.value">
-              <svg-icon :icon-class="sudoku.icon" style="" />
+              <svg-icon :icon-class="sudoku.icon" :style="{color:Color(index)}"/>
               <router-link :to="sudoku.router">{{ sudoku.name }}</router-link>
             </el-badge>
           </div>
         </el-card>
-        <el-divider content-position="right" style="margin:24px"/>
-
         <div v-for="(value1,index1) in fathers" :key="index1" style="width:100%">
-          <el-divider content-position="left" style="margin:24px">{{ value1.title }}</el-divider>
+          <div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white">
+            <svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:25px;height:25px"/>
+            {{ value1.title }}
+          </div>
           <router-link v-for="(value2,index2) in sons" v-if="value2.pid === value1.id" :key="index2" :to="value2.path">
-            <el-card shadow="hover" class="sudoku_item" style="height:150px;width:170px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4)">
-              <svg-icon :icon-class="value2.icon" :style="{color:Color(index2)}" class="bgc" style="display:block;margin: auto;border: 0 solid black;width:70px;height:70px"/><br>
-              <div style="color:black;text-align:center">{{ value2.title }}</div>
+            <el-card shadow="hover" class="sudoku_item1" style="height:150px;width:170px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4)">
+              <svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(127,172,237);display:block;margin: auto;border: 0 solid black;width:50px;height:50px"/><br>
+              <div style="color:rgb(127,172,237);text-align:center">{{ value2.title }}</div>
             </el-card>
           </router-link>
         </div>
@@ -73,7 +74,8 @@ export default {
         data.data.map(v => {
           this.fathers.push({
             id: v.id,
-            title: v.title
+            title: v.title,
+            icon: v.icon
           })
         })
       })
@@ -91,7 +93,6 @@ export default {
           name: `select * from 基础表_角色模块信息 inner join 基础表_模块信息 on 基础表_角色模块信息.id = 基础表_模块信息.id where 角色编号= ${this.token} and [path] <> '/'`
         }
       }).then(data => {
-        console.log(data)
         this.sons = []
         data.data.map(v => {
           this.sons.push({
@@ -117,7 +118,6 @@ export default {
         for (let i = 0; i < data.data.length; i++) {
           this.getMessageNum(data.data[i].消息通知来源, data.data[i].通知条件, data, i)
         }
-        console.log(this.sudokus)
       })
     },
     async getMessageNum(tableName, condition, rawData, i) {
@@ -149,15 +149,6 @@ export default {
   }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
-
-  /*.text {*/
-    /*font-size: 14px;*/
-  /*}*/
-
-  /*.item {*/
-    /*margin-bottom: 18px;*/
-  /*}*/
-
   .clearfix:before,
   .clearfix:after {
     display: table;
@@ -181,6 +172,7 @@ export default {
     flex-wrap: wrap;
   }
   .sudoku_item{
+    margin-top: 24ps;
     margin-bottom: 20px;
     margin-left: 20px;
     border: 0 solid red;
@@ -190,20 +182,42 @@ export default {
     flex-direction: column;
     width:15%;
     height: 80px;
-    /*padding-top: 10px;*/
+    /*padding-top: 20px;*/
     /*padding-bottom: 10px;*/
   }
   .sudoku_item:hover {
     border: 2px solid white;
   }
-  .opacity{
-    opacity: 0.4;
-    background: #e5e5e5;
-  }
   .sudoku_item img{
     margin-bottom: 3px;
     display: block;
   }
+  .sudoku_item1{
+    margin-top: 24ps;
+    margin-bottom: 20px;
+    margin-left: 20px;
+    border: 0 solid red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width:15%;
+    height: 80px;
+    padding-top: 20px;
+    margin: 20px;
+    /*padding-bottom: 10px;*/
+  }
+  .sudoku_item1:hover {
+    border: 2px solid white;
+  }
+  .sudoku_item1 img{
+    margin-bottom: 3px;
+    display: block;
+  }
+  .opacity{
+    opacity: 0.4;
+    background: #e5e5e5;
+  }
 .dashboard {
   &-container {
     margin: 30px;