From bed3a5fd547a75988f99c24c0a43d29db29d2d49 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期五, 09 四月 2021 10:48:27 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/LayerController/LayerController.vue | 42 ++++++++++++++++++++++++++++++++---------- 1 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue index ce4d496..fe80364 100644 --- a/src/components/LayerController/LayerController.vue +++ b/src/components/LayerController/LayerController.vue @@ -7,7 +7,7 @@ <!-- <span class="icon-name">鍥惧眰</span>--> </div> </el-tooltip> - <transition name="animationChange"> + <transition name="layerChange"> <div :class="'legend-content map-background'" v-show="layerControllerVisible"> <lc-service-layer></lc-service-layer> <button @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></button> @@ -74,14 +74,27 @@ </script> <style lang="less"> - .animationChange-enter-active, .animationChange-leave-active { + + .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; } - .animationChange-enter, .animationChange-leave-to { + .layerChange-enter, + .layerChange-leave-to { opacity: 0; transform: translateX(-100px); - } + }*/ .float-panel.active{ overflow: visible; } @@ -234,17 +247,26 @@ background: #0E3565; } .el-button--default{ - padding: 15px 3px; - background:@background-color; + padding: 0; + background:@background-color4; color:@color-tool; position: absolute; - top:0; - left: 100%; - margin-left: .02rem; - border-radius: 0.03rem 50% 50% 0.03rem; + top:24px; + right:0.02rem; + border:none;//1px solid @color-tool; + width: 0.2rem; + height: 0.2rem; + text-align: center; + line-height: 0.2rem; + margin-top: -0.1rem; + border-radius: 50%; + // 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; -- Gitblit v1.8.0