From 83944bc2dc0f9953566ed592b298c33fb3dd3f2e Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期六, 13 三月 2021 20:24:56 +0800
Subject: [PATCH] 修改了界面自适应
---
src/assets/css/map/_map-variable.less | 2 +-
src/main.js | 2 ++
src/assets/css/map/map-elem-ui.less | 33 ++++++++++++++++++++++-----------
src/components/panel/LegendPanel.vue | 13 ++++---------
4 files changed, 29 insertions(+), 21 deletions(-)
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
index 5291bc6..f65e118 100644
--- a/src/assets/css/map/_map-variable.less
+++ b/src/assets/css/map/_map-variable.less
@@ -5,4 +5,4 @@
@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;
+@border-radius: .03rem;
diff --git a/src/assets/css/map/map-elem-ui.less b/src/assets/css/map/map-elem-ui.less
index 1c68f24..a90f418 100644
--- a/src/assets/css/map/map-elem-ui.less
+++ b/src/assets/css/map/map-elem-ui.less
@@ -62,23 +62,34 @@
}
-.map-tooltip{
- font-size: .08333rem !important;
- color: @color-highlight !important;
- background: @background-color !important;
- border-radius: 10px;
- padding: .05rem !important;
+.map-tooltip.is-dark{
+ font-size: .08333rem ;
+ color: @color ;
+ background: @background-color ;
+ border-radius: .03rem;
+ padding: .05rem ;
}
-.btn-active{
- color: @color-highlight !important;
-
+.map-btn-unactive{
+ color: @color ;
+ border: .00521rem solid @color ;
+ box-shadow: 0 0 .03rem @color ;
}
-
+.map-btn-active{
+ color: @color-highlight ;
+ border: .00521rem solid @color-highlight ;
+ box-shadow: 0 0 .03rem @color-highlight ;
+}
+.map-btn-background{
+ background: @background-color;
+ //border: .00521rem solid @color;
+ //box-shadow: 0 0 .03rem @color;
+ //border-radius: .05208rem;
+}
.map-background{
//color: @color;
border: .00521rem solid @color;
box-shadow: 0 0 .03rem @color;
- background: @background-color !important;
+ background: @background-color;
//padding: .05rem !important;
border-radius: .05208rem;
}
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 82c7db8..afd7d70 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -2,7 +2,7 @@
<div class="legend-panel">
<transition name="fade">
- <div class="legend-content map-background" 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 ? '':'map-under-line'"></div>
@@ -19,8 +19,8 @@
</div>
</div>
</transition>
- <el-tooltip popper-class="map-tooltip" effect="dark" content="鍥句緥" placement="left">
- <div class="legend-btn" @click="legendChange()">
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鍥句緥" placement="left">
+ <div :class="this.legendControl?'legend-btn map-btn-active':'legend-btn map-btn-unactive'" @click="legendChange()">
<i class="el-icon-more-outline"></i>
<!-- <span>鍥句緥</span>-->
</div>
@@ -146,10 +146,6 @@
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
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')
}
}
}
@@ -157,7 +153,6 @@
<style lang="less" >
@import '@assets/css/map/_map-variable';
-@import '@assets/css/map/map-elem-ui';
.legend-panel {
position: absolute;
z-index: 502;
@@ -193,7 +188,7 @@
background: @background-color;
margin-top: .04167rem;
cursor: pointer;
- color: @color;
+ //color: @color;
margin-left: auto;
font-size: 0.08333rem;
}
diff --git a/src/main.js b/src/main.js
index 8ffa4e2..f540716 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,8 @@
import echartsDarkTheme from '@/styles/theme-dark/echarts/theme.json'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
+import './assets/css/map/_map-variable.less'
+import './assets/css/map/map-elem-ui.less'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import '@/utils/dialogDrag.js'
--
Gitblit v1.8.0