Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
a4186664 by 任超
Options

style:信息校验样式

1 parent badcf0dc
Inline Side-by-side
Showing 5 changed files with 268 additions and 162 deletions
......@@ -38,42 +38,92 @@
text-align: center;
line-height: 36px;
}
.data_list {
margin-bottom: 20px;
}
.data_list li {
width: 31%;
border: 1px solid #d2d2d2;
/* ----------------预约列表-------------------- */
.appointment_list {
margin-top: 20px;
font-size: 0;
margin-left: -10px;
margin-right: -10px;
overflow: hidden;
}
.appointment_list li {
width: 33.333%;
display: inline-block;
color: #4a4a4a;
border-radius: 3px;
padding: 0 10px;
box-sizing: border-box;
float: left;
}
.appointment_list li .item_content {
border: 1px solid #CBCBCB;
border-radius: 4px;
border: 1px solid #CBCBCB;
font-size: 16px;
height: 368px;
}
.item_title {
height: 48px;
line-height: 48px;
color: #FFFFFF;
padding: 0 20px;
box-sizing: border-box;
margin-right: 20px;
}
.data_list li:last-child {
margin-right: 0;
.item_title h3 {
display: inline-block;
float: left;
}
.data_list li h3 {
background-color: #5FB878;
text-align: center;
line-height: 36px;
padding: 0 10px;
color: #fff;
.item_title p {
display: inline-block;
float: right;
}
.data_list li p {
line-height: 40px;
padding: 0 10px;
.success {
background-color: #44D7B6;
}
.overdue {
background-color: #F26363;
}
.cancel {
background-color: #F26363;
opacity: 0.5;
}
.item_info {
padding: 30px;
height: 180px;
}
.data_list li p span {
width: 85px;
text-align-last: justify;
.item_info li{
width: 100%;
line-height: 38px;
box-sizing: border-box;
}
.item_info li span {
display: inline-block;
margin-right: 10px;
width: 108px;
text-align: right;
color: #9B9B9B;
white-space: nowrap;
}
.next_button {
.item_info li p{
display: inline-block;
color: #303030;
}
.item_info li a{
display: inline-block;
color: #0091FF;
margin-left: 20px;
}
.cancel_reservation {
display: block;
width: 100px;
height: 40px;
background: #FFFFFF;
border-radius: 3px;
border: 1px solid #E6E6E6;
font-size: 16px;
color: #9B9B9B;
line-height: 40px;
text-align: center;
margin-bottom: 20px;
margin: 0 auto;
}
.next_button a {
color: #fff;
.next_button {
text-align: center;
margin: 50px 0 100px 0;
}
\ No newline at end of file
......
......@@ -19,8 +19,8 @@
flex: 2.1;
position: relative;
top: 10px;
margin-left: -3%;
margin-right: -3%;
margin-left: -3.8%;
margin-right: -3.8%;
}
.item_proress {
position: relative;
......@@ -36,6 +36,7 @@
}
.app_progress li h5 {
white-space: nowrap;
margin-top: 5px;
}
.active {
background-color: #47E1BF!important;
......
......@@ -71,4 +71,52 @@ $(function () {
return false;
});
});
// 进度条
var data = {
'progressList': [
{
stepName: "信息效验",
stepState: 1 //0：未办理 1：正在办理 2：已办理
},
{
stepName: "填报信息",
stepState: 0
},
{
stepName: "完税核税",
stepState: 0
},
{
stepName: "身份认证",
stepState: 0
},
{
stepName: "资料审核",
stepState: 0
},
// {
// stepName: "线上缴费",
// stepState: 0
// },
// {
// stepName: "生成电子证书",
// stepState: 0
// }
],
}
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();
});
});
})
......
......@@ -100,7 +100,7 @@
<p>预售商品房抵押登记</p>
<div class="button">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
<a href='./bljy.html?title=预告类&bus=预售商品房抵押登记'>立即办理</a>
<a href='./xxjy.html?title=预告类&bus=预售商品房抵押登记'>立即办理</a>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
</div>
......
......@@ -6,10 +6,10 @@
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>立即办理-校验</title>
<title>立即办理-信息校验</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/bljy.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
<link rel="stylesheet" type="text/css" href="../staticCss/bljy.css">
</head>
<body>
......@@ -27,42 +27,10 @@
<h2></h2>
<p></p>
</div>
<ul class="app_progress">
<li class="active">
<span>1</span>
信息效验
</li>
<div class="line"></div>
<li>
<span>2</span>
填报信息
</li>
<div class="line"></div>
<li>
<span>3</span>
完税核税
</li>
<div class="line"></div>
<li>
<span>4</span>
身份认证
</li>
<div class="line"></div>
<li>
<span>5</span>
资料审核
</li>
<div class="line"></div>
<li>
<span>6</span>
线上缴费
</li>
<div class="line"></div>
<li>
<span>7</span>
生成电子证书
</li>
<div class="progressBar">
<ul class="app_progress" id="app_progress">
</ul>
</div>
<div class="input_search">
<div class="form_title">
<h2>信息校验</h2>
......@@ -89,8 +57,8 @@
<div class="layui-inline">
<label class="layui-form-label">联系方式</label>
<div class="layui-input-inline">
<input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone" placeholder="请输联系方式"
class="layui-input">
<input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone"
placeholder="请输联系方式" class="layui-input">
</div>
<button type="button"
class="layui-btn layui-btn-radius layui-btn-primary feachBtn layui-btn-sm">获取验证码</button>
......@@ -107,115 +75,119 @@
<div class="layui-form-item">
<div class="layui-input-block">
<button type="reset" class="layui-btn layui-btn-primary">重 置</button>
<button type="submit" class="layui-btn layui-btn-normal" lay-submit=""
lay-filter="demo1">查 询</button>
<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">查
询</button>
</div>
</div>
</form>
</div>
<div class="seach_result">
<!-- <div class="no_data">暂无数据</div> -->
<ul class="data_list">
<ul class="appointment_list">
<li>
<h3>房屋状态：正常</h3>
<p>
<span>权利人:</span>
郭小美
</p>
<p>
<span>身份证号:</span>
61052877686868
</p>
<p>
<span>联系电话:</span>
15877343636
</p>
<p>
<span>产权证号:</span>
370205004005GB10030
</p>
<p>
<span>坐落:</span>
XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
</p>
<p>
<span>
面积（㎡）:
</span>
202
</p>
<div class="item_content">
<div class="item_title success">
<h3>正常</h3>
<p>
<span>合同备案号:</span>
YS000000000001
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<h3>房屋状态：正常</h3>
<p>
<span>权利人:</span>
郭小美
</p>
<p>
<span>身份证号:</span>
61052877686868
</p>
<p>
<span>联系电话:</span>
15877343636
</p>
<p>
<span>产权证号:</span>
370205004005GB10030
</p>
<p>
<span>坐落:</span>
XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
</p>
<p>
<span>
面积（㎡）:
</span>
202
</p>
<p>
<span>合同备案号:</span>
YS000000000001
</p>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<h3>房屋状态：正常</h3>
<p>
<span>权利人:</span>
郭小美
</p>
<p>
<span>身份证号:</span>
61052877686868
</p>
<p>
<span>联系电话:</span>
15877343636
</p>
<p>
<span>产权证号:</span>
370205004005GB10030
</p>
<p>
<span>坐落:</span>
XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
</p>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
<li>
<div class="item_content">
<div class="item_title overdue">
<h3>正常</h3>
<p>
<span>
面积（㎡）:
</span>
202
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
<li>
<div class="item_content">
<div class="item_title cancel">
<h3>正常</h3>
<p>
<span>合同备案号:</span>
YS000000000001
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
</ul>
<div class="next_button">
......@@ -229,5 +201,40 @@
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/down.js"></script>
<script type="text/javascript" src="../staticJs/bljy.js"></script>
<script id="progress" type="text/html">
{{# layui.each(d.progressList, function(index, item){ }}
{{# if(item.stepState==2){ }}
<li class="item_proress">
<p class="active"></p>
<h5>{{item.stepName}}</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
{{# } }}
{{# if(item.stepState==1){ }}
<li class="item_proress">
<p class="active"></p>
<h5>{{item.stepName}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</li>
{{# } }}
{{# } }}
{{# if(item.stepState==0){ }}
<li class="item_proress">
<p></p>
<h5>{{item.stepName}}</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
......