gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改chart比较的动画

Browse Source
This commit is contained in:
zhangyu
2021-03-31 17:19:40 +08:00
parent f085e6a67b
commit 52f825c87f
1 changed files with 65 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
nezha-fronted/src/components/common/multipleTime.vue
View File

@@ -60,7 +60,13 @@
} }
.compare-box{ .compare-box{
line-height: 50px; line-height: 50px;
margin-right: 20px; }
.compare-box .nz-icon-compare{
border-right: none;
}
.calendar{
width: 125px;
overflow: hidden;
} }
.nz-icon-compare{ .nz-icon-compare{
background: #FFFFFF; background: #FFFFFF;
@@ -69,19 +75,17 @@
padding: 6px 8px; padding: 6px 8px;
} }
.multiple-time-datepicker-enter-active { .multiple-time-datepicker-enter-active {
transform-origin: 100% 50%;
animation: bounce-in .6s; animation: bounce-in .6s;
} }
.multiple-time-datepicker-leave-active { .multiple-time-datepicker-leave-active {
transform-origin: 100% 50%;
animation: bounce-in .6s reverse; animation: bounce-in .6s reverse;
} }
@keyframes bounce-in { @keyframes bounce-in {
0% { 0% {
transform: scaleX(0); width: 0;
} }
100% { 100% {
transform: scale(1); width: 125px;
} }
} }
</style> </style>
@@ -109,7 +113,7 @@
<div class="multiple-time-box"> <div class="multiple-time-box">
<div :class="showDropdown?'compare-box':''"><i class="nz-icon nz-icon-compare" @click="changeShowDropdown" /></div> <div :class="showDropdown?'compare-box':''"><i class="nz-icon nz-icon-compare" @click="changeShowDropdown" /></div>
<transition name="multiple-time-datepicker"> <transition name="multiple-time-datepicker">
<div class="calendar top-tools" id="panel-calender" v-show="showDropdown"> <div ref="calendar" class="calendar top-tools" id="panel-calender" v-show="showDropdown">
<el-date-picker prefix-icon=" " size="mini" ref="calendar" <el-date-picker prefix-icon=" " size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm:ss" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime" format="yyyy/MM/dd HH:mm:ss" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime"
popper-class="panel-time-picker-popper" popper-class="panel-time-picker-popper"
@@ -428,10 +432,12 @@ export default {
this.showDropdown = !this.showDropdown this.showDropdown = !this.showDropdown
if (!this.showDropdown) { if (!this.showDropdown) {
this.searchTime = [] this.searchTime = []
setTimeout(() => {
this.showTime = this.nowTimeType = { this.showTime = this.nowTimeType = {
id: 12, id: 12,
text: this.$t('dashboard.panel.noDate') text: this.$t('dashboard.panel.noDate')
} }
}, 600)
this.$emit('change', this.searchTime) this.$emit('change', this.searchTime)
} else { } else {
this.searchTime = [] this.searchTime = []