From 094d6e56efcf0cdaf86329cb2875840ac95e3b20 Mon Sep 17 00:00:00 2001 From: LCJ-MinYa <1049468118@qq.com> Date: Fri, 5 Dec 2025 17:22:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E7=BE=8E=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demoHtml/flex/css/index.css | 48 +++++++- demoHtml/flex/index.html | 218 +++++++++++++++++++----------------- demoHtml/flex/js/index.js | 2 +- 3 files changed, 162 insertions(+), 106 deletions(-) diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css index 3cf9d01..9ea208a 100644 --- 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; } diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html index 5e2bbe8..e19ff22 100644 --- a/demoHtml/flex/index.html +++ b/demoHtml/flex/index.html @@ -24,114 +24,128 @@
- -
-
-
-
轮播图
-
-
-
搜索
-
-
-
热门频道
-
-
-
直播
-
-
-
推荐内容
-
-
-
快捷入口
-
-
-
-
- - 拖动删除 -
-
- - 保存布局 -
+ - -
- -
-
- -
-
请选择组件
-