Skip to content

任超 / js.portalStaticPage

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

style:填报信息

1 parent a4186664
Expand all
Inline Side-by-side
Showing 4 changed files with 339 additions and 73 deletions
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
2 width: 1200px; 2 width: 1200px;
3 margin: 0 auto; 3 margin: 0 auto;
4 min-height:calc(100vh - 227px); 4 min-height:calc(100vh - 227px);
5 padding: 20px 0;
6 } 5 }
7 .title { 6 .title {
8 height: 16px; 7 height: 16px;
...@@ -58,10 +57,40 @@ ...@@ -58,10 +57,40 @@
58 .img_update { 57 .img_update {
59 border: 1px solid #eeeeee; 58 border: 1px solid #eeeeee;
60 overflow: hidden; 59 overflow: hidden;
60 position: relative;
61 } 61 }
62 62
63 .fileBox{ margin:10px;width: 330px;float: left; } 63 .fileBox{
64 #fileSpan{display:inline-block;width:300px;height:150px;border:2px dashed #ccc;text-align:center;line-height:150px;position: relative;} 64 margin:10px;float: left;
65 }
66 .file_name i {
67 display: block;
68 font-size: 32px;
69 height: 24px;
70 position: relative;
71 line-height: 24px;
72 top: -10px;
73 padding-top: 60px;
74 margin-bottom: 10px;
75 }
76 .file_name p {
77 line-height: 16px;
78 }
79 .certificate {
80 height: 24px;
81 color: red;
82 margin-top: 5px;
83 font-size: 14px;
84 line-height: 24px;
85 }
86 #fileSpan{
87 display: inline-block;
88 width: 285px;
89 height: 200px;
90 border: 2px dashed #ccc;
91 text-align: center;
92 position: relative;
93 }
65 #fileInput { 94 #fileInput {
66 position: absolute; 95 position: absolute;
67 width: 100%; 96 width: 100%;
...@@ -69,17 +98,80 @@ ...@@ -69,17 +98,80 @@
69 left: 0; 98 left: 0;
70 top: 0; 99 top: 0;
71 opacity: 0; 100 opacity: 0;
101 cursor: pointer;
102 z-index: 10;
103 }
104 .fileList_parent{
105 position: absolute;
106 left: 12px;
107 top: 12px;
108 width: 285px;
109 height: 200px;
110 text-align: center;
111 box-sizing: border-box;
112 padding: 30px 20px;
113 display: none;
114 background-color: #eee;
115 z-index: 20;
116 }
117 .fileName {
118 width: 80px;
119 line-height: 30px;
120 overflow: hidden;
121 text-overflow: ellipsis;
122 white-space: nowrap;
123 }
124 .file_list {
125 text-align: center;
126 margin: 0 auto;
127 }
128 .fileList_parent img {
129 width: 50px;
130 height: 60px;
72 } 131 }
73 .fileList_parent{margin:20px;display:none;}
74 .fileList_parent { 132 .fileList_parent {
75 float: left; 133 float: left;
76 } 134 }
135 .file_name {
136 height: 200px;
137 text-align: center;
138 line-height: 200px;
139 position: relative;
140 }
77 .operation { 141 .operation {
78 color: #0091FF; 142 color: #0091FF;
79 cursor: pointer; 143 cursor: pointer;
80 } 144 }
145 .fileListName {
146 text-align: center;
147 padding-top: 10px;
148 }
149 .fileListName p {
150 display: inline-block;
151 height: 17px;
152 }
153 .fileListName a {
154 display: inline-block;
155 line-height: 14px;
156 }
157 .fileListName a i {
158 line-height: 14px;
159 height: 14px;
160 padding: 0;
161 position: relative;
162 top: -2px;
163 font-size: 14px;
164 font-weight: 600;
165 }
81 .fileList tr { 166 .fileList tr {
82 line-height: 28px; 167 line-height: 28px;
168 width: 70px;
169 }
170 .fileList tr td {
171 width: 70px;
172 }
173 .operation a:hover {
174 color: #0091FF!important;
83 } 175 }
84 .next_button { 176 .next_button {
85 text-align: center; 177 text-align: center;
...@@ -87,4 +179,110 @@ ...@@ -87,4 +179,110 @@
87 } 179 }
88 .next_button a { 180 .next_button a {
89 color: #ffffff; 181 color: #ffffff;
182 }
183 .name_title {
184 padding: 10px;
185 margin:15px 0;
186 }
187 .name_title h2 {
188 display: inline-block;
189 font-weight: 600;
190 margin-right: 10px;
191 border-left: 3px solid #0091FF;
192 height: 16px;
193 line-height: 16px;
194 padding-left: 5px;
195 }
196 .name_title p {
197 display: inline-block;
198 color: #0091FF;
199 }
200 /* 房屋信息 */
201 .acceptance_information {
202 margin: 20px 0;
203 }
204 .acceptance_information h3 , .person_info h3, .data_upload h3{
205 height: 16px;
206 padding-left: 5px;
207 border-left: 3px solid #0091FF;
208 line-height: 18px;
209 font-size: 16px;
210 font-weight: 600;
211 margin-bottom: 15px;
212 color: #585656;
213 }
214 .acceptance_information ul {
215 font-size: 0;
216 }
217 .acceptance_information ul li {
218 display: inline-block;
219 width: 50%;
220 font-size: 14px;
221 line-height: 36px;
222 }
223 .acceptance_information ul li span {
224 color: #9B9B9B;
225 width: 100px;
226 text-align: right;
227 display: inline-block;
228 }
229 .acceptance_information ul li p {
230 display: inline-block;
231 }
232 /* 买卖双方信息 */
233 .layui-form-item .layui-inline {
234 width: 23%;
235 }
236 .idCard {
237 width: 150px;
238 }
239 .layui-form-label {
240 padding: 9px 0;
241 width: 92px;
242 }
243 .layui-icon-reduce-circle {
244 font-size: 20px!important;
245 }
246 .add_form {
247 height: 80px;
248 border: 2px dotted #d2d2d2;
249 cursor: pointer;
250 text-align: center;
251 padding-top: 18px;
252 box-sizing: border-box;
253 border-radius: 8px;
254 display: none;
255 }
256 .add_form:hover {
257 border-color: #0091FF;
258 }
259 .add_form i {
260 font-size: 20px!important;
261 }
262 .person_info h3 {
263 float: left;
264 margin-right: 10px;
265 }
266 .person_info .title {
267 line-height: 18px;
268 margin-bottom: 20px;
269 padding-left: 0!important;
270 }
271 .person_info .title input{
272 display: inline-block;
273 margin: 0 10px;
274 cursor: pointer;
275 width: 21px;
276 height: 21px;
277 position: relative;
278 top: -2px;
279 }
280 .person_info .title p {
281 display: inline-block;
282 position: relative;
283 top: -6.5px;
284 }
285 /* -----------------资料上传---------------------- */
286 .data_upload {
287 margin-top: 20px;
90 } 288 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -18,86 +18,119 @@ ...@@ -18,86 +18,119 @@
18 <span class="layui-breadcrumb"> 18 <span class="layui-breadcrumb">
19 <a href="../../index.html">首页</a> 19 <a href="../../index.html">首页</a>
20 <a href="./wssq.html">网上申请</a> 20 <a href="./wssq.html">网上申请</a>
21 <a><cite>在线申请</cite></a> 21 <a><cite>填报信息</cite></a>
22 </span> 22 </span>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="content_box"> 25 <div class="content_box">
26 <div class="name_title layui-bg-gray"> 26 <div class="name_title layui-bg-gray">
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="selected"> 31 <ul class="app_progress" id="app_progress">
32 <span>1</span> 32 </ul>
33 信息效验
34 </li>
35 <div class="line"></div>
36 <li class="active">
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="title layui-bg-green">
67 <h2>买方信息/共有情况</h2>
68 </div> 33 </div>
69 <div class="tabs_title"> 34 <!-- 房屋信息 -->
70 <input type="radio" name="1" value="单独所有" checked> 35 <div class="acceptance_information">
71 <p>单独所有</p> 36 <h3>房屋信息</h3>
72 <input type="radio" name="1" value="共同共有"> 37 <ul>
73 <p>共同共有</p> 38 <li>
74 <input type="radio" name="1" value="按份共有"> 39 <span>不动产单元号：</span>
75 <p>按份共有</p> 40 <p>450101 450002 GB 00740W00000000</p>
76 <i class="layui-icon layui-icon-add-circle tableAdd"></i> 41 </li>
77 </div> 42 <li>
78 <table id="buyInfo" lay-filter="buyInfo"></table> 43 <span>产权证号：</span>
79 44 <p>70205004005GB10030</p>
80 <div class="title layui-bg-green"> 45 </li>
81 <h2>卖方信息</h2> 46 <li>
82 <i class="layui-icon layui-icon-add-circle tableAdd1"></i> 47 <span>坐落：</span>
48 <p>
49 XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
50 </p>
51 </li>
52 <li>
53 <span>面积：</span>
54 <p>526</p>
55 </li>
56 <li>
57 <span>合同备案号：</span>
58 <p>YS000000000001</p>
59 </li>
60 </ul>
83 </div> 61 </div>
84 <table id="sellInfo" lay-filter="sellInfo"></table> 62 <!-----------------买方信息------------------ -->
85 63 <div class="person_info">
86 <div class="title layui-bg-green"> 64 <div class="title">
87 <h2>申报材料</h2> 65 <h3>买方信息</h3>
66 <input type="radio" class="radioInfo" name="1" value="1" checked>
67 <p>单独所有</p>
68 <input type="radio" class="radioInfo" name="1" value="2">
69 <p>按份所有</p>
70 <input type="radio" class="radioInfo" name="1" value="3">
71 <p>共同所有</p>
72 </div>
73 <form class="layui-form">
74 <div class="layui-form-item">
75 <div class="layui-inline">
76 <label class="layui-form-label">姓名</label>
77 <div class="layui-input-block">
78 <input type="text" name="name" required lay-verify="name" placeholder="请输权利人"
79 class="layui-input">
80 </div>
81 </div>
82 <div class="layui-inline idCard">
83 <label class="layui-form-label">身份证类型</label>
84 <div class="layui-input-block">
85 <select lay-filter="typeId">
86 <option value="1">身份证</option>
87 <option value="2">军官证</option>
88 </select>
89 </div>
90 </div>
91 <div class="layui-inline">
92 <label class="layui-form-label">证件号码</label>
93 <div class="layui-input-block">
94 <input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码"
95 class="layui-input">
96 </div>
97 </div>
98 <div class="layui-inline">
99 <label class="layui-form-label">联系方式</label>
100 <div class="layui-input-block">
101 <input type="tel" name="phone" maxlength="11" required lay-verify="phone"
102 placeholder="请输联系方式" class="layui-input">
103 </div>
104 </div><i class="layui-icon layui-icon-reduce-circle"></i>
105 </div>
106 </form>
107 <div class="add_form layui-bg-gray">
108 <i class="layui-icon layui-icon-addition"></i>
109 <p>添加个人信息</p>
110 </div>
88 </div> 111 </div>
89 <div class="img_update"> 112 <!-----------------资料上传------------------ -->
90 <div class="fileBox"> 113 <div class="data_upload">
91 <div id="fileSpan" class="vm"> 114 <h3>资料上传</h3>
92 <input type="file" multiple id="fileInput" /> 115 <div class="img_update">
93 <p class="file_name"> 116 <div class="fileBox">
94 点击或拖拽文件上传 117 <div id="fileSpan" class="vm">
95 </p> 118 <input type="file" multiple id="fileInput" />
119 <div class="file_name">
120 <i class="layui-icon layui-icon-addition"></i>
121 <p>点击或拖拽文件上传</p>
122 <div class="certificate">登记申请书（2份）</div>
123 <div class="fileListName"></div>
124 </div>
125 </div>
126 </div>
127 <div class="fileList_parent">
128 <img src="../staticImages/dui.png">
129 <table width="150px" class="file_list">
130 <tbody class="fileList">
131 </table>
96 </div> 132 </div>
97 </div> 133 </div>
98 <table width="36%" border="1" class="fileList_parent">
99 <tbody class="fileList">
100 </table>
101 </div> 134 </div>
102 135
103 <div class="next_button"> 136 <div class="next_button">
...@@ -115,5 +148,40 @@ ...@@ -115,5 +148,40 @@
115 <script type="text/html" id="barDemo"> 148 <script type="text/html" id="barDemo">
116 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i> 149 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
117 </script> 150 </script>
151 <script id="progress" type="text/html">
152 {{# layui.each(d.progressList, function(index, item){ }}
153 {{# if(item.stepState==2){ }}
154 <li class="item_proress">
155 <p class="active"></p>
156 <h5>{{item.stepName}}</h5>
157 </li>
158 <li class="layui-progress">
159 <div class="layui-progress-bar" lay-percent="100%"></div>
160 </li>
161 {{# } }}
162 {{# if(item.stepState==1){ }}
163 <li class="item_proress">
164 <p class="active"></p>
165 <h5>{{item.stepName}}</h5>
166 </li>
167 {{# if(index!=(d.progressList.length-1)){ }}
168 <li class="layui-progress">
169 <div class="layui-progress-bar" lay-percent="50%"></div>
170 </li>
171 {{# } }}
172 {{# } }}
173 {{# if(item.stepState==0){ }}
174 <li class="item_proress">
175 <p></p>
176 <h5>{{item.stepName}}</h5>
177 </li>
178 {{# if(index!=(d.progressList.length-1)){ }}
179 <li class="layui-progress">
180 <div class="layui-progress-bar" lay-percent="0%"></div>
181 </li>
182 {{# } }}
183 {{# } }}
184 {{# }); }}
185 </script>
118 186
119 </html> 187 </html>
...\ No newline at end of file ...\ No newline at end of file
......