Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
789d40ce by 任超
Options

feat:预约须知

1 parent b04116e5
Inline Side-by-side
Showing 8 changed files with 577 additions and 132 deletions
......@@ -12,6 +12,7 @@
line-height: 25px;
background: #FAFAFA;
border: 1px solid #E6E6E6;
box-sizing: border-box;
}
.navigation_crumbs .layui-breadcrumb a:hover {
color: #f46143!important;
......
......@@ -9,7 +9,6 @@
height: 100px;
padding: 20px;
box-sizing: border-box;
background-color: #7ed3df;
}
.personal_information img {
width: 60px;
......@@ -56,9 +55,7 @@
height: 100%;
border: 1px solid #E6E6E6;
box-sizing: border-box;
}
.business_module li:nth-child(5n+5) a{
padding-right: 0;
padding-left: 20px;
}
.business_module li a:hover {
color: #f46143;
......
......@@ -63,7 +63,7 @@
</div>
<!-- -----------------------------------个人中心模块---------------------------------------------- -->
<div class="personal_center contentBox">
<div class="personal_information">
<div class="personal_information layui-bg-gray">
<img src="../../staticImages/logo-realestate.png" alt="个人中心">
<ul>
<li>
......@@ -97,7 +97,7 @@
</a>
</li>
<li>
<a href="">
<a href="../wdyy/index.html">
我的预约
</a>
</li>
......
.navigation_crumbs {
height: 45px;
}
.perinfo {
height: 100px;
padding: 20px;
box-sizing: border-box;
}
.perinfo_left{
float: left;
}
.perinfo_left img {
width: 60px;
height: 60px;
float: left;
}
.perinfo_left ul {
float: left;
margin-left: 20px;
margin-top: 5px;
}
.perinfo_left ul li {
margin-bottom: 10px;
font-size: 16px;
}
.perinfo_left ul li p{
display: inline-block;
}
.my_appointment {
color: #5FB878;
border: 2px solid#5FB878;
font-size: 20px;
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
margin-left: 20%;
margin-top: 10px;
}
.my_appointment:hover {
color: #f46143;
border-color: #f46143;
}
.time {
float: right;
margin-top: 20px;
}
.perinfo_left
\ No newline at end of file
/* ----------------预约列表-------------------- */
.appointment_list {
}
\ No newline at end of file
......
......@@ -4,152 +4,157 @@
<head>
<title>个人中心</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="alternate icon" type="image/png" href="../../staticImages/logo-realestate.png">
<link rel='icon' href='favicon.ico' type='image/x-ico'/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="stylesheet" type="text/css" href="../../staticCss/common.css"/>
<link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css"/>
<link rel='icon' href='favicon.ico' type='image/x-ico' />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
<link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div class="main">
<div class="subject top-logo">
<div class="top_logo_content">
<h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台"/></a></h1>
<div class="top_logo_search">
<input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
autocomplete="off" class="layui-input">
<i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
<div class="main">
<div class="subject top-logo">
<div class="top_logo_content">
<h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台" /></a></h1>
<div class="top_logo_search">
<input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
autocomplete="off" class="layui-input">
<i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
</div>
<ul class="login">
<li>登录</li>
<li>注册</li>
</ul>
</div>
<ul class="login">
<li>登录</li>
<li>注册</li>
</div>
<div class="navigation">
<ul class="layui-nav layui-bg-blue" lay-filter="">
<li class="layui-nav-item"><a href="./../../staticIndex.html">首页</a></li>
<li class="layui-nav-item"><a href="./../../staticViews/xwdt/index.html">新闻动态</a></li>
<li class="layui-nav-item"><a href="">业务办理</a></li>
<li class="layui-nav-item"><a href="./../../staticViews/bszn/index.html">办事指南</a></li>
<li class="layui-nav-item">
<a href="javascript:;">查验中心</a>
<dl class="layui-nav-child">
<!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">在线缴费</a></li>
<li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
</ul>
</div>
</div>
<div class="navigation">
<ul class="layui-nav layui-bg-blue" lay-filter="">
<li class="layui-nav-item"><a href="./../../staticIndex.html">首页</a></li>
<li class="layui-nav-item"><a href="./../../staticViews/xwdt/index.html">新闻动态</a></li>
<li class="layui-nav-item"><a href="">业务办理</a></li>
<li class="layui-nav-item"><a href="./../../staticViews/bszn/index.html">办事指南</a></li>
<li class="layui-nav-item">
<a href="javascript:;">查验中心</a>
<dl class="layui-nav-child">
<!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">在线缴费</a></li>
<li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
</ul>
</div>
<div class="navigation_crumbs">
<div class="contentBox">
<div class="navigation_crumbs">
<div class="contentBox">
<span class="layui-breadcrumb">
<a href="../../staticIndex.html">首页</a>
<a><cite>个人中心</cite></a>
<a href="../grzx/index.html">个人中心</a>
<a><cite>我的预约</cite></a>
</span>
</div>
</div>
</div>
<!-- -----------------个人信息------------------------ -->
<div class="perinfo contentBox">
<div class="perinfo_left">
<img src="../../staticImages/logo-realestate.png" alt="">
<ul>
<li>
<span>上午好：</span>
<p>任超</p>
</li>
<li>
<span>身份证号：</span>
<p>61012216464646</p>
</li>
</ul>
<!-- -----------------个人信息------------------------ -->
<div class="perinfo contentBox layui-bg-gray">
<div class="perinfo_left">
<img src="../../staticImages/logo-realestate.png" alt="">
<ul>
<li>
<span>上午好：</span>
<p>任超</p>
</li>
<li>
<span>身份证号：</span>
<p>61012216464646</p>
</li>
</ul>
</div>
<a class="my_appointment" href="../yyxz/index.html">在线预约</a>
<div class="time">
登录时间：2088-20-88
</div>
</div>
<a href="">在线预约</a>
<div class="time">
2088-20-88
<!-- -------------预约列表--------------- -->
<div class="appointment_list contentBox">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
<div class="footer">
<div class="system_service">
<ul class="">
<li>
<a href="">
<span>公示公告</span>
</a>
</li>
<li>
<a href="">
<span>法律法规</span>
</a>
</li>
<li>
<a href="">
<span>相应政策</span>
</a>
</li>
<li>
<a href="">
<span>下载服务</span>
</a>
</li>
<li>
<div class="footer">
<div class="system_service">
<ul class="">
<li>
<a href="">
<span>公示公告</span>
</a>
</li>
<li>
<a href="">
<span>法律法规</span>
</a>
</li>
<li>
<a href="">
<span>相应政策</span>
</a>
</li>
<li>
<a href="">
<span>下载服务</span>
</a>
</li>
<li>
<a href="">
<span>关于我们</span>
</a>
</li>
</ul>
</div>
<div class="subject">
<div class="footer_logo">
<a href="">
<span>关于我们</span>
<img src="./../../staticImages/jiguan.png">
</a>
</li>
</ul>
</div>
<div class="subject">
<div class="footer_logo">
<a href="">
<img src="./../../staticImages/jiguan.png">
</a>
</div>
<ul>
<li>
西安市自然资源和规划局
</li>
<li>
电话：028-456465
</li>
<li>
地址：西安市丰城8路
</li>
<li>
网站标识吗：87987987
</li>
<li>
备案：陕IPC456465465
</li>
<li>
陕公网备案：456465465
</li>
</ul>
<ol>
<li>
<img src="./../../staticImages/code.png">
<p>扫描关注公众号</p>
</li>
<li>
<img src="./../../staticImages/code.png">
<p>扫描关注公众号</p>
</li>
</ol>
</div>
<ul>
<li>
西安市自然资源和规划局
</li>
<li>
电话：028-456465
</li>
<li>
地址：西安市丰城8路
</li>
<li>
网站标识吗：87987987
</li>
<li>
备案：陕IPC456465465
</li>
<li>
陕公网备案：456465465
</li>
</ul>
<ol>
<li>
<img src="./../../staticImages/code.png">
<p>扫描关注公众号</p>
</li>
<li>
<img src="./../../staticImages/code.png">
<p>扫描关注公众号</p>
</li>
</ol>
</div>
</div>
</div>
</body>
</html>
......@@ -162,6 +167,8 @@
<script type="text/javascript" src="../../staticLib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="../../staticJs/main.min.js?t=1"></script>
<script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
<!-- ----------------------------静态文件-------------------------------------- -->
<script type="text/javascript" src="./lib/index.json"></script>
<script type="text/javascript">
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
......@@ -171,4 +178,51 @@
layer.msg(elem.text());
});
});
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
, url: './lib/index.json'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{ field: 'zizeng', title: '序号', templet: '#zizeng', align: 'center' }
, { field: 'username', title: '预约号', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
, { field: 'sex', title: ' 预约人', align: 'center' }
, { field: 'city', title: '办事大厅', align: 'center' }
, { field: 'sign', title: ' 预约业务', align: 'center' }
, { field: 'classify', title: '预约时间', align: 'center' }
, { field: 'state', title: '状态', align: 'center', templet: '#state' }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
]]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"data": res.data //解析数据列表
};
}
});
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
console.log(data)
if (obj.event === 'del') {
} else if (obj.event === 'edit') {
}
});
});
</script>
<script type="text/html" id="zizeng">
{{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="state">
{{# if(d.state=='1'){ }}
是
{{# } else{}}
否
{{# } }}
</script>
\ No newline at end of file
......
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57,
"state": 1
},
{
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27,
"state": 1
},
{
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31,
"state": 0
}
]
}
\ No newline at end of file
.navigation_crumbs {
height: 45px;
}
.appointment_notice {
margin-top: 30px;
margin-bottom: 30px;
}
.app_progress li {
padding: 0 30px;
line-height: 40px;
background: #eee;
display: inline-block;
color: #fff;
position: relative;
color: black;
}
.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 p {
line-height: 26px;
}
.clause .date {
overflow: hidden;
margin: 20px 0;
}
.clause .date ul {
width: 200px;
text-align: center;
float: right;
}
.confim_input {
text-align: center;
}
.next_button {
text-align: center;
margin: 20px auto;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<title>个人中心</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="alternate icon" type="image/png" href="../../staticImages/logo-realestate.png">
<link rel='icon' href='favicon.ico' type='image/x-ico' />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
<link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div class="main">
<div class="subject top-logo">
<div class="top_logo_content">
<h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台" /></a></h1>
<div class="top_logo_search">
<input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
autocomplete="off" class="layui-input">
<i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
</div>
<ul class="login">
<li>登录</li>
<li>注册</li>
</ul>
</div>
</div>
<div class="navigation">
<ul class="layui-nav layui-bg-blue" lay-filter="">
<li class="layui-nav-item"><a href="./../../staticIndex.html">首页</a></li>
<li class="layui-nav-item"><a href="./../../staticViews/xwdt/index.html">新闻动态</a></li>
<li class="layui-nav-item"><a href="">业务办理</a></li>
<li class="layui-nav-item"><a href="./../../staticViews/bszn/index.html">办事指南</a></li>
<li class="layui-nav-item">
<a href="javascript:;">查验中心</a>
<dl class="layui-nav-child">
<!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">在线缴费</a></li>
<li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
</ul>
</div>
<div class="navigation_crumbs">
<div class="contentBox">
<span class="layui-breadcrumb">
<a href="../../staticIndex.html">首页</a>
<a href="../grzx/index.html">个人中心</a>
<a><cite>我的预约</cite></a>
</span>
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="appointment_notice contentBox">
<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>
</ul>
</div>
<div class="clause contentBox">
<p>一、预约方式</p>
<p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p>
<p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p>
<p>
二、预约业务范围
</p>
<p>
现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约
</p>
<p>
三、预约业务办理
</p>
<p>
预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任
</p>
<p>
五、注意事项
</p>
<p>
1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。
</p>
<p>
2.请认真阅读网上预约的操作说明。预约申请人须按照网上预约操作说明的要求，提前准备好预约办理业务的要件材料。具体业务办理详情请查看办事指南。
</p>
<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>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">下一步</button>
</div>
</div>
<!-- ----------------------------------内容模块end-------------------------------------------------- -->
<div class="footer">
<div class="system_service">
<ul class="">
<li>
<a href="">
<span>公示公告</span>
</a>
</li>
<li>
<a href="">
<span>法律法规</span>
</a>
</li>
<li>
<a href="">
<span>相应政策</span>
</a>
</li>
<li>
<a href="">
<span>下载服务</span>
</a>
</li>
<li>
<a href="">
<span>关于我们</span>
</a>
</li>
</ul>
</div>
<div class="subject">
<div class="footer_logo">
<a href="">
<img src="./../../staticImages/jiguan.png">
</a>
</div>
<ul>
<li>
西安市自然资源和规划局
</li>
<li>
电话：028-456465
</li>
<li>
地址：西安市丰城8路
</li>
<li>
网站标识吗：87987987
</li>
<li>
备案：陕IPC456465465
</li>
<li>
陕公网备案：456465465
</li>
</ul>
<ol>
<li>
<img src="./../../staticImages/code.png">
<p>扫描关注公众号</p>
</li>
<li>
<img src="./../../staticImages/code.png">
<p>扫描关注公众号</p>
</li>
</ol>
</div>
</div>
</div>
</body>
</html>
<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="../../staticLib/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="../../staticLib/iscroll/iscroll-probe.js"></script>
<script type="text/javascript" src="../../staticLib/amazeui/amazeui.min.js"></script>
<script type="text/javascript" src="../../staticLib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="../../staticJs/main.min.js?t=1"></script>
<script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
<script type="text/javascript">
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 () {
if (!accept.is(':checked')) {
layui.use('layer', function () {
var layer = layui.layer;
layer.open({
title: '标题'
, content: '请先选择同意协议'
});
});
} else {
layui.use('layer', function () {
var layer = layui.layer;
layer.confirm('本人承诺所填的预约信息属实，如有虚假，将承担法律责任', {
title: '真实准确的承诺',
btn: ['不同意', '同意进入下一步'] //按钮
}, function () {
}, function () {
});
});
}
})
</script>
\ No newline at end of file