From 85fb13abbeadc1765d2c0056ba99c6c19aa35dfd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sun, 09 Apr 2023 03:44:49 +0800
Subject: [PATCH] 电子沙盘的调整
---
src/styles/base/index.scss | 463 ++++++++++++++++++++++++++-------------------------------
1 files changed, 208 insertions(+), 255 deletions(-)
diff --git a/src/styles/base/index.scss b/src/styles/base/index.scss
index 9e0590a..be0e3d4 100644
--- a/src/styles/base/index.scss
+++ b/src/styles/base/index.scss
@@ -665,26 +665,50 @@
display: flex;
flex-direction: column;
width: 360px;
- height: 240px;
+
+ .el-dialog__header {
+ .el-dialog__title {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
.el-dialog__body {
position: relative;
&>div {
- position: absolute;
+ padding-bottom: 56px;
+ position: relative;
width: 100%;
height: 100%;
- top: 0;
- left: 0;
- &>.input-box {
- margin-bottom: 10px;
+ &>div {
+ position: relative;
+ height: 44px;
+ line-height: 44px;
+ }
+
+
+ .line {
display: flex;
align-items: center;
- justify-content: center;
- height: 36px;
- position: relative;
+
+ .pick-color-box {
+ display: flex;
+ align-items: center;
+ }
}
+
+ .btn-box {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+
}
@@ -710,33 +734,12 @@
.el-tree {
position: absolute;
- height: 100px;
- top: 36px;
- width: calc(100% - 16px);
+ max-height: 220px;
+ top: 44px;
+ width: 100%;
background-color: rgba(8, 56, 185, 0.6);
z-index: 99;
- }
-
- .el-input {
- width: calc(100% - 20px);
- font-size: 14px;
- top: 0;
- left: 0;
- }
-
- .police-btn-box {
- position: absolute;
- bottom: 16px;
- width: 100%;
- }
-
- .area {
- top: 92px;
- }
-
- .line {
- display: flex;
- justify-content: left;
+ overflow-y: auto;
}
.value-name-box {
@@ -775,30 +778,50 @@
display: flex;
flex-direction: column;
width: 360px;
- height: 240px;
+
+ .el-dialog__header {
+ .el-dialog__title {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
.el-dialog__body {
position: relative;
&>div {
- position: absolute;
+ padding-bottom: 56px;
+ position: relative;
width: 100%;
height: 100%;
- top: 0;
- left: 0;
- &>.input-box {
- margin-bottom: 10px;
+ &>div {
+ position: relative;
+ height: 44px;
+ line-height: 44px;
+ }
+
+
+ .line {
display: flex;
align-items: center;
- justify-content: center;
- height: 36px;
- position: relative;
- &>div {
- width: 100%;
+ .pick-color-box {
+ display: flex;
+ align-items: center;
}
}
+
+ .btn-box {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+
}
.el-button {
@@ -809,7 +832,7 @@
width: 60px;
height: 30px;
text-align: center;
- margin-top: 40px;
+ margin-top: 16px;
}
}
@@ -817,15 +840,12 @@
background-color: #409EFF;
}
- .el-select .el-input.is-disabled .el-input__inner {
- background-color: rgba(8, 56, 185, 0.9);
+ .el-select {
+ width: 100%;
}
- .police-btn-box {
- position: absolute;
- left: 0;
- bottom: 16px;
- width: 100%;
+ .el-select .el-input.is-disabled .el-input__inner {
+ background-color: rgba(8, 56, 185, 0.9);
}
.line {
@@ -865,84 +885,129 @@
}
}
-.edit-line-box {
- .el-dialog {
- display: flex;
- flex-direction: column;
- width: 360px;
- height: 240px;
+// .edit-line-box {
+// .el-dialog {
+// display: flex;
+// flex-direction: column;
+// width: 360px;
+// height: 240px;
- .el-dialog__body {
- .el-button {
- padding: 0;
- background-color: rgba(8, 56, 185, 0.9);
- border: 1px solid rgba(8, 56, 185, 0.9);
- color: #fff;
- width: 60px;
- height: 30px;
- text-align: center;
- margin-top: 10px;
- }
+// .el-dialog__body {
+// .el-button {
+// padding: 0;
+// background-color: rgba(8, 56, 185, 0.9);
+// border: 1px solid rgba(8, 56, 185, 0.9);
+// color: #fff;
+// width: 60px;
+// height: 30px;
+// text-align: center;
+// margin-top: 10px;
+// }
- .el-button:hover {
- background-color: #409EFF;
- }
+// .el-button:hover {
+// background-color: #409EFF;
+// }
- &>div {
- display: flex;
- // justify-content: center;
- margin-bottom: 10px;
- }
+// &>div {
+// display: flex;
+// // justify-content: center;
+// margin-bottom: 10px;
+// }
- .input-width-box {
- input {
- outline: none;
- width: 80px;
- height: 28px;
- background-color: rgba(8, 56, 185, 0.5);
- border: none;
- color: #fff;
- border-radius: 4px;
- padding-left: 15px;
- }
+// .input-width-box {
+// input {
+// outline: none;
+// width: 80px;
+// height: 28px;
+// background-color: rgba(8, 56, 185, 0.5);
+// border: none;
+// color: #fff;
+// border-radius: 4px;
+// padding-left: 15px;
+// }
- input:focus {
- border-color: #409EFF;
- border: 1px solid #409EFF;
- }
- }
+// input:focus {
+// border-color: #409EFF;
+// border: 1px solid #409EFF;
+// }
+// }
- .value-name-box {
- height: 32px;
- line-height: 32px;
- width: 120px;
- text-align: left;
- }
+// .value-name-box {
+// height: 32px;
+// line-height: 32px;
+// width: 120px;
+// text-align: left;
+// }
- .edit-line-btn-box {
- display: flex;
- justify-content: center;
- }
+// .edit-line-btn-box {
+// display: flex;
+// justify-content: center;
+// }
- .units {
- width: 60px;
- height: 26px;
- text-align: left;
- padding-left: 10px;
- }
+// .units {
+// width: 60px;
+// height: 26px;
+// text-align: left;
+// padding-left: 10px;
+// }
- }
- }
-}
+// }
+// }
+// }
+.edit-line-box,
+.edit-plot-box,
.add-polygon-box {
.el-dialog {
display: flex;
flex-direction: column;
width: 360px;
- height: 240px;
+
+ .el-dialog__header {
+ .el-dialog__title {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
.el-dialog__body {
+ position: relative;
+
+ &>div {
+ padding-bottom: 56px;
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ &>div {
+ position: relative;
+ height: 44px;
+ line-height: 44px;
+ }
+
+
+ .line {
+ display: flex;
+ align-items: center;
+
+ .pick-color-box {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ .btn-box {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+
+ }
+
.el-button {
padding: 0;
background-color: rgba(8, 56, 185, 0.9);
@@ -951,71 +1016,45 @@
width: 60px;
height: 30px;
text-align: center;
+ margin-top: 16px;
}
+ }
- .el-button:hover {
- background-color: #409EFF;
- }
+ .value-name-box {
+ height: 32px;
+ line-height: 32px;
+ width: 110px;
+ }
- .line {
- display: flex;
- justify-content: left;
- margin-bottom: 10px;
+ .line {
+ display: flex;
+ justify-content: left;
+ }
- input {
- outline: none;
- width: 80px;
- height: 28px;
- background-color: rgba(8, 56, 185, 0.5);
- border: none;
- color: #fff;
- border-radius: 4px;
- padding-left: 15px;
- }
+ .width-box {
+ display: flex;
+ align-items: center;
+ }
- input:focus {
- border-color: #409EFF;
- border: 1px solid #409EFF;
- }
- }
+ .alpha {
+ flex: 1;
+ }
- .alpha {
- width: calc(100% - 110px);
- }
-
- .value-name-box {
- width: 110px;
- display: flex;
- align-items: center;
- }
-
- .add-polygon-btn-box {
- display: flex;
- justify-content: center;
- }
-
+ .input-width-box {
input {
- height: 30px;
- font-size: 16px;
- color: #ffffff;
- background-color: transparent;
- border: 1px solid rgb(0, 92, 169);
+ outline: none;
+ width: 80px;
+ height: 28px;
+ background-color: rgba(8, 56, 185, 0.5);
+ border: none;
+ color: #fff;
+ border-radius: 4px;
+ padding-left: 15px;
}
input:focus {
- outline: none;
- }
-
- input::-webkit-input-placeholder {
- color: rgba(238, 238, 238, 0.7);
- }
-
- .el-input--suffix .el-input__inner {
- padding-right: 10px;
- }
-
- .placeholder {
- height: 26px;
+ border-color: #409EFF;
+ border: 1px solid #409EFF;
}
}
}
@@ -1024,92 +1063,6 @@
.select-on-tab {
box-shadow: 0 2px 2px $menu-tab-shadow;
color: #fff;
-}
-
-.edit-plot-box {
- .el-dialog {
- display: flex;
- flex-direction: column;
- width: 360px;
- height: 240px;
-
- .el-dialog__body {
- .el-button {
- padding: 0;
- background-color: rgba(8, 56, 185, 0.9);
- border: 1px solid rgba(8, 56, 185, 0.9);
- color: #fff;
- width: 60px;
- height: 30px;
- text-align: center;
- margin-top: 10px;
- }
-
- .el-button:hover {
- background-color: #409EFF;
- }
-
- &>div {
- display: flex;
- // justify-content: center;
- margin-bottom: 10px;
-
- input {
- outline: none;
- width: 80px;
- height: 28px;
- background-color: rgba(8, 56, 185, 0.5);
- border: none;
- color: #fff;
- border-radius: 4px;
- padding-left: 15px;
- }
-
- input:focus {
- border-color: #409EFF;
- border: 1px solid #409EFF;
- }
- }
-
- .value-name-box {
- height: 32px;
- line-height: 32px;
- width: 120px;
- text-align: left;
- }
-
- .alpha {
- width: calc(100% - 120px);
- }
-
- input {
- height: 30px;
- font-size: 16px;
- text-indent: 1em;
- color: #ffffff;
- background-color: transparent;
- border: 1px solid rgb(0, 92, 169);
- }
-
- input:focus {
- outline: none;
- }
-
- input::-webkit-input-placeholder {
- color: rgba(238, 238, 238, 0.7);
- }
-
- .placeholder {
- height: 15px;
- margin-bottom: 0px;
- }
-
- .edit-plot-btn-box {
- display: flex;
- justify-content: center;
- }
- }
- }
}
.edit-range-box {
--
Gitblit v1.9.3