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

style: 公用 header 时间选择器和刷新部分样式调整

Browse Source
This commit is contained in:
@changcode
2022-07-15 18:06:50 +08:00
parent 076cb932f7
commit 9c0c524d47
4 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/css/components/components/common/TimeRange/date-time-range.scss
View File

@@ -1,6 +1,7 @@
.date-range-box {
font-size: 14px;
border-radius: 2px;
margin-right: 10px;
display: flex;
cursor: pointer;
@@ -31,12 +32,12 @@
padding: 0 10px;
display: flex;
justify-content: space-around;
height: 26px;
background: #FFFFFF;
border: 1px solid #E7EAED;
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
border: 1px solid #DEDEDE;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
line-height: 26px;
height: 28px;
line-height: 28px;
transition: width .3s;
.cn-icon {
@@ -60,10 +61,19 @@
padding: 14px 0 7px 8px;
}
.calendar-popover-text.calendar-popover__small {
i {
font-weight: 300;
color: #575757;
}
}
.calendar-popover-text {
white-space: nowrap;
display: inline-block;
margin: 0 5px;
.cn-icon-Data {
color: #575757;
}
}
.calendar-popover-text:first-of-type {

22
src/assets/css/components/components/common/TimeRange/time-refresh.scss
View File

@@ -4,8 +4,9 @@
.cn-icon-refresh{
font-size: 14px;
color: #575757;
}
.cn-icon-dropdown{
.cn-icon-dropdown {
font-size: 14px;
transition: all .3s;
display: inline-block;
@@ -17,7 +18,8 @@
position: absolute;
z-index: 2;
background: #FFFFFF;
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.77);
border: 1px solid #DEDEDE;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
top: 30px;
right: 0;
@@ -47,8 +49,22 @@
color: #0091FF;
}
}
.el-button--mini.cn-button {
span {
font-size: 14px;
color: #2C72C6;
font-weight: 400;
.cn-button-label {
padding: 0 8px 0 3px;
}
i {
font-size: 14px;
color: #575757;
}
}
}
.el-button--mini{
padding: 4px 6px !important;
min-height: 26px !important;
min-height: 28px !important;
}
}

6
src/components/common/TimeRange/DateTimeRange.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
<div @click="showDropdown" class="date-range-text">
<div class="calendar-popover-text"><i class="cn-icon cn-icon-time"></i></div>
<div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
<div class="calendar-popover-text" style="display: flex" v-if="isCustom">
<div class="calendar-popover-text">{{ dateFormatByAppearance(startTime) }}</div>
<div class="calendar-popover-text"> -</div>
@@ -10,8 +10,8 @@
<div class="calendar-popover-text" v-else>
{{ showDetail }}
</div>
<div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down"
:class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
<div class="calendar-popover-text calendar-popover__small"><i class="cn-icon cn-icon-dropdown"
:class="dropdownFlag ? 'cn-icon-up' : ''"></i></div>
</div>
<transition name="el-zoom-in-top">
<div v-if="dropdownFlag" class="date-range-panel">

10
src/components/common/TimeRange/TimeRefresh.vue
View File

@@ -2,9 +2,9 @@
<div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
<span>
<el-button-group size="mini">
<el-button size="mini" @click="$emit('change')"><i class="cn-icon cn-icon-refresh"></i></el-button>
<el-button size="mini" @click="showRefreshList">
{{interLabel}}
<el-button size="mini" @click="$emit('change')"><i class="cn-icon cn-icon-refresh1"></i></el-button>
<el-button class="cn-button" size="mini" @click="showRefreshList">
<span class="cn-button-label" v-if="interLabel">{{interLabel}}</span>
<i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
</el-button>
</el-button-group>
@@ -12,8 +12,8 @@
<transition name="el-zoom-in-top">
<div v-if="dropdownShow" class="refresh-list">
<div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
{{item.label}}
<i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
{{item.label}}
<i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
</div>
</div>
</transition>