feat: 拖拽布局-页面样式美化

3 weeks ago · 094d6e56ef
parent 50912b1bb3
commit 094d6e56ef
3 changed files with 162 additions and 106 deletions
--- a/demoHtml/flex/css/index.css
+++ b/demoHtml/flex/css/index.css
@ -16,7 +16,37 @@ html {

 #app {
    display: flex;
+    flex-direction: column;
    height: 100vh;
+    overflow: hidden;
+}
+
+#main {
+    display: flex;
+    flex: 1;
+    height: calc(100vh - 60px);
+}
+
+#header {
+    flex-shrink: 0;
+    width: 100%;
+    height: 60px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+}
+#header > h1 {
+    font-size: 20px;
+}
+
+.panel-title {
+    width: 90%;
+    margin: 0 5%;
+    padding: 10px 0;
+    border-bottom: 2px solid #667eea;
 }

 /* Components panel */
@ -104,7 +134,7 @@ html {
    cursor: pointer;
 }
 .save-container {
-    background: rgb(0, 123, 255, 1) !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
 }
 .action-btn .trash-container > span,
 .action-btn .save-container > span {
@ -115,11 +145,15 @@ html {
 #canvas-panel {
    flex: 4;
    height: 100%;
-    background-color: #f9fafb;
+    background-color: #fff;
    position: relative;
    overflow-y: auto;
    padding: 10px;
 }
+.grid-stack {
+    background-color: #f9fafb;
+    border-radius: 8px;
+}
 .grid-stack-item-content {
    cursor: pointer;
    background: #fff;
@ -154,12 +188,20 @@ html {
 /* Props panel */
 #props-panel {
    flex: 1;
-    padding: 10px;
    background-color: #fff;
    overflow-y: auto;
    border-left: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
 }

+form {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+}
 .form-item {
    margin-bottom: 20px;
 }
--- a/demoHtml/flex/index.html
+++ b/demoHtml/flex/index.html
@ -24,8 +24,18 @@
    </head>
    <body>
        <div id="app">
+            <div id="header">
+                <h1>可视化布局编辑器</h1>
+                <div class="header-actions">
+                    <span>拖拽组件到画布区域</span>
+                </div>
+            </div>
+            <div id="main">
                <!-- 组件列表 -->
                <div id="components-panel">
+                    <div class="panel-title">
+                        <span>组件列表</span>
+                    </div>
                    <div class="components-list">
                        <div class="component-item grid-stack-item">
                            <div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
@ -69,6 +79,9 @@
                </div>
                <!-- 当前选中组件属性 -->
                <div id="props-panel">
+                    <div class="panel-title">
+                        <span>组件属性</span>
+                    </div>
                    <div class="wait-box">请选择组件</div>
                    <form class="hidden">
                        <div class="form-item">
@ -134,6 +147,7 @@
                    </form>
                </div>
            </div>
+        </div>
    </body>
 </html>
 <script src="./js/index.js"></script>
--- a/demoHtml/flex/js/index.js
+++ b/demoHtml/flex/js/index.js
@ -29,7 +29,7 @@
        };
        grid = GridStack.init({
            // 一行高度
-            cellHeight: 80,
+            cellHeight: 60,
            // 间距
            margin: 5,
            minRow: 8,