Skip to content

任超 / js.portalStaticPage

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

style:信息校验样式

1 parent badcf0dc
Inline Side-by-side
Showing 5 changed files with 277 additions and 171 deletions
...@@ -38,42 +38,92 @@ ...@@ -38,42 +38,92 @@
38 text-align: center; 38 text-align: center;
39 line-height: 36px; 39 line-height: 36px;
40 } 40 }
41 .data_list { 41 /* ----------------预约列表-------------------- */
42 margin-bottom: 20px; 42 .appointment_list {
43 margin-top: 20px;
44 font-size: 0;
45 margin-left: -10px;
46 margin-right: -10px;
47 overflow: hidden;
43 } 48 }
44 .data_list li { 49 .appointment_list li {
45 width: 31%; 50 width: 33.333%;
46 border: 1px solid #d2d2d2;
47 display: inline-block; 51 display: inline-block;
48 color: #4a4a4a; 52 padding: 0 10px;
49 border-radius: 3px;
50 box-sizing: border-box; 53 box-sizing: border-box;
51 margin-right: 20px; 54 float: left;
52 } 55 }
53 .data_list li:last-child { 56 .appointment_list li .item_content {
54 margin-right: 0; 57 border: 1px solid #CBCBCB;
58 border-radius: 4px;
59 border: 1px solid #CBCBCB;
60 font-size: 16px;
61 height: 368px;
55 } 62 }
56 .data_list li h3 { 63 .item_title {
57 background-color: #5FB878; 64 height: 48px;
58 text-align: center; 65 line-height: 48px;
59 line-height: 36px; 66 color: #FFFFFF;
60 padding: 0 10px; 67 padding: 0 20px;
61 color: #fff; 68 box-sizing: border-box;
62 } 69 }
63 .data_list li p { 70 .item_title h3 {
64 line-height: 40px; 71 display: inline-block;
65 padding: 0 10px; 72 float: left;
66 } 73 }
67 .data_list li p span { 74 .item_title p {
68 width: 85px;
69 text-align-last: justify;
70 display: inline-block; 75 display: inline-block;
71 margin-right: 10px; 76 float: right;
72 } 77 }
73 .next_button { 78 .success {
79 background-color: #44D7B6;
80 }
81 .overdue {
82 background-color: #F26363;
83 }
84 .cancel {
85 background-color: #F26363;
86 opacity: 0.5;
87 }
88 .item_info {
89 padding: 30px;
90 height: 180px;
91 }
92 .item_info li{
93 width: 100%;
94 line-height: 38px;
95 box-sizing: border-box;
96 }
97 .item_info li span {
98 display: inline-block;
99 width: 108px;
100 text-align: right;
101 color: #9B9B9B;
102 white-space: nowrap;
103 }
104 .item_info li p{
105 display: inline-block;
106 color: #303030;
107 }
108 .item_info li a{
109 display: inline-block;
110 color: #0091FF;
111 margin-left: 20px;
112 }
113 .cancel_reservation {
114 display: block;
115 width: 100px;
116 height: 40px;
117 background: #FFFFFF;
118 border-radius: 3px;
119 border: 1px solid #E6E6E6;
120 font-size: 16px;
121 color: #9B9B9B;
122 line-height: 40px;
74 text-align: center; 123 text-align: center;
75 margin-bottom: 20px; 124 margin: 0 auto;
76 } 125 }
77 .next_button a { 126 .next_button {
78 color: #fff; 127 text-align: center;
128 margin: 50px 0 100px 0;
79 } 129 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
19 flex: 2.1; 19 flex: 2.1;
20 position: relative; 20 position: relative;
21 top: 10px; 21 top: 10px;
22 margin-left: -3%; 22 margin-left: -3.8%;
23 margin-right: -3%; 23 margin-right: -3.8%;
24 } 24 }
25 .item_proress { 25 .item_proress {
26 position: relative; 26 position: relative;
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
36 } 36 }
37 .app_progress li h5 { 37 .app_progress li h5 {
38 white-space: nowrap; 38 white-space: nowrap;
39 margin-top: 5px;
39 } 40 }
40 .active { 41 .active {
41 background-color: #47E1BF!important; 42 background-color: #47E1BF!important;
......
...@@ -71,4 +71,52 @@ $(function () { ...@@ -71,4 +71,52 @@ $(function () {
71 return false; 71 return false;
72 }); 72 });
73 }); 73 });
74 // 进度条
75 var data = {
76 'progressList': [
77 {
78 stepName: "信息效验",
79 stepState: 1 //0：未办理 1：正在办理 2：已办理
80 },
81 {
82 stepName: "填报信息",
83 stepState: 0
84 },
85 {
86 stepName: "完税核税",
87 stepState: 0
88 },
89 {
90 stepName: "身份认证",
91 stepState: 0
92 },
93 {
94 stepName: "资料审核",
95 stepState: 0
96 },
97 // {
98 // stepName: "线上缴费",
99 // stepState: 0
100 // },
101 // {
102 // stepName: "生成电子证书",
103 // stepState: 0
104 // }
105 ],
106 }
107
108 layui.use('laytpl', function () {
109 laytpl = layui.laytpl;
110 var getTpl = document.getElementById('progress').innerHTML
111 , view = document.getElementById('app_progress');
112 laytpl(getTpl).render(data, function (html) {
113 view.innerHTML = html;
114 });
115
116 layui.use(['element'], function () {
117 var element = layui.element;
118 //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
119 element.init();
120 });
121 });
74 }) 122 })
......
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
100 <p>预售商品房抵押登记</p> 100 <p>预售商品房抵押登记</p>
101 <div class="button"> 101 <div class="button">
102 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"> 102 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
103 <a href='./bljy.html?title=预告类&bus=预售商品房抵押登记'>立即办理</a> 103 <a href='./xxjy.html?title=预告类&bus=预售商品房抵押登记'>立即办理</a>
104 </button> 104 </button>
105 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button> 105 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
106 </div> 106 </div>
......
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
6 <style> 6 <style>
7 </style> 7 </style>
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <title>立即办理-校验</title> 9 <title>立即办理-信息校验</title>
10 <script type="text/javascript" src="../staticJs/head.js"></script> 10 <script type="text/javascript" src="../staticJs/head.js"></script>
11 <link rel="stylesheet" type="text/css" href="../staticCss/bljy.css">
12 <link rel="stylesheet" type="text/css" href="../staticCss/progress.css"> 11 <link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
12 <link rel="stylesheet" type="text/css" href="../staticCss/bljy.css">
13 </head> 13 </head>
14 14
15 <body> 15 <body>
...@@ -27,42 +27,10 @@ ...@@ -27,42 +27,10 @@
27 <h2></h2> 27 <h2></h2>
28 <p></p> 28 <p></p>
29 </div> 29 </div>
30 <ul class="app_progress"> 30 <div class="progressBar">
31 <li class="active"> 31 <ul class="app_progress" id="app_progress">
32 <span>1</span> 32 </ul>
33 信息效验 33 </div>
34 </li>
35 <div class="line"></div>
36 <li>
37 <span>2</span>
38 填报信息
39 </li>
40 <div class="line"></div>
41 <li>
42 <span>3</span>
43 完税核税
44 </li>
45 <div class="line"></div>
46 <li>
47 <span>4</span>
48 身份认证
49 </li>
50 <div class="line"></div>
51 <li>
52 <span>5</span>
53 资料审核
54 </li>
55 <div class="line"></div>
56 <li>
57 <span>6</span>
58 线上缴费
59 </li>
60 <div class="line"></div>
61 <li>
62 <span>7</span>
63 生成电子证书
64 </li>
65 </ul>
66 <div class="input_search"> 34 <div class="input_search">
67 <div class="form_title"> 35 <div class="form_title">
68 <h2>信息校验</h2> 36 <h2>信息校验</h2>
...@@ -84,16 +52,16 @@ ...@@ -84,16 +52,16 @@
84 </div> 52 </div>
85 </div> 53 </div>
86 </div> 54 </div>
87 55
88 <div class="layui-form-item"> 56 <div class="layui-form-item">
89 <div class="layui-inline"> 57 <div class="layui-inline">
90 <label class="layui-form-label">联系方式</label> 58 <label class="layui-form-label">联系方式</label>
91 <div class="layui-input-inline"> 59 <div class="layui-input-inline">
92 <input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone" placeholder="请输联系方式" 60 <input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone"
93 class="layui-input"> 61 placeholder="请输联系方式" class="layui-input">
94 </div> 62 </div>
95 <button type="button" 63 <button type="button"
96 class="layui-btn layui-btn-radius layui-btn-primary feachBtn layui-btn-sm">获取验证码</button> 64 class="layui-btn layui-btn-radius layui-btn-primary feachBtn layui-btn-sm">获取验证码</button>
97 </div> 65 </div>
98 <div class="layui-inline"> 66 <div class="layui-inline">
99 <label class="layui-form-label">验证码</label> 67 <label class="layui-form-label">验证码</label>
...@@ -103,119 +71,123 @@ ...@@ -103,119 +71,123 @@
103 </div> 71 </div>
104 </div> 72 </div>
105 </div> 73 </div>
106 74
107 <div class="layui-form-item"> 75 <div class="layui-form-item">
108 <div class="layui-input-block"> 76 <div class="layui-input-block">
109 <button type="reset" class="layui-btn layui-btn-primary">重 置</button> 77 <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
110 <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" 78 <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">查
111 lay-filter="demo1">查 询</button> 79 询</button>
112 </div> 80 </div>
113 </div> 81 </div>
114 </form> 82 </form>
115 </div> 83 </div>
116 <div class="seach_result"> 84 <div class="seach_result">
117 <!-- <div class="no_data">暂无数据</div> --> 85 <!-- <div class="no_data">暂无数据</div> -->
118 <ul class="data_list"> 86 <ul class="appointment_list">
119 <li> 87 <li>
120 <h3>房屋状态：正常</h3> 88 <div class="item_content">
121 <p> 89 <div class="item_title success">
122 <span>权利人:</span> 90 <h3>正常</h3>
123 郭小美 91 <p>
124 </p> 92 查看
125 <p> 93 <i class="layui-icon layui-icon-right"></i>
126 <span>身份证号:</span> 94 </p>
127 61052877686868 95 </div>
128 </p> 96 <ul class="item_info">
129 <p> 97 <li>
130 <span>联系电话:</span> 98 <span>预约人：</span>
131 15877343636 99 <p>任超</p>
132 </p> 100 </li>
133 <p> 101 <li>
134 <span>产权证号:</span> 102 <span>办事大厅：</span>
135 370205004005GB10030 103 <p>米香园办事大厅</p>
136 </p> 104 </li>
137 <p> 105 <li>
138 <span>坐落:</span> 106 <span>办理业务类型：</span>
139 XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室 107 <p>二手房交易</p>
140 </p> 108 <a href="">办事指南</a>
141 <p> 109 </li>
142 <span> 110 <li>
143 面积（㎡）: 111 <span>预约日期：</span>
144 </span> 112 <p>2020-12-56 上午 16：13</p>
145 202 113 </li>
146 </p> 114 <li>
147 <p> 115 <span>预约流水号：</span>
148 <span>合同备案号:</span> 116 <p>897987987987</p>
149 YS000000000001 117 </li>
150 </p> 118 </ul>
119 <a class="cancel_reservation">取消预约</a>
120 </div>
151 </li> 121 </li>
152
153 <li> 122 <li>
154 <h3>房屋状态：正常</h3> 123 <div class="item_content">
155 <p> 124 <div class="item_title overdue">
156 <span>权利人:</span> 125 <h3>正常</h3>
157 郭小美 126 <p>
158 </p> 127 查看
159 <p> 128 <i class="layui-icon layui-icon-right"></i>
160 <span>身份证号:</span> 129 </p>
161 61052877686868 130 </div>
162 </p> 131 <ul class="item_info">
163 <p> 132 <li>
164 <span>联系电话:</span> 133 <span>预约人：</span>
165 15877343636 134 <p>任超</p>
166 </p> 135 </li>
167 <p> 136 <li>
168 <span>产权证号:</span> 137 <span>办事大厅：</span>
169 370205004005GB10030 138 <p>米香园办事大厅</p>
170 </p> 139 </li>
171 <p> 140 <li>
172 <span>坐落:</span> 141 <span>办理业务类型：</span>
173 XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室 142 <p>二手房交易</p>
174 </p> 143 <a href="">办事指南</a>
175 <p> 144 </li>
176 <span> 145 <li>
177 面积（㎡）: 146 <span>预约日期：</span>
178 </span> 147 <p>2020-12-56 上午 16：13</p>
179 202 148 </li>
180 </p> 149 <li>
181 <p> 150 <span>预约流水号：</span>
182 <span>合同备案号:</span> 151 <p>897987987987</p>
183 YS000000000001 152 </li>
184 </p> 153 </ul>
154 <a class="cancel_reservation">取消预约</a>
155 </div>
185 </li> 156 </li>
186
187 <li> 157 <li>
188 <h3>房屋状态：正常</h3> 158 <div class="item_content">
189 <p> 159 <div class="item_title cancel">
190 <span>权利人:</span> 160 <h3>正常</h3>
191 郭小美 161 <p>
192 </p> 162 查看
193 <p> 163 <i class="layui-icon layui-icon-right"></i>
194 <span>身份证号:</span> 164 </p>
195 61052877686868 165 </div>
196 </p> 166 <ul class="item_info">
197 <p> 167 <li>
198 <span>联系电话:</span> 168 <span>预约人：</span>
199 15877343636 169 <p>任超</p>
200 </p> 170 </li>
201 <p> 171 <li>
202 <span>产权证号:</span> 172 <span>办事大厅：</span>
203 370205004005GB10030 173 <p>米香园办事大厅</p>
204 </p> 174 </li>
205 <p> 175 <li>
206 <span>坐落:</span> 176 <span>办理业务类型：</span>
207 XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室 177 <p>二手房交易</p>
208 </p> 178 <a href="">办事指南</a>
209 <p> 179 </li>
210 <span> 180 <li>
211 面积（㎡）: 181 <span>预约日期：</span>
212 </span> 182 <p>2020-12-56 上午 16：13</p>
213 202 183 </li>
214 </p> 184 <li>
215 <p> 185 <span>预约流水号：</span>
216 <span>合同备案号:</span> 186 <p>897987987987</p>
217 YS000000000001 187 </li>
218 </p> 188 </ul>
189 <a class="cancel_reservation">取消预约</a>
190 </div>
219 </li> 191 </li>
220 </ul> 192 </ul>
221 <div class="next_button"> 193 <div class="next_button">
...@@ -229,5 +201,40 @@ ...@@ -229,5 +201,40 @@
229 <script type="text/javascript" src="../staticJs/common.js"></script> 201 <script type="text/javascript" src="../staticJs/common.js"></script>
230 <script type="text/javascript" src="../staticJs/down.js"></script> 202 <script type="text/javascript" src="../staticJs/down.js"></script>
231 <script type="text/javascript" src="../staticJs/bljy.js"></script> 203 <script type="text/javascript" src="../staticJs/bljy.js"></script>
204 <script id="progress" type="text/html">
205 {{# layui.each(d.progressList, function(index, item){ }}
206 {{# if(item.stepState==2){ }}
207 <li class="item_proress">
208 <p class="active"></p>
209 <h5>{{item.stepName}}</h5>
210 </li>
211 <li class="layui-progress">
212 <div class="layui-progress-bar" lay-percent="100%"></div>
213 </li>
214 {{# } }}
215 {{# if(item.stepState==1){ }}
216 <li class="item_proress">
217 <p class="active"></p>
218 <h5>{{item.stepName}}</h5>
219 </li>
220 {{# if(index!=(d.progressList.length-1)){ }}
221 <li class="layui-progress">
222 <div class="layui-progress-bar" lay-percent="50%"></div>
223 </li>
224 {{# } }}
225 {{# } }}
226 {{# if(item.stepState==0){ }}
227 <li class="item_proress">
228 <p></p>
229 <h5>{{item.stepName}}</h5>
230 </li>
231 {{# if(index!=(d.progressList.length-1)){ }}
232 <li class="layui-progress">
233 <div class="layui-progress-bar" lay-percent="0%"></div>
234 </li>
235 {{# } }}
236 {{# } }}
237 {{# }); }}
238 </script>
232 239
233 </html> 240 </html>
...\ No newline at end of file ...\ No newline at end of file
......