From f21ba60dd8cd2f9f021d579fe52325abd37f4af1 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期三, 10 三月 2021 17:27:34 +0800 Subject: [PATCH] 修改已知问题 --- src/components/panel/LegendPanel.vue | 62 +++++++++++++++--------------- 1 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue index 2bb4108..5412fae 100644 --- a/src/components/panel/LegendPanel.vue +++ b/src/components/panel/LegendPanel.vue @@ -9,10 +9,12 @@ <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,6 @@ methods: { // 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌 legendChange () { - // if (this.legendControl === false) { - // this.legendControl = true - // } else { - // this.legendControl = false - // } this.legendControl = !this.legendControl } } @@ -233,7 +230,7 @@ .legend-icon { width: 3.4rem; height: 1.6rem; - border-radius: .3rem; + border-radius: 0.3rem; background: white; text-align: center; } @@ -243,9 +240,6 @@ transform: scale(0); opacity: 0.3; } - //50% { - // transform: scale(1.1); - //} 100% { transform: scale(1); opacity: 1; @@ -258,18 +252,15 @@ } .fade-leave-active { - //transform-origin: right; - //animation: bounce-in 1s reverse; transform-origin: right bottom; animation: bounce-in .5s reverse; } .legend-content { position: absolute; - right: 1rem; + right: 0.3rem; bottom: 3rem; width: 30rem; - height: 30rem; border-radius: 1rem; background: #3c7699; @@ -286,23 +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; + img { + height: 18px; + width: 18px; + } + + span { + width: 80px; + font-size: 12px; + color: white; + } } } } @@ -311,7 +311,7 @@ .under-line { height: 2px; background: #7bc5ef; - margin-block-start: 0.5rem; + margin-block-start: 0; margin-block-end: 0; } } -- Gitblit v1.8.0