Skip to content

任超 / js.portalStaticPage

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

style:我的预约

1 parent f154c914
Inline Side-by-side
Showing 8 changed files with 246 additions and 79 deletions
......@@ -310,7 +310,7 @@ div.banner ul li a {
div.c_one div:first-child .news, div.c_one div:first-child .notice {
margin-top: 40px;
height: 330px;
height: 332px;
border: #DEDEDE 1px solid;
padding: 0 15px 0 15px;
}
......@@ -361,7 +361,7 @@ div.c_one .news .news-img {
margin-top: 20px;
float: left;
width: 350px;
height: 234px;
height: 236px;
}
div.c_one .news .news-img img {
height: 100%;
......
.progressBar {
padding-top: 30px;
color: #4A4A4A;
}
.app_progress li {
display: inline-block;
text-align: center;
}
.app_progress li:not(:first-child) {
margin-left: -47px;
}
.app_progress li p{
width: 29.5px;
height: 29.5px;
border-radius: 50%;
background-color: #E6E6E6;
margin: 0 auto;
}
.app_progress li h5 {
margin-top: 12px;
font-size: 16px;
}
.progressBar .layui-progress {
display: inline-block;
width: 352px;
position: relative;
top: -41px;
left: -24px;
}
.active {
background-color: #47E1BF!important;
position: relative;
}
.active::after {
content: " ";
display: block;
position: absolute;
left: 11px;
top: 6px;
width: 8px;
height: 12px;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.layui-progress-bar {
background-color: #47E1BF!important;
}
\ No newline at end of file
......@@ -90,7 +90,7 @@
}
/* ----------------预约列表-------------------- */
.appointment_list {
margin-top: 10px;
margin-top: 20px;
font-size: 0;
margin-left: -10px;
margin-right: -10px;
......@@ -100,12 +100,14 @@
display: inline-block;
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;
......@@ -130,4 +132,43 @@
}
.cancel {
background-color: #F26363;
opacity: 0.5;
}
.item_info {
padding: 30px;
height: 180px;
}
.item_info li{
width: 100%;
line-height: 38px;
box-sizing: border-box;
}
.item_info li span {
display: inline-block;
width: 108px;
text-align: right;
color: #9B9B9B;
white-space: nowrap;
}
.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: 0 auto;
}
\ No newline at end of file
......
.navigation_crumbs {
height: 45px;
}
.appointment_notice {
padding-top: 25px;
margin-bottom: 20px;
}
.app_progress li {
padding: 0 30px;
line-height: 40px;
background: #eee;
display: inline-block;
color: #fff;
position: relative;
color: black;
cursor: pointer;
}
.app_progress li:hover {
background-color: #1E9FFF!important;
color: #fff!important;
.clause_box {
min-height:calc(100vh - 342px);
}
.app_progress li:hover:after {
border-left-color: #1E9FFF;
}
.app_progress li:after{
content: '';
display: block;
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 12px solid #eee;
position: absolute;
right:0;
top: 0;
}
.active {
background-color: #1E9FFF!important;
color: #fff!important;
}
.app_progress li.active:after {
border-left-color: #1E9FFF;
}
.line {
width: 80px;
height: 0;
display: inline-block;
border-bottom: 2px dotted#dddddd;
margin-bottom: 4px;
.clause {
border-radius: 4px;
border: 1px solid #CBCBCB;
padding: 30px 20px;
margin-bottom: 20px;
}
.clause p {
line-height: 26px;
......@@ -61,9 +23,49 @@
text-align: center;
float: right;
}
.clause {
color: #6D7278;
}
.clause h3 {
font-size: 16px;
font-weight: 600;
color: #6D7278;
line-height: 28px;
margin: 10px;
}
.clause p {
font-size: 14px;
line-height: 28px;
}
.confim_input {
text-align: center;
}
.checkbox {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #2FA5FF;
display: inline-block;
cursor: pointer;
position: relative;
}
.checkbox img {
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 0;
}
.bordernone {
border: none;
}
.confim_input p {
display: inline-block;
color: #6D7278;
line-height: 14px;
position: relative;
top: -2px;
}
.next_button {
text-align: center;
margin: 20px auto;
......
layui.use('element', function () {
$(function () {
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
//console.log(elem)
layer.msg(elem.text());
});
});
var accept = $('.accept');
$('.next_button button').click(function () {
});
var accept = $('.accept');
$('.next_button button').click(function () {
if (!accept.is(':checked')) {
layui.use('layer', function () {
var layer = layui.layer;
......@@ -29,4 +30,14 @@ $('.next_button button').click(function () {
});
});
}
})
$('.checkbox').click(function(){
if($(this).find(".img").length >0){
$(this).find('.img').remove()
$(this).addClass('.bordernone')
}else {
$(this).append("<img class='img' src='../staticImages/check.png'>")
$(this).removeClass('.bordernone')
}
})
})
\ No newline at end of file
......
......@@ -52,7 +52,7 @@
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
......@@ -71,10 +71,11 @@
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号</span>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
<li>
......@@ -86,17 +87,65 @@
<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 cancel">
<div class="item_title">
<div class="item_content">
<div class="item_title cancel">
<h3>正常</h3>
<p>
查看
<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>
......
<!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>
......@@ -8,6 +9,7 @@
<title>个人中心-预约须知</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/yyxz.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
</head>
<body>
......@@ -22,48 +24,63 @@
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="appointment_notice contentBox">
<div class="progressBar contentBox">
<ul class="app_progress">
<li class="active">
<span>1</span>
<li>
<p class="active"></p>
<h5>
预约须知
</h5>
</li>
<div class="line"></div>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</div>
<li>
<span>2</span>
<p></p>
<h5>
选择区域
</h5>
</li>
<div class="line"></div>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
</div>
<li>
<span>3</span>
<p></p>
<h5>
预约时间
</h5>
</li>
<div class="line"></div>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
</div>
<li>
<span>4</span>
<p></p>
<h5>
预约结果
</h5>
</li>
</ul>
</div>
<div class="clause contentBox">
<p>一、预约方式</p>
<div class="clause_box contentBox">
<div class="clause">
<h3>一、预约方式</h3>
<p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p>
<p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p>
<p>
<h3>
二、预约业务范围
</p>
</h3>
<p>
现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约
</p>
<p>
<h3>
三、预约业务办理
</p>
</h3>
<p>
预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任
</p>
<p>
<h3>
五、注意事项
</p>
</h3>
<p>
1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。
</p>
......@@ -73,14 +90,11 @@
<p>
3.本须知自公布之日起执行。
</p>
<div class="date">
<ul>
<li>XX市不动产登记中心</li>
<li>2020年11月27日</li>
</ul>
</div>
<div class="confim_input">
<input type="checkbox" name="" class="accept" title="接受" checked>&nbsp;接受
<div class="checkbox">
</div>
<p>接收</p>
</div>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">下一步</button>
......