root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

布局样式

develop
就眠仪式 2020-09-03 23:32:07 +08:00
parent 90f8b0a306
commit f929f665eb
3 changed files with 201 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
component/code/css/style.css
View File

@ -2,8 +2,8 @@ html,body{background-color: whitesmoke}
.layui-fluid{margin-top: 15px;}
.content{min-height: 796px;}
.nav{text-align: center;}
.nav button{margin-bottom: 3px;width: 100%;margin-top: 3px;margin-bottom: 3px;}
.nav button{margin-bottom: 3px;width: 100%;margin-top: 3px;margin-bottom: 3px;border-radius: 1px;}
.nav button:hover{background-color: #5FB878;border: 1px solid #5FB878;color: white;}
.layui-card-body .layui-btn+.layui-btn{margin-left: 0px;}
.code-show{min-height: 454px;}
.js-show{min-height: 200px;}
.del-form{line-height: initial;position: absolute;right: 15px;top: 50%;margin-top: -15px;}

41
component/code/index.html
View File

@ -15,27 +15,32 @@
<div class="layui-card nav click-but">
<div class="layui-card-header">长</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="text">输入框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="password">密码框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="select">选择框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="checkbox_a">复选框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="checkbox_b">开关</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="radio">单选框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="textarea">文本域</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="submit">提交</button>
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="text">输入框</button>
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="password">密码框</button>
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="select">选择框</button>
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="checkbox_a">复选框</button>
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="checkbox_b">开关</button>
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="radio">单选框</button>
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="textarea">文本域</button>
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="submit">提交</button>
</div>
</div>
<div class="layui-card nav">
<div class="layui-card-header">短</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="text">输入框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="password">密码框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="select">选择框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="checkbox_a">复选框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="checkbox_b">开关</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="radio">单选框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="textarea">文本域</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="submit">提交</button>
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="text">输入框</button>
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="password">密码框</button>
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="select">选择框</button>
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="checkbox_a">复选框</button>
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="checkbox_b">开关</button>
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="radio">单选框</button>
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="textarea">文本域</button>
<button class="pear-btn" plain data-size="block" data-type="submit">提交</button>
</div>
</div>
<div class="layui-card nav">
<div class="layui-card-body">
<button class="pear-btn pear-btn-danger pear-btn-sm del-form" data-type="del"> <i class="layui-icon">&#xe640;</i></button>
</div>
</div>
@ -43,7 +48,7 @@
<div class="layui-col-md5">
<div class="layui-card content">
<div class="layui-card-header">
<button class="pear-btn pear-btn-danger pear-btn-sm del-form" data-type="del"> <i class="layui-icon">&#xe640;</i></button>
view
</div>
<div class="layui-card-body code">
<form class="layui-form" action="" onsubmit="return false">
@ -59,7 +64,7 @@
</div>
</div>
<div class="layui-card r-code-js">
<div class="layui-card-header">JS</div>
<div class="layui-card-header">code</div>
<div class="layui-card-body">
<textarea name="" class="layui-textarea js-show"></textarea>
</div>

32
component/pear/module/design.js
View File

@ -1,10 +1,8 @@
/**
* time: 2018年11月21日 15:25:32
* author: dbag
* blog: http://www.cnblogs.com/phper8/
*/
layui.define(['layer', 'form'], function(exports) {
var layer = layui.layer,form = layui.form,$ = layui.$,key = '';
var layer = layui.layer,
form = layui.form,
$ = layui.$,
key = '';
delHtml()
$('button').on('click', function() {
var _this = $(this),
@ -44,20 +42,20 @@ layui.define(['layer', 'form'], function(exports){
return false
break;
default:
layer.msg('类型错误',{icon:2})
layer.msg('类型错误', {
icon: 2
})
}
$('form').append(html);
form.render();
setHtml(html)
})
function delHtml() {
layui.data('form_html', {
key: 'html'
,remove: true
key: 'html',
remove: true
});
}
@ -81,11 +79,13 @@ layui.define(['layer', 'form'], function(exports){
var html = ' <div class="layui-form-item">\n' +
' <label class="layui-form-label">' + name + '</label>\n' +
' <div class="layui-input-' + size + '">\n' +
' <input type="'+type+'" name="'+key+'" required lay-verify="required" placeholder="请输入'+name+'内容" autocomplete="off" class="layui-input">\n' +
' <input type="' + type + '" name="' + key + '" required lay-verify="required" placeholder="请输入' + name +
'内容" autocomplete="off" class="layui-input">\n' +
' </div>\n' +
' </div>\n';
return html;
}
function select(size) {
var html = ' <div class="layui-form-item">\n' +
' <label class="layui-form-label">选择框</label>\n' +
@ -102,6 +102,7 @@ layui.define(['layer', 'form'], function(exports){
' </div>\n';
return html;
}
function checkbox_a(size) {
var html = ' <div class="layui-form-item">\n' +
' <label class="layui-form-label">复选框</label>\n' +
@ -113,6 +114,7 @@ layui.define(['layer', 'form'], function(exports){
' </div>\n';
return html;
}
function checkbox_b(size) {
var html = ' <div class="layui-form-item">\n' +
' <label class="layui-form-label">开关</label>\n' +
@ -122,6 +124,7 @@ layui.define(['layer', 'form'], function(exports){
' </div>\n';
return html;
}
function radio(size) {
var html = ' <div class="layui-form-item">\n' +
' <label class="layui-form-label">单选框</label>\n' +
@ -132,6 +135,7 @@ layui.define(['layer', 'form'], function(exports){
' </div>\n';
return html;
}
function textarea(size) {
var html = ' <div class="layui-form-item layui-form-text">\n' +
' <label class="layui-form-label">文本域</label>\n' +
@ -141,6 +145,7 @@ layui.define(['layer', 'form'], function(exports){
' </div>\n';
return html;
}
function submits(size) {
var html = ' <div class="layui-form-item">\n' +
' <div class="layui-input-' + size + '">\n' +
@ -150,6 +155,7 @@ layui.define(['layer', 'form'], function(exports){
' </div>\n';
return html;
}
function jscode() {
var html = '<script>\n' +
' layui.use(\'form\', function(){\n' +
@ -162,10 +168,10 @@ layui.define(['layer', 'form'], function(exports){
'</script>';
return html;
}
function randStrName() {
return Math.random().toString(36).substr(8);
}
$('.click-but button').click()
var jscodehtml = jscode();
$('.js-show').text(jscodehtml)
form.on('submit(formDemo)', function(data) {