Skip to content

任超 / js.portalStaticPage

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

feat:预约结果

1 parent 124d2861
Inline Side-by-side
Showing 6 changed files with 367 additions and 14 deletions
$(function () {
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
layer.msg(elem.text());
});
});
}
\ No newline at end of file
$(function () {
var Date = undefined;
var appuintText = undefined
var bustime = undefined;
// 国有房屋无业点击选中记录
var busIndex = undefined
var data = {
......@@ -52,25 +54,31 @@ $(function () {
};
// 获取当前选中的日期
for (var i = 0; i < data.dateList.length; i++) {
if(data.dateList[i].isSelect) {
Date = data.dateList[i].date
}
};
// for (var i = 0; i < data.dateList.length; i++) {
// if (data.dateList[i].isSelect) {
// Date = data.dateList[i].date
// break
// }
// };
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
//console.log(elem)
layer.msg(elem.text());
});
});
function a(i) {
Date = data.dateList[i].date
$(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
}
$('.business_list li').click(function () {
// 获取元素
appuintText = $(this).find('a').text()
$('.layui_anim_list').removeClass('disnone')
$('.layui_anim_content').show()
var demo = $('.layui-anim')
$('html,body').addClass('ovfHiden');
......@@ -82,7 +90,7 @@ $(function () {
});
// 获取当前点击li 的下标
let index = $(this).index() + 1;
let index = $(this).index()
busIndex = index
})
......@@ -129,9 +137,44 @@ $(function () {
$(document).on('click', '.able_appint', function () {
$('.able_appint').removeClass("able_appintActive")
$(this).addClass("able_appintActive")
let index = $(this).index()
// 获取当前选中的日期
bustime = data.list[index]
modleClose()
$(".business_list li .allowedMask").remove()
$(".business_list li .reserved").remove()
var str = "<div class='reserved'> <i class='layui-icon layui-icon-log'></i> <div><p>" + appuintText + "</p><p>" + bustime + "</p></div> <i class='layui-icon appintDel layui-icon-reduce-circle'></i></div>"
$(".business_list li").append('<div class="allowedMask"></div>');
$(".business_list li:eq(" + busIndex + ") a").removeClass('not-allowed')
$(".business_list li").eq(busIndex).append(str);
$(".business_list li:eq(" + busIndex + ") a").hide()
});
// 删除预约记录
$(document).on('click', '.appintDel', function (event) {
$('.layui_anim_list').addClass('disnone')
$('.able_appint').removeClass('able_appintActive')
layui.use('layer', function () {
var layer = layui.layer;
layer.confirm('此操作将删除预约记录，是否继续', {
btn: ['取消', '继续'] //按钮
}, function () {
layer.closeAll();
modleClose()
}, function () {
modleClose()
$(".business_list li a").show()
$(".business_list li .allowedMask").remove()
$(".business_list li .reserved").remove()
});
});
});
$(document).on('click', '.allowedMask', function () {
$('.layui_anim_list').addClass('disnone')
modleClose()
console.log(9999, busIndex)
// $('.business_list li').eq(busIndex-1).addClass('bugActive')
});
});
function modleClose() {
......
.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;
cursor: pointer;
}
.app_progress li:hover {
background-color: #1E9FFF!important;
color: #fff!important;
}
.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;
}
\ 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" href="../../staticCss/swiper-bundle.min.css">
<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="yysj_main">
<div class="subject top-logo">
<div class="top_logo_content">
<h1><a href="index.html" title="西安市不动产登记平台"><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>
<a href="" title="登录">
登录
</a>
</li>
<li>
<a href="" title="注册">
注册
</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">
<span class="layui-breadcrumb">
<a href="../../staticIndex.html" title="首页">首页</a>
<a href="../grzx/index.html" title="个人中心">个人中心</a>
<a title="我的预约"><cite>我的预约</cite></a>
</span>
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="appointment_notice contentBox">
<ul class="app_progress">
<li>
<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 class="active">
<span>4</span>
预约结果
</li>
</ul>
</div>
<!-- ----------------------------------内容模块的end----------------------------------------------- -->
<div class="footer">
<div class="system_service">
<ul class="">
<li>
<a href="" title="公示公告">
<span>公示公告</span>
</a>
</li>
<li>
<a href="" title="法律法规">
<span>法律法规</span>
</a>
</li>
<li>
<a href="" title="相应政策">
<span>相应政策</span>
</a>
</li>
<li>
<a href="" title="下载服务">
<span>下载服务</span>
</a>
</li>
<li>
<a href="" title="关于我们">
<span>关于我们</span>
</a>
</li>
</ul>
</div>
<div class="subject">
<div class="footer_logo">
<a href="" title="党政机关">
<img src="./../../staticImages/jiguan.png" alt="党政机关" />
</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" alt="公众号" />
<p>扫描关注公众号</p>
</li>
<li>
<img src="./../../staticImages/code.png" alt="公众号" />
<p>扫描关注公众号</p>
</li>
</ol>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
<script src="../../staticJs/swiper-bundle.min.js"></script>
<script type="text/javascript" src="../../staticJs/yyjg.js"></script>
\ No newline at end of file
......@@ -55,7 +55,7 @@
/* -------------------------------预约日期---------------------------------------- */
.appoint_time {
width: 1200px;
height: 60px;
height: 50px;
margin: 0 auto;
padding: 0 50px;
box-sizing: border-box;
......@@ -75,8 +75,8 @@
}
.swiper-slide li {
height: 20px;
font-size: 18px;
margin-top: 6px;
font-size: 14px;
margin-top: 3px;
}
.active {
background-color: #1E9FFF;
......@@ -136,13 +136,54 @@
background-color: #1E9FFF;
color: #fff;
}
.business_list li a{
.business_list li {
position: relative;
}
.business_list li a:first-child{
display: block;
border-radius: 3px;
height: 100%;
width: 93%;
background-color: #eee;
position: absolute;
left: 0;
top: 0;
}
.business_list li .reserved{
border-radius: 3px;
height: 100%;
width: 93%;
background-color: #eee;
box-sizing: content-box;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.3);
z-index: 10;
text-align: center;
}
.business_list li .reserved i{
color: #FF5722;
font-size: 24px;
display: inline-block;
position: relative;
top: -5px;
}
.business_list li .reserved i:last-child {
cursor: pointer;
}
.business_list li .reserved div{
display: inline-block;
text-align: center;
margin: 0 15px;
}
.business_list li .reserved p {
height: 21px;
line-height: 21px;
color: #fff;
}
.business_list li a:hover {
background-color: #1E9FFF;
color: #fff;
......@@ -228,4 +269,26 @@
.able_appintActive {
background-color: #5FB878;
color: #fff;
}
.allowedMask {
border-radius: 3px;
height: 100%;
width: 93%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0);
z-index: 9;
cursor:not-allowed!important;
}
.disnone {
display: none!important;
}
.next_button {
text-align: center;
margin: 20px 0;
}
.next_button a {
color: #fff;
}
\ No newline at end of file
......
......@@ -162,6 +162,19 @@
</ul>
</div>
<div class="layui_anim_content"></div>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="../xxqu/index.html" title="上一步">
上一步
</a>
</button>
<button type="button" class="layui-btn layui-btn-normal">
<a href="../yyjg/index.html" title="下一步">
下一步
</a>
</button>
</div>
<!-- ----------------------------------内容模块的end----------------------------------------------- -->
<div class="footer">
<div class="system_service">
......