统一样式-图层组件样式修改

chenyabin

2021-04-07 b9aa1e3bc9b70df68967b3a37ece51ae1729f5b2

统一样式-图层组件样式修改

 src/components/LayerController/LayerController.vue

@@ -1,11 +1,11 @@
<template>
  <div :class='["float-panel",layerControllerVisible ? "active" : ""]' >
    <div @click="showPanel" class="iconBtn transition" :class='layerControllerVisible ? "active-button" : ""' v-show="!layerControllerVisible" style="position: absolute;top:0;left: 0">
      <img src="@assets/images/map-pages/icon/layer.png" alt="" class="icon">
      <span class="icon-name">图层</span>
    <div @click="showPanel" class="iconBtn" :class='layerControllerVisible ? "active-button" : ""' v-show="!layerControllerVisible" style="  position: absolute;top:0;left: 0;">
        <img src="@assets/images/map-pages/icon/layer.png" alt="" class="icon">
        <span class="icon-name">图层</span>
    </div>
    <transition name="fade">
      <div :class="'legend-content map-background'" v-show="layerControllerVisible" style=" transform-origin: top left;">
    <transition name="animationChange">
      <div :class="'legend-content map-background'" v-show="layerControllerVisible">
        <lc-service-layer></lc-service-layer>
        <buttom  @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></buttom>
      </div>
@@ -71,15 +71,28 @@
</script>

<style lang="less">
  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }
  .float-panel.active{
    overflow: visible;
  }
.float-panel {
  position: absolute;
  left: 0.14583rem;
  top: 0.8rem;
  top: 0.73979rem;
  height: auto;
  font-size: 11px;
  z-index: 1000;
  display: flex;

  min-height: 0.28rem;
  min-width: 0.28rem;
  overflow: hidden;
  div {
    color: #00fff6;
  }

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -20,7 +20,7 @@
                                   :value="itm.code"
                                   @change="swWmsLayer(itm)"/>{{ itm.name }}
                            <!-- 三级图层遍历 -->
                            <div style="width: 100%">
                            <div class="layerbox-item-3">
                                <div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code">
                                    <input type="checkbox"
                                           :name="'wmsSublayers_'+item.code+'_'+layer.code"
@@ -126,15 +126,19 @@
            .layerbox {
                width: 100%;
                .layerbox-item {
                    display: flex;
                    flex-flow: row wrap;
                    margin-left: 15px;
                    margin-top: 5px;

                    padding-left: 20px;
                    padding-top: 5px;
                    .basemap-layer-item {
                        width: 50%;
                        margin-bottom: 5px;
                    }
                }
                .layerbox-item-3{
                    padding-left: 20px;
                    padding-top: 5px;
                    display: flex;
                    flex-wrap: wrap;
                    .basemap-layer-item{width: 50%}
                }
            }
        }
    }

 src/components/panel/RightSearchPanel.vue

@@ -5,6 +5,11 @@
<!--           :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">
                  <buttom type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></buttom>
              </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>
@@ -222,7 +227,7 @@
  //top: 10px;
  height: 0;
  position: absolute;
  top: .46rem;
  top: 0.42979rem;
  right: 0.14583rem;
  z-index: 501;
  display: -webkit-box;
@@ -248,6 +253,15 @@
  //  background-color: #061e51 !important;
  //  border: solid 1px #0e639e !important;
  //}
    .el-button--default {
        padding: 15px 3px;
        background: rgba(0, 16, 30, 0.7);
        color: #C0C4CC;
    }
    .el-button--default:hover{
        background: transparent;
        border-color: #0f93a9;
    }

  .el-form-item__label {
    color: rgb(52, 224, 255);

 src/components/panel/ToolBoxPanel.vue

@@ -1,10 +1,11 @@
<template>
  <div class="left-top-toolbox-panel">
    <div class="specific-tools">
      <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice"   @mouseover.enter.native="changeSelectMouse">
      <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice"   @click.enter.native="changeSelectMouse">
          <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt="" class="icon" />
          <span class="span-default">工具</span>
      </el-button>

      <transition name="animationChange">
        <el-row v-show="selectGroup" class="specific-tools-group">
          <el-popover
@@ -427,16 +428,15 @@

  .specific-tools {
    display: flex;

    .el-button {
    overflow: hidden;
     .el-button {
      z-index: 999;
      padding: 0;
      margin: 0 0.015rem;
      width: 45px;
      height: 45px;
      width: 0.2725rem;
      height: 0.2725rem;
      background: @background-color;
      vertical-align: middle !important;

      .base-map-img {
        position: absolute;
      }
@@ -455,6 +455,10 @@
      span {
        display: block;
        font-size: 10px;
      }
    }
    .specific-tools-group .el-button{
      span{
        color: #0B89B5;
      }
    }
@@ -465,8 +469,8 @@
      padding: 0;
      margin: 0;
      margin-right:0.015rem;
      width: 45px;
      height: 45px;
      width: 0.2725rem;
      height: 0.2725rem;
      background: @background-color;
      border: 0.00521rem solid @color-shadow;
    }
@@ -478,51 +482,6 @@

    .specific-tools-group {
      z-index: 1;

      .base-map-inner-panel {
        display: flex;
        justify-content: center;
        align-items: center;

        .base-map-img {
          position: absolute;
        }

        .base-map-img-Tool:hover {
          cursor: pointer;
        }

        .base-map-anno-Tool {
          position: absolute;
          margin-left: 2px;
          background-color: rgba(0, 0, 0, .5);
          color: @color-over;

          .el-checkbox__label {
            padding-left: 5px !important;
          }
        }

        .basemap-layer-item {
          display: flex;
          width: 50px;
          height: 50px;
          margin: 10px;
          border: 2px solid white;

          input {
            position: relative;
            left: 0;
            top: -53px;
          }

          .basemap-layer-item-name {
            position: relative;
            left: 0;
            top: -53px;
          }
        }
      }

      .tools-panel-choose {
        border: none;
@@ -545,11 +504,56 @@
      }

      .special-button {
        width: 22px;
        height: 45px;
        width: 0.1362rem;
        height: 0.2725rem;
        color: @color-over;
      }
    }
  }
}
.base-map-inner-panel {
  display: flex;
  justify-content: center;
  align-items: center;

  .base-map-img {
    position: absolute;
  }

  .base-map-img-Tool:hover {
    cursor: pointer;
  }

  .base-map-anno-Tool {
    position: absolute;
    margin-left: 2px;
    background-color: rgba(0, 0, 0, .5);
    color: @color-over;

    .el-checkbox__label {
      padding-left: 5px !important;
    }
  }

  .basemap-layer-item {
    display: flex;
    width: 50px;
    height: 50px;
    margin: 10px;
    border: 2px solid white;

    input {
      position: relative;
      left: 0;
      top: -53px;
    }

    .basemap-layer-item-name {
      position: relative;
      left: 0;
      top: -53px;
    }
  }
}

</style>

 src/components/table/enterprise.vue

@@ -82,7 +82,7 @@
        cursor: pointer;
    }
    .enterprise-function:not(:first-child){
        margin-left: 10px;
        margin-left: 0.05rem;
    }
}
</style>

 src/components/table/summarySheets.vue

@@ -46,7 +46,7 @@
<style scoped lang="less">
    .summary-sheets {
        position: absolute;
        top: 0.46rem;
        top: 0.42979rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/