修改右边弹框为css样式

wangqi

2021-03-09 a8ed21b1193d8740a926086054ac9d73e2c4c574

修改右边弹框为css样式

 src/assets/css/map/map-elem-ui.less

@@ -51,9 +51,9 @@


  }
  location-btn{

  }
  //location-btn{
  //
  //}

  .location-btn:hover,.el-input__icon:hover{
    color: @color;

 src/components/panel/RightSearchPanel.vue

@@ -3,23 +3,33 @@
    <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}">
        <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>
    <div class="panel-fold-btn">
      <div class="btn-stretch" @click="toggleMonitorPanel"></div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
<!--    </div>-->

<!--      <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
<!--            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
<!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
<!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
<!--      </div>-->
<!--    <div class="right-control" v-if="!isCollapse"  >-->
    <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
      <div class="panel-fold-btn" @click="toggleMonitorPanel">
<!--        <div class="btn-stretch" v-if="isCollapse"></div>-->
<!--        <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
        <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
    </div>

    <div class="right-control">

      <component :title="title" :is="gcComp"></component>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
// import $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'
@@ -41,8 +51,9 @@
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网'
      title: '污雨水管网',

      isCollapse: false
    }
  },
  computed: {},
@@ -73,38 +84,45 @@
      this.title = '管道信息查询'
    },
    toggleMonitorPanel () {
      const el = $('.btn-stretch')
      const el2 = $('.panel-fold-btn')
      // let cs = 'btn-stretch-active'
      var rightControl = $('#right-panel')
      const right = rightControl.css('right')
      if (right === '10px') {
        rightControl.animate({
          right: '-322px'
        })
        el.css({
          transform: 'rotateY(180deg)',
          'transform-origin': '50% 50%',
          transition: 'transform 1s linear'
        })
        el2.animate({
          right: '320px',
          speed: 1000
        })
      } else {
        rightControl.animate({
          right: '10px'
        })
        el.css({
          transform: 'rotateY(0deg)',
          'transform-origin': '50% 50%',
          transition: 'transform 1s linear'
        })
        el2.animate({
          right: '290px',
          speed: 1000
        })
      }
      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')
      // const right = rightControl.css('right')
      // const rightit = rightControl.ownerDocument.defaultView
      // const right = rightit.getComputedStyle(rightit, null).right
    //   if (right === '10px') {
    //     rightControl.animate({
    //       right: '-322px'
    //     })
    //     el.css({
    //       transform: 'rotateY(180deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '320px',
    //       speed: 1000
    //     })
    //   } else {
    //     rightControl.animate({
    //       right: '10px'
    //     })
    //     el.css({
    //       transform: 'rotateY(0deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '290px',
    //       speed: 1000
    //     })
    //   }
    }
  },
  mounted () {
@@ -142,6 +160,7 @@

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

  .el-input__inner::placeholder {
@@ -233,14 +252,29 @@
    white-space: nowrap;
  }
  .panel-fold-btn{
    overflow: hidden;
    position: absolute;
    top:45%;
    left: -18px;
    /*left: 0px;*/
    //right: 320px;
    right: 290px;
    /*right: 290px;*/
    z-index: 1000;
    /*right: 0px;*/
    background-color: rgba(5,24,66,.8);
    border-radius: 10px 0 0 10px;
    .btn-stretch {
      width: 20px;
      height: 40px;
      background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
      cursor: pointer;
      /*margin-left: -20px;*/
      transform: rotateY(0deg);
      transform-origin: 50% 50%;
      transition: transform 1s linear;
        /*transition: 3s linear;*/
    }
    .btn-shrink {
      width: 20px;
      height: 40px;
      background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
@@ -273,17 +307,20 @@
  }

  .right-control {
    width: 290px;
    /*width: 290px;*/
    //height: 573px;
    height: 100%;
    position: absolute;
    position: relative;
    top: 0;
    right: 0;
    z-index: 999;
    background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
    background-size: 100% 98%;
  }

  .a{
    transform: translateX(328px);
    transition: transform 3s linear;
    }
  .panel_searchTotal {
    font-size: 12px;
    float: right;
@@ -291,13 +328,13 @@

  .panel_header {
    // background-color: #030D2E;
    padding: 7px 15px 3px 20px;
    padding: 8px 15px 3px 20px;
  }

  .panel_title {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    /*margin: 0px;*/
    /*padding: 0px;*/
    color: #78c4ff;
    font-weight: bold;
  }
@@ -307,7 +344,7 @@
  }

  .search-form .el-form-item {
    margin: 0px;
    /*margin: 0px;*/
    margin-bottom: 8px;
  }

@@ -453,7 +490,7 @@

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background: #0E3565;
  }
@@ -482,5 +519,13 @@
      background-color: #061e51 !important;
    }
  }
  .unfold {
    transform: translateX(332px);
    transition: transform 0.5s linear;
  }
  .shrink {
    transform: translateX(0px);
    transition: transform 0.5s linear;
  }
}
</style>