From 1348c11eceeecc172e2a069b67e197de90aa5827 Mon Sep 17 00:00:00 2001
From: wangqi <magical1908@outlook.com>
Date: 星期四, 11 三月 2021 10:00:32 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/panel/LegendPanel.vue | 82 ++++++++++++++++++++--------------------
1 files changed, 41 insertions(+), 41 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index f037a64..a70ef75 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -6,13 +6,15 @@
</div>
<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">
- <img :src='ite.legendImage' alt=''>
- <span>{{ ite.legendContent }}</span>
- </li>
+ <div v-for="(ite,inde) in item.items" :key="inde">
+ <li>
+ <img :src='ite.legendImage' alt=''>
+ <span>{{ ite.legendContent }}</span>
+ </li>
+ </div>
</ul>
<div :class="index === 5 ? '':'under-line'"></div>
</div>
@@ -108,7 +110,7 @@
},
{
legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '娌圭敯浼佷笟'
+ legendContent: '娌圭敯浼佷笟 '
},
{
legendImage: '../.././assets/images/map-pages/setting.png',
@@ -206,11 +208,7 @@
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
- if (this.legendControl === false) {
- this.legendControl = true
- } else {
- this.legendControl = false
- }
+ this.legendControl = !this.legendControl
}
}
}
@@ -232,7 +230,7 @@
.legend-icon {
width: 3.4rem;
height: 1.6rem;
- border-radius: .3rem;
+ border-radius: 0.3rem;
background: white;
text-align: center;
}
@@ -240,35 +238,33 @@
@keyframes bounce-in {
0% {
transform: scale(0);
- }
- 50% {
- transform: scale(1.2);
+ opacity: 0.3;
}
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 bottom;
+ animation: bounce-in .5s reverse;
}
.legend-content {
position: absolute;
- right: 8rem;
+ right: 0.3rem;
bottom: 3rem;
width: 30rem;
- height: 30rem;
border-radius: 1rem;
background: #3c7699;
- .legend-content-centent {
+ .legend-content-box {
p {
text-align: center;
color: #ffffff;
@@ -281,24 +277,32 @@
list-style: none;
display: flex;
flex-wrap: wrap;
- padding-inline: 20px 0;
- margin-block: 0;
+ padding: 0;
+ padding-inline: 0;
- li {
+ div {
width: 25%;
- height: 1.5rem;
display: flex;
- align-items: center;
+ justify-content: center;
+ margin: 0.1rem 0;
- img {
- height: 18px;
- width: 18px;
- }
+ li {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ margin-left: 15px;
+ margin-right: 15px;
- span {
- font-size: 12px;
- color: white;
- //width: 80%;
+ img {
+ height: 18px;
+ width: 18px;
+ }
+
+ span {
+ width: 80px;
+ font-size: 12px;
+ color: white;
+ }
}
}
}
@@ -307,13 +311,9 @@
.under-line {
height: 2px;
background: #7bc5ef;
- margin-block-start: 0.5rem;
+ margin-block-start: 0;
margin-block-end: 0;
}
-
- //.under-line:last-child {
- // display: none;
- //}
}
}
</style>
--
Gitblit v1.8.0