From d96de2f15f91d4e40562b27f2b6f2de3c700821d Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 15 三月 2021 18:19:37 +0800 Subject: [PATCH] 修改左上角功能实现部分 --- src/assets/css/map/map-panel-style.less | 178 ++++++++++++++++++++++++++++++++++------------------------- 1 files changed, 102 insertions(+), 76 deletions(-) diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index bb2b491..19301da 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -1,82 +1,90 @@ @import "_map-variable"; -.el-button--primary{ - color: @color; - background-color: @background-color; - border-color: @color; + +.el-button--primary { + color: @color; + background-color: @background-color; + border-color: @color; } -.el-tabs{ - .el-tabs__item{ - padding: 0 10px; - text-align: center; - height: 20px; - line-height: 20px; +.el-tabs { + .el-tabs__item { + padding: 0 10px; + text-align: center; + height: 20px; + line-height: 20px; - color: @color; - cursor: pointer; - -ms-flex-negative: 0; - flex-shrink: 0; + color: @color; + cursor: pointer; + -ms-flex-negative: 0; + flex-shrink: 0; } } -.el-tabs__header{ + +.el-tabs__header { font-size: .08333rem; line-height: .10938rem; - background: rgba(0,255,246,.14); + background: rgba(0, 255, 246, .14); } -.el-dialog{ + +.el-dialog { border: 0.00521rem solid @color; box-shadow: 0 0 0.03rem @color; background: rgba(0, 16, 30, 0.8); border-radius: 0.05208rem; - .el-dialog__title{ + .el-dialog__title { padding: .03125rem .08333rem; color: @color; cursor: pointer; flex-shrink: 0; } } -.select-down { - border: none !important; - background-color: @background-color ; - //.el-scrollbar{ - // - // background-color: @background-color !important; - // } - // .el-scrollbar__view .el-select-dropdown__list{ - // background-color: @background-color !important; - // } - .el-select-dropdown__item.hover{ - background-color: @background-color-light; - } - .el-select-dropdown__item { - color: @color; - //background-color: @background-color; - } - // .el-select-dropdown{ - // border: none !important; - // background-color: @background-color !important; - // } - // .el-select-dropdown__empty{ - // color: @color; - // background-color: @background-color; - // } - .popper__arrow::after{ - border-bottom-color: @color ; - } +.select-down { + border: none !important; + background-color: @background-color; + + //.el-scrollbar{ + // + // background-color: @background-color !important; + // } + // .el-scrollbar__view .el-select-dropdown__list{ + // background-color: @background-color !important; + // } + .el-select-dropdown__item.hover { + background-color: @background-color-light; + } + + .el-select-dropdown__item { + color: @color; + //background-color: @background-color; + } + + // .el-select-dropdown{ + // border: none !important; + // background-color: @background-color !important; + // } + // .el-select-dropdown__empty{ + // color: @color; + // background-color: @background-color; + // } + .popper__arrow::after { + border-bottom-color: @color; + } } -.el-tabs{ +.el-tabs { .el-tabs__item { height: 40px; line-height: 40px; } } -.el-table th, .el-table tr{ + +.el-table th, .el-table tr { background-color: transparent; } -.el-table{ + +.el-table { color: @color; background: transparent; @@ -84,45 +92,52 @@ color: #ffffff; font-weight: 500; } - thead.is-group th{ + + thead.is-group th { background: transparent; } + .el-table__expanded-cell { - background: transparent; - } -} -.map-input{ - input{ - border-radius: 0; - background-color: @background-color-light ; - border: solid 1px @color ; + background: transparent; } } -.map-tooltip.is-dark{ - font-size: .08333rem ; - color: @color-highlight ; - background: @background-color ; +.map-input { + input { + border-radius: 0; + background-color: @background-color-light; + border: solid 1px @color; + } +} + +.map-tooltip.is-dark { + font-size: .08333rem; + color: @color-highlight; + background: @background-color; border-radius: .03rem; - padding: .05rem ; + padding: .05rem; } -.map-btn-unactive{ - color: @color ; - border: .00521rem solid @color ; - box-shadow: 0 0 .03rem @color ; + +.map-btn-unactive { + color: @color; + border: .00521rem solid @color; + box-shadow: 0 0 .03rem @color; } -.map-btn-active{ - color: @color-highlight ; - border: .00521rem solid @color-highlight ; - box-shadow: 0 0 .03rem @color-highlight ; + +.map-btn-active { + color: @color-highlight; + border: .00521rem solid @color-highlight; + box-shadow: 0 0 .03rem @color-highlight; } -.map-btn-background{ + +.map-btn-background { background: @background-color; //border: .00521rem solid @color; //box-shadow: 0 0 .03rem @color; //border-radius: .05208rem; } -.map-background{ + +.map-background { //color: @color; border: .00521rem solid @color; box-shadow: 0 0 .03rem @color; @@ -130,26 +145,37 @@ //padding: .05rem !important; border-radius: .05208rem; } + .map-under-line { height: 1px; background: @background-color-split; margin-block-start: 0; margin-block-end: 0; } + .tools-panel-content { border: 1px solid @background-color-tools; background: @background-color-tools; padding: 0; + width: 90px; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + .el-button { padding: 0; - margin: 10px; - width: 45px; - height: 45px; + margin: 5px; + width: 30px; + height: 30px; background: @background-color-tools; vertical-align: middle !important; + img { width: 16px; height: 16px; } } } +.el-popper[x-placement^=bottom] .popper__arrow::after { + border-bottom-color: @background-color-tools; +} -- Gitblit v1.8.0