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 @@ ...@@ -31,14 +31,49 @@
31 .layui-form-item .layui-inline { 31 .layui-form-item .layui-inline {
32 width: 48%; 32 width: 48%;
33 } 33 }
34 .submitbutton {
35 text-align: center;
36 margin: 30px 0 60px 0;
37 }
38 .layui-form-item button {
39 width: 120px;
40 height: 42px;
41 border-radius: 3px;
42 }
43
34 .layui-layer-dialog .layui-layer-content { 44 .layui-layer-dialog .layui-layer-content {
35 line-height: 24px; 45 line-height: 24px;
36 } 46 }
47 .record_con {
48 margin-top: 15px;
49 }
50 .record {
51 width: 55%;
52 }
53 .submitbutton_con {
54 position: relative;
55 left: -40px;
56 }
57 .submitbutton .reset {
58 background: #F7B500;
59 color: #FFFFFF;
60 border-color: #F7B500;
61 }
62 .submitbutton .reset:hover {
63 color: #ffffff;
64 }
65 .submitbutton .reset:hover {
66 border-color: #F7B500;
67 }
68
37 .no_data { 69 .no_data {
38 text-align: center; 70 text-align: center;
39 line-height: 36px; 71 line-height: 36px;
40 } 72 }
41 /* ----------------预约列表-------------------- */ 73 /* ----------------预约列表-------------------- */
74 .seach_result {
75 /* display: none; */
76 }
42 .appointment_list { 77 .appointment_list {
43 margin-top: 20px; 78 margin-top: 20px;
44 font-size: 0; 79 font-size: 0;
......
...@@ -42,6 +42,9 @@ ...@@ -42,6 +42,9 @@
42 background-color: #47E1BF!important; 42 background-color: #47E1BF!important;
43 position: relative; 43 position: relative;
44 } 44 }
45 .activeing {
46 background-color: #47E1BF!important;
47 }
45 .active::after { 48 .active::after {
46 content: " "; 49 content: " ";
47 display: block; 50 display: block;
......
...@@ -203,14 +203,25 @@ ...@@ -203,14 +203,25 @@
203 } 203 }
204 .acceptance_information h3 , .person_info h3, .data_upload h3, .obtaining_license h3{ 204 .acceptance_information h3 , .person_info h3, .data_upload h3, .obtaining_license h3{
205 height: 16px; 205 height: 16px;
206 padding-left: 5px; 206 padding-left: 8px;
207 border-left: 3px solid #0091FF;
208 line-height: 18px;
209 font-size: 16px; 207 font-size: 16px;
210 font-weight: 600; 208 font-weight: 600;
211 margin-bottom: 15px; 209 margin-bottom: 15px;
212 color: #585656; 210 position: relative;
211 border-bottom: 1px dotted #E6E6E6;
212 padding-bottom: 15px;
213 }
214 .acceptance_information h3::before , .person_info h3::before , .data_upload h3::before , .obtaining_license h3::before {
215 position:absolute;
216 content:"";
217 left:0;
218 width:4px;
219 height:12px;
220 border-radius: 1px;
221 top: 5px;
222 background-color: #0091FF;
213 } 223 }
224
214 .acceptance_information ul { 225 .acceptance_information ul {
215 font-size: 0; 226 font-size: 0;
216 } 227 }
......
...@@ -23,20 +23,23 @@ ...@@ -23,20 +23,23 @@
23 } 23 }
24 .next_button { 24 .next_button {
25 text-align: center; 25 text-align: center;
26 margin: 10px 0; 26 margin: 50px 0 100px 0;
27 } 27 }
28 28
29 .audit_progress { 29 .audit_progress {
30 padding: 30px 20px; 30 text-align: center;
31 border: 1px solid #eeeeee;
32 border-radius: 4px;
33 margin-top: 30px;
34 } 31 }
35 .audit_progress h2 { 32 .audit_progress h2 {
36 font-size: 18px; 33 font-size: 16px;
37 color: #5FB878; 34 color: #6D7278;
38 font-weight: 600; 35 margin: 0 auto;
39 margin-bottom: 5px; 36 }
37 .audit_progress h2 img {
38 width: 24px;
39 height: 24px;
40 position: relative;
41 top: 5px;
42 margin-right: 2px;
40 } 43 }
41 .audit_progress p { 44 .audit_progress p {
42 color: #FA6400; 45 color: #FA6400;
...@@ -45,15 +48,27 @@ ...@@ -45,15 +48,27 @@
45 .acceptance_information { 48 .acceptance_information {
46 margin: 20px 0; 49 margin: 20px 0;
47 } 50 }
48 .acceptance_information h3{ 51 .acceptance_information h3 , .acceptance_process h3{
49 height: 16px; 52 height: 16px;
50 padding-left: 5px; 53 padding-left: 8px;
51 border-left: 3px solid #0091FF;
52 line-height: 18px;
53 font-size: 16px; 54 font-size: 16px;
54 font-weight: 600; 55 font-weight: 600;
55 margin-bottom: 15px; 56 margin-bottom: 15px;
57 position: relative;
58 border-bottom: 1px dotted #E6E6E6;
59 padding-bottom: 15px;
56 } 60 }
61 .acceptance_information h3::before ,.acceptance_process h3::before{
62 position:absolute;
63 content:"";
64 left:0;
65 width:4px;
66 height:12px;
67 border-radius: 1px;
68 top: 5px;
69 background-color: #0091FF;
70 }
71
57 .acceptance_information ul { 72 .acceptance_information ul {
58 font-size: 0; 73 font-size: 0;
59 } 74 }
...@@ -61,7 +76,7 @@ ...@@ -61,7 +76,7 @@
61 display: inline-block; 76 display: inline-block;
62 width: 50%; 77 width: 50%;
63 font-size: 14px; 78 font-size: 14px;
64 line-height: 28px; 79 line-height: 36px;
65 } 80 }
66 .acceptance_information ul li span { 81 .acceptance_information ul li span {
67 color: #9B9B9B; 82 color: #9B9B9B;
...@@ -69,3 +84,52 @@ ...@@ -69,3 +84,52 @@
69 .acceptance_information ul li p { 84 .acceptance_information ul li p {
70 display: inline-block; 85 display: inline-block;
71 } 86 }
87
88 /* -----------受理流程-------------- */
89 .acceptance_process {
90 margin-top: 20px;
91 }
92 .acceptance_process ul li {
93 position: relative;
94 width: 109px;
95 display: inline-block;
96 }
97 .acceptance_process ul li:not(:last-child) {
98 margin-right: 250px;
99 }
100 .acceptance_process ul li .date {
101 text-align: center;
102 color: #6D7278;
103 }
104 .acceptance_process ul li .circle {
105 width: 18px;
106 height: 18px;
107 border: 2px solid #2FA5FF;
108 border-radius: 18px;
109 margin: 10px auto;
110 }
111 .acceptance_process ul li h5 {
112 text-align: center;
113 }
114 .acceptance_process ul li .result {
115 font-size: 14px;
116 margin-top: 6px;
117 text-align: center;
118 }
119 .acceptance_process ul li .result span{
120 color: #9B9B9B;
121 }
122 .acceptance_process ul li .result a {
123 color: #0091FF;
124 cursor: pointer;
125 }
126 .acceptance_process .line {
127 position: absolute;
128 width: 340px;
129 height: 1px;
130 background: #DEDEDE;
131 border-radius: 8px;
132 position: absolute;
133 left: 65px;
134 top: 40px;
135 }
...\ No newline at end of file ...\ No newline at end of file
......
1 $(function () { 1 $(function () {
2 var title = undefined
3 var bus = undefined
4 var countDown = null
5 layui.use('element', function () { 2 layui.use('element', function () {
6 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
7 //监听导航点击
8 element.on('nav(demo)', function (elem) {
9 layer.msg(elem.text());
10 });
11 }); 4 });
12 addTabs('#wssq') 5 addTabs('#wssq')
13 title = GetQueryString('title')
14 bus = GetQueryString('bus')
15 // $('.name_title h2').text(title)
16 // $('.name_title p').text(bus)
17 function GetQueryString(name) {
18 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
19 var r = window.location.search.substr(1).match(reg);
20 if (r != null) return decodeURIComponent(r[2]);
21 return null;
22 }
23 // 业务 6 // 业务
24 // 点击获取验证码操作
25 $('.feachBtn').click(function () {
26 var tel = $("#tel").val();
27 //正则表达式
28 var reg = /(1[3-9]\d{9}$)/;
29 if (!reg.test(tel)) {
30 layer.msg("请输入正确格式的手机号码", {
31 icon: 5
32 });
33 return false;
34 } else {
35 let count = 5;
36 $('.feachBtn').attr('disabled', true);
37 $('.feachBtn').css({
38 background: '#eee',
39 color: '#707070',
40 });
41 count--;
42 countDown = setInterval(() => {
43 count--;
44 $('.feachBtn').text(count + '秒后可重新获取');
45 if (count === 0) {
46 $('.feachBtn').text('重新发送').removeAttr('disabled');
47 clearInterval(countDown);
48 }
49 }, 1000);
50 $('.feachBtn').text(count + '秒后可重新获取');
51 }
52 })
53 layui.use(['form'], function () { 7 layui.use(['form'], function () {
54 var form = layui.form 8 var form = layui.form
55 //自定义验证规则 9 //自定义验证规则
......
...@@ -273,7 +273,7 @@ ...@@ -273,7 +273,7 @@
273 {{# } }} 273 {{# } }}
274 {{# if(item.stepState==1){ }} 274 {{# if(item.stepState==1){ }}
275 <li class="item_proress"> 275 <li class="item_proress">
276 <p class="active"></p> 276 <p class="activeing"></p>
277 <h5>{{item.stepName}}</h5> 277 <h5>{{item.stepName}}</h5>
278 </li> 278 </li>
279 {{# if(index!=(d.progressList.length-1)){ }} 279 {{# if(index!=(d.progressList.length-1)){ }}
......
...@@ -52,29 +52,18 @@ ...@@ -52,29 +52,18 @@
52 </div> 52 </div>
53 </div> 53 </div>
54 54
55 <div class="layui-form-item"> 55 <div class="layui-form-item record_con">
56 <div class="layui-inline"> 56 <label class="layui-form-label">合同备案号</label>
57 <label class="layui-form-label">联系方式</label> 57 <div class="layui-input-block record">
58 <div class="layui-input-inline"> 58 <input type="text" name="record" required lay-verify="record" placeholder="请输合同备案号"
59 <input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone"
60 placeholder="请输联系方式" class="layui-input">
61 </div>
62 <button type="button"
63 class="layui-btn layui-btn-radius layui-btn-primary feachBtn layui-btn-sm">获取验证码</button>
64 </div>
65 <div class="layui-inline">
66 <label class="layui-form-label">验证码</label>
67 <div class="layui-input-block">
68 <input type="tel" name="code" required lay-verify="code" maxlength="6" placeholder="请输验证码"
69 class="layui-input"> 59 class="layui-input">
70 </div> 60 </div>
71 </div> 61 </div>
72 </div>
73 62
74 <div class="layui-form-item"> 63 <div class="layui-form-item submitbutton_con">
75 <div class="layui-input-block"> 64 <div class="layui-input-block submitbutton">
76 <button type="reset" class="layui-btn layui-btn-primary">重 置</button> 65 <button type="reset" class="layui-btn layui-btn-primary reset">重 置</button>
77 <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">查 66 <button type="submit" class="layui-btn layui-btn-normal submit" lay-submit="" lay-filter="demo1">查
78 询</button> 67 询</button>
79 </div> 68 </div>
80 </div> 69 </div>
...@@ -85,41 +74,6 @@ ...@@ -85,41 +74,6 @@
85 <ul class="appointment_list"> 74 <ul class="appointment_list">
86 <li> 75 <li>
87 <div class="item_content"> 76 <div class="item_content">
88 <div class="item_title success">
89 <h3>正常</h3>
90 <p>
91 查看
92 <i class="layui-icon layui-icon-right"></i>
93 </p>
94 </div>
95 <ul class="item_info">
96 <li>
97 <span>预约人：</span>
98 <p>任超</p>
99 </li>
100 <li>
101 <span>办事大厅：</span>
102 <p>米香园办事大厅</p>
103 </li>
104 <li>
105 <span>办理业务类型：</span>
106 <p>二手房交易</p>
107 <a href="">办事指南</a>
108 </li>
109 <li>
110 <span>预约日期：</span>
111 <p>2020-12-56 上午 16：13</p>
112 </li>
113 <li>
114 <span>预约流水号：</span>
115 <p>897987987987</p>
116 </li>
117 </ul>
118 <a class="cancel_reservation">取消预约</a>
119 </div>
120 </li>
121 <li>
122 <div class="item_content">
123 <div class="item_title overdue"> 77 <div class="item_title overdue">
124 <h3>正常</h3> 78 <h3>正常</h3>
125 <p> 79 <p>
...@@ -213,7 +167,7 @@ ...@@ -213,7 +167,7 @@
213 {{# } }} 167 {{# } }}
214 {{# if(item.stepState==1){ }} 168 {{# if(item.stepState==1){ }}
215 <li class="item_proress"> 169 <li class="item_proress">
216 <p class="active"></p> 170 <p class="activeing"></p>
217 <h5>{{item.stepName}}</h5> 171 <h5>{{item.stepName}}</h5>
218 </li> 172 </li>
219 {{# if(index!=(d.progressList.length-1)){ }} 173 {{# if(index!=(d.progressList.length-1)){ }}
......
...@@ -32,10 +32,10 @@ ...@@ -32,10 +32,10 @@
32 </ul> 32 </ul>
33 </div> 33 </div>
34 <div class="audit_progress"> 34 <div class="audit_progress">
35 <h2>您的申请已提交,工作人员会在15个工作日内完成审核！</h2> 35 <h2>
36 <p> 36 <img src="../staticImages/xuanzhong.png" />
37 您可以在“ 个人中心-我的业务”查看办理进度 37 您的申请已提交,工作人员会在15个工作日内完成审核！
38 </p> 38 </h2>
39 </div> 39 </div>
40 <div class="acceptance_information"> 40 <div class="acceptance_information">
41 <h3>受理信息</h3> 41 <h3>受理信息</h3>
...@@ -112,9 +112,49 @@ ...@@ -112,9 +112,49 @@
112 </li> 112 </li>
113 </ul> 113 </ul>
114 </div> 114 </div>
115 <!-- -------受理流程------------ --> 115 <!-- ------------受理流程-------------- -->
116 <div class="acceptance_process"> 116 <div class="acceptance_process">
117 <h3>受理流程</h3> 117 <h3>受理流程</h3>
118 <ul>
119 <li>
120 <p class="date">2020-10-89</p>
121 <p class="circle"></p>
122 <h5>申请</h5>
123 <p class="result">
124 <span>已提交</span>
125 <a>询问笔录</a>
126 </p>
127 <div class="line"></div>
128 </li>
129 <li>
130 <p class="date">2020-10-89</p>
131 <p class="circle"></p>
132 <h5>申请</h5>
133 <p class="result">
134 <span>已提交</span>
135 <a>完税详情</a>
136 </p>
137 <div class="line"></div>
138 </li>
139 <li>
140 <p class="date">2020-10-89</p>
141 <p class="circle"></p>
142 <h5>申请</h5>
143 <p class="result">
144 <span>已认证</span>
145 </p>
146 <div class="line"></div>
147 </li>
148 <li>
149 <p class="date">2020-10-89</p>
150 <p class="circle"></p>
151 <h5>申请</h5>
152 <p class="result">
153 <span>已缴费</span>
154 <a>缴费详情</a>
155 </p>
156 </li>
157 </ul>
118 </div> 158 </div>
119 <div class="next_button"> 159 <div class="next_button">
120 <button type="button" class="layui-btn layui-btn-normal"> 160 <button type="button" class="layui-btn layui-btn-normal">
...@@ -139,7 +179,7 @@ ...@@ -139,7 +179,7 @@
139 {{# } }} 179 {{# } }}
140 {{# if(item.stepState==1){ }} 180 {{# if(item.stepState==1){ }}
141 <li class="item_proress"> 181 <li class="item_proress">
142 <p class="active"></p> 182 <p class="activeing"></p>
143 <h5>{{item.stepName}}</h5> 183 <h5>{{item.stepName}}</h5>
144 </li> 184 </li>
145 {{# if(index!=(d.progressList.length-1)){ }} 185 {{# if(index!=(d.progressList.length-1)){ }}
......