修改了界面自适应

YANGDL

2021-03-13 83944bc2dc0f9953566ed592b298c33fb3dd3f2e

修改了界面自适应

 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;

 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;
}

 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;
  }

 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'