minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
master
LCJ-MinYa 3 weeks ago
parent 50912b1bb3
commit 094d6e56ef
3 changed files with 162 additions and 106 deletions
Show Stats Download Patch File Download Diff File

48
demoHtml/flex/css/index.css
Unescape Escape View File

@ -16,7 +16,37 @@ html {
#app { #app {
display: flex; display: flex;
flex-direction: column;
height: 100vh; 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 */ /* Components panel */
@ -104,7 +134,7 @@ html {
cursor: pointer; cursor: pointer;
} }
.save-container { .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 .trash-container > span,
.action-btn .save-container > span { .action-btn .save-container > span {
@ -115,11 +145,15 @@ html {
#canvas-panel { #canvas-panel {
flex: 4; flex: 4;
height: 100%; height: 100%;
background-color: #f9fafb; background-color: #fff;
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
padding: 10px; padding: 10px;
} }
.grid-stack {
background-color: #f9fafb;
border-radius: 8px;
}
.grid-stack-item-content { .grid-stack-item-content {
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
@ -154,12 +188,20 @@ html {
/* Props panel */ /* Props panel */
#props-panel { #props-panel {
flex: 1; flex: 1;
padding: 10px;
background-color: #fff; background-color: #fff;
overflow-y: auto; overflow-y: auto;
border-left: 1px solid #e0e0e0; 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 { .form-item {
margin-bottom: 20px; margin-bottom: 20px;
} }

14
demoHtml/flex/index.html
Unescape Escape View File

@ -24,8 +24,18 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="header">
<h1>可视化布局编辑器</h1>
<div class="header-actions">
<span>拖拽组件到画布区域</span>
</div>
</div>
<div id="main">
<!-- 组件列表 --> <!-- 组件列表 -->
<div id="components-panel"> <div id="components-panel">
<div class="panel-title">
<span>组件列表</span>
</div>
<div class="components-list"> <div class="components-list">
<div class="component-item grid-stack-item"> <div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div> <div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
@ -69,6 +79,9 @@
</div> </div>
<!-- 当前选中组件属性 --> <!-- 当前选中组件属性 -->
<div id="props-panel"> <div id="props-panel">
<div class="panel-title">
<span>组件属性</span>
</div>
<div class="wait-box">请选择组件</div> <div class="wait-box">请选择组件</div>
<form class="hidden"> <form class="hidden">
<div class="form-item"> <div class="form-item">
@ -134,6 +147,7 @@
</form> </form>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>

2
demoHtml/flex/js/index.js
Unescape Escape View File

@ -29,7 +29,7 @@
}; };
grid = GridStack.init({ grid = GridStack.init({
// 一行高度 // 一行高度
cellHeight: 80, cellHeight: 60,
// 间距 // 间距
margin: 5, margin: 5,
minRow: 8, minRow: 8,

Write Preview
Loading…
Cancel
Save