Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
90b3c30e by 任超
Options

style:网上申请样式

1 parent 89233ad9
Inline Side-by-side
Showing 8 changed files with 187 additions and 126 deletions
......@@ -31,14 +31,49 @@
.layui-form-item .layui-inline {
width: 48%;
}
.submitbutton {
text-align: center;
margin: 30px 0 60px 0;
}
.layui-form-item button {
width: 120px;
height: 42px;
border-radius: 3px;
}
.layui-layer-dialog .layui-layer-content {
line-height: 24px;
}
.record_con {
margin-top: 15px;
}
.record {
width: 55%;
}
.submitbutton_con {
position: relative;
left: -40px;
}
.submitbutton .reset {
background: #F7B500;
color: #FFFFFF;
border-color: #F7B500;
}
.submitbutton .reset:hover {
color: #ffffff;
}
.submitbutton .reset:hover {
border-color: #F7B500;
}
.no_data {
text-align: center;
line-height: 36px;
}
/* ----------------预约列表-------------------- */
.seach_result {
/* display: none; */
}
.appointment_list {
margin-top: 20px;
font-size: 0;
......
......@@ -42,6 +42,9 @@
background-color: #47E1BF!important;
position: relative;
}
.activeing {
background-color: #47E1BF!important;
}
.active::after {
content: " ";
display: block;
......
......@@ -203,14 +203,25 @@
}
.acceptance_information h3 , .person_info h3, .data_upload h3, .obtaining_license h3{
height: 16px;
padding-left: 5px;
border-left: 3px solid #0091FF;
line-height: 18px;
padding-left: 8px;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: #585656;
position: relative;
border-bottom: 1px dotted #E6E6E6;
padding-bottom: 15px;
}
.acceptance_information h3::before , .person_info h3::before , .data_upload h3::before , .obtaining_license h3::before {
position:absolute;
content:"";
left:0;
width:4px;
height:12px;
border-radius: 1px;
top: 5px;
background-color: #0091FF;
}
.acceptance_information ul {
font-size: 0;
}
......
......@@ -23,20 +23,23 @@
}
.next_button {
text-align: center;
margin: 10px 0;
margin: 50px 0 100px 0;
}
.audit_progress {
padding: 30px 20px;
border: 1px solid #eeeeee;
border-radius: 4px;
margin-top: 30px;
text-align: center;
}
.audit_progress h2 {
font-size: 18px;
color: #5FB878;
font-weight: 600;
margin-bottom: 5px;
font-size: 16px;
color: #6D7278;
margin: 0 auto;
}
.audit_progress h2 img {
width: 24px;
height: 24px;
position: relative;
top: 5px;
margin-right: 2px;
}
.audit_progress p {
color: #FA6400;
......@@ -45,15 +48,27 @@
.acceptance_information {
margin: 20px 0;
}
.acceptance_information h3{
.acceptance_information h3 , .acceptance_process h3{
height: 16px;
padding-left: 5px;
border-left: 3px solid #0091FF;
line-height: 18px;
padding-left: 8px;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
position: relative;
border-bottom: 1px dotted #E6E6E6;
padding-bottom: 15px;
}
.acceptance_information h3::before ,.acceptance_process h3::before{
position:absolute;
content:"";
left:0;
width:4px;
height:12px;
border-radius: 1px;
top: 5px;
background-color: #0091FF;
}
.acceptance_information ul {
font-size: 0;
}
......@@ -61,7 +76,7 @@
display: inline-block;
width: 50%;
font-size: 14px;
line-height: 28px;
line-height: 36px;
}
.acceptance_information ul li span {
color: #9B9B9B;
......@@ -69,3 +84,52 @@
.acceptance_information ul li p {
display: inline-block;
}
/* -----------受理流程-------------- */
.acceptance_process {
margin-top: 20px;
}
.acceptance_process ul li {
position: relative;
width: 109px;
display: inline-block;
}
.acceptance_process ul li:not(:last-child) {
margin-right: 250px;
}
.acceptance_process ul li .date {
text-align: center;
color: #6D7278;
}
.acceptance_process ul li .circle {
width: 18px;
height: 18px;
border: 2px solid #2FA5FF;
border-radius: 18px;
margin: 10px auto;
}
.acceptance_process ul li h5 {
text-align: center;
}
.acceptance_process ul li .result {
font-size: 14px;
margin-top: 6px;
text-align: center;
}
.acceptance_process ul li .result span{
color: #9B9B9B;
}
.acceptance_process ul li .result a {
color: #0091FF;
cursor: pointer;
}
.acceptance_process .line {
position: absolute;
width: 340px;
height: 1px;
background: #DEDEDE;
border-radius: 8px;
position: absolute;
left: 65px;
top: 40px;
}
\ No newline at end of file
......
$(function () {
var title = undefined
var bus = undefined
var countDown = null
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
layer.msg(elem.text());
});
});
addTabs('#wssq')
title = GetQueryString('title')
bus = GetQueryString('bus')
// $('.name_title h2').text(title)
// $('.name_title p').text(bus)
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]);
return null;
}
// 业务
// 点击获取验证码操作
$('.feachBtn').click(function () {
var tel = $("#tel").val();
//正则表达式
var reg = /(1[3-9]\d{9}$)/;
if (!reg.test(tel)) {
layer.msg("请输入正确格式的手机号码", {
icon: 5
});
return false;
} else {
let count = 5;
$('.feachBtn').attr('disabled', true);
$('.feachBtn').css({
background: '#eee',
color: '#707070',
});
count--;
countDown = setInterval(() => {
count--;
$('.feachBtn').text(count + '秒后可重新获取');
if (count === 0) {
$('.feachBtn').text('重新发送').removeAttr('disabled');
clearInterval(countDown);
}
}, 1000);
$('.feachBtn').text(count + '秒后可重新获取');
}
})
layui.use(['form'], function () {
var form = layui.form
//自定义验证规则
......
......@@ -273,7 +273,7 @@
{{# } }}
{{# if(item.stepState==1){ }}
<li class="item_proress">
<p class="active"></p>
<p class="activeing"></p>
<h5>{{item.stepName}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
......
......@@ -52,29 +52,18 @@
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">联系方式</label>
<div class="layui-input-inline">
<input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone"
placeholder="请输联系方式" class="layui-input">
</div>
<button type="button"
class="layui-btn layui-btn-radius layui-btn-primary feachBtn layui-btn-sm">获取验证码</button>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证码</label>
<div class="layui-input-block">
<input type="tel" name="code" required lay-verify="code" maxlength="6" placeholder="请输验证码"
<div class="layui-form-item record_con">
<label class="layui-form-label">合同备案号</label>
<div class="layui-input-block record">
<input type="text" name="record" required lay-verify="record" placeholder="请输合同备案号"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="reset" class="layui-btn layui-btn-primary">重 置</button>
<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">查
<div class="layui-form-item submitbutton_con">
<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>
</div>
</div>
......@@ -85,41 +74,6 @@
<ul class="appointment_list">
<li>
<div class="item_content">
<div class="item_title success">
<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 overdue">
<h3>正常</h3>
<p>
......@@ -213,7 +167,7 @@
{{# } }}
{{# if(item.stepState==1){ }}
<li class="item_proress">
<p class="active"></p>
<p class="activeing"></p>
<h5>{{item.stepName}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
......
......@@ -32,10 +32,10 @@
</ul>
</div>
<div class="audit_progress">
<h2>您的申请已提交,工作人员会在15个工作日内完成审核！</h2>
<p>
您可以在“ 个人中心-我的业务”查看办理进度
</p>
<h2>
<img src="../staticImages/xuanzhong.png" />
您的申请已提交,工作人员会在15个工作日内完成审核！
</h2>
</div>
<div class="acceptance_information">
<h3>受理信息</h3>
......@@ -112,9 +112,49 @@
</li>
</ul>
</div>
<!-- -------受理流程------------ -->
<!-- ------------受理流程-------------- -->
<div class="acceptance_process">
<h3>受理流程</h3>
<ul>
<li>
<p class="date">2020-10-89</p>
<p class="circle"></p>
<h5>申请</h5>
<p class="result">
<span>已提交</span>
<a>询问笔录</a>
</p>
<div class="line"></div>
</li>
<li>
<p class="date">2020-10-89</p>
<p class="circle"></p>
<h5>申请</h5>
<p class="result">
<span>已提交</span>
<a>完税详情</a>
</p>
<div class="line"></div>
</li>
<li>
<p class="date">2020-10-89</p>
<p class="circle"></p>
<h5>申请</h5>
<p class="result">
<span>已认证</span>
</p>
<div class="line"></div>
</li>
<li>
<p class="date">2020-10-89</p>
<p class="circle"></p>
<h5>申请</h5>
<p class="result">
<span>已缴费</span>
<a>缴费详情</a>
</p>
</li>
</ul>
</div>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
......@@ -139,7 +179,7 @@
{{# } }}
{{# if(item.stepState==1){ }}
<li class="item_proress">
<p class="active"></p>
<p class="activeing"></p>
<h5>{{item.stepName}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
......