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%; height: 100%;
.search__suffixes { .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 { &.search__suffixes--text-mode, &.search__suffixes--tag-mode {
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
top: 10px; top: 1px;
right: 10px; right: 0;
.search__suffix { .search__suffix {
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px; margin-right: 12px;
border-radius: 0 2px 2px 0;
.cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter { .cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
color: #A6AAAE; color: #A6AAAE;
font-size: 18px; font-size: 18px;
} }
.el-icon-search {
color: #3976CB;
font-size: 22px;
}
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
&:last-of-type { &: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 { .search__suffix-close {
.el-icon-error { .el-icon-error {
font-size: 17px; font-size: 17px;
color: #C4C4C4; color: #C4C4C4;
margin-right: 12px;
cursor: pointer; 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 { .my-popper-class .el-popper__arrow {
display: none; display: none;
} }
@@ -66,24 +73,22 @@
background: #fff; background: #fff;
} }
} }
/*.search-tip--error {
font-size: 14px;
color: #F56C6C;
}*/
} }
.advanced-search--show-list .CodeMirror, .advanced-search--show-list .tag-search { .detections {
border: none; .tag-search, .CodeMirror {
border: 1px solid #E2E5EC;
}
} }
.tag-search { .tag-search {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 40px;
overflow: auto hidden; overflow: auto hidden;
border: 1px solid #CECECE;
border-radius: 2px; border-radius: 2px;
padding-left: 10px; padding-left: 10px;
padding-right: 80px; padding-right: 80px;
background-color: white; background-color: white;
border: 1px solid #DEDEDE;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 8px; width: 8px;

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

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

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

@@ -90,7 +90,7 @@
</template> </template>
</div> </div>
<div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</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"> <span class="search__suffix">
<el-popover <el-popover
popper-class="my-popper-class" popper-class="my-popper-class"
@@ -103,10 +103,10 @@
</template> </template>
</el-popover> </el-popover>
</span> </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> <i class="el-icon-error"></i>
</span> </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> <i class="el-icon-search"></i>
</span> </span>
</div> </div>

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

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

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

@@ -13,8 +13,8 @@
@search="search" @search="search"
></advanced-search> ></advanced-search>
</div> </div>
<div class="explorer-search__foot-list" style="margin-top: -2px;" v-ele-click-outside="esc"> <div class="explorer-search__foot-list" v-ele-click-outside="esc">
<div style="position: absolute;" class="explorer-search__block" @click="triggerHistory"> <div class="explorer-search__block" @click="triggerHistory">
<i class="cn-icon cn-icon-time"></i> <i class="cn-icon cn-icon-time"></i>
<div class="search-dividing-line"></div> <div class="search-dividing-line"></div>
</div> </div>
@@ -26,7 +26,7 @@
scrollbar-always-on="false" scrollbar-always-on="false"
@row-click="selectHistory" @row-click="selectHistory"
style="overflow-x: unset" style="overflow-x: unset"
empty-text="" empty-text=" "
> >
<el-table-column prop="str" :label="$t('overall.expression')" min-width="560" /> <el-table-column prop="str" :label="$t('overall.expression')" min-width="560" />
<el-table-column prop="date" :label="$t('overall.time')" sortable width="200"> <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"/> :end-time="timeFilter.endTime"/>
</div> </div>
</div> </div>
<div style="width: 100%;padding-bottom: 47px;"> <div style="width: 100%; padding-bottom: 50px;">
<chart-tabs :data="tabsData" router></chart-tabs> <chart-tabs :data="tabsData" router></chart-tabs>
</div> </div>
<!-- 搜索组件 --> <!-- 搜索组件 -->
<detection-search <detection-search
class="detection-border"
ref="search" ref="search"
:page-type="pageType" :page-type="pageType"
@search="search" @search="search"

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

@@ -2,7 +2,7 @@
<div class="explorer-search"> <div class="explorer-search">
<div class="explorer-search__title" v-show="!showList">{{$t('search.title')}}</div> <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-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 <advanced-search
ref="search" ref="search"
:column-list="columnList" :column-list="columnList"
@@ -22,15 +22,6 @@
<i class="cn-icon cn-icon-time"></i> <i class="cn-icon cn-icon-time"></i>
<div class="search-dividing-line"></div> <div class="search-dividing-line"></div>
</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"> <transition name="el-zoom-in-top">
<div class="search__history" v-if="showHistory"> <div class="search__history" v-if="showHistory">
<div class="history__items-new"> <div class="history__items-new">