gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chenjinsong
2023-05-10 11:20:31 +08:00
parent e08a59d6cf
commit 5a6b464aa9
3 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/assets/css/components/views/setting/knowledgeBase.scss
View File

@@ -44,8 +44,8 @@
align-items: center;
display: flex;
background: #F7F7F7;
box-shadow: 0px 1px 0px 0px rgba(226,229,236,1);
border-radius: 4px 4px 0px 0px;
box-shadow: 0 1px 0 0 rgba(226,229,236,1);
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;
height:218px;
/*width:282px;
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;

2
src/components/table/setting/KnowledgeBaseTable.vue
View File

@@ -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">

2
src/views/charts2/ChartList.vue
View File

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