Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
570404c5 by 任超
Options

style:样式

1 parent 9949a87e
Inline Side-by-side
Showing 10 changed files with 150 additions and 106 deletions
......@@ -43,7 +43,7 @@
}
.submitbutton {
text-align: center;
margin: 30px 0 60px 0;
margin: 50px 0;
}
.layui-form-item button {
width: 120px;
......@@ -172,3 +172,49 @@
text-align: center;
margin: 50px 0 100px 0;
}
.input_search {
margin-top: 60px;
}
/* ------------------弹框样式-------------------- */
.layui-layer-dialog {
margin-top: -1.5%;
}
.successInfo , .seizureInfo{
background-color: #44D7B6;
width: 140%;
margin-left: -20px;
padding-left: 10px;
box-sizing: border-box;
color: #ffffff;
}
.seizureInfo {
background-color: #F26363;
opacity: 0.8;
}
.layui-layer-btn {
position: relative;
top: 50px;
left: -89px;
}
.layui-layer-btn0 {
width: 120px!important;
height: 42px!important;
text-align: center;
line-height: 42px!important;
font-size: 16px;
}
.layui-layer-content {
height: auto!important;
}
.dialog_con li {
line-height: 36px;
color: #303030;
font-size: 14px!important;
}
.dialog_con li span {
color: #9B9B9B;
display: inline-block;
width: 85px;
text-align: right;
margin-right: 10px;
}
\ No newline at end of file
......
/* ------------------------公共头部和尾部css------------------------------------ */
/* layer confim */
.layui-layer-btn .layui-layer-btn0 {
background-color: #F7B500!important;
color: #fff!important;
border: 1px solid #F7B500!important;
}
.layui-layer-btn .layui-layer-btn1 {
border-color: #1E9FFF;
background-color: #1E9FFF;
color: #fff;
}
.layui-icon-search {
color: #6D7278;
}
......@@ -280,3 +270,17 @@ div.footer .system_service ul li a:hover {
color: #CBCBCB;
margin-top: 5px;
}
/* ------------layui 弹框样式---------------- */
.layui-layer-ico {
background: none!important;
position: relative;
}
.layui-layer-ico::after {
content: '\2716';
position: absolute;
left: 0;
top: -5px;
font-size: 14px;
color: #fff;
}
\ No newline at end of file
......
/* layer confim */
.layui-layer-btn .layui-layer-btn0 {
background-color: #F7B500!important;
color: #fff!important;
border: 1px solid #F7B500!important;
}
.layui-layer-btn .layui-layer-btn1 {
border-color: #1E9FFF;
background-color: #1E9FFF;
color: #fff;
}
.progressBar {
padding-top: 20px;
padding-top: 30px;
color: #4A4A4A;
position: relative;
margin: 30px 0 50px 0;
width: 95%;
width: 93%;
margin: 0 auto;
}
.app_progress {
display: flex;
width: 106%;
width: 100%;
}
.app_progress li {
display: inline-block;
......@@ -35,7 +35,6 @@
}
.item_proress {
position: relative;
width: 50px!important;
z-index: 10;
}
.app_progress li p{
......@@ -92,3 +91,18 @@
.next_button a:hover {
color: #ffffff;
}
/* ------------中间内容区域------------- */
.content_area {
background: #FFFFFF;
box-shadow: 0px 4px 16px 0px rgba(40, 120, 254, 0.24);
-webkit-box-shadow: 0px 4px 16px 0px rgba(40, 120, 254, 0.24);
-moz-box-shadow: 0px 4px 16px 0px rgba(40, 120, 254, 0.24);
border-radius: 6px;
box-sizing: border-box;
padding: 20px;
margin-top: 10px;
}
.progressBar_con {
text-align: center;
}
\ No newline at end of file
......
$(function () {
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
let element = layui.element;
});
addTabs('#wssq')
// 业务
......@@ -18,7 +18,7 @@ $(function () {
});
//监听提交
form.on('submit(demo1)', function (data) {
form.on('submit(submit)', function (data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
......@@ -73,4 +73,49 @@ $(function () {
element.init();
});
});
// 结果弹框
$('.reset').click(function () {
successResult()
// seizureResult()
})
})
function successResult() {
layui.use('layer', function () {
layer.open({
title: '<p class="system_prompt successInfo">房屋状态：正常</p>',
area: ['370px', '335px'],
scrollbar: false,
content:'<ul class="dialog_con">'
+ '<li><span>姓名：</span>任超</li>'
+ '<li><span>身份证号：</span>610124193335522</li>'
+ '<li><span>联系电话：</span>18740677386</li>'
+ '<li><span>产权证号：</span>89897987987987</li>'
+ '<li><span>坐落：</span>西安市雁塔区南二环西段</li>'
+ '<li><span>面积：</span>2000</li>'
+ '<li><span>合同备案号：</span>9798798798798</li>'
+ '</ul>'
});
})
}
function seizureResult() {
layui.use('layer', function () {
layer.open({
title: '<p class="system_prompt seizureInfo">房屋状态：正常</p>',
area: ['370px', '335px'],
scrollbar: false,
content:'<ul class="dialog_con">'
+ '<li><span>姓名：</span>任超</li>'
+ '<li><span>身份证号：</span>610124193335522</li>'
+ '<li><span>联系电话：</span>18740677386</li>'
+ '<li><span>产权证号：</span>89897987987987</li>'
+ '<li><span>坐落：</span>西安市雁塔区南二环西段</li>'
+ '<li><span>面积：</span>2000</li>'
+ '<li><span>合同备案号：</span>9798798798798</li>'
+ '</ul>'
});
})
}
......
......@@ -14,6 +14,7 @@ $(function () {
var layer = layui.layer;
layer.confirm('本人承诺所填的预约信息属实，如有虚假，将承担法律责任', {
title: '真实准确的承诺',
scrollbar: false,
btn: ['不同意', '同意进入下一步'] //按钮
}, function () {
layer.closeAll();
......
......@@ -18,23 +18,23 @@
<span class="layui-breadcrumb">
<a href="../../index.html">首页</a>
<a href="./wssq.html">网上申请</a>
<a><cite>在线申请</cite></a>
<a><cite>信息校验</cite></a>
</span>
</div>
</div>
<div class="content_box">
<div class="name_title">
<h2>商品房</h2>
<p>转移登记</p>
<p>商品房转移买卖登记（个人）</p>
</div>
<div class="content_area">
<div class="progressBar_con">
<div class="progressBar">
<ul class="app_progress" id="app_progress">
</ul>
</div>
<div class="input_search">
<div class="form_title">
<h2>信息校验</h2>
</div>
<div class="input_search">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
......@@ -65,90 +65,11 @@
<div class="layui-input-block submitbutton">
<button type="reset" class="layui-btn layui-btn-primary reset">重 置</button>
<button type="submit" class="layui-btn layui-btn-normal submit" lay-submit=""
lay-filter="demo1">查询</button>
lay-filter="submit">查询</button>
</div>
</div>
</form>
</div>
<div class="seach_result">
<!-- <div class="no_data">暂无数据</div> -->
<ul class="appointment_list">
<li>
<div class="item_content">
<div class="item_title overdue">
<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>
<li>
<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>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="./tbxx.html">下一步</a>
</button>
</div>
</div>
</div>
</body>
......
......@@ -54,7 +54,7 @@
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<li>
<p class="active"></p>
<p class="activeing"></p>
<h5>
预约结果
</h5>
......
......@@ -10,6 +10,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
<link rel="stylesheet" href="../staticCss/swiper-bundle.min.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
<link rel="stylesheet" type="text/css" href="../staticCss/yysj.css">
<link rel="stylesheet" type="text/css" href="../staticCss/layuiDialog.css">
</head>
......@@ -47,7 +48,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<li>
<p class="active"></p>
<p class="activeing"></p>
<h5>
预约时间
</h5>
......
......@@ -11,6 +11,7 @@
<link rel="stylesheet" type="text/css" href="../staticCss/yyxz.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
<link rel="stylesheet" type="text/css" href="../staticCss/layuiedit.css">
<link rel="stylesheet" type="text/css" href="../staticCss/layuiDialog.css">
</head>
<body>
......