统一样式-企业图标修改，搜索样式修改。

chenyabin

2021-04-08 474268898f7d35316a685823ede1415684019e8c

 src/components/panel/RightSearchPanel.vue

@@ -1,49 +1,43 @@
<template>
  <div class="panel-right" v-show="isShow">
    <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="container">
          <ul>
              <li style="text-align: right">
                  <button type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></button>
              </li>
          </ul>

        <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
              <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                  <li>
                      <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
                  </li>
              </el-tooltip>
        </ul>
      </div>
    </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="'search-container map-background'">
        <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
          <component :title="title" :is="gcComp"></component>
        </div>
      </div>
    </div>
      <transition name="searchPanelChange">
          <div style=" display: inline-flex;">
              <div class="panel-tab">
                  <div class="container">
                      <ul>
                          <li style="text-align: right">
                              <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default">
                                  <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                                  <i class=" el-icon-d-arrow-left" v-else ></i>
                              </div>
                          </li>
                      </ul>
                      <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
                          <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                              <li>
                                  <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
                              </li>
                          </el-tooltip>
                      </ul>
                  </div>
              </div>
              <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] "  >
                  <div class="panel-fold-btn" @click="toggleMonitorPanel">
                      <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
                  </div>
                  <div :class="'search-container map-background'" v-show="selectGroup" >
                      <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
                          <component :title="title" :is="gcComp"></component>
                      </div>
                  </div>
              </div>
          </div>
       </transition>
      <!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="搜索" placement="left" v-show="!selectGroup">
          <div :class="selectGroup === true ?'active-button':''" class="iconBtn"   @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" >
             <i class="el-icon-search icon"></i>
          </div>
      </el-tooltip> -->
  </div>
</template>

@@ -75,7 +69,8 @@
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网',
      isCollapse: true
      isCollapse: true,
      selectGroup: true
    }
  },
  computed: {},
@@ -98,9 +93,18 @@
    handleClose (done) {
      console.log(done)
    },
    setSearchPanelChange () {
      this.selectGroup = !this.selectGroup
      if (!this.selectGroup) {
        this.topicList.forEach((itm) => {
          itm.checked = false
        })
      }
    },
    selected (val) {
      // console.log(val)
      this.title = val.name
      this.selectGroup = true
      this.topicList.forEach((itm) => {
        itm.checked = val.name === itm.name
      })
@@ -180,7 +184,14 @@
</script>

<style lang="less">

    .searchPanelChange-enter-active {
        transform-origin: top right;
        animation: bounce-in .2s;
    }
    .searchPanelChange-leave-active {
        transform-origin: top right;
        animation: bounce-in .2s reverse;
    }
.search-container {
    position: relative;
    width: 1.79167rem;
@@ -249,12 +260,15 @@
  //}
    .el-button--default {
        padding: 15px 3px;
        background: rgba(0, 16, 30, 0.7);
        color: #C0C4CC;
        border-radius:50%  0.03rem 0.03rem 50% ;
        background:@background-color4;
        color:@color-tool;
        border:1px solid @color-tool;
    }
    .el-button--default:hover{
        background:@background-color;
        border:1px solid @color;
        box-shadow: 0 0 2px @color;
        color:@color;
    }

  .el-form-item__label {