Skip to content

任超 / js.portalStaticPage

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

style:在线缴费

1 parent d4be69de
Inline Side-by-side
Showing 7 changed files with 289 additions and 1 deletions
.content_box {
width: 1200px;
margin: 0 auto;
min-height:calc(100vh - 207px);
color: #4a4a4a;
}
.name_title {
padding: 10px;
margin:15px 0;
}
.name_title h2 {
display: inline-block;
font-weight: 600;
margin-right: 10px;
border-left: 3px solid #0091FF;
height: 16px;
line-height: 16px;
padding-left: 5px;
}
.name_title p {
display: inline-block;
color: #0091FF;
}
.audit_progress {
padding: 30px 20px;
border: 1px solid #eeeeee;
margin: 20px 0;
}
.audit_progress h2 {
font-size: 16px;
font-weight: 600;
color: #5FB878;
line-height: 16px;
}
/* ------------缴费信息---------------- */
.payment_information h3, .payment_channel h3{
height: 16px;
padding-left: 5px;
border-left: 3px solid #0091FF;
line-height: 18px;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
}
.payment_information ul{
font-size: 0;
}
.payment_information ul li{
display: inline-block;
width: 50%;
font-size: 14px;
line-height: 28px;
}
.payment_information ul li span {
color: #9B9B9B;
}
.payment_information ul li p, .payment_information h5 ,.payment_information h6 {
display: inline-block;
margin-left: 5px;
}
.payment_information h5 , .payment_information h6 {
color: #FA6400;
}
.payment_information ul li h5 {
font-size: 18px;
font-weight: 600;
}
/* ----------------------缴费通道------------------------------- */
.payment_channel {
margin: 20px 0;
}
.payment_channel ul {
font-size: 0;
}
.payment_channel ul li {
display: inline-block;
width: 50%;
text-align: center;
cursor: pointer;
}
.payment_channel ul li img {
width: 60px;
height: 60px;
}
.payment_channel ul li span {
display: block;
text-align: center;
font-size: 16px;
margin-top: 5px;
}
.code {
text-align: center;
}
.code img {
width: 150px;
height: 150px;
}
/* ------------------支付成功----------------------- */
.payment_success h5 {
text-align: center;
}
.payment_success h5 img {
width: 50px;
height: 50px;
}
.payment_success h5 p {
text-align: center;
font-weight: 600;
margin-top: 5px;
}
.payment_success ul {
margin-top: 20px;
width: 236px;
line-height: 36px;
margin: 0 auto;
margin-top: 30px;
}
.payment_success ul li {
text-align: left;
}
.payment_success ul li span{
color: #9B9B9B;
}
.payment_success ul li p {
display: inline-block;
}
.next_button {
text-align: center;
margin: 30px 0 100px 0;
}
\ No newline at end of file
$(function () {
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
});
addTabs('#wssq')
// 业务
})
\ No newline at end of file
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>立即办理-线上缴费</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
<link rel="stylesheet" type="text/css" href="../staticCss/xsjf.css">
</head>
<body>
<div class="navigation_crumbs">
<div class="contentBox">
<span class="layui-breadcrumb">
<a href="../../index.html">首页</a>
<a href="./wssq.html">网上申请</a>
<a><cite>在线申请</cite></a>
</span>
</div>
</div>
<div class="content_box">
<div class="name_title layui-bg-gray">
<h2>转移类</h2>
<p>商品房转移买卖转移登记</p>
</div>
<ul class="app_progress">
<li class="selected">
<span>1</span>
信息效验
</li>
<div class="line"></div>
<li class="selected">
<span>2</span>
填报信息
</li>
<div class="line"></div>
<li class="selected">
<span>3</span>
完税核税
</li>
<div class="line"></div>
<li class="selected">
<span>4</span>
身份认证
</li>
<div class="line"></div>
<li class="selected">
<span>5</span>
资料审核
</li>
<div class="line"></div>
<li class="active">
<span>6</span>
线上缴费
</li>
<div class="line"></div>
<li>
<span>7</span>
生成电子证书
</li>
</ul>
<!-- ------------------开始支付----------------- -->
<div class="audit_progress">
<h2>您的申请已提交,工作人员会在15个工作日内完成审核！</h2>
</div>
<!-- ------------------缴费信息----------------- -->
<div class="payment_information">
<h3>
缴费信息
</h3>
<ul>
<li>
<span>受理编号：</span>
<p>7897987989798</p>
</li>
<li>
<span>受理日期：</span>
<p>7979798797</p>
</li>
<li>
<span>收费事项：</span>
<p>商品房转移买卖转移登记（个人）登记费</p>
</li>
<li>
<span>应缴金额：</span>
<h5>600元</h5>
</li>
<li>
<span>收费明细：</span>
<h6>工本费10元 </h6>
<h6>快递费20元</h6>
<h6>不动产登记费80元</h6>
</li>
</ul>
</div>
<!-- ------------------缴费通道----------------- -->
<div class="payment_channel">
<h3>缴费通道</h3>
<ul>
<li>
<img src="../staticImages/wechat.png">
<span>微信</span>
</li>
<li>
<img src="../staticImages/alipay.png" alt="">
<span>支付宝</span>
</li>
</ul>
<div class="code">
<img src="../staticImages/code.png">
</div>
</div>
<!-- ------------------支付成功----------------- -->
<div class="payment_success">
<h5>
<img src="../staticImages/success.png">
<p>支付成功</p>
</h5>
<ul>
<li>
<span>支付流水号：</span>
<p>67879798798798</p>
</li>
<li>
<span>支付时间：</span>
<p>79879879</p>
</li>
<li>
<span>支付金额：</span>
<p>550.00元</p>
</li>
</ul>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="">下一步</a>
</button>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/down.js"></script>
<script type="text/javascript" src="../staticJs/xsjf.js"></script>
</html>
\ No newline at end of file
......@@ -149,7 +149,9 @@
<h3>受理流程</h3>
</div>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">下一步</button>
<button type="button" class="layui-btn layui-btn-normal">
<a href="./xsjf.html">下一步</a>
</button>
</div>
</div>
</body>
......