From 2d398b4fa805ba43a89311d955fbb6e47c540e6c Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期五, 12 三月 2021 20:57:16 +0800
Subject: [PATCH] 修改了界面自适应
---
src/components/panel/LegendPanel.vue | 232 ++++++++++++++++++++++++++-------------------------------
1 files changed, 105 insertions(+), 127 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index af1ac12..ed870b4 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,23 +1,28 @@
<template>
<div class="legend-panel">
- <div class="legend-icon unactive" @click="legendChange()">
- <i class="el-icon-more-outline"></i>
- <span>鍥句緥</span>
- </div>
+
<transition name="fade">
<div class="legend-content" v-show="legendControl">
<div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
- <p>{{ item.title }}</p>
- <ul>
+ <p><span>{{ item.title }}</span></p>
+ <div :class="index === 5 ? '':'under-line'"></div>
+ <ul >
+ <!-- <div >-->
<li v-for="(ite,inde) in item.items" :key="inde">
<img :src='ite.legendImage' alt=''>
<span>{{ ite.legendContent }}</span>
</li>
+
+ <!-- </div>-->
</ul>
- <div :class="index === 5 ? '':'under-line'"></div>
+
</div>
</div>
</transition>
+ <div class="legend-icon unactive" @click="legendChange()">
+ <i class="el-icon-more-outline"></i>
+ <span>鍥句緥</span>
+ </div>
</div>
</template>
@@ -31,75 +36,6 @@
// 鍥鹃噷瀛樺偍鏁版嵁
legendContents: [
{
- title: '棰勮',
- items: [
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦姗欒壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦榛勮壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦钃濊壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- }
- ]
- },
- {
title: '浼佷笟',
items: [
{
@@ -108,7 +44,7 @@
},
{
legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '娌圭敯浼佷笟'
+ legendContent: '娌圭敯浼佷笟 '
},
{
legendImage: '../.././assets/images/map-pages/setting.png',
@@ -206,11 +142,6 @@
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
- // if (this.legendControl === false) {
- // this.legendControl = true
- // } else {
- // this.legendControl = false
- // }
this.legendControl = !this.legendControl
}
}
@@ -218,6 +149,7 @@
</script>
<style lang="less" scoped>
+@import '@assets/css/map/_map-variable';
.legend-panel {
position: absolute;
z-index: 502;
@@ -228,93 +160,139 @@
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
- align-items: flex-end;
-
+ //align-items: flex-end;
+ transition: all .5s;
.legend-icon {
- width: 3.4rem;
- height: 1.6rem;
- border-radius: .3rem;
- background: white;
+ width: .29167rem;
+ height: .31771rem;
+ //font-size: .08333rem;
+ border: .00521rem solid rgba(0,255,246,.15);
+ border-radius: .03125rem;
text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ background: @background-color;
+ margin-top: .04167rem;
+ cursor: pointer;
+ color: @color;
+ margin-left: auto;
+ font-size: 0.08333rem;
}
@keyframes bounce-in {
0% {
transform: scale(0);
+ opacity: 0.3;
}
- //50% {
- // transform: scale(1.1);
- //}
100% {
transform: scale(1);
+ opacity: 1;
}
}
.fade-enter-active {
transform-origin: right bottom;
- animation: bounce-in .5s;
+ animation: bounce-in .2s;
}
.fade-leave-active {
transform-origin: right bottom;
- animation: bounce-in .5s reverse;
+ animation: bounce-in .2s reverse;
}
.legend-content {
- position: absolute;
- right: 8rem;
- bottom: 3rem;
- width: 30rem;
- height: 30rem;
- border-radius: 1rem;
- background: #3c7699;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ background: rgba(0,16,30,.9);
+ border-radius: .05208rem;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ border: .00521rem solid @color;
+ box-shadow: 0 0 .03rem @color;
+ overflow: hidden;
+ min-height: 1.28646rem;
.legend-content-box {
+ font-size: 0.07292rem;
+ padding: .10417rem;
+ border-left: .00521rem solid @background-color-split;
p {
text-align: center;
- color: #ffffff;
- font-size: 14px;
+ margin: 0 !important;
+ //padding: 0;
+ //color: @color-title;
+ -webkit-margin-before: 0.3rem;
margin-block-start: 0.3rem;
+ -webkit-margin-after: 0.2rem;
margin-block-end: 0.2rem;
+ margin-bottom: 0.05208rem !important;
+ span {
+ color: @color-title;
+ font-size: .08333rem;
+ font-weight: 600;
+ }
}
ul {
list-style: none;
- display: flex;
+ //display: flex;
flex-wrap: wrap;
- padding-inline: 20px 0;
- margin-block: 0;
+ margin: 0 !important;
+ padding: 0 !important;;
+ padding-inline: 0;
+ //color: #00fff6;
+ //font-size: .07292rem;
+ font-size: .08333rem;
- li {
- width: 25%;
- height: 1.5rem;
- display: flex;
- align-items: center;
+ li {
+ //width: 100%;
+ //display: flex;
+ //justify-content: space-around;
+ //margin-left: 15px;
+ //margin-right: 15px;
+ list-style: none;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ margin: 0.05208rem 0;
+ img {
+ width: .08333rem;
+ height: .08333rem;
+ margin-right: .01042rem;
+ }
- img {
- height: 18px;
- width: 18px;
+ span {
+ //width: 80px;
+ //font-size: 12px;
+ color: @color;
+ }
}
-
- span {
- font-size: 12px;
- color: white;
- //width: 80%;
- }
- }
}
}
.under-line {
- height: 2px;
- background: #7bc5ef;
- margin-block-start: 0.5rem;
+ height: 1px;
+ background: @background-color-split;
+ margin-block-start: 0;
margin-block-end: 0;
}
-
- //.under-line:last-child {
- // display: none;
- //}
}
}
</style>
--
Gitblit v1.8.0