修改了界面自适应

YANGDL

2021-03-13 4fc6a012ac1975002cd7941bbbf6b3b8f32d2f23

修改了界面自适应

 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;

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

 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()">
    <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>
<!--        <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>