| | |
| | | <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"> |
| | | <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt=""/> |
| | | <span class="span-default">工具</span> |
| | | <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"> |
| | |
| | | @click.native="changeChoose(index)"> |
| | | <img :src="item.iconSelecd" alt="" v-if="active === index"/> |
| | | <img :src="item.icon" alt="" v-else/> |
| | | <span v-if="active === index">{{ item.label }}</span> |
| | | <span v-else class="default-span">{{ item.label }}</span> |
| | | <!--<span v-if="active === index">{{ item.label }}</span> |
| | | <span v-else class="default-span">{{ item.label }}</span>--> |
| | | </el-button> |
| | | <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" |
| | | v-show="item.index!=='2'"> |
| | |
| | | |
| | | .left-top-toolbox-panel { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 15px; |
| | | left: 0.14583rem; |
| | | top: 0.11979rem; |
| | | z-index: 999; |
| | | |
| | | .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; |
| | | |
| | | vertical-align: middle !important; |
| | | .base-map-img { |
| | | position: absolute; |
| | | } |
| | |
| | | .base-map-img:hover { |
| | | cursor: pointer; |
| | | } |
| | | |
| | | img { |
| | | width: 22px; |
| | | height: 22px; |
| | | } |
| | | |
| | | .span-default { |
| | | display: block; |
| | | color: @color-shadow; |
| | | font-size: 11px; |
| | | font-size: 10px; |
| | | } |
| | | |
| | | span { |
| | | display: block; |
| | | color: @color-over; |
| | | font-size: 11px; |
| | | font-size: 10px; |
| | | } |
| | | } |
| | | .specific-tools-group .el-button{ |
| | | span{ |
| | | color: #0B89B5; |
| | | } |
| | | } |
| | | |
| | |
| | | left: 500px; |
| | | z-index: 999; |
| | | padding: 0; |
| | | margin: 0 0.015rem; |
| | | width: 45px; |
| | | height: 45px; |
| | | margin: 0; |
| | | margin-right:0.015rem; |
| | | width: 0.2725rem; |
| | | height: 0.2725rem; |
| | | background: @background-color; |
| | | border: 0.00521rem solid @color-shadow; |
| | | } |
| | |
| | | |
| | | .specific-tools-group { |
| | | z-index: 1; |
| | | |
| | | .tools-panel-choose { |
| | | border: none; |
| | | box-shadow: 0 0 0.03rem @color-shadow; |
| | |
| | | } |
| | | |
| | | .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> |