From 4fc6a012ac1975002cd7941bbbf6b3b8f32d2f23 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期六, 13 三月 2021 16:43:00 +0800
Subject: [PATCH] 修改了界面自适应
---
src/assets/css/map/_map-variable.less | 2 +
src/assets/css/map/map-elem-ui.less | 28 ++++++++++++++
src/components/panel/LegendPanel.vue | 54 +++++++++++----------------
3 files changed, 52 insertions(+), 32 deletions(-)
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
index cc114db..5291bc6 100644
--- a/src/assets/css/map/_map-variable.less
+++ b/src/assets/css/map/_map-variable.less
@@ -1,6 +1,8 @@
@color:#00fff6;
@color-highlight:#fff700;
@color-title:white;
+@color-over:white;
@background-color:rgba(0,16,30,.8);
@background-color-light:rgba(40,50,100,.4);
@background-color-split:rgba(0,255,246,.14);
+@border-radius: .05208rem;
diff --git a/src/assets/css/map/map-elem-ui.less b/src/assets/css/map/map-elem-ui.less
index 1f6fd20..1c68f24 100644
--- a/src/assets/css/map/map-elem-ui.less
+++ b/src/assets/css/map/map-elem-ui.less
@@ -60,3 +60,31 @@
cursor: pointer;
}
}
+
+
+.map-tooltip{
+ font-size: .08333rem !important;
+ color: @color-highlight !important;
+ background: @background-color !important;
+ border-radius: 10px;
+ padding: .05rem !important;
+}
+.btn-active{
+ color: @color-highlight !important;
+
+}
+
+.map-background{
+ //color: @color;
+ border: .00521rem solid @color;
+ box-shadow: 0 0 .03rem @color;
+ background: @background-color !important;
+ //padding: .05rem !important;
+ border-radius: .05208rem;
+}
+.map-under-line {
+ height: 1px;
+ background: @background-color-split;
+ margin-block-start: 0;
+ margin-block-end: 0;
+}
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index ed870b4..82c7db8 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -2,10 +2,10 @@
<div class="legend-panel">
<transition name="fade">
- <div class="legend-content" v-show="legendControl">
+ <div class="legend-content map-background" v-show="legendControl">
<div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
<p><span>{{ item.title }}</span></p>
- <div :class="index === 5 ? '':'under-line'"></div>
+ <div :class="index === 5 ? '':'map-under-line'"></div>
<ul >
<!-- <div >-->
<li v-for="(ite,inde) in item.items" :key="inde">
@@ -19,10 +19,13 @@
</div>
</div>
</transition>
- <div class="legend-icon unactive" @click="legendChange()">
- <i class="el-icon-more-outline"></i>
- <span>鍥句緥</span>
- </div>
+ <el-tooltip popper-class="map-tooltip" effect="dark" content="鍥句緥" placement="left">
+ <div class="legend-btn" @click="legendChange()">
+ <i class="el-icon-more-outline"></i>
+<!-- <span>鍥句緥</span>-->
+ </div>
+ </el-tooltip>
+
</div>
</template>
@@ -143,13 +146,18 @@
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
this.legendControl = !this.legendControl
+ if (!this.legendControl) {
+ return document.getElementsByTagName('legend-btn')[0].classList.add('btn-active')
+ }
+ return document.getElementsByTagName('legend-btn')[0].classList.remove('btn-active')
}
}
}
</script>
-<style lang="less" scoped>
+<style lang="less" >
@import '@assets/css/map/_map-variable';
+@import '@assets/css/map/map-elem-ui';
.legend-panel {
position: absolute;
z-index: 502;
@@ -162,12 +170,12 @@
-ms-flex-align: end;
//align-items: flex-end;
transition: all .5s;
- .legend-icon {
- width: .29167rem;
- height: .31771rem;
+ .legend-btn {
+ width: .2rem;
+ height: .2rem;
//font-size: .08333rem;
- border: .00521rem solid rgba(0,255,246,.15);
- border-radius: .03125rem;
+ border: .00521rem solid @background-color-light;
+ border-radius: @border-radius;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
@@ -219,13 +227,11 @@
-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;
@@ -252,21 +258,13 @@
ul {
list-style: none;
- //display: flex;
flex-wrap: wrap;
margin: 0 !important;
padding: 0 !important;;
padding-inline: 0;
- //color: #00fff6;
- //font-size: .07292rem;
font-size: .08333rem;
li {
- //width: 100%;
- //display: flex;
- //justify-content: space-around;
- //margin-left: 15px;
- //margin-right: 15px;
list-style: none;
display: flex;
-webkit-box-align: center;
@@ -279,20 +277,12 @@
}
span {
- //width: 80px;
- //font-size: 12px;
color: @color;
}
}
}
}
- .under-line {
- height: 1px;
- background: @background-color-split;
- margin-block-start: 0;
- margin-block-end: 0;
- }
}
}
</style>
--
Gitblit v1.8.0