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

fix: 搜索组件样式调整

Browse Source
This commit is contained in:
chenjinsong
2023-11-16 19:45:43 +08:00
parent ee05f47f2d
commit 3b2eaf3851
7 changed files with 67 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/assets/css/components/components/advancedSearch/advanced-search2.scss
View File

@@ -3,60 +3,67 @@
height: 100%;
.search__suffixes {
height: 38px;
&.entity-explorer-home {
margin-right: 1px;
color: #3976CB;
&.search__suffixes--text-mode, &.search__suffixes--tag-mode {
.search__suffix:last-of-type {
width: unset;
height: unset;
margin-right: 12px;
background-color: transparent;
.el-icon-search {
color: #3976CB;
}
}
}
}
&.search__suffixes--text-mode, &.search__suffixes--tag-mode {
position: absolute;
display: flex;
align-items: center;
top: 10px;
right: 10px;
top: 1px;
right: 0;
.search__suffix {
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
border-radius: 0 2px 2px 0;
.cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
color: #A6AAAE;
font-size: 18px;
}
.el-icon-search {
color: #3976CB;
font-size: 22px;
}
&:hover {
cursor: pointer;
}
&:last-of-type {
margin-right: 4px;
margin-right: 0;
width: 41px;
height: 38px;
line-height: 39px;
background: #38ACD2;
.el-icon-search {
font-size: 22px;
color: #fff;
}
}
}
.search__suffix-close {
.el-icon-error {
font-size: 17px;
color: #C4C4C4;
margin-right: 12px;
cursor: pointer;
}
}
.entity-explorer-search {
color: #3976CB;
}
.margin-r-12 {
margin-right: 12px;
}
.new-search__suffix {
width: 41px;
height: 41px;
line-height: 41px;
background: #38ACD2;
text-align: center;
margin-top: -10px;
margin-right: -10px;
.el-icon-search {
color: #fff !important;
margin-top: 9px !important;
}
}
.my-popper-class .el-popper__arrow {
display: none;
}
@@ -66,24 +73,22 @@
background: #fff;
}
}
/*.search-tip--error {
font-size: 14px;
color: #F56C6C;
}*/
}
.advanced-search--show-list .CodeMirror, .advanced-search--show-list .tag-search {
border: none;
.detections {
.tag-search, .CodeMirror {
border: 1px solid #E2E5EC;
}
}
.tag-search {
display: flex;
align-items: center;
height: 40px;
overflow: auto hidden;
border: 1px solid #CECECE;
border-radius: 2px;
padding-left: 10px;
padding-right: 80px;
background-color: white;
border: 1px solid #DEDEDE;
&::-webkit-scrollbar {
width: 8px;

18
src/assets/css/components/views/entityExplorer/search/explorer-search.scss
View File

@@ -35,9 +35,8 @@
max-width: unset;
}
.explorer-search__input__border {
border: 1px #DEDEDE solid;
height: 43px;
.explorer-search__input--border .CodeMirror {
border: 1px solid #DEDEDE;
}
}
.search-symbol-inline {
@@ -88,6 +87,7 @@
.search__history {
position: absolute;
top: 6px;
display: flex;
padding: 10px 0 0 0;
flex-direction: column;
@@ -183,6 +183,7 @@
left: 196px;
top: 44px;
.search__history {
top: 6px;
max-width: 756px;
margin-left: -196px;
.history__items-new {
@@ -216,7 +217,7 @@
}
.explorer-search__foot-list .explorer-search__block {
margin-left: -196px;
top: -42px;
top: -44px;
}
.explorer-search__foot .explorer-search__block {
margin-left: 0;
@@ -224,9 +225,12 @@
}
.explorer-search__block {
position: absolute;
padding: 10px 15px;
padding-left: 15px;
height: 39px;
display: flex;
align-items: center;
cursor: pointer;
z-index: 1;
i {
font-size: 20px;
@@ -235,9 +239,9 @@
.search-dividing-line {
width: 1px;
height: 30px;
height: 26px;
background: #DEDEDE;
margin-left: 15px;
margin-top: -5px;
margin-top: 2px;
}
}

6
src/components/advancedSearch/TagMode.vue
View File

@@ -90,7 +90,7 @@
</template>
</div>
<div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div>
<div class="search__suffixes search__suffixes--tag-mode search__suffixes--tag-mode__block">
<div class="search__suffixes search__suffixes--tag-mode search__suffixes--tag-mode__block" :class="showList ? '' : 'entity-explorer-home'">
<span class="search__suffix">
<el-popover
popper-class="my-popper-class"
@@ -103,10 +103,10 @@
</template>
</el-popover>
</span>
<span v-show="metaList.length>0" class="search__suffix-close" @click="cleanMetaList">
<span v-show="metaList.length>0" class="search__suffix search__suffix-close" @click="cleanMetaList">
<i class="el-icon-error"></i>
</span>
<span class="search__suffix" :class="showList ? 'new-search__suffix' : 'entity-explorer-search'" @click="search">
<span class="search__suffix" @click="search">
<i class="el-icon-search"></i>
</span>
</div>

16
src/components/advancedSearch/TextMode.vue
View File

@@ -4,8 +4,8 @@
cols="40"
ref="textSearch"
></textarea>
<div class="search__suffixes search__suffixes--text-mode" style="padding-left: 1px">
<div class="search__suffix">
<div class="search__suffixes search__suffixes--text-mode" :class="showList ? '' : 'entity-explorer-home'" style="padding-left: 1px">
<span class="search__suffix">
<el-popover
popper-class="my-popper-class"
placement="top"
@@ -13,16 +13,16 @@
:content="$t('entity.switchToAdvancedSearch')"
>
<template #reference>
<i class="cn-icon cn-icon-filter margin-r-12" @click="changeMode"></i>
<i class="cn-icon cn-icon-filter" @click="changeMode"></i>
</template>
</el-popover>
</div>
<div v-show="isCloseIcon" class="search__suffix-close" @click="cleanParams">
</span>
<span v-show="isCloseIcon" class="search__suffix search__suffix-close" @click="cleanParams">
<i class="el-icon-error"></i>
</div>
<div class="search__suffix" :class="showList ? 'new-search__suffix' : 'entity-explorer-search'" @click="search">
</span>
<span class="search__suffix" @click="search">
<i class="el-icon-search"></i>
</div>
</span>
</div>
</template>

6
src/views/detections/DetectionSearch.vue
View File

@@ -13,8 +13,8 @@
@search="search"
></advanced-search>
</div>
<div class="explorer-search__foot-list" style="margin-top: -2px;" v-ele-click-outside="esc">
<div style="position: absolute;" class="explorer-search__block" @click="triggerHistory">
<div class="explorer-search__foot-list" v-ele-click-outside="esc">
<div class="explorer-search__block" @click="triggerHistory">
<i class="cn-icon cn-icon-time"></i>
<div class="search-dividing-line"></div>
</div>
@@ -26,7 +26,7 @@
scrollbar-always-on="false"
@row-click="selectHistory"
style="overflow-x: unset"
empty-text=""
empty-text=" "
>
<el-table-column prop="str" :label="$t('overall.expression')" min-width="560" />
<el-table-column prop="date" :label="$t('overall.time')" sortable width="200">

3
src/views/detections/Index.vue
View File

@@ -21,13 +21,12 @@
:end-time="timeFilter.endTime"/>
</div>
</div>
<div style="width: 100%;padding-bottom: 47px;">
<div style="width: 100%; padding-bottom: 50px;">
<chart-tabs :data="tabsData" router></chart-tabs>
</div>
<!-- 搜索组件 -->
<detection-search
class="detection-border"
ref="search"
:page-type="pageType"
@search="search"

11
src/views/entityExplorer/search/ExplorerSearch.vue
View File

@@ -2,7 +2,7 @@
<div class="explorer-search">
<div class="explorer-search__title" v-show="!showList">{{$t('search.title')}}</div>
<div class="explorer-search__input-case" :class="{'explorer-search__input-case--question-mark-in-line': showList}">
<div class="explorer-search__input explorer-search__input__border entity__search">
<div class="explorer-search__input explorer-search__input--border entity__search">
<advanced-search
ref="search"
:column-list="columnList"
@@ -22,15 +22,6 @@
<i class="cn-icon cn-icon-time"></i>
<div class="search-dividing-line"></div>
</div>
<!-- <div class="foot__item" @click="triggerHistory">-->
<!-- <i class="el-icon-arrow-right" :class="{ 'arrow-rotate': showHistory }" style="padding-right: 5px;"></i>-->
<!-- <span>{{$t('search.searchHistory')}}</span>-->
<!-- </div>-->
<!-- <div class="foot__item">-->
<!-- &lt;!&ndash; <span @click="search">{{$t('overall.explore')}}</span>-->
<!-- <el-divider direction="vertical"></el-divider>-->
<!-- <span>{{$t('overall.help')}}</span>&ndash;&gt;-->
<!-- </div>-->
<transition name="el-zoom-in-top">
<div class="search__history" v-if="showHistory">
<div class="history__items-new">