From 6f52267465d2ce8e08ae0fd61bbe7f69b366a2c4 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期四, 08 四月 2021 14:51:11 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/LayerController/LayerController.vue | 64 +++++++++++++++++++++++-------- 1 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue index d9165bf..e494157 100644 --- a/src/components/LayerController/LayerController.vue +++ b/src/components/LayerController/LayerController.vue @@ -1,13 +1,16 @@ <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> - <transition name="fade"> - <div :class="'legend-content map-background'" v-show="layerControllerVisible" style=" transform-origin: top left;"> + + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鍥惧眰鎺у埗" placement="left"> + <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> + </el-tooltip> + <transition name="layerChange"> + <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> + <button @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></button> </div> </transition> </div> @@ -71,19 +74,41 @@ </script> <style lang="less"> + + .layerChange-enter-active { + transform-origin: top left; + animation: bounce-in .2s; + } + .layerChange-leave-active { + transform-origin: top left; + animation: bounce-in .2s reverse; + } + /* + + .layerChange-enter-active, + .layerChange-leave-active { + transition: all 0.5s; + } + + .layerChange-enter, + .layerChange-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; - - div { - color: #00fff6; - } - + min-height: 0.28rem; + min-width: 0.28rem; + overflow: hidden; .iconBtn.active{ display: none; } @@ -222,19 +247,24 @@ background: #0E3565; } .el-button--default{ - margin-left: 10px; padding: 15px 3px; - background:@background-color; + background:@background-color4; color:@color-tool; position: absolute; top:0; - right: -26px; + left: 100%; + margin-left: .02rem; + border:1px solid @color-tool; + // border-radius: 0.03rem 50% 50% 0.03rem; } .el-button--default:hover{ background:@background-color; + border:1px solid @color; + box-shadow: 0 0 2px @color; + color:@color; } .legend-content{ - width: 1.79167rem; + width: 1.79167rem; } } -- Gitblit v1.8.0