修改了界面自适应

YANGDL

2021-03-12 2d398b4fa805ba43a89311d955fbb6e47c540e6c

修改了界面自适应

 public/index.html

@@ -15,5 +15,19 @@
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript">
        /* 这里我们利用了一个自执行函数 */
        (function(){
            change();
            function change(){
              console.log( document.documentElement.clientWidth*12/640 +'px')
                //html的 font-size 的大小尺寸
                //这里的html字体大小利用了一个简单的数学公式，当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth  新的值）就是clientWidth*20/320
                document.documentElement.style.fontSize = document.documentElement.clientWidth/12 +'px';
            }
            /* 监听窗口大小发生改变时*/
            window.addEventListener('resize',change,false);
        })();
    </script>
  </body>
</html>

 src/App.vue

@@ -13,9 +13,10 @@
}
</script>

<style>
<style lang="less">
@import '@assets/css/map/_map-variable';
html, body, #app{
  color: #2c3e50;
  color: @color;
  height: 100vh;
  width: 100vw;
  margin: 0;
@@ -27,6 +28,7 @@
}
body{
  -ms-overflow-style: none;
  font-size: 12px;
}

</style>

 src/assets/css/map/_map-variable.less

@@ -1,4 +1,6 @@
@color:#00fff6;
@color-highlight:#fff700;
@color-title:white;
@background-color:rgba(0,16,30,.8);
@background-color-light:rgba(40,50,100,.4);
@background-color-split:rgba(0,255,246,.14);

 src/assets/css/map/map-popup.less

@@ -6,12 +6,13 @@
        background-color: @background-color;
        /*background-color: transparent;*/
        border: .00521rem solid @color;
        padding: .10417rem;
        padding: .05rem;
        //-webkit-box-shadow: 0 0 0.03125rem 0 @color;
        //box-shadow: 0 0 0.03125rem 0 @color;
        -webkit-box-shadow: 0 0 10px 0 @color;
        box-shadow: 0 0 10px @color;
        border-radius: 1rem;
        box-shadow: 0 0 .03rem @color;
        //border-radius: .03rem;
        border-radius: 10px;
    }

    .leaflet-popup-tip-container {
@@ -22,15 +23,15 @@
        content: "";
        position: absolute;
        left: 50%;
        bottom: -.3rem;
        bottom: -.03rem;
        -webkit-transform: translateX(-50%) rotate(
                        45deg
        );
        transform: translateX(-50%) rotate(
                        45deg
        );
        width: .6rem;
        height: .6rem;
        width: .06rem;
        height: .06rem;
        background-color: @background-color;
        border-right: .00521rem solid @color;
        border-bottom: .00521rem solid @color;

 src/components/panel/LegendPanel.vue

@@ -1,25 +1,28 @@
<template>
  <div class="legend-panel">

    <transition name="fade">
      <div class="legend-content" 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>
          <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>
    <div class="legend-icon unactive" @click="legendChange()">
      <i class="el-icon-more-outline"></i>
      <span>图例</span>
    </div>
    <transition name="fade">
      <div class="legend-content" v-show="legendControl">
        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
          <p>{{ item.title }}</p>
          <ul>
            <div v-for="(ite,inde) in item.items" :key="inde">
              <li>
                <img :src='ite.legendImage' alt=''>
                <span>{{ ite.legendContent }}</span>
              </li>
            </div>
          </ul>
          <div :class="index === 5 ? '':'under-line'"></div>
        </div>
      </div>
    </transition>
  </div>
</template>

@@ -32,75 +35,6 @@
      legendControl: false,
      // 图里存储数据
      legendContents: [
        {
          title: '预警',
          items: [
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴雨红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴雨橙色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴雨黄色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴雨蓝色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            }
          ]
        },
        {
          title: '企业',
          items: [
@@ -215,6 +149,7 @@
</script>

<style lang="less" scoped>
@import '@assets/css/map/_map-variable';
.legend-panel {
  position: absolute;
  z-index: 502;
@@ -225,14 +160,34 @@
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;

  //align-items: flex-end;
  transition: all .5s;
  .legend-icon {
    width: 3.4rem;
    height: 1.6rem;
    border-radius: 0.3rem;
    background: white;
    width: .29167rem;
    height: .31771rem;
    //font-size: .08333rem;
    border: .00521rem solid rgba(0,255,246,.15);
    border-radius: .03125rem;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: @background-color;
    margin-top: .04167rem;
    cursor: pointer;
    color: @color;
    margin-left: auto;
    font-size: 0.08333rem;
  }

  @keyframes bounce-in {
@@ -248,69 +203,93 @@

  .fade-enter-active {
    transform-origin: right bottom;
    animation: bounce-in .5s;
    animation: bounce-in .2s;
  }

  .fade-leave-active {
    transform-origin: right bottom;
    animation: bounce-in .5s reverse;
    animation: bounce-in .2s reverse;
  }

  .legend-content {
    position: absolute;
    right: 0.3rem;
    bottom: 3rem;
    width: 30rem;
    border-radius: 1rem;
    background: #3c7699;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -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;

    .legend-content-box {
      font-size: 0.07292rem;
      padding: .10417rem;
      border-left: .00521rem solid @background-color-split;
      p {
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        margin: 0 !important;
        //padding: 0;
        //color: @color-title;
        -webkit-margin-before: 0.3rem;
        margin-block-start: 0.3rem;
        -webkit-margin-after: 0.2rem;
        margin-block-end: 0.2rem;
        margin-bottom: 0.05208rem !important;
        span {
          color: @color-title;
          font-size: .08333rem;
          font-weight: 600;
        }
      }

      ul {
        list-style: none;
        display: flex;
        //display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0 !important;
        padding: 0 !important;;
        padding-inline: 0;

        div {
          width: 25%;
          display: flex;
          justify-content: center;
          margin: 0.1rem 0;
        //color: #00fff6;
        //font-size: .07292rem;
        font-size: .08333rem;

          li {
            width: 100%;
            //width: 100%;
            //display: flex;
            //justify-content: space-around;
            //margin-left: 15px;
            //margin-right: 15px;
            list-style: none;
            display: flex;
            justify-content: space-around;
            margin-left: 15px;
            margin-right: 15px;

            -webkit-box-align: center;
            align-items: center;
            margin: 0.05208rem 0;
            img {
              height: 18px;
              width: 18px;
              width: .08333rem;
              height: .08333rem;
              margin-right: .01042rem;
            }

            span {
              width: 80px;
              font-size: 12px;
              color: white;
              //width: 80px;
              //font-size: 12px;
              color: @color;
            }
          }
        }
      }
    }

    .under-line {
      height: 2px;
      background: #7bc5ef;
      height: 1px;
      background: @background-color-split;
      margin-block-start: 0;
      margin-block-end: 0;
    }

 src/components/panel/RightSearchPanel.vue

@@ -1,10 +1,19 @@
<template>
  <div id="right-panel">
  <div class="panel-right">
    <div class="panel-tab">
      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"
           :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
        <img :src="item.icon" style="width: 24px;height: 24px;"></div>
<!--      <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
<!--      <div class="tab-item" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
      <div class="container">
        <ul class="module-wrap"
            style="padding-top: 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
          <li class="active module-wrap__box">
            <div class="module-wrap__box-item">
              <!----><img src="../../assets/images/map-pages/icon/dd.png" class="icon">
            </div><!---->
          </li>
        </ul><!----><!---->
      </div>
    </div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
@@ -90,8 +99,8 @@
      // const el = document.getElementsByClassName('.btn-stretch')
      // const el2 = document.getElementsByClassName('.panel-fold-btn')
      // let  = 'btn-stretch-active'
      // var rightControl = $('#right-panel')
      // var rightControl = document.getElementById('#right-panel')
      // var rightControl = $('#panel-right')
      // var rightControl = document.getElementById('#panel-right')
      // const right = rightControl.css('right')
      // const rightit = rightControl.ownerDocument.defaultView
      // const right = rightit.getComputedStyle(rightit, null).right
@@ -131,13 +140,23 @@

<style lang="less">
@import '@assets/css/map/_map-variable';
#right-panel {
.panel-right {
  width: 322px;
  //height: 573px;
  height: 100%;
  //height: 100%;
  //position: absolute;
  //right: 10px;
  //top: 10px;
  height: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  top: .60417rem;
  right: .15625rem;
  z-index: 501;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;

  .el-card__body {
    padding: 7px;
@@ -302,6 +321,13 @@
    width: 32px;
    z-index: 500;
    background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
    .container{
      max-height: 3.125rem;
      overflow: hidden;
      position: relative;
      position: relative;
    }

  }

  .right-control {
@@ -309,11 +335,11 @@
    //height: 573px;
    height: 100%;
    position: relative;
    top: 0;
    right: 0;
    z-index: 999;
    background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
    background-size: 100% 98%;
    //top: 0;
    //right: 0;
    z-index: 500;
    //background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
    //background-size: 100% 98%;
  }
  .a{
    transform: translateX(328px);

 src/views/MapTemplate.vue

@@ -11,7 +11,7 @@
    <monitor-panel></monitor-panel>
    <!--        <top-enterprise-panel></top-enterprise-panel>-->
    <tool-box-panel ref="toolBox"></tool-box-panel>
    <menu-special></menu-special>
<!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
  </div>
</template>
@@ -27,14 +27,14 @@
// import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
import MenuSpecial from '@components/panel/MenuTopic'
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'

export default {
  name: 'MapTemplate',
  components: {
    LegendPanel,
    MenuSpecial,
    // MenuSpecial,
    ToolBoxPanel,
    // TopEnterprisePanel,
    SgisLayerController,