修改了界面自适应

YANGDL

2021-03-13 c4923dc05177418947252036ddd77ecd31207b76

 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>-->
@@ -85,14 +94,13 @@
    },
    toggleMonitorPanel () {
      this.isCollapse = !this.isCollapse
      console.log(11)
      // const el = $('.btn-stretch')
      // const el2 = $('.panel-fold-btn')
      // 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
@@ -132,18 +140,27 @@

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

  .el-form-item__content {
    color: rgb(52, 224, 255);
  }
@@ -160,7 +177,7 @@

  .el-form-item__label {
    color: rgb(52, 224, 255);
    /*<!--color: @color;-->*/
    color: @color;
  }

  .el-input__inner::placeholder {
@@ -304,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 {
@@ -311,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);