Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
87a75001 by 任超
Options

style:便民服务

1 parent ff206ebb
Inline Side-by-side
Showing 17 changed files with 202 additions and 140 deletions
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
122 <span>2020-06-19</span> 122 <span>2020-06-19</span>
123 </li> 123 </li>
124 </ul> 124 </ul>
125 <!-- 新闻动态内容 --> 125 <!-- 新闻动态内容 -->
126 <ul class="news-information-list item-list"> 126 <ul class="news-information-list item-list">
127 <li> 127 <li>
128 <svg class="icon svg-icon" aria-hidden="true"> 128 <svg class="icon svg-icon" aria-hidden="true">
...@@ -138,39 +138,60 @@ ...@@ -138,39 +138,60 @@
138 </ul> 138 </ul>
139 </div> 139 </div>
140 </div> 140 </div>
141 <div class="c_two"> 141 <!-- 便民服务 -->
142 <div class="subject"> 142 <div class="c_two convenient-service">
143 <h2><a href="" title="便民服务">便民服务</a></h2> 143 <h2 class="convenient-service-title">
144 <ul class="convenient_service"> 144 <img src="/staticImages/bianminfuwu.png" />
145 <li> 145 <a href="/index.html" title="便民服务">便民服务</a>
146 <a href="./staticViews/convenienceService/businessInquiry.html" title="业务查询"> 146 </h2>
147 <img src="./staticImages/ywcx.png" alt="业务查询" /> 147 <ul class="convenient-service-list">
148 <h6>业务查询</h6> 148 <li>
149 <p>查询个人/企业相关不动产登记业务，包含目前正在办理的业务最新状态和已办结的业务详情信息等</p> 149 <img url="./staticImages/seywcx.png" src="./staticImages/ywcx.png" pre="./staticImages/ywcx.png" alt="业务查询" />
150 </a> 150 <h6>业务查询</h6>
151 </li> 151 <p>办理进度、业务详情，在线查询</p>
152 <li> 152 <a href="./staticViews/convenienceService/businessInquiry.html" title="业务查询">立即查看</a>
153 <a id="appointment_inquiry" title="预约查询"> 153 </li>
154 <img src="./staticImages/yycx.png" alt="预约查询" /> 154 <li>
155 <h6>预约查询</h6> 155 <img url="./staticImages/seyycx.png" src="./staticImages/yycx.png" pre="./staticImages/yycx.png" alt="预约查询" />
156 <p>查询个人/企业线上约号业务，包含预约的业务名称、预约大厅详情、预约时间、预约流水号等信息</p> 156 <h6>预约查询</h6>
157 </a> 157 <p>预约办理、号段预约，实时查询</p>
158 </li> 158 <a id="appointment_inquiry" title="预约查询">立即查看</a>
159 <li class=""> 159 </li>
160 <a href="./staticViews/convenienceService/certificateVerification.html" title="证书查询"> 160 <li>
161 <img src="./staticImages/zscx.png" alt="证书查询" /> 161 <img url="./staticImages/sezscx.png" src="./staticImages/zscx.png" pre="./staticImages/zscx.png" alt="证书查询" />
162 <h6>证书查询</h6> 162 <h6>证书查询</h6>
163 <p>根据所属区域及权利人相关信息查询相关证书信息，并提供电子证书在线预览、下载等功能</p> 163 <p>证书详情、证书核验，预览下载</p>
164 </a> 164 <a href="./staticViews/convenienceService/certificateVerification.html" title="证书查询">立即查看</a>
165 </li> 165 </li>
166 <li> 166 <li>
167 <a href="./staticViews/convenienceService/recordInquiry.html" title="合同备案查询"> 167 <img url="./staticImages/sehtbacx.png" src="./staticImages/htbacx.png" pre="./staticImages/htbacx.png" alt="合同备案查询" />
168 <img src="./staticImages/htbacx.png" alt="合同备案查询" /> 168 <h6>合同备案查询</h6>
169 <h6>合同备案查询</h6> 169 <p>合同备案，在线预览、电子版下载</p>
170 <p>根据所属区域及权利人相关信息查询合同备案信息，并提供合同信息的详细信息展示</p> 170 <a href="./staticViews/convenienceService/recordInquiry.html" title="合同备案查询">立即查看</a>
171 </a> 171 </li>
172 </li> 172 </ul>
173 </ul> 173 </div>
174 <!-- 好差评 -->
175 <div class="good-bad-comments-box">
176 <div class="good-bad-comments">
177 <div class="good-bad-nums">
178 <div class="good-bad-nums-title">
179 <img src="/staticImages/zan.png" />
180 好差评
181 </div>
182 <ul>
183 <li>评价数<span>599.9</span>万次</li>
184 <li>差评总数<span>30</span>次</li>
185 <li>差评整改率<span>98</span>%</li>
186 </ul>
187 </div>
188 <div class="login-list">
189 <p>不动产在线登记服务平台</p>
190 <a href="">个人登录</a>
191 <a href="">法人登录</a>
192 <a href="">个人注册</a>
193 <a href="">法人登录</a>
194 </div>
174 </div> 195 </div>
175 </div> 196 </div>
176 <!-- 法律法规 --> 197 <!-- 法律法规 -->
...@@ -210,42 +231,6 @@ ...@@ -210,42 +231,6 @@
210 </div> 231 </div>
211 </div> 232 </div>
212 </div> 233 </div>
213 <!-- 好差评 -->
214 <div class="Good_bad_reviews">
215 <h3>好差评</h3>
216 <ul>
217 <li>
218 <p>
219 <b>787</b>
220 <span>万次</span>
221 </p>
222 <p>评价数</p>
223 </li>
224
225 <li>
226 <p>
227 <b>12</b>
228 <span>次</span>
229 </p>
230 <p>差评总数</p>
231 </li>
232
233 <li>
234 <p>
235 <b>100</b>
236 <span>%</span>
237 </p>
238 <p>差评修改率</p>
239 </li>
240 <li>
241 <p>
242 <b>92.6</b>
243 <span>%</span>
244 </p>
245 <p>差评数</p>
246 </li>
247 </ul>
248 </div>
249 <!-- 常见问题，政民互动 --> 234 <!-- 常见问题，政民互动 -->
250 <div class="common_question"> 235 <div class="common_question">
251 <div class="subject_con"> 236 <div class="subject_con">
......
...@@ -45,6 +45,7 @@ div.top-logo { ...@@ -45,6 +45,7 @@ div.top-logo {
45 background: #F7F9FB; 45 background: #F7F9FB;
46 border: 1px solid #E2EAF1; 46 border: 1px solid #E2EAF1;
47 white-space: nowrap; 47 white-space: nowrap;
48 box-sizing: border-box;
48 } 49 }
49 50
50 ::-webkit-input-placeholder { 51 ::-webkit-input-placeholder {
......
...@@ -94,38 +94,6 @@ ...@@ -94,38 +94,6 @@
94 .laws_regulations .laws_list li:not(:last-child) { 94 .laws_regulations .laws_list li:not(:last-child) {
95 border-bottom: 1px dashed #DEDEDE; 95 border-bottom: 1px dashed #DEDEDE;
96 } 96 }
97 .convenient_service li a {
98 cursor: pointer;
99 }
100
101 /* ---------------好差评start---------------------------- */
102 .Good_bad_reviews {
103 width: 100%;
104 height: 180px;
105 background: url('../staticImages/bannerbg.png');
106 background-size: cover;
107 text-align: center;
108 color: #ffffff;
109 padding-top: 36px;
110 box-sizing: border-box;
111 }
112 .Good_bad_reviews h3 {
113 margin: 0 auto;
114 font-size: 26px;
115 margin-bottom: 5px;
116 }
117 .Good_bad_reviews ul {
118 width: 1200px;
119 margin: 0 auto;
120 }
121 .Good_bad_reviews li {
122 display: inline-block;
123 width: 24.6%;
124 }
125 .Good_bad_reviews li p b {
126 font-size: 40px;
127 }
128 /* ------------------end----------- */
129 /* -------------常见问题start--------------------- */ 97 /* -------------常见问题start--------------------- */
130 .common_question { 98 .common_question {
131 padding: 40px; 99 padding: 40px;
...@@ -310,52 +278,28 @@ ...@@ -310,52 +278,28 @@
310 text-align: left; 278 text-align: left;
311 } 279 }
312 280
313
314 div.c_two {
315 background: #F6F9FB;
316 }
317
318
319 div.c_two div:first-child {
320 width: 1220px;
321 height: 425px;
322 padding-bottom: 20px;
323 }
324
325 div.c_two h2 {
326 float: left;
327 margin-top: 40px;
328 background-color: #fafafa;
329 width: 100%;
330 font-size: 26px;
331 font-weight: 600;
332 letter-spacing: 2px;
333 background-color: #fcf8f8;
334 }
335
336 div.c_two ul {
337 float: left;
338 margin-top: 28px;
339 list-style: none;
340 }
341
342 div.c_two ul li { 281 div.c_two ul li {
343 float: left; 282 float: left;
344 width: 25%; 283 width: 285px;
284 height: 280px;
345 overflow: hidden; 285 overflow: hidden;
346 } 286 }
347 div.c_two ul li a { 287 div.c_two ul li:not(:last-child) {
288 margin-right: 20px;
289 }
290 div.c_two ul li{
348 box-sizing: border-box; 291 box-sizing: border-box;
349 display: block; 292 display: block;
350 background: #ffffff;
351 padding: 50px 36px; 293 padding: 50px 36px;
352 box-sizing: border-box; 294 box-sizing: border-box;
353 border: 1px solid #E7ECEF; 295 background: #FFFFFF;
354 margin: 0 10px; 296 box-shadow: 0px 3px 6px 0px rgba(10, 14, 40, 0.06);
297 border-radius: 2px;
298 border: 1px solid #E9E9E9;
355 } 299 }
356 div.c_two ul li img { 300 div.c_two ul li img {
357 width: 70px; 301 width: 42px;
358 height: 70px; 302 height: 42px;
359 } 303 }
360 304
361 div.c_two ul li:first-child { 305 div.c_two ul li:first-child {
...@@ -363,7 +307,7 @@ div.c_two ul li:first-child { ...@@ -363,7 +307,7 @@ div.c_two ul li:first-child {
363 } 307 }
364 308
365 div.c_two ul li h6 { 309 div.c_two ul li h6 {
366 margin-top: 20px; 310 margin-top: 23px;
367 font-size: 18px; 311 font-size: 18px;
368 color: #4A4A4A; 312 color: #4A4A4A;
369 letter-spacing: 2px; 313 letter-spacing: 2px;
...@@ -371,7 +315,7 @@ div.c_two ul li h6 { ...@@ -371,7 +315,7 @@ div.c_two ul li h6 {
371 315
372 div.c_two ul li p { 316 div.c_two ul li p {
373 margin-top: 20px; 317 margin-top: 20px;
374 font-size: 14px; 318 font-size: 12px;
375 color: #9B9B9B; 319 color: #9B9B9B;
376 line-height: 21px; 320 line-height: 21px;
377 cursor: pointer; 321 cursor: pointer;
...@@ -485,6 +429,7 @@ div.c_five ul li a img { ...@@ -485,6 +429,7 @@ div.c_five ul li a img {
485 .news-module-box { 429 .news-module-box {
486 width: 1200px; 430 width: 1200px;
487 margin: 0 auto; 431 margin: 0 auto;
432 overflow: hidden;
488 } 433 }
489 .news-module-box .news-img{ 434 .news-module-box .news-img{
490 float: left; 435 float: left;
...@@ -592,4 +537,128 @@ div.c_five ul li a img { ...@@ -592,4 +537,128 @@ div.c_five ul li a img {
592 font-size: 16px; 537 font-size: 16px;
593 color: #9B9B9B; 538 color: #9B9B9B;
594 float: right; 539 float: right;
540 }
541 /* 便民服务 */
542 .convenient-service .convenient-service-title {
543 margin: 40px 0;
544 }
545 .convenient-service .convenient-service-title img{
546 height: 32px;
547 position: relative;
548 top: 4px;
549 }
550 .convenient-service .convenient-service-title a{
551 color: #3C4A66;
552 font-size: 32px;
553 font-weight: 600;
554 }
555 .convenient-service-list {
556 width: 1200px;
557 margin: 0 auto;
558 overflow: hidden;
559 }
560 .convenient-service-list li:hover {
561 background-color: #5495FE;
562 }
563 .convenient-service-list li:hover h6 {
564 color: #FFFFFF;
565 }
566 .convenient-service-list li:hover p {
567 color: #FFFFFF!important;
568 }
569 .convenient-service-list li:hover a {
570 color: #FFFFFF;
571 border-color: #FFFFFF;
572 }
573 .convenient-service-list li a {
574 display: block;
575 width: 110px;
576 height: 36px;
577 border-radius: 2px;
578 border: 1px solid #D7D6D6;
579 margin: 0 auto;
580 text-align: center;
581 margin-top: 30px;
582 font-size: 14px;
583 color: #7A7A7A;
584 line-height: 36px;
585 }
586 /* 好差评 */
587 .good-bad-comments-box {
588 width: 100%;
589 background: url('/staticImages/good-badbg.png') no-repeat;
590 background-size: cover;
591 height: 200px;
592 margin-top: 40px;
593 padding: 36px 0;
594 box-sizing: border-box;
595 }
596 .good-bad-comments {
597 width: 1200px;
598 margin: 0 auto;
599 }
600 .good-bad-nums {
601 float: left;
602 margin-top: 15px;
603 }
604 .good-bad-nums .good-bad-nums-title {
605 color: #3C4A66;
606 font-size: 32px;
607 font-weight: 700;
608 }
609 .good-bad-nums .good-bad-nums-title img{
610 width: 31px;
611 height: 34px;
612 }
613 .good-bad-nums ul {
614 margin-top: 20px;
615 }
616 .good-bad-nums ul li {
617 display: inline-block;
618 color: #7A7A7A;
619 font-size: 16px;
620 margin-right: 30px;
621 }
622 .good-bad-nums ul li span {
623 font-size: 28px;
624 color: #608DE7;
625 margin: 0 6px;
626 }
627
628 .login-list {
629 float: right;
630 width: 464px;
631 height: 128px;
632 background: #FFFFFF;
633 border: 1px solid #E9E9E9;
634 box-sizing: border-box;
635 padding: 24px 54px;
636 text-align: center;
637 }
638 .login-list p {
639 color: #3C4A66;
640 letter-spacing: 2px;
641 font-size: 24px;
642 text-align: center;
643 margin-bottom: 20px;
644 }
645 .login-list a {
646 display: inline-block;
647 width: 80px;
648 height: 34px;
649 text-align: center;
650 font-size: 14px;
651 line-height: 32px;
652 box-sizing: border-box;
653 }
654 .login-list a:not(:last-child) {
655 margin-right: 5px;
656 }
657 .login-list a:nth-of-type(-n+2) {
658 color: #608DE7;
659 border: 1px solid #608DE7;
660 }
661 .login-list a:nth-of-type(n+3) {
662 border: 1px solid #E95515;
663 color: #E95515;
595 } 664 }
...\ No newline at end of file ...\ No newline at end of file
......

5.63 KB | W: | H:

1.49 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

4.67 KB | W: | H:

1.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

5.87 KB | W: | H:

1.41 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.78 KB | W: | H:

1.62 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -63,6 +63,13 @@ function initData() { ...@@ -63,6 +63,13 @@ function initData() {
63 $('.news-information-list').show(); 63 $('.news-information-list').show();
64 } 64 }
65 }) 65 })
66 // 便民服务
67 $(".convenient-service-list li").mouseover(function() {
68 $(this).find('img').attr('src', $(this).find('img').attr('url'))
69 })
70 $(".convenient-service-list li").mouseout(function() {
71 $(this).find('img').attr('src', $(this).find('img').attr('pre'))
72 })
66 } 73 }
67 // 获取汉字长度 74 // 获取汉字长度
68 function strLength(str) { 75 function strLength(str) {
......