diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 70ba5d95..c483354d 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -3,24 +3,25 @@
     <div class="dashboard-container">
       <div class="sudoku_row" >
         <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">
-          <div>
-            <el-badge :value="sudoku.value">
-              <svg-icon :icon-class="sudoku.icon" :style="{color:Color(index)}"/>
-              <router-link :to="sudoku.router">{{ sudoku.name }}</router-link>
+        <el-divider content-position="right" style="margin:24px"/>
+        <div v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item" style="background: white;border: 2px solid rgb(208,222,234)">
+          <router-link :to="sudoku.router" style="width: 100%">
+            <el-badge :value="sudoku.value" style="width: 100%;text-align:center">
+              <svg-icon :icon-class="sudoku.icon" :style="{color:colors[index]}" style="width: 25px;height: 25px"/>
+              <h2 :style="{color:colors[index]}" style="margin: 0px;height: 30px;display: inline-block;line-height: 30px">{{ sudoku.name }}</h2>
             </el-badge>
-          </div>
-        </el-card>
-        <div v-for="(value1,index1) in fathers" :key="index1" style="width:100%">
+          </router-link>
+        </div>
+
+        <div v-for="(value1,index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
           <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"/>
+            <svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
             {{ 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_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 shadow="hover" class="sudoku_item1" style="height:130px;width:175px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4);border: 2px solid rgb(208,222,234)">
+              <svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
+              <h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ value2.title }}</h4>
             </el-card>
           </router-link>
         </div>
@@ -37,6 +38,7 @@ export default {
   name: 'Dashboard',
   data() {
     return {
+      colors: ['rgb(162,126,253)', 'rgb(254,178,0)', 'rgb(66,222,144)', 'rgb(68,176,254)', 'rgb(255,87,116)'],
       sudokus: [],
       curSelect: null,
       number: '',
@@ -174,13 +176,13 @@ export default {
   .sudoku_item{
     margin-top: 24ps;
     margin-bottom: 20px;
-    margin-left: 20px;
+    margin-right: 20px;
     border: 0 solid red;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    width:15%;
+    width:240px;
     height: 80px;
     /*padding-top: 20px;*/
     /*padding-bottom: 10px;*/
@@ -203,12 +205,11 @@ export default {
     flex-direction: column;
     width:15%;
     height: 80px;
-    padding-top: 20px;
-    margin: 20px;
+    padding-top: 30px;
     /*padding-bottom: 10px;*/
   }
   .sudoku_item1:hover {
-    border: 2px solid white;
+    border: 2px solid rgb(135,187,224);
   }
   .sudoku_item1 img{
     margin-bottom: 3px;