CN-971 fix: 调整卡片布局为grid

src/assets/css/components/views/setting/knowledgeBase.scss

@@ -44,8 +44,8 @@
         align-items: center;
         display: flex;
         background: #F7F7F7;
-        box-shadow: 0px 1px 0px 0px rgba(226,229,236,1);
+        box-shadow: 0 1px 0 0 rgba(226,229,236,1);
-        border-radius: 4px 4px 0px 0px;
+        border-radius: 4px 4px 0 0;
         font-size: 14px;
         color: #353636;
         font-weight: 500;
@@ -54,7 +54,7 @@
       .knowledge-filter {
         display: flex;
         flex-direction: column;
-        margin-bottom: 0px;
+        margin-bottom: 0;
         .filter__header {
           display: flex;
           flex: 0 0 32px;
@@ -65,7 +65,7 @@
           margin-top:15px;
           span {
             font-size: 14px;
-            padding-left: 0px;
+            padding-left: 0;
           }
           i {
             font-size: 12px;
@@ -89,7 +89,7 @@
           }
         }
         .filter__body {
-          padding: 0px 0 0 20px;
+          padding: 0 0 0 20px;
 
           .el-checkbox-group {
             display: flex;
@@ -260,38 +260,47 @@
           }
           .top-tool-btn {
             border-left: none;
-            border-radius: 0px 2px 2px 0px !important;
+            border-radius: 0 2px 2px 0 !important;
           }
           .top-tool-btn--search:hover {
             border-left: none !important;
-            border-radius: 0px 2px 2px 0px !important;
+            border-radius: 0 2px 2px 0 !important;
           }
           .top-tool-btn--search:focus {
             border-left: none !important;
-            border-radius: 0px 2px 2px 0px !important;
+            border-radius: 0 2px 2px 0 !important;
           }
         }
       }
       .cards {
-        display: flex;
+        /*display: flex;
         flex-flow:row wrap;
         margin-bottom:38px;
         margin-top: 30px;
+        */
         width: 100%;
         height:calc(100% - 152px);
         overflow-y:auto;
+        padding-right: 2px;
+
+        .el-checkbox-group {
+          display: grid;
+          grid-template-rows: repeat(auto-fill, 218px);
+          grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
+          grid-gap: 30px;
+        }
         .card-selected{
-          box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.1);
+          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
           border: 1px solid rgba(197,197,197,1) !important;
         }
         .card-item {
           background: #FFFFFF;
           border: 1px solid rgba(226,229,236,1);
           border-radius: 4px;
-          width:282px;
+          /*width:282px;
-          height:218px;
           margin-bottom:30px;
-          margin-right:30px;
+          margin-right:30px;*/
+          height:218px;
           display:flex;
           flex-direction:column;
 
@@ -442,7 +451,7 @@
               padding-left:11px;
               padding-right:11px;
               background: rgba(56,172,210,0.10);
-              box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
+              box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
               border-radius: 10px;
               font-size: 12px;
               color: #046ECA;
@@ -453,12 +462,12 @@
           }
         }
         .card-item:hover{
-          box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.1);
+          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
         }
         .card-item__enable {
           background: #FFFFFF;
           border: 1px solid rgba(226,229,236,1);
-          box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.1);
+          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
           border-radius: 4px;
         }
       }
@@ -466,7 +475,7 @@
         height:56px;
         width:100%;
         background: #FFFFFF;
-        box-shadow: 0px -1px 4px 0px rgba(0,0,0,0.07);
+        box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.07);
       }
     }
   }
@@ -883,7 +892,7 @@
   margin-left: 10px;
   background: rgb(245, 248, 250);
   border: 1px #DEDEDE solid;
-  padding: 0px !important;
+  padding: 0 !important;
   box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
   border-radius: 2px;
   font-family:NotoSansHans-Medium !important;
@@ -973,7 +982,7 @@
     min-height:52px;
     border-top:1px solid #eee;
     box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
-    padding:11px 0px 12px!important;
+    padding:11px 0 12px!important;
     .el-button {
       padding:8px 21px !important;
       line-height: 12px;

src/components/table/setting/KnowledgeBaseTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-checkbox-group v-model="checkList" @change="" style="display:flex;flex-flow:row wrap;align-content: flex-start;">
+  <el-checkbox-group v-model="checkList">
     <div @click="isSelectedStatus && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.id" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
       <div class="card-content">
         <div class="card-title">

src/views/charts2/ChartList.vue

@@ -119,7 +119,7 @@ export default {
         const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
         if (overviewAppChart) {
           this.$nextTick(() => {
-            this.resizeAppChart()
+            this.handleDynamicChartHeight()
           })
         }
       }