style(index.vue): 首页样式-再次修改

src/assets/styles/element-ui.scss

@@ -83,34 +83,18 @@
   box-sizing: content-box;
 }
 
-.el-menu--collapse
-  > div
-  > .el-submenu
-  > .el-submenu__title
-  .el-submenu__icon-arrow {
+.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
   display: none;
 }
 
-.el-dropdown .el-dropdown-link{
+.el-dropdown .el-dropdown-link {
   color: var(--el-color-primary) !important;
 }
 
-.el-select{
+.el-select {
   width: 215px;
 }
 
-.el-tabs{
+.el-tabs {
   flex: 1;
 }
-
-.el-row{
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-
-  .el-col:nth-child(1){
-    padding-left: 0 !important;
-  }
-  .el-col:nth-last-child(1){
-    padding-right: 0 !important;
-  }
-}
\ No newline at end of file

src/assets/styles/index.scss

@@ -126,6 +126,7 @@ aside {
   flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 
 .components-container {

src/components/CommonMenu/index.vue

 <template>
-  <el-card>
-    <div slot="header"
-      class="el-card__header">
-      <span>
-        常用菜单
-      </span>
-      <el-button class="custom"
-        type="primary"
-        link
-        @click="visible = true">
-        自定义
-      </el-button>
-    </div>
-    <div class="el-card__body">
-      <div v-for="o in commonMenuList"
-        class="item">
-        <el-button type="primary"
-          plain
-          @click="$router.push(o.path)">
-          {{ o.label }}
-        </el-button>
-      </div>
-      <div v-if="commonMenuList.length === 0">
-        <p class="none">
-          暂无常用菜单，立即
-          <a @click.prevent="visible = true">
+  <el-row :gutter="20">
+    <el-col :span="24">
+      <el-card shadow="never">
+        <div slot="header"
+          class="el-card__header">
+          <span>
+            常用菜单
+          </span>
+          <el-button class="custom"
+            type="primary"
+            link
+            @click="visible = true">
             自定义
-          </a>
-        </p>
-      </div>
-    </div>
-    <el-dialog title="编辑常用菜单"
-      v-model="visible">
-      <el-transfer ref="myTransfer"
-        v-model="selectList"
-        :data="menuList"
-        filterable
-        filter-placeholder="菜单名称"
-        @left-check-change="leftChange"
-        @right-check-change="rightChange"></el-transfer>
-    </el-dialog>
-  </el-card>
+          </el-button>
+        </div>
+        <div class="el-card__body">
+          <div v-for="o in commonMenuList"
+            class="item">
+            <el-button type="primary"
+              plain
+              @click="$router.push(o.path)">
+              {{ o.label }}
+            </el-button>
+          </div>
+          <div v-if="commonMenuList.length === 0">
+            <p class="none">
+              暂无常用菜单，立即
+              <a @click.prevent="visible = true">
+                自定义
+              </a>
+            </p>
+          </div>
+        </div>
+        <el-dialog title="编辑常用菜单"
+          v-model="visible">
+          <el-transfer ref="myTransfer"
+            v-model="selectList"
+            :data="menuList"
+            filterable
+            filter-placeholder="菜单名称"
+            @left-check-change="leftChange"
+            @right-check-change="rightChange"></el-transfer>
+        </el-dialog>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup>
@@ -84,30 +88,41 @@ const rightChange = (val) => {
 
 <style scoped
   lang="scss">
-  .el-card__header {
-    .custom {
-      float: right;
-      padding: 3px 0;
+  .el-card {
+    margin-top: 20px;
+    width: 100%;
+
+    .el-card__header {
+      .custom {
+        float: right;
+        padding: 3px 0;
+      }
     }
-  }
-
-  .el-card__body {
-    padding-left: 15px !important;
 
-    .item {
-      display: inline-block;
-      margin-right: 20px;
+    .el-card__body {
+      padding-left: 15px !important;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: flex-start;
+      gap: 20px;
+
+      .item {
+        display: inline-block;
+        /* margin: 0 20px 20px 0; */
+      }
     }
-  }
 
-  .none {
-    font-size: 14px;
+    .none {
+      font-size: 14px;
 
-    a {
-      color: #337ab7;
+      a {
+        color: #337ab7;
+      }
     }
   }
 
+
   /* 穿梭框样式重写 */
   ::v-deep(.el-dialog__body) {
     display: flex;
@@ -176,7 +191,8 @@ const rightChange = (val) => {
     ::v-deep(.el-dialog) {
       width: 100%;
     }
-    ::v-deep(.el-transfer){
+
+    ::v-deep(.el-transfer) {
       flex-direction: column;
     }
   }

src/views/dashboard/LineChart.vue

@@ -40,8 +40,8 @@ const setOptions = () => {
       }
     },
     grid: {
-      left: 10,
-      right: 10,
+      left: 15,
+      right: 15,
       bottom: 20,
       top: 30,
       containLabel: true

src/views/dashboard/PanelGroup.vue

 <template>
-  <el-row class="panel-group" :gutter="20">
+  <el-row class="panel-group"
+    :gutter="20">
     <el-col :xs="12"
       :sm="12"
       :lg="6"
@@ -112,6 +113,10 @@ const handleSetLineChartData = (type) => {
         background: var(--el-bg-color-overlay);
         box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
         border-color: rgba(0, 0, 0, .05);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 15px 15px 15px 15px;
 
         &:hover {
           .card-panel-icon-wrapper {
@@ -153,8 +158,7 @@ const handleSetLineChartData = (type) => {
 
         .card-panel-icon-wrapper {
           float: left;
-          margin: 14px 0 0 14px;
-          padding: 16px;
+          padding: 15px;
           transition: all 0.38s ease-out;
           border-radius: 6px;
         }
@@ -165,10 +169,11 @@ const handleSetLineChartData = (type) => {
         }
 
         .card-panel-description {
-          float: right;
           font-weight: bold;
-          margin: 26px;
-          margin-left: 0px;
+          width: 25%;
+          // white-space: nowrap;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
 
           .card-panel-text {
             line-height: 18px;
@@ -190,17 +195,24 @@ const handleSetLineChartData = (type) => {
       display: none;
     }
 
-    .card-panel-icon-wrapper {
-      float: none !important;
-      width: 100%;
-      height: 100%;
-      margin: 0 !important;
-
-      .svg-icon {
-        display: block;
-        margin: 14px auto !important;
+    .card-panel {
+      justify-content: center !important;
+      align-items: center !important;
+      .card-panel-icon-wrapper {
         float: none !important;
+        // width: 100%;
+        // height: 100%;
+        margin: 0 !important;
+        padding: 5px 15px !important;
+
+        .svg-icon {
+          display: block;
+          margin: 14px auto !important;
+          float: none !important;
+        }
       }
     }
+
+
   }
 </style>

src/views/index.vue

 <template>
   <div class="dashboard-editor-container app-container">
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
-    <common-menu class="row"></common-menu>
-    <el-row :gutter="32"
+    <common-menu />
+    <el-row :gutter="20"
       class="row">
       <el-col :xs="24"
         :sm="24"
@@ -26,8 +26,11 @@
         </div>
       </el-col>
     </el-row>
-    <el-row class="line-chart row">
-      <line-chart :chartData="lineChartData" />
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <line-chart class="line-chart"
+          :chartData="lineChartData" />
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -67,18 +70,18 @@ const handleSetLineChartData = (type) => {
 <style lang="scss"
   scoped>
   .dashboard-editor-container {
-    .row {
-      margin-top: 20px;
-    }
+
 
     .chart-wrapper {
       background: var(--el-bg-color-overlay);
       padding: 16px 16px 0;
+      margin-top: 20px;
     }
 
     .line-chart {
       background: var(--el-bg-color-overlay);
       padding: 16px 16px 0;
+      margin-top: 20px;
     }
 
     ::v-deep(.el-row) {