From 8e8340911055cea995d410d98e0eeabf84e2e53f Mon Sep 17 00:00:00 2001 From: ChenZeping <chenzeping> Date: 星期二, 27 四月 2021 17:20:47 +0800 Subject: [PATCH] 样式/接口调整 --- src/components/panel/ToolBoxPanel.vue | 58 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue index cca3068..d4f0d28 100644 --- a/src/components/panel/ToolBoxPanel.vue +++ b/src/components/panel/ToolBoxPanel.vue @@ -2,7 +2,7 @@ <div class="left-top-toolbox-panel"> <div class="specific-tools"> <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="宸ュ叿" placement="left"> - <div :class='["iconBtn",selectGroup === true ? "active-button" : ""]' @click="changeSelectMouse" > + <div :class='["iconBtn",selectGroup === true ? "active-button" : ""]' @click="changeSelectMouse"> <i class="icon iconfont icongongju"></i> </div> </el-tooltip> @@ -15,10 +15,12 @@ v-for="(item,index) in menuList" :key="index" :width="item.index === '2'?230 : 150" v-model="isShow[index]"> - <el-button slot="reference" class="el-button" :class="active === index? 'tools-panel-choose':''" @click.native="changeChoose(index)"> + <el-button slot="reference" class="el-button" :class="active === index? 'tools-panel-choose':''" + @click.native="changeChoose(index)"> <i :class="'icon iconfont '+item.icon"></i> </el-button> - <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" v-show="item.index!=='2'" :class="indexT==toolActive?'hover':''" > + <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" + v-show="item.index!=='2'" :class="indexT==toolActive?'hover':''"> <i :class="'icon iconfont '+itemT.icon"></i> </el-button> <lc-base-map v-show="item.index==='2'"></lc-base-map> @@ -421,14 +423,15 @@ <style lang="less" scoped> - .tools-panel-content .el-button .zongs{ - transform:rotate(90deg); - -ms-transform:rotate(90deg); - -moz-transform:rotate(90deg); - -webkit-transform:rotate(90deg); - -o-transform:rotate(90deg); - display: block; - } +.tools-panel-content .el-button .zongs { + transform: rotate(90deg); + -ms-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -o-transform: rotate(90deg); + display: block; +} + .animationChange-enter-active, .animationChange-leave-active { transition: all 0.5s; } @@ -447,17 +450,19 @@ .specific-tools { display: flex; overflow: hidden; - .el-button { + + .el-button { z-index: 999; padding: 0; margin: 0 0.015rem; width: 0.2725rem; height: 0.2725rem; - color:#00fff6; + color: #00fff6; background: @background-color; - border: 0.00521rem solid #00fff6; + border: 0.00521rem solid #00fff6; vertical-align: middle !important; - font-size: 20px; + font-size: 20px; + .base-map-img { position: absolute; } @@ -465,21 +470,25 @@ .base-map-img:hover { cursor: pointer; } + img { width: 22px; height: 22px; } + .span-default { display: block; font-size: 10px; } + span { display: block; font-size: 10px; } } - .specific-tools-group .el-button{ - span{ + + .specific-tools-group .el-button { + span { color: #0B89B5; } } @@ -489,7 +498,7 @@ z-index: 999; padding: 0; margin: 0; - margin-right:0.015rem; + margin-right: 0.015rem; width: 0.2725rem; height: 0.2725rem; background: @background-color; @@ -507,7 +516,8 @@ .tools-panel-choose { border: 0.00521rem solid #fff700; box-shadow: 0 0 0.03rem #fff700; - color:#fff700; + color: #fff700; + img { width: 22px; height: 22px; @@ -527,16 +537,18 @@ .special-button { width: 0.1362rem; height: 0.2725rem; - background:@background-color4; - color:@color-tool; - border:1px solid @color-tool; + background: @background-color4; + color: @color-tool; + border: 1px solid @color-tool; } - .special-button:hover{ + + .special-button:hover { color: #00fff6; } } } } + .base-map-inner-panel { display: flex; justify-content: center; -- Gitblit v1.8.0