| | |
| | | <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> |
| | |
| | | </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; |
| | | } |