Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
2b8b186c by 任超
Options

style:我的预约

1 parent 849fed7b
Inline Side-by-side
Showing 11 changed files with 257 additions and 167 deletions
......@@ -392,6 +392,21 @@ div.footer .system_service ul li a:hover {
.show{
display: inline-block!important;
}
.appointment_content {
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
-moz-box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
-webkit-box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
border-radius: 6px;
border: 1px solid #E5E8ED;
width: 1200px;
margin: 0 auto;
margin-top: 20px;
padding: 20px;
box-sizing: border-box;
margin-bottom: 30px;
}
/* card样式 */
.cardItem {
background: #FFFFFF;
......
.progressBar {
padding-top: 30px;
color: #4A4A4A;
width: 95%;
margin: 0 auto;
}
.app_progress li {
display: inline-block;
......@@ -29,7 +31,7 @@
}
.progressBar .layui-progress {
display: inline-block;
width: 352px;
width: 313px;
position: relative;
top: -41px;
left: -24px;
......
......@@ -166,4 +166,10 @@
.layui-btn-disabled {
background-color: #0091FF!important;
opacity: 0.5!important;
}
.map {
width: 80%;
height: 500px;
float: right;
margin-bottom: 50px;
}
\ No newline at end of file
......
......@@ -56,7 +56,29 @@
color: #4A4A4A;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
.appointment_status .title .title-left {
display: inline-block;
position: relative;
top: -36px;
margin-right: 15px;
}
.appointment_status .title .title-left p {
color: #6D7278;
font-weight: 100;
}
.qrcode {
display: inline-block;
margin-left: 15px;
}
.appointment_status .title img {
width: 24px;
height: 24px;
position: relative;
top: 5px;
}
.appointment_status .title h3 {
font-weight: 600;
margin-bottom: 8px;
......@@ -65,9 +87,6 @@
color: #FA6400;
font-size: 18px;
}
.appointment_status ul {
margin-top: 30px;
}
.appointment_status ul li {
color: #4A4A4A;
line-height: 28px;
......@@ -116,6 +135,40 @@
text-align: right;
}
#container {
margin-bottom: 100px;
margin-top: 10px;
}
.qrcode img {
width: 107px!important;
height: 107px!important;
border: 1px solid #DEDEDE;
margin-bottom: 10px;
}
.qrcode p {
color: #6D7278;
font-size: 14px;
font-weight: 100;
}
.region_title {
height: 25px;
padding-left: 8px;
font-size: 16px;
line-height: 25px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
color: #4A4A4A;
border-bottom: 1px dotted #E6E6E6;
width: 100%;
}
.region_title::before {
position:absolute;
content:"";
left:0;
width:4px;
height:12px;
border-radius: 1px;
top: 5px;
background-color: #0091FF;
}
\ No newline at end of file
......
......@@ -32,7 +32,6 @@
}
/* -------------------------------预约日期---------------------------------------- */
.appoint_time {
width: 1200px;
height: 92px;
margin: 0 auto;
padding: 0 150px;
......
......@@ -69,7 +69,7 @@
}
.next_button {
text-align: center;
margin: 30px 0 100px 0;
margin: 30px 0;
}
.next_button button {
width: 140px;
......
......@@ -29,6 +29,7 @@ function getAppointmentDetail() {
var endTime = result.data.endTime;
var yysjtotal = year + month + day + startTime + endTime;
$('#yysj').text(yysjtotal);
$('.qrcode img').attr('src',result.data.qrcode);
if (result.data.renegeCount == null) {
renegeCounttotal = 0;
} else {
......
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
......@@ -22,84 +23,86 @@
</span>
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="progressBar contentBox">
<ul class="app_progress">
<li>
<p class="active"></p>
<h5>
预约须知
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<li>
<p class="activeing"></p>
<h5 class="activeingtext">
选择区域
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</div>
<li>
<p></p>
<h5>
预约时间
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
</div>
<li>
<p></p>
<h5>
预约结果
</h5>
</li>
</ul>
</div>
<!-- ---------------------------------------省市办事大厅选择------------------------------------------- -->
<div class="selectCity">
<h2 class="region_title">选择区域</h2>
<form class="layui-form">
<h2 class="title">省</h2>
<div class="layui-inline layui-select-default" style="margin-right: 10px;">
<select name="province" class="Pselected" disabled data-area="浙江省"" lay-filter=" province">
<option value="">选择省</option>
</select>
</div>
<h2>市</h2>
<div class="layui-inline selected layui-select-default">
<select name="city" class="Cselected" disabled data-area="杭州市" lay-filter="selectCity">
<option value="">选择市</option>
</select>
</div>
</form>
<div class="area_list_content">
<h2>区</h2>
<ul class="area_list">
<div class="appointment_content">
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="progressBar">
<ul class="app_progress">
<li>
<p class="active"></p>
<h5>
预约须知
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<li>
<p class="activeing"></p>
<h5 class="activeingtext">
选择区域
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</div>
<li>
<p></p>
<h5>
预约时间
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
</div>
<li>
<p></p>
<h5>
预约结果
</h5>
</li>
</ul>
</div>
</div>
<!-- ----------------------------------地图api--------------------------------------------------- -->
<div class="map_content contentBox">
<h2 class="region_title">选择办事大厅</h2>
<ul class="office_halls"></ul>
<div id="container" style="width: 80%;height: 500px;float: right;"></div>
</div>
<div class="footer_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="./yyxz.html" title="上一步">
上一步
</a>
</button>
<button type="button" id="nextButton" class="layui-btn nextButton layui-btn-normal layui-btn-disabled">
<a title="下一步">
下一步
</a>
</button>
<!-- ---------------------------------------省市办事大厅选择------------------------------------------- -->
<div class="selectCity">
<h2 class="region_title">选择区域</h2>
<form class="layui-form">
<h2 class="title">省</h2>
<div class="layui-inline layui-select-default" style="margin-right: 10px;">
<select name="province" class="Pselected" disabled data-area="浙江省"" lay-filter=" province">
<option value="">选择省</option>
</select>
</div>
<h2>市</h2>
<div class="layui-inline selected layui-select-default">
<select name="city" class="Cselected" disabled data-area="杭州市" lay-filter="selectCity">
<option value="">选择市</option>
</select>
</div>
</form>
<div class="area_list_content">
<h2>区</h2>
<ul class="area_list">
</ul>
</div>
</div>
<!-- ----------------------------------地图api--------------------------------------------------- -->
<div class="map_content">
<h2 class="region_title">选择办事大厅</h2>
<ul class="office_halls"></ul>
<div id="container" class="map"></div>
</div>
<div class="footer_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="./yyxz.html" title="上一步">
上一步
</a>
</button>
<button type="button" id="nextButton" class="layui-btn nextButton layui-btn-normal layui-btn-disabled">
<a title="下一步">
下一步
</a>
</button>
</div>
</div>
</div>
</body>
......
......@@ -23,8 +23,8 @@
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="central_area">
<div class="progressBar contentBox">
<div class="central_area appointment_content">
<div class="progressBar">
<ul class="app_progress">
<li>
<p class="active"></p>
......@@ -62,23 +62,32 @@
</ul>
</div>
<!-- ---------------------预约状态------------------------- -->
<div class="appointment_status contentBox">
<div class="appointment_status">
<div class="status_info">
<div class="title">
<h3>
预约成功！您的预约号：
<span id='reservationNumber'></span>
</h3>
<p>请记录下您的预约号，以便后续的预约服务。</p>
<div class="title-left">
<h3>
<img src="../staticImages/Yes.png">
预约成功！您的预约号：
<span id='reservationNumber'></span>
</h3>
<p>请记录下您的预约号，以便后续的预约服务</p>
</div>
<div class="qrcode">
<img src="">
<p>扫描 查看预约信息</p>
</div>
</div>
<ul>
<h2 class="region_title">注意事项</h2>
<ul style="margin-bottom: 20px;">
<li>1.您曾经失约<span id='renegeCount'></span>次，请留意您本次的预约时间和业务类型，切勿迟到或失约。</li>
<li>2.如确需取消预约，请提前1天登陆系统办理</li>
<li>3.请凭预约号及相关证件，按预约时间提前10分钟到选定的不动产登记中心办理业务</li>
</ul>
<h2 class="region_title">预约信息</h2>
</div>
</div>
<div class="appointment_info_content contentBox">
<div class="appointment_info_content">
<div class="appointment_info">
<ul>
<li>
......
......@@ -25,8 +25,8 @@
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="central_area">
<div class="progressBar contentBox">
<div class="central_area appointment_content">
<div class="progressBar">
<ul class="app_progress">
<li>
<p class="active"></p>
......@@ -64,7 +64,7 @@
<div class="swiper-button-prev"></div>
</div>
<!-- ----------------------------------业务选择start----------------------------------------------- -->
<div class="business_choice contentBox">
<div class="business_choice">
<div class="site-title">
<fieldset>
<legend>
......
......@@ -26,80 +26,82 @@
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="progressBar contentBox">
<ul class="app_progress">
<li>
<p class="activeing"></p>
<h5 class="activeingtext">
预约须知
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
<div class="appointment_content">
<div class="progressBar">
<ul class="app_progress">
<li>
<p class="activeing"></p>
<h5 class="activeingtext">
预约须知
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</div>
<li>
<p></p>
<h5>
选择区域
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
</div>
<li>
<p></p>
<h5>
预约时间
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
</div>
<li>
<p></p>
<h5>
预约结果
</h5>
</li>
</ul>
</div>
<div class="clause_box">
<div class="clause">
<h3>一、预约方式</h3>
<p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p>
<p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p>
<h3>
二、预约业务范围
</h3>
<p>
现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约
</p>
<h3>
三、预约业务办理
</h3>
<p>
预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任
</p>
<h3>
五、注意事项
</h3>
<p>
1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。
</p>
<p>
2.请认真阅读网上预约的操作说明。预约申请人须按照网上预约操作说明的要求，提前准备好预约办理业务的要件材料。具体业务办理详情请查看办事指南。
</p>
<p>
3.本须知自公布之日起执行。
</p>
</div>
<li>
<p></p>
<h5>
选择区域
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
<div class="confim_input">
<div class="checkbox">
</div>
<p>接受</p>
</div>
<li>
<p></p>
<h5>
预约时间
</h5>
</li>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">下一步</button>
</div>
<li>
<p></p>
<h5>
预约结果
</h5>
</li>
</ul>
</div>
<div class="clause_box contentBox">
<div class="clause">
<h3>一、预约方式</h3>
<p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p>
<p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p>
<h3>
二、预约业务范围
</h3>
<p>
现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约
</p>
<h3>
三、预约业务办理
</h3>
<p>
预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任
</p>
<h3>
五、注意事项
</h3>
<p>
1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。
</p>
<p>
2.请认真阅读网上预约的操作说明。预约申请人须按照网上预约操作说明的要求，提前准备好预约办理业务的要件材料。具体业务办理详情请查看办事指南。
</p>
<p>
3.本须知自公布之日起执行。
</p>
</div>
<div class="confim_input">
<div class="checkbox">
</div>
<p>接受</p>
</div>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">下一步</button>
</div>
</div>
<!-- ----------------------------------内容模块end-------------------------------------------------- -->
......