CN-1096 fix: 调整布局

This commit is contained in:
chenjinsong
2023-08-10 16:14:04 +08:00
parent 4bf68a9983
commit c6b7c725a0
2 changed files with 58 additions and 37 deletions

View File

@@ -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;
margin-right:16px;
height:258px;
width:300px;
display:flex;
flex-direction:column;
height: 100%;
.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;

View File

@@ -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-content">
<div class="card-operate">
<el-switch v-model="data.status"
class="card-enable"
active-color="#38ACD2"
inactive-color="#C0CEDB"
:active-value="1"
:inactive-value="0"
@change="changeStatus($event,data.knowledgeId)"
>
</el-switch>
<div class="card-box" v-for="data in aiTaggingList" :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-operate">
<el-switch v-model="data.status"
class="card-enable"
active-color="#38ACD2"
inactive-color="#C0CEDB"
:active-value="1"
:inactive-value="0"
@change="changeStatus($event,data.knowledgeId)"
>
</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">
<i class="cn-icon-add-knowledge-base cn-icon" ></i>
<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 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>