修改了界面自适应

YANGDL

2021-03-13 0ce3820acfc7777bba2f728f42afd99bc26bf19c

 src/components/panel/LegendPanel.vue

@@ -1,34 +1,27 @@
<template>
  <div class="legend-panel">

    <transition name="fade">
      <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>
          <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>
      </div>
    </transition>
    <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()">
      <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>
    </el-tooltip>

  </div>
</template>

<script>
export default {
  name: 'LegendPanel',
@@ -165,6 +158,7 @@
  -ms-flex-align: end;
  //align-items: flex-end;
  transition: all .5s;

  .legend-btn {
    width: .2rem;
    height: .2rem;
@@ -234,6 +228,7 @@
      font-size: 0.07292rem;
      padding: .10417rem;
      border-left: .00521rem solid @background-color-split;

      p {
        text-align: center;
        margin: 0 !important;
@@ -244,6 +239,7 @@
        -webkit-margin-after: 0.2rem;
        margin-block-end: 0.2rem;
        margin-bottom: 0.05208rem !important;

        span {
          color: @color-title;
          font-size: .08333rem;
@@ -265,6 +261,7 @@
            -webkit-box-align: center;
            align-items: center;
            margin: 0.05208rem 0;

            img {
              width: .08333rem;
              height: .08333rem;