add step component and add step document
就眠仪式
parent
9594186ba1
commit
505c5a9337
|
|
@ -73,41 +73,15 @@
|
|||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/notice.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "chart",
|
||||
"title": "统计图表",
|
||||
"icon": "layui-icon layui-icon-auz",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 501,
|
||||
"title": "折线图",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/chart/line.html"
|
||||
},
|
||||
{
|
||||
"id": 404,
|
||||
"title": "404",
|
||||
"id": 207,
|
||||
"title": "分布表单",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/404.html"
|
||||
},
|
||||
|
||||
{
|
||||
"id": 500,
|
||||
"title": "500",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/500.html"
|
||||
"href": "view/document/step.html"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
.lay-step {
|
||||
font-size: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
width: 60%;
|
||||
padding-left: 15%;
|
||||
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: inline-block;
|
||||
line-height: 35px;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.step-item-tail {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.step-item-tail i {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin-top: 4px;
|
||||
vertical-align: top;
|
||||
background: #5FB878;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-item-tail .step-item-tail-done {
|
||||
background: #5FB878;
|
||||
height: 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.step-item-head {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
color: #5FB878;
|
||||
border: 2px solid #5FB878;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.step-item-head.step-item-head-active {
|
||||
background: #5FB878;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.step-item-main {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-left: -50%;
|
||||
margin-right: 50%;
|
||||
padding-left: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-item-main-title {
|
||||
font-weight: bolder;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.step-item-main-desc {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.lay-step + [carousel-item]:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lay-step + [carousel-item] > * {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -2,14 +2,15 @@
|
|||
|
||||
@import url("pear-module/select.css");
|
||||
@import url("pear-module/layout.css");
|
||||
@import url("pear-module/notice.css");
|
||||
@import url("pear-module/button.css");
|
||||
@import url("pear-module/table.css");
|
||||
@import url("pear-module/frame.css");
|
||||
@import url("pear-module/menu.css");
|
||||
@import url("pear-module/form.css");
|
||||
@import url("pear-module/link.css");
|
||||
@import url("pear-module/form.css");
|
||||
@import url("pear-module/tab.css");
|
||||
@import url("pear-module/code.css");
|
||||
@import url("pear-module/link.css");
|
||||
@import url("pear-module/table.css");
|
||||
@import url("pear-module/notice.css");
|
||||
@import url("pear-module/step.css");
|
||||
@import url("pear-module/tab.css");
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
layui.define(['layer', 'carousel'], function (exports) {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
var carousel = layui.carousel;
|
||||
|
||||
// 添加步骤条dom节点
|
||||
var renderDom = function (elem, stepItems, postion) {
|
||||
var stepDiv = '<div class="lay-step">';
|
||||
for (var i = 0; i < stepItems.length; i++) {
|
||||
stepDiv += '<div class="step-item">';
|
||||
// 线
|
||||
if (i < (stepItems.length - 1)) {
|
||||
if (i < postion) {
|
||||
stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
|
||||
} else {
|
||||
stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
|
||||
}
|
||||
}
|
||||
|
||||
// 数字
|
||||
var number = stepItems[i].number;
|
||||
if (!number) {
|
||||
number = i + 1;
|
||||
}
|
||||
if (i == postion) {
|
||||
stepDiv += '<div class="step-item-head step-item-head-active"><i class="layui-icon">' + number + '</i></div>';
|
||||
} else if (i < postion) {
|
||||
stepDiv += '<div class="step-item-head"><i class="layui-icon layui-icon-ok"></i></div>';
|
||||
} else {
|
||||
stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
|
||||
}
|
||||
|
||||
// 标题和描述
|
||||
var title = stepItems[i].title;
|
||||
var desc = stepItems[i].desc;
|
||||
if (title || desc) {
|
||||
stepDiv += '<div class="step-item-main">';
|
||||
if (title) {
|
||||
stepDiv += '<div class="step-item-main-title">' + title + '</div>';
|
||||
}
|
||||
if (desc) {
|
||||
stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
|
||||
}
|
||||
stepDiv += '</div>';
|
||||
}
|
||||
stepDiv += '</div>';
|
||||
}
|
||||
stepDiv += '</div>';
|
||||
|
||||
$(elem).prepend(stepDiv);
|
||||
|
||||
// 计算每一个条目的宽度
|
||||
var bfb = 100 / stepItems.length;
|
||||
$('.step-item').css('width', bfb + '%');
|
||||
};
|
||||
|
||||
var pearStep = {
|
||||
// 渲染步骤条
|
||||
render: function (param) {
|
||||
param.indicator = 'none'; // 不显示指示器
|
||||
param.arrow = 'always'; // 始终显示箭头
|
||||
param.autoplay = false; // 关闭自动播放
|
||||
if (!param.stepWidth) {
|
||||
param.stepWidth = '400px';
|
||||
}
|
||||
|
||||
// 渲染轮播图
|
||||
carousel.render(param);
|
||||
|
||||
// 渲染步骤条
|
||||
var stepItems = param.stepItems;
|
||||
renderDom(param.elem, stepItems, 0);
|
||||
$('.lay-step').css('width', param.stepWidth);
|
||||
|
||||
//监听轮播切换事件
|
||||
carousel.on('change(' + param.filter + ')', function (obj) {
|
||||
$(param.elem).find('.lay-step').remove();
|
||||
renderDom(param.elem, stepItems, obj.index);
|
||||
$('.lay-step').css('width', param.stepWidth);
|
||||
});
|
||||
|
||||
// 隐藏左右箭头按钮
|
||||
$(param.elem).find('.layui-carousel-arrow').css('display', 'none');
|
||||
|
||||
// 去掉轮播图的背景颜色
|
||||
$(param.elem).css('background-color', 'transparent');
|
||||
},
|
||||
// 下一步
|
||||
next: function (elem) {
|
||||
$(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
|
||||
},
|
||||
// 上一步
|
||||
pre: function (elem) {
|
||||
$(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
|
||||
}
|
||||
};
|
||||
exports('step', pearStep);
|
||||
});
|
||||
|
|
@ -17,5 +17,6 @@ layui.config({
|
|||
document: "document",
|
||||
select: "select",
|
||||
drawer: "drawer",
|
||||
notice: "notice"
|
||||
notice: "notice",
|
||||
step:"step"
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,256 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开发环境</div>
|
||||
<div class="layui-card-body">Step 步骤表单</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
<link rel="stylesheet" href="component/pear/css/pear.css" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body" style="padding-top: 40px;">
|
||||
<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
|
||||
<div carousel-item>
|
||||
<div>
|
||||
<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">游戏编号:</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" placeholder="请填写入款人游戏ID" class="layui-input" lay-verify="number" required />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款金额:</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" placeholder="请填写入款金额" value="" class="layui-input" lay-verify="number" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款类型:</label>
|
||||
<div class="layui-input-block">
|
||||
<select lay-verify="required">
|
||||
<option value="1" selected>保险箱</option>
|
||||
<option value="2">现金</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款方式:</label>
|
||||
<div class="layui-input-block">
|
||||
<select lay-verify="required">
|
||||
<option value="1" selected>人工入款</option>
|
||||
<option value="2">修正</option>
|
||||
<option value="3">活动</option>
|
||||
<option value="4">佣金</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">备注说明:</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="入款备注" value="" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
|
||||
 下一步 
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">游戏编号:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">639537</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">账户余额:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款金额:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">
|
||||
<span style="font-size: 18px;color: #333;">1800 元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款类型:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">保险箱</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款方式:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">人工入款</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">备注说明:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">备注说明</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="pear-btn pear-btn-success pre">上一步</button>
|
||||
<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
|
||||
 确认入款 
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;margin-top: 90px;">
|
||||
<i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;"></i>
|
||||
<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
|
||||
入款成功
|
||||
</div>
|
||||
<div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
|
||||
</div>
|
||||
<div style="text-align: center;margin-top: 50px;">
|
||||
<button class="pear-btn pear-btn-success next">再入一笔</button>
|
||||
<button class="pear-btn pear-btn-success">查看账单</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
layui.use(['form', 'step','element'], function() {
|
||||
var $ = layui.$,
|
||||
form = layui.form,
|
||||
step = layui.step;
|
||||
|
||||
step.render({
|
||||
elem: '#stepForm',
|
||||
filter: 'stepForm',
|
||||
width: '100%',
|
||||
stepWidth: '600px',
|
||||
height: '500px',
|
||||
stepItems: [{
|
||||
title: '填写'
|
||||
}, {
|
||||
title: '确认'
|
||||
}, {
|
||||
title: '完成'
|
||||
}]
|
||||
});
|
||||
|
||||
form.on('submit(formStep)', function(data) {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on('submit(formStep2)', function(data) {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.pre').click(function() {
|
||||
step.pre('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.next').click(function() {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'step','code','element'], function() {
|
||||
var $ = layui.$,
|
||||
form = layui.form,
|
||||
step = layui.step;
|
||||
|
||||
layui.code();
|
||||
|
||||
step.render({
|
||||
elem: '#stepForm',
|
||||
filter: 'stepForm',
|
||||
width: '100%',
|
||||
stepWidth: '600px',
|
||||
height: '500px',
|
||||
stepItems: [{
|
||||
title: '填写'
|
||||
}, {
|
||||
title: '确认'
|
||||
}, {
|
||||
title: '完成'
|
||||
}]
|
||||
});
|
||||
|
||||
form.on('submit(formStep)', function(data) {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on('submit(formStep2)', function(data) {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.pre').click(function() {
|
||||
step.pre('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.next').click(function() {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue