4c91d1e6 by 任超

style:进度条

1 parent de128b7e
$(function () {
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块
let element = layui.element;
});
addTabs('#wssq')
// 业务
......@@ -20,29 +20,35 @@ $(function () {
},
{
name: "身份认证",
isActive: 0
isActive: 1
},
{
name: "资料审核",
isActive: 0
isActive: 1
},
{
name: "线上缴费",
isActive: 0
isActive: 1
},
{
name: "生成电子证书",
isActive: 0
isActive: 2
}
],
}
// layui.use('laytpl', function () {
// laytpl = layui.laytpl;
// var getTpl = document.getElementById('progress').innerHTML
// , view = document.getElementById('app_progress');
// laytpl(getTpl).render(data, function (html) {
// view.innerHTML = html;
// });
// });
layui.use('laytpl', function () {
laytpl = layui.laytpl;
var getTpl = document.getElementById('progress').innerHTML
, view = document.getElementById('app_progress');
laytpl(getTpl).render(data, function (html) {
view.innerHTML = html;
});
layui.use(['element'], function () {
var element = layui.element;
//初始化动态元素,一些动态生成的元素如果不设置初始化,将不会有默认的动态效果
element.init();
});
});
})
......
......@@ -29,52 +29,6 @@
</div>
<div class="progressBar">
<ul class="app_progress" id="app_progress">
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>填报信息</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
</ul>
</div>
<div class="certificate_list">
......@@ -174,18 +128,36 @@
<script id="progress" type="text/html">
{{# layui.each(d.progressList, function(index, item){ }}
{{# if(item.isActive==1){ }}
<li>
<li class="item_proress">
<p class="active"></p>
<h5>{{item.name}}</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
{{# } }}
{{# if(item.isActive==2){ }}
<li class="item_proress">
<p class="active"></p>
<h5>{{item.name}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</li>
{{# } }}
{{# } }}
{{# if(item.isActive==0){ }}
<li>
<li class="item_proress">
<p></p>
<h5>{{item.name}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="0%"></div>
</li>
{{# } }}
{{# } }}
{{# }); }}
</script>
</html>
\ No newline at end of file
......