Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
3308ec05 by 任超
Options

style:样式

1 parent 0bece580
Inline Side-by-side
Showing 5 changed files with 282 additions and 78 deletions
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 margin: 0 auto; 3 margin: 0 auto;
4 min-height:calc(100vh - 207px); 4 min-height:calc(100vh - 207px);
5 color: #4a4a4a; 5 color: #4a4a4a;
6 padding-bottom: 100px;
6 } 7 }
7 .name_title { 8 .name_title {
8 padding: 10px; 9 padding: 10px;
...@@ -21,3 +22,46 @@ ...@@ -21,3 +22,46 @@
21 display: inline-block; 22 display: inline-block;
22 color: #0091FF; 23 color: #0091FF;
23 } 24 }
25 .certificate_list {
26 padding: 30px 20px;
27 border: 1px solid #eeeeee;
28 border-radius: 4px;
29 margin: 20px 0;
30 }
31 .certificate_list a {
32 color: #0091FF;
33 margin-right: 10px;
34 }
35 .certificate_list li {
36 line-height: 36px;
37 }
38 .certificate_list span {
39 margin-right: 10px;
40 }
41 .acceptance_information {
42 margin-top: 20px;
43 }
44 .acceptance_information h3 {
45 height: 16px;
46 padding-left: 5px;
47 border-left: 3px solid #0091FF;
48 line-height: 18px;
49 font-size: 16px;
50 font-weight: 600;
51 margin-bottom: 15px;
52 }
53 .acceptance_information ul {
54 font-size: 0;
55 }
56 .acceptance_information ul li {
57 display: inline-block;
58 width: 50%;
59 font-size: 14px;
60 line-height: 28px;
61 }
62 .acceptance_information ul li span {
63 color: #9B9B9B;
64 }
65 .acceptance_information ul li p {
66 display: inline-block;
67 }
...\ No newline at end of file ...\ No newline at end of file
......
1 .app_progress li { 1 .progressBar {
2 padding: 0 30px; 2 padding-top: 30px;
3 line-height: 40px; 3 color: #4A4A4A;
4 background: #eee;
5 display: inline-block;
6 color: #fff;
7 position: relative; 4 position: relative;
8 color: black; 5 margin: 30px 0 50px 0;
9 cursor: pointer; 6 width: 95%;
10 } 7 }
11 .app_progress li:hover { 8 .app_progress {
12 background-color: #1E9FFF; 9 display: flex;
13 color: #fff; 10 width: 106%;
14 } 11 }
15 12 .app_progress li {
16 .app_progress li:hover:after { 13 display: inline-block;
17 border-left-color: #1E9FFF; 14 text-align: center;
15 flex: 1;
16 width: 100%;
18 } 17 }
19 .app_progress li:after{ 18 .app_progress .layui-progress {
20 content: ''; 19 flex: 2.1;
21 display: block; 20 position: relative;
22 border-top: 20px solid #fff; 21 top: 10px;
23 border-bottom: 20px solid #fff; 22 margin-left: -3%;
24 border-left: 12px solid #eee; 23 margin-right: -3%;
25 position: absolute;
26 right:0;
27 top: 0;
28 } 24 }
29 .active { 25 .item_proress {
30 background-color: #1E9FFF!important; 26 position: relative;
31 color: #fff!important; 27 width: 50px!important;
28 z-index: 10;
32 } 29 }
33 .app_progress li.active:after { 30 .app_progress li p{
34 border-left-color: #1E9FFF; 31 width: 29.5px;
32 height: 29.5px;
33 border-radius: 50%;
34 background-color: #E6E6E6;
35 margin: 0 auto;
35 } 36 }
36 .selected { 37 .app_progress li h5 {
37 background-color: #009688!important; 38 white-space: nowrap;
38 color: #fff!important;
39 } 39 }
40 .selected:hover { 40 .active {
41 background-color: #009688!important; 41 background-color: #47E1BF!important;
42 position: relative;
42 } 43 }
43 .app_progress li.selected:after { 44 .active::after {
44 border-left-color: #009688; 45 content: " ";
46 display: block;
47 position: absolute;
48 left: 10px;
49 top: 6px;
50 width: 8px;
51 height: 12px;
52 border-color: #fff;
53 border-style: solid;
54 border-width: 0 2px 2px 0;
55 transform: rotate(45deg);
45 } 56 }
46 .line { 57 .layui-progress-bar {
47 width: 25px; 58 background-color: #47E1BF!important;
48 height: 0;
49 display: inline-block;
50 border-bottom: 2px dotted#dddddd;
51 margin-bottom: 4px;
52 } 59 }
53 60
54 .next_button button { 61 .next_button button {
......
...@@ -4,4 +4,45 @@ $(function () { ...@@ -4,4 +4,45 @@ $(function () {
4 }); 4 });
5 addTabs('#wssq') 5 addTabs('#wssq')
6 // 业务 6 // 业务
7 var data = {
8 'progressList': [
9 {
10 name: "信息效验",
11 isActive: 1
12 },
13 {
14 name: "填报信息",
15 isActive: 1
16 },
17 {
18 name: "完税核税",
19 isActive: 1
20 },
21 {
22 name: "身份认证",
23 isActive: 0
24 },
25 {
26 name: "资料审核",
27 isActive: 0
28 },
29 {
30 name: "线上缴费",
31 isActive: 0
32 },
33 {
34 name: "生成电子证书",
35 isActive: 0
36 }
37 ],
38 }
39
40 // layui.use('laytpl', function () {
41 // laytpl = layui.laytpl;
42 // var getTpl = document.getElementById('progress').innerHTML
43 // , view = document.getElementById('app_progress');
44 // laytpl(getTpl).render(data, function (html) {
45 // view.innerHTML = html;
46 // });
47 // });
7 }) 48 })
......
...@@ -27,47 +27,142 @@ ...@@ -27,47 +27,142 @@
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 <li class="item_proress">
33 信息效验 33 <p class="active"></p>
34 </li> 34 <h5>信息效验</h5>
35 <div class="line"></div> 35 </li>
36 <li class="selected"> 36 <li class="layui-progress">
37 <span>2</span> 37 <div class="layui-progress-bar" lay-percent="100%"></div>
38 填报信息 38 </li>
39 </li> 39 <li class="item_proress">
40 <div class="line"></div> 40 <p class="active"></p>
41 <li class="selected"> 41 <h5>填报信息</h5>
42 <span>3</span> 42 </li>
43 完税核税 43 <li class="layui-progress">
44 </li> 44 <div class="layui-progress-bar" lay-percent="100%"></div>
45 <div class="line"></div> 45 </li>
46 <li class="selected"> 46 <li class="item_proress">
47 <span>4</span> 47 <p class="active"></p>
48 身份认证 48 <h5>信息效验</h5>
49 </li> 49 </li>
50 <div class="line"></div> 50 <li class="layui-progress">
51 <li class="selected"> 51 <div class="layui-progress-bar" lay-percent="100%"></div>
52 <span>5</span> 52 </li>
53 资料审核 53 <li class="item_proress">
54 </li> 54 <p class="active"></p>
55 <div class="line"></div> 55 <h5>信息效验</h5>
56 <li class="selected"> 56 </li>
57 <span>6</span> 57 <li class="layui-progress">
58 线上缴费 58 <div class="layui-progress-bar" lay-percent="100%"></div>
59 </li> 59 </li>
60 <div class="line"></div> 60 <li class="item_proress">
61 <li class="active"> 61 <p class="active"></p>
62 <span>7</span> 62 <h5>信息效验</h5>
63 生成电子证书 63 </li>
64 <li class="layui-progress">
65 <div class="layui-progress-bar" lay-percent="100%"></div>
66 </li>
67 <li class="item_proress">
68 <p class="active"></p>
69 <h5>信息效验</h5>
70 </li>
71 <li class="layui-progress">
72 <div class="layui-progress-bar" lay-percent="100%"></div>
73 </li>
74 <li class="item_proress">
75 <p class="active"></p>
76 <h5>信息效验</h5>
64 </li> 77 </li>
65 </ul> 78 </ul>
66 <!-- --------------------------------- --> 79 </div>
67 <div class="certificate_list"> 80 <div class="certificate_list">
68 <ul> 81 <ul>
69 <li> 82 <li>
70 83 <p>该不动产业务已办结，相应的不动产电子证照已生成，请尽快前往办事大厅领取纸质证书</p>
84 <p>
85 <span>电子证照下载</span>
86 <a href="">陕（2019）XXXXXX</a>
87 </p>
88 </li>
89 <li>
90 <p>该不动产业务已办结，相应的不动产电子证照已生成，纸质证书已邮寄</p>
91 <p>
92 <a href="">物流信息</a>
93 <span>电子证照下载</span>
94 <a href="">陕（2019）XXXXXX</a>
95 </p>
96 </li>
97 </ul>
98 </div>
99 <!-- ------------受理信息-------------- -->
100 <div class="acceptance_information">
101 <h3>受理信息</h3>
102 <ul>
103 <li>
104 <span>权利类型：</span>
105 <p>房屋等建筑物、构筑物所有权</p>
106 </li>
107 <li>
108 <span>业务类型：</span>
109 <p>商品房买卖转移登记（个人）</p>
110 </li>
111 <li>
112 <span>受理编号：</span>
113 <p>201022221345</p>
114 </li>
115 <li>
116 <span>受理日期：</span>
117 <p>77987989</p>
118 </li>
119 </ul>
120 </div>
121 <!-- ------------房屋信息-------------- -->
122 <div class="acceptance_information">
123 <h3>屋信息</h3>
124 <ul>
125 <li>
126 <span>不动产单元号：</span>
127 <p>450101 450002 GB 00740W00000000</p>
128 </li>
129 <li>
130 <span>产权证号：</span>
131 <p>370205004005GB10030</p>
132 </li>
133 <li>
134 <span>坐落：</span>
135 <p>XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室</p>
136 </li>
137 <li>
138 <span>面积（㎡）：</span>
139 <p>568</p>
140 </li>
141 <li>
142 <span>合同备案号：</span>
143 <p>YS000000000001</p>
144 </li>
145 </ul>
146 </div>
147 <!-- ------------买方信息-------------- -->
148 <div class="acceptance_information">
149 <h3>买方信息</h3>
150 <ul>
151 <li>
152 <span>姓名：</span>
153 <p>任超1111</p>
154 </li>
155 <li>
156 <span>证件类型：</span>
157 <p>8998798798798</p>
158 </li>
159 <li>
160 <span>证件号码：</span>
161 <p>89798798</p>
162 </li>
163 <li>
164 <span>联系电话：</span>
165 <p>15877343636</p>
71 </li> 166 </li>
72 </ul> 167 </ul>
73 </div> 168 </div>
...@@ -76,4 +171,21 @@ ...@@ -76,4 +171,21 @@
76 <script type="text/javascript" src="../staticJs/common.js"></script> 171 <script type="text/javascript" src="../staticJs/common.js"></script>
77 <script type="text/javascript" src="../staticJs/down.js"></script> 172 <script type="text/javascript" src="../staticJs/down.js"></script>
78 <script type="text/javascript" src="../staticJs/dzzs.js"></script> 173 <script type="text/javascript" src="../staticJs/dzzs.js"></script>
174 <script id="progress" type="text/html">
175 {{# layui.each(d.progressList, function(index, item){ }}
176 {{# if(item.isActive==1){ }}
177 <li>
178 <p class="active"></p>
179 <h5>{{item.name}}</h5>
180 </li>
181 {{# } }}
182 {{# if(item.isActive==0){ }}
183 <li>
184 <p></p>
185 <h5>{{item.name}}</h5>
186 </li>
187 {{# } }}
188 {{# }); }}
189 </script>
190
79 </html> 191 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
137 </ul> 137 </ul>
138 <div class="next_button"> 138 <div class="next_button">
139 <button type="button" class="layui-btn layui-btn-normal"> 139 <button type="button" class="layui-btn layui-btn-normal">
140 <a href="">下一步</a> 140 <a href="./dzzs.html">下一步</a>
141 </button> 141 </button>
142 </div> 142 </div>
143 </div> 143 </div>
......