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

chenyabin

2021-04-07 b9aa1e3bc9b70df68967b3a37ece51ae1729f5b2

 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;

    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;
    }
@@ -479,6 +483,34 @@
    .specific-tools-group {
      z-index: 1;

      .tools-panel-choose {
        border: none;
        box-shadow: 0 0 0.03rem @color-shadow;

        img {
          width: 22px;
          height: 22px;
        }

        span {
          display: block;
          color: @color-shadow;
        }

        .default-span {
          display: block;
          color: @color-over;
        }
      }

      .special-button {
        width: 0.1362rem;
        height: 0.2725rem;
        color: @color-over;
      }
    }
  }
}
      .base-map-inner-panel {
        display: flex;
        justify-content: center;
@@ -524,32 +556,4 @@
        }
      }

      .tools-panel-choose {
        border: none;
        box-shadow: 0 0 0.03rem @color-shadow;

        img {
          width: 22px;
          height: 22px;
        }

        span {
          display: block;
          color: @color-shadow;
        }

        .default-span {
          display: block;
          color: @color-over;
        }
      }

      .special-button {
        width: 22px;
        height: 45px;
        color: @color-over;
      }
    }
  }
}
</style>