From 474268898f7d35316a685823ede1415684019e8c Mon Sep 17 00:00:00 2001 From: chenyabin <Chenab123!> Date: 星期四, 08 四月 2021 14:31:12 +0800 Subject: [PATCH] 统一样式-企业图标修改,搜索样式修改。 --- src/components/LayerController/LayerController.vue | 41 +++++++++++++++++++++++++++-------------- 1 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue index dcb6ed3..e494157 100644 --- a/src/components/LayerController/LayerController.vue +++ b/src/components/LayerController/LayerController.vue @@ -1,13 +1,13 @@ <template> <div :class='["float-panel",layerControllerVisible ? "active" : ""]' > - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鍥惧眰" placement="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="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; } @@ -96,10 +109,6 @@ min-height: 0.28rem; min-width: 0.28rem; overflow: hidden; - div { - color: #00fff6; - } - .iconBtn.active{ display: none; } @@ -238,20 +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; - border-radius: 0.03rem 50% 50% 0.03rem; + 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: 250px; + width: 1.79167rem; } } -- Gitblit v1.8.0