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
1 .content_box {
2 width: 1200px;
3 margin: 0 auto;
4 min-height:calc(100vh - 207px);
5 color: #4a4a4a;
6 }
7 .name_title {
8 padding: 10px;
9 margin:15px 0;
10 }
11 .name_title h2 {
12 display: inline-block;
13 font-weight: 600;
14 margin-right: 10px;
15 border-left: 3px solid #0091FF;
16 height: 16px;
17 line-height: 16px;
18 padding-left: 5px;
19 }
20 .name_title p {
21 display: inline-block;
22 color: #0091FF;
23 }
24 .audit_progress {
25 padding: 30px 20px;
26 border: 1px solid #eeeeee;
27 margin: 20px 0;
28 }
29 .audit_progress h2 {
30 font-size: 16px;
31 font-weight: 600;
32 color: #5FB878;
33 line-height: 16px;
34 }
35 /* ------------缴费信息---------------- */
36 .payment_information h3, .payment_channel h3{
37 height: 16px;
38 padding-left: 5px;
39 border-left: 3px solid #0091FF;
40 line-height: 18px;
41 font-size: 16px;
42 font-weight: 600;
43 margin-bottom: 15px;
44 }
45 .payment_information ul{
46 font-size: 0;
47 }
48 .payment_information ul li{
49 display: inline-block;
50 width: 50%;
51 font-size: 14px;
52 line-height: 28px;
53 }
54 .payment_information ul li span {
55 color: #9B9B9B;
56 }
57 .payment_information ul li p, .payment_information h5 ,.payment_information h6 {
58 display: inline-block;
59 margin-left: 5px;
60 }
61 .payment_information h5 , .payment_information h6 {
62 color: #FA6400;
63 }
64 .payment_information ul li h5 {
65 font-size: 18px;
66 font-weight: 600;
67 }
68 /* ----------------------缴费通道------------------------------- */
69 .payment_channel {
70 margin: 20px 0;
71 }
72 .payment_channel ul {
73 font-size: 0;
74 }
75 .payment_channel ul li {
76 display: inline-block;
77 width: 50%;
78 text-align: center;
79 cursor: pointer;
80 }
81 .payment_channel ul li img {
82 width: 60px;
83 height: 60px;
84 }
85 .payment_channel ul li span {
86 display: block;
87 text-align: center;
88 font-size: 16px;
89 margin-top: 5px;
90 }
91 .code {
92 text-align: center;
93 }
94 .code img {
95 width: 150px;
96 height: 150px;
97 }
98 /* ------------------支付成功----------------------- */
99 .payment_success h5 {
100 text-align: center;
101 }
102 .payment_success h5 img {
103 width: 50px;
104 height: 50px;
105 }
106 .payment_success h5 p {
107 text-align: center;
108 font-weight: 600;
109 margin-top: 5px;
110 }
111 .payment_success ul {
112 margin-top: 20px;
113 width: 236px;
114 line-height: 36px;
115 margin: 0 auto;
116 margin-top: 30px;
117 }
118 .payment_success ul li {
119 text-align: left;
120 }
121 .payment_success ul li span{
122 color: #9B9B9B;
123 }
124 .payment_success ul li p {
125 display: inline-block;
126 }
127 .next_button {
128 text-align: center;
129 margin: 30px 0 100px 0;
130 }
...\ No newline at end of file ...\ No newline at end of file
1 $(function () {
2 layui.use('element', function () {
3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
4 });
5 addTabs('#wssq')
6 // 业务
7 })
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6 <style>
7 </style>
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <title>立即办理-线上缴费</title>
10 <script type="text/javascript" src="../staticJs/head.js"></script>
11 <link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
12 <link rel="stylesheet" type="text/css" href="../staticCss/xsjf.css">
13 </head>
14
15 <body>
16 <div class="navigation_crumbs">
17 <div class="contentBox">
18 <span class="layui-breadcrumb">
19 <a href="../../index.html">首页</a>
20 <a href="./wssq.html">网上申请</a>
21 <a><cite>在线申请</cite></a>
22 </span>
23 </div>
24 </div>
25 <div class="content_box">
26 <div class="name_title layui-bg-gray">
27 <h2>转移类</h2>
28 <p>商品房转移买卖转移登记</p>
29 </div>
30 <ul class="app_progress">
31 <li class="selected">
32 <span>1</span>
33 信息效验
34 </li>
35 <div class="line"></div>
36 <li class="selected">
37 <span>2</span>
38 填报信息
39 </li>
40 <div class="line"></div>
41 <li class="selected">
42 <span>3</span>
43 完税核税
44 </li>
45 <div class="line"></div>
46 <li class="selected">
47 <span>4</span>
48 身份认证
49 </li>
50 <div class="line"></div>
51 <li class="selected">
52 <span>5</span>
53 资料审核
54 </li>
55 <div class="line"></div>
56 <li class="active">
57 <span>6</span>
58 线上缴费
59 </li>
60 <div class="line"></div>
61 <li>
62 <span>7</span>
63 生成电子证书
64 </li>
65 </ul>
66 <!-- ------------------开始支付----------------- -->
67 <div class="audit_progress">
68 <h2>您的申请已提交,工作人员会在15个工作日内完成审核！</h2>
69 </div>
70 <!-- ------------------缴费信息----------------- -->
71 <div class="payment_information">
72 <h3>
73 缴费信息
74 </h3>
75 <ul>
76 <li>
77 <span>受理编号：</span>
78 <p>7897987989798</p>
79 </li>
80 <li>
81 <span>受理日期：</span>
82 <p>7979798797</p>
83 </li>
84 <li>
85 <span>收费事项：</span>
86 <p>商品房转移买卖转移登记（个人）登记费</p>
87 </li>
88 <li>
89 <span>应缴金额：</span>
90 <h5>600元</h5>
91 </li>
92 <li>
93 <span>收费明细：</span>
94 <h6>工本费10元 </h6>
95 <h6>快递费20元</h6>
96 <h6>不动产登记费80元</h6>
97 </li>
98 </ul>
99 </div>
100 <!-- ------------------缴费通道----------------- -->
101 <div class="payment_channel">
102 <h3>缴费通道</h3>
103 <ul>
104 <li>
105 <img src="../staticImages/wechat.png">
106 <span>微信</span>
107 </li>
108 <li>
109 <img src="../staticImages/alipay.png" alt="">
110 <span>支付宝</span>
111 </li>
112 </ul>
113 <div class="code">
114 <img src="../staticImages/code.png">
115 </div>
116 </div>
117
118 <!-- ------------------支付成功----------------- -->
119 <div class="payment_success">
120 <h5>
121 <img src="../staticImages/success.png">
122 <p>支付成功</p>
123 </h5>
124 <ul>
125 <li>
126 <span>支付流水号：</span>
127 <p>67879798798798</p>
128 </li>
129 <li>
130 <span>支付时间：</span>
131 <p>79879879</p>
132 </li>
133 <li>
134 <span>支付金额：</span>
135 <p>550.00元</p>
136 </li>
137 </ul>
138 <div class="next_button">
139 <button type="button" class="layui-btn layui-btn-normal">
140 <a href="">下一步</a>
141 </button>
142 </div>
143 </div>
144 </div>
145 </body>
146 <script type="text/javascript" src="../staticJs/common.js"></script>
147 <script type="text/javascript" src="../staticJs/down.js"></script>
148 <script type="text/javascript" src="../staticJs/xsjf.js"></script>
149 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -149,7 +149,9 @@ ...@@ -149,7 +149,9 @@
149 <h3>受理流程</h3> 149 <h3>受理流程</h3>
150 </div> 150 </div>
151 <div class="next_button"> 151 <div class="next_button">
152 <button type="button" class="layui-btn layui-btn-normal">下一步</button> 152 <button type="button" class="layui-btn layui-btn-normal">
153 <a href="./xsjf.html">下一步</a>
154 </button>
153 </div> 155 </div>
154 </div> 156 </div>
155 </body> 157 </body>
......