From 17e7836b1d0a7bd1a51d44ae071a88423a9f9370 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 08 三月 2021 17:57:16 +0800
Subject: [PATCH] 添加工具栏功能
---
src/components/panel/LegendPanel.vue | 44 ++++++++++++++++++++++----------------------
1 files changed, 22 insertions(+), 22 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index f037a64..70529c2 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -4,9 +4,9 @@
<i class="el-icon-more-outline"></i>
<span>鍥句緥</span>
</div>
- <transition name="fade">
+ <`transition` name="fade">
<div class="legend-content" v-show="legendControl">
- <div class="legend-content-centent" v-for="(item,index) in legendContents" :key="index">
+ <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
<p>{{ item.title }}</p>
<ul>
<li v-for="(ite,inde) in item.items" :key="inde">
@@ -206,11 +206,12 @@
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
- if (this.legendControl === false) {
- this.legendControl = true
- } else {
- this.legendControl = false
- }
+ // if (this.legendControl === false) {
+ // this.legendControl = true
+ // } else {
+ // this.legendControl = false
+ // }
+ this.legendControl = !this.legendControl
}
}
}
@@ -240,35 +241,39 @@
@keyframes bounce-in {
0% {
transform: scale(0);
+ opacity: 0.3;
}
- 50% {
- transform: scale(1.2);
- }
+ //50% {
+ // transform: scale(1.1);
+ //}
100% {
transform: scale(1);
+ opacity: 1;
}
}
.fade-enter-active {
- transform-origin: left center;
- animation: bounce-in 1s;
- }g
+ transform-origin: right bottom;
+ animation: bounce-in .5s;
+ }
.fade-leave-active {
- transform-origin: left center;
- animation: bounce-in 1s reverse;
+ //transform-origin: right;
+ //animation: bounce-in 1s reverse;
+ transform-origin: right bottom;
+ animation: bounce-in .5s reverse;
}
.legend-content {
position: absolute;
- right: 8rem;
+ right: 1rem;
bottom: 3rem;
width: 30rem;
height: 30rem;
border-radius: 1rem;
background: #3c7699;
- .legend-content-centent {
+ .legend-content-box {
p {
text-align: center;
color: #ffffff;
@@ -298,7 +303,6 @@
span {
font-size: 12px;
color: white;
- //width: 80%;
}
}
}
@@ -310,10 +314,6 @@
margin-block-start: 0.5rem;
margin-block-end: 0;
}
-
- //.under-line:last-child {
- // display: none;
- //}
}
}
</style>
--
Gitblit v1.8.0