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>
+  <el-row :gutter="20">
+    <el-col :span="24">
+      <el-card shadow="never">
         <div slot="header"
           class="el-card__header">
           <span>
@@ -41,6 +43,8 @@
             @right-check-change="rightChange"></el-transfer>
         </el-dialog>
       </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup>
@@ -84,6 +88,10 @@ const rightChange = (val) => {
 
 <style scoped
   lang="scss">
+  .el-card {
+    margin-top: 20px;
+    width: 100%;
+
     .el-card__header {
       .custom {
         float: right;
@@ -93,10 +101,15 @@ const rightChange = (val) => {
 
     .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-right: 20px;
+        /* margin: 0 20px 20px 0; */
       }
     }
 
@@ -107,6 +120,8 @@ const rightChange = (val) => {
         color: #337ab7;
       }
     }
+  }
+
 
   /* 穿梭框样式重写 */
   ::v-deep(.el-dialog__body) {
@@ -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,11 +195,15 @@ const handleSetLineChartData = (type) => {
       display: none;
     }
 
+    .card-panel {
+      justify-content: center !important;
+      align-items: center !important;
       .card-panel-icon-wrapper {
         float: none !important;
-      width: 100%;
-      height: 100%;
+        // width: 100%;
+        // height: 100%;
         margin: 0 !important;
+        padding: 5px 15px !important;
 
         .svg-icon {
           display: block;
@@ -203,4 +212,7 @@ const handleSetLineChartData = (type) => {
         }
       }
     }
+
+
+  }
 </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) {