CN-1096 fix: 调整布局

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

@@ -67,7 +67,7 @@
 .knowledge-base-built-in__content {
   display:flex;
   flex-direction:row;
-  padding:12px 20px 20px 20px;
+  padding:12px 0 20px 20px;
   height:calc(100% - 52px);
   .list-card {
     display:flex;
@@ -106,16 +106,33 @@
         box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
         border: 1px solid rgba(197,197,197,1) !important;
       }
-      .card-item {
+      .card-box {
+        display: inline-block;
         background: #FFFFFF;
+        padding-bottom: 16px;
+        padding-right: 16px;
+        height: 274px;
+
+        @media only screen  and (min-width: 1024px) {
+          width: 25%;
+        }
+        @media only screen  and (min-width: 1440px) {
+          width: 20%;
+        }
+        @media only screen  and (min-width: 1920px) {
+          width: 16.65%
+        }
+        @media only screen  and (min-width: 2560px) {
+          width: 12.5%
+        }
+      }
+
+      .card-item {
+        display: flex;
+        flex-direction: column;
         border: 1px solid rgba(226,229,236,1);
         border-radius: 4px;
-        margin-bottom:16px;
+        height: 100%;
-        margin-right:16px;
-        height:258px;
-        width:300px;
-        display:flex;
-        flex-direction:column;
         .card-content {
           height:calc(100% - 32px);
           padding:15px;
@@ -245,7 +262,7 @@
             color: #717171;
             line-height: 18px;
             font-weight: 400;
-            margin-bottom:0px;
+            margin-bottom:0;
             max-height:88px;
 
             overflow: hidden;

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -2,40 +2,43 @@
   <template v-if="!isNoData">
     <div class="card-type-title" v-if="aiTaggingList.length > 0">{{$t('knowledgeBase.intelligenceLearning')}}</div>
     <el-checkbox-group v-model="checkList" >
-      <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in aiTaggingList" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+      <div class="card-box" v-for="data in aiTaggingList" :key="data.knowledgeId">
-        <div class="card-content">
+        <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
-          <div class="card-operate">
+          <div class="card-content">
-            <el-switch v-model="data.status"
+            <div class="card-operate">
-                       class="card-enable"
+              <el-switch v-model="data.status"
-                       active-color="#38ACD2"
+                         class="card-enable"
-                       inactive-color="#C0CEDB"
+                         active-color="#38ACD2"
-                       :active-value="1"
+                         inactive-color="#C0CEDB"
-                       :inactive-value="0"
+                         :active-value="1"
-                       @change="changeStatus($event,data.knowledgeId)"
+                         :inactive-value="0"
-            >
+                         @change="changeStatus($event,data.knowledgeId)"
-            </el-switch>
+              >
+              </el-switch>
+            </div>
+            <div class="card-icon">
+              <i class="cn-icon-add-knowledge-base cn-icon" ></i>
+            </div>
+            <div class="card-title">
+              <div class="card-title-name" :title="data.name">{{data.name}}</div>
+            </div>
+            <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
           </div>
-          <div class="card-icon">
+          <div class="card-operate__footer">
-            <i class="cn-icon-add-knowledge-base cn-icon" ></i>
+            <button v-if="data.showUpdate"
+                    :title="$t('overall.update')" class="top-tool-btn--update"
+                    @click="jumpToUpdatePage(data,true)">
+              <i class="cn-icon-update-knowledge-base cn-icon"></i>
+              <span>{{$t('overall.update')}}</span>
+            </button>
           </div>
-          <div class="card-title">
-            <div class="card-title-name" :title="data.name">{{data.name}}</div>
-          </div>
-          <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
-        </div>
-        <div class="card-operate__footer">
-          <button v-if="data.showUpdate"
-                  :title="$t('overall.update')" class="top-tool-btn--update"
-                  @click="jumpToUpdatePage(data,true)">
-            <i class="cn-icon-update-knowledge-base cn-icon"></i>
-            <span>{{$t('overall.update')}}</span>
-          </button>
         </div>
       </div>
     </el-checkbox-group>
     <div class="card-type-title" style="margin-top:4px;"  v-if="websketchList.length > 0">{{$t('knowledgeBase.websketchIntegration')}}</div>
     <el-checkbox-group v-model="checkList" >
-      <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in websketchList" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+      <div class="card-box" v-for="data in websketchList" :key="data.knowledgeId">
+        <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
         <div class="card-content">
           <div class="card-icon">
             <i class="cn-icon-add-knowledge-base cn-icon" ></i>
@@ -53,10 +56,11 @@
           </button>
         </div>
       </div>
+      </div>
     </el-checkbox-group>
   </template>
 
-  <div class="table-no-data" v-else="isNoData">
+  <div class="table-no-data" v-else>
     <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
   </div>