| | |
| | | <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> |
| | |
| | | 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> |
| | |
| | | |
| | | <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; |
| | | } |
| | |
| | | .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; |
| | | } |
| | |
| | | .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; |
| | | } |
| | | } |
| | |
| | | z-index: 999; |
| | | padding: 0; |
| | | margin: 0; |
| | | margin-right:0.015rem; |
| | | margin-right: 0.015rem; |
| | | width: 0.2725rem; |
| | | height: 0.2725rem; |
| | | background: @background-color; |
| | |
| | | .tools-panel-choose { |
| | | border: 0.00521rem solid #fff700; |
| | | box-shadow: 0 0 0.03rem #fff700; |
| | | color:#fff700; |
| | | color: #fff700; |
| | | |
| | | img { |
| | | width: 22px; |
| | | height: 22px; |
| | |
| | | .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; |