!1719 修复:底部工具栏样式排版

src/UI/Components/Panel.tsx

@@ -17,6 +17,7 @@ import { LightsMenu } from '../../Editor/LightsMenu';
 import { SnapMenuFixed } from '../../Editor/SnapMenuFixed';
 import { TempEditor } from '../../Editor/TempEditor';
 import { userConfig } from '../../Editor/UserConfig';
+import '../Css/PanelStyle.less';
 import { DownPanelStore, LightDataModeType } from '../Store/DownPanelStore';
 import { RightPanelStore } from '../Store/RightPanelStore/RightPanelStore';
 import { TopPanelStore } from '../Store/TopPanelStore';
@@ -317,21 +318,20 @@ export class DownPanel extends React.Component<{ store?: DownPanelStore; }, {}>
             float: "right", marginRight: "10px", marginBottom: 0
         };
         return (
-            <div style={{ display: this.downStore.isBottomToolBarShow ? "block" : "none" }}>
+            <div className='DownPanelCoordinateAndRadios'
-                <span style={{ position: "absolute", color: "black" }} ref={el => this.props.store.posEl = el}>0,0,0</span>
+                style={{ display: this.downStore.isBottomToolBarShow ? "flex" : "none" }}>
-                <span style={{ position: "absolute", left: 170, display: this.props.store.progress === 1 ? "none" : "block" }}>{this.props.store.progressName}</span>
+                <span style={{ color: "black" }} ref={el => this.props.store.posEl = el}>0,0,0</span>
+                <span style={{ display: this.props.store.progress === 1 ? "none" : "block" }}>{this.props.store.progressName}</span>
                 <div style={{
-                    position: "absolute",
                     float: "right", marginRight: "10px",
-                    left: "210px",
                     width: "150px",
-                    height: 15,
+                    marginLeft: '10px',
-                    marginTop: "4px",
                     zIndex: 5000,
                     display: this.props.store.progress === 1 ? "none" : "block"
                 }}>
                     <ProgressBar intent={"primary"} value={this.props.store.progress}></ProgressBar>
                 </div>
+                <div style={{ marginLeft: "auto", display: "flex", flexDirection: "row-reverse", flexWrap: "wrap" }}>
                     <Switch
                         checked={this.props.store.useDynInput}
                         label="动态输入"
@@ -465,7 +465,7 @@ export class DownPanel extends React.Component<{ store?: DownPanelStore; }, {}>
                     >
                         <LightsMenu GetLightType={this.GetLightType} />
                     </Switch>
-
+                </div>
             </div >
         );
     }

src/UI/Css/PanelStyle.less

@@ -0,0 +1,11 @@
+.DownPanelCoordinateAndRadios
+{
+    flex-direction: row;
+    align-items   : center;
+}
+@media screen and (max-width:300px) {
+    .DownPanelCoordinateAndRadios
+    {
+        flex-direction: column;
+    }
+}