优化拖拽,优化灯光模态框

src/UI/Components/Modal/Modal.less

@@ -1,10 +1,11 @@
 #modal{
     position: fixed;
-    z-index: 2;
+    z-index: 10;
     outline: none;
 }
 #modal .bp3-dialog{
-    width: auto;
+    margin: 0;
+    width: 100%;    
 }
 #lightModal h5{
     color: #CCCCCC;
@@ -21,27 +22,43 @@
     margin:10px 0;
     text-align: right;
 }
-#modal .bp3-dialog-body .twoCol>label{
+#lightModal .bp3-dialog-body>.twoCol>label{
     display: inline-block;
-    width: 20%;
     vertical-align: super;
     text-align: left;
+    margin-right: 10px;
+    width: 30%;
 }
-#modal .bp3-dialog-body .twoCol>input{
+#lightModal .bp3-dialog-body ul>.twoCol>label{
+    display: inline-block;
     vertical-align: super;
-    width: 75%;
+    text-align: left;
+    margin-right: 10px;
+}
+#lightModal .bp3-dialog-body>.twoCol>input{
+    vertical-align: super;
+    width: 70%;
+}
+#lightModal .bp3-dialog-body>.twoCol ul input{
+    width: 80%;
+}
+#lightModal .bp3-dialog-body>.twoCol{
+    width: 14rem;
+    display: flex;
+}
+#lightModal .bp3-dialog-body .twoCol{
+    display: flex;
 }
-
 #lightModal ul{
     display: inline-block;
     list-style: none;
     padding-left: 0;
-    width: 75%;
+    vertical-align: top;
+    width: 70%;
     margin: 0;
 }
 #lightModal li{
     display: inline-block;
-    width: 33.3333%
 }
 
 // 输入框高度
@@ -55,6 +72,7 @@
 /* 板件input样式调整 */
 #boardModal .bp3-dialog-body .bp3-label{
     line-height: @inputHeight;
+    margin-bottom: 0.5rem;
 }
 #boardModal .bp3-dialog-body .bp3-label>span{
     display: inline-block;
@@ -227,7 +245,7 @@
 //选择材质
 #boardModal{
     .br-mat{
-        margin-bottom: 15px;
+        margin-bottom:0.5rem;
     }
     .br-mat>div>label:last-child{
         margin-bottom: 0;

src/UI/Components/Modal/ModalsManage.tsx

@@ -128,10 +128,9 @@ export class ModalManage
         {
             let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight;
             this.m_ModalContainer.style.left = `calc( 50% - ${this.m_ModalContainer.clientWidth / 2}px)`;
-            this.m_ModalContainer.style.top = `calc( 50%  - ${(this.m_ModalContainer.clientHeight + commandHeight - 40) / 2}px)`;
+            this.m_ModalContainer.style.top = `calc( 50%  - ${(this.m_ModalContainer.clientHeight) / 2}px)`;
         }
 
-        this.m_ModalContainer.style.width = "auto";
         this.m_ModalContainer.focus();
         this.MoveModal();
     }
@@ -181,16 +180,11 @@ export class ModalManage
         //鼠标在模态框的位置
         let modalX;
         let modalY;
-        //命令栏高度
-        let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight;
-        //底部面板高度
-        let downHeight = document.getElementById("DownPanel").offsetHeight;
-        let topHeight = 40;
 
         dragArea.onmousedown = (e) =>
         {
             //底部边界
-            let maxBottom = window.innerHeight - commandHeight - modal.offsetHeight + downHeight;
+            let maxBottom = window.innerHeight - modal.offsetHeight;
             modalX = e.clientX - modal.offsetLeft;
             modalY = e.clientY - modal.offsetTop;
             modal.style.cursor = "move";
@@ -202,14 +196,18 @@ export class ModalManage
                 (moveX > window.innerWidth - modal.offsetWidth) moveX = window.innerWidth - modal.offsetWidth;
 
                 let moveY = e.clientY - modalY;
-                if (moveY < topHeight) moveY = topHeight;
+
+                if (moveY < 0) moveY = 0;
                 else if (moveY > maxBottom) moveY = maxBottom;
 
-                modal.style.left = moveX + "px";
+                if (moveY > 0)
+                {
                     modal.style.top = moveY + "px";
-                modalX = e.clientX - modal.offsetLeft;
                     modalY = e.clientY - modal.offsetTop;
                 }
+                modal.style.left = moveX + "px";
+                modalX = e.clientX - modal.offsetLeft;
+            }
         }
         document.onmouseup = (e) =>
         {