调整首页布局

src/views/dashboard/PanelGroup.vue

@@ -1,15 +1,19 @@
 <template>
     <div class="panel-group">
-        <div class="card-panel" @click="handleClick(v)" v-for="(v,i) in menusList" :key="i">
-          <div class="card-panel-icon-wrapper" :class="`color${v.meta.colorIndex}`" :style="{color:v.meta.color}">
-            <svg-icon class-name="card-panel-icon" v-if="v.meta.icon" :icon-class="v.meta.icon"/>
-          </div>
-          <div class="card-panel-description">
-            <div class="card-panel-text">
-              {{v.meta.title}}
+      <el-row :gutter="20">
+        <el-col class="item-col" :span="2.18" v-for="(v,i) in menusList" :key="i">
+          <div class="card-panel" @click="handleClick(v)" >
+            <div class="card-panel-icon-wrapper" :class="`color${v.meta.colorIndex}`" :style="{color:v.meta.color}">
+              <svg-icon class-name="card-panel-icon" v-if="v.meta.icon" :icon-class="v.meta.icon"/>
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                {{v.meta.title}}
+              </div>
             </div>
           </div>
-        </div>
+        </el-col>
+      </el-row>
     </div>
 </template>
 
@@ -92,8 +96,13 @@ export default {
   //grid-template-columns:repeat(auto-fill, 130px);
   //grid-row-gap: 20px;
   //grid-column-gap: 20px;
-  justify-content: space-between;
+  justify-content: flex-start;
+  //flex-wrap: wrap;
+  .item-col{
+    margin: 10px 0;
+  }
   .card-panel {
+    width: 126px;
     cursor: pointer;
     font-size: 12px;
     position: relative;
@@ -102,6 +111,10 @@ export default {
     background: #fff;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
+    //margin-bottom: 20px;
+    &:last-child{
+      margin-right: 0;
+    }
     &:hover {
       .card-panel-icon-wrapper {
         color: #fff!important;

src/views/index.vue

@@ -13,11 +13,11 @@
 
 
       <!--  待办事项  -->
-      <el-col :xs="24" :sm="12" :md="13"  :lg="10">
+      <el-col :xs="24" :sm="12" :md="9"  :lg="9">
         <el-card class="card-group">
           <p class="card-title">待办事项</p>
           <el-row :gutter="20">
-            <el-col :xs="24" :sm="24" :md="12"  :lg="12" v-for="(v,i) in dataList" :key="i">
+            <el-col :xs="24" :sm="12" :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" />-->
@@ -41,10 +41,8 @@
         </el-card>
       </el-col>
 
-
-
       <!--  其他  -->
-      <el-col :xs="24" :sm="12" :md="11"  :lg="14">
+      <el-col :xs="24" :sm="12" :md="15"  :lg="15">
         <el-card class="chart-wrapper">
           <el-tabs type="border-card">
             <el-tab-pane label="通知公告">
@@ -208,7 +206,7 @@ export default {
 <style lang="scss">
 .home-container{
   .el-card__body{
-    padding: 10px 20px 20px 20px;
+    padding: 10px 20px 10px 20px;
   }
   .card-group{
     .el-card__body {