Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
2d1e6de7 by 任超
Options

style:样式

1 parent 75cfedd4
Inline Side-by-side
Showing 7 changed files with 222 additions and 65 deletions
1 <!DOCTYPE html 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
4
4 <head> 5 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>网上“一窗办事”登记系统</title> 7 <title>网上“一窗办事”登记系统</title>
7 <link type="text/css" rel="stylesheet" href="./staticCss/global.css" /> 8 <link type="text/css" rel="stylesheet" href="./staticCss/global.css" />
8 <script type="text/javascript" src="./staticJs/head.js"></script> 9 <script type="text/javascript" src="./staticJs/head.js"></script>
9 </head> 10 </head>
11
10 <body> 12 <body>
11 <div> 13 <div>
12 <div class="banner"> 14 <div class="banner">
...@@ -61,12 +63,60 @@ ...@@ -61,12 +63,60 @@
61 <a class="news-img" href="" title="图片新闻地信中心开展外业安全生产监控系统培训工作"><img src="staticImages/news_demo.jpg" 63 <a class="news-img" href="" title="图片新闻地信中心开展外业安全生产监控系统培训工作"><img src="staticImages/news_demo.jpg"
62 alt="图片新闻地信中心开展外业安全生产监控系统培训工作" /></a> 64 alt="图片新闻地信中心开展外业安全生产监控系统培训工作" /></a>
63 <ul id='ulNews'> 65 <ul id='ulNews'>
64 <li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li> 66 <li>
65 <li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li> 67 <a href="" title="创新技术体系 引领事业发展">
66 <li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li> 68 创新技术体系 引领事业发展
67 <li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li> 69 <svg class="icon svg-icon" aria-hidden="true">
68 <li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li> 70 <use xlink:href="#iconzuixin"></use>
69 <li><a href="" title="地信中心开展外业安全生产监控系统培训工作">地信中心开展外业安全生产监控系统… …<span>2020-08-19</span></a></li> 71 </svg>
72 <span>2020-06-19</span>
73 </a>
74 </li>
75 <li>
76 <a href="" title="创新技术体系 引领事业发展">
77 创新技术体系 引领事业发展
78 <svg class="icon svg-icon" aria-hidden="true">
79 <use xlink:href="#iconzuixin"></use>
80 </svg>
81 <span>2020-06-19</span>
82 </a>
83 </li>
84 <li>
85 <a href="" title="创新技术体系 引领事业发展">
86 创新技术体系 引领事业发展
87 <svg class="icon svg-icon" aria-hidden="true">
88 <use xlink:href="#iconzuixin"></use>
89 </svg>
90 <span>2020-06-19</span>
91 </a>
92 </li>
93 <li>
94 <a href="" title="创新技术体系 引领事业发展">
95 创新技术体系 引领事业发展
96 <svg class="icon svg-icon" aria-hidden="true">
97 <use xlink:href="#iconzuixin"></use>
98 </svg>
99 <span>2020-06-19</span>
100 </a>
101 </li>
102 <li>
103 <a href="" title="创新技术体系 引领事业发展">
104 创新技术体系 引领事业发展
105 <svg class="icon svg-icon" aria-hidden="true">
106 <use xlink:href="#iconzuixin"></use>
107 </svg>
108 <span>2020-06-19</span>
109 </a>
110 </li>
111 <li>
112 <a href="" title="创新技术体系 引领事业发展">
113 创新技术体系 引领事业发展
114 <svg class="icon svg-icon" aria-hidden="true">
115 <use xlink:href="#iconzuixin"></use>
116 </svg>
117 <span>2020-06-19</span>
118 </a>
119 </li>
70 </ul> 120 </ul>
71 </div> 121 </div>
72 <div class="notice"> 122 <div class="notice">
...@@ -487,4 +537,5 @@ ...@@ -487,4 +537,5 @@
487 <script type="text/javascript" src="./staticJs/down.js"></script> 537 <script type="text/javascript" src="./staticJs/down.js"></script>
488 <script type="text/javascript" src="./staticJs/common.js"></script> 538 <script type="text/javascript" src="./staticJs/common.js"></script>
489 <script type="text/javascript" src="./staticJs/staticIndex.js"></script> 539 <script type="text/javascript" src="./staticJs/staticIndex.js"></script>
540
490 </html> 541 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -163,7 +163,7 @@ div.banner ul li a { ...@@ -163,7 +163,7 @@ div.banner ul li a {
163 /* -------------常见问题start--------------------- */ 163 /* -------------常见问题start--------------------- */
164 .common_question { 164 .common_question {
165 padding: 40px; 165 padding: 40px;
166 background-color: #fcf8f8; 166 background: #F6F9FB;
167 } 167 }
168 .common_question .subject_con { 168 .common_question .subject_con {
169 width: 1200px; 169 width: 1200px;
...@@ -173,7 +173,7 @@ div.banner ul li a { ...@@ -173,7 +173,7 @@ div.banner ul li a {
173 .common_question .subject, .interact{ 173 .common_question .subject, .interact{
174 border-radius: 2px; 174 border-radius: 2px;
175 width: 49%; 175 width: 49%;
176 border: 1px solid #DEDEDE; 176 border: 1px solid #E7ECEF;
177 background-color: #ffffff; 177 background-color: #ffffff;
178 } 178 }
179 .common_question .list_content , .list_content_right{ 179 .common_question .list_content , .list_content_right{
...@@ -310,7 +310,7 @@ div.banner ul li a { ...@@ -310,7 +310,7 @@ div.banner ul li a {
310 310
311 div.c_one div:first-child .news, div.c_one div:first-child .notice { 311 div.c_one div:first-child .news, div.c_one div:first-child .notice {
312 margin-top: 40px; 312 margin-top: 40px;
313 height: 340px; 313 height: 328px;
314 border: #DEDEDE 1px solid; 314 border: #DEDEDE 1px solid;
315 padding: 0 15px 0 15px; 315 padding: 0 15px 0 15px;
316 } 316 }
...@@ -360,12 +360,18 @@ div.c_one h2 a:hover i { ...@@ -360,12 +360,18 @@ div.c_one h2 a:hover i {
360 div.c_one .news .news-img { 360 div.c_one .news .news-img {
361 margin-top: 20px; 361 margin-top: 20px;
362 float: left; 362 float: left;
363 width: 350px;
364 height: 231px;
365 }
366 div.c_one .news .news-img img {
367 height: 100%;
368 width: 100%;
363 } 369 }
364 370
365 div.c_one ul { 371 div.c_one ul {
366 width: 100%; 372 width: 100%;
367 float: left; 373 float: left;
368 margin-top: 20px; 374 margin-top: 10px;
369 list-style: none; 375 list-style: none;
370 font-size: 14px; 376 font-size: 14px;
371 letter-spacing: 1px; 377 letter-spacing: 1px;
...@@ -373,7 +379,7 @@ div.c_one ul { ...@@ -373,7 +379,7 @@ div.c_one ul {
373 379
374 /*<li><a href=""><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>*/ 380 /*<li><a href=""><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>*/
375 div.c_one ul li { 381 div.c_one ul li {
376 line-height: 276%; 382 line-height: 42px;
377 } 383 }
378 div.c_one ul li:not(:last-child) { 384 div.c_one ul li:not(:last-child) {
379 border-bottom: 1px dashed #DEDEDE; 385 border-bottom: 1px dashed #DEDEDE;
...@@ -382,7 +388,6 @@ div.c_one ul li:not(:last-child) { ...@@ -382,7 +388,6 @@ div.c_one ul li:not(:last-child) {
382 div.c_one ul li a { 388 div.c_one ul li a {
383 width: 100%; 389 width: 100%;
384 display: block; 390 display: block;
385 color: #000000;
386 text-align: left; 391 text-align: left;
387 } 392 }
388 div.c_one ul li a:hover { 393 div.c_one ul li a:hover {
...@@ -441,7 +446,7 @@ div.c_one .news ul { ...@@ -441,7 +446,7 @@ div.c_one .news ul {
441 446
442 447
443 div.c_two { 448 div.c_two {
444 background: #fcf8f8; 449 background: #F6F9FB;
445 } 450 }
446 451
447 452
...@@ -479,7 +484,7 @@ div.c_two ul li a { ...@@ -479,7 +484,7 @@ div.c_two ul li a {
479 background: #ffffff; 484 background: #ffffff;
480 padding: 50px 36px; 485 padding: 50px 36px;
481 box-sizing: border-box; 486 box-sizing: border-box;
482 border: 1px solid #E6E6E6; 487 border: 1px solid #E7ECEF;
483 margin: 0 10px; 488 margin: 0 10px;
484 } 489 }
485 div.c_two ul li img { 490 div.c_two ul li img {
......
1 .central_area { 1 .central_area {
2 min-height:calc(100vh - 190px); 2 min-height:calc(100vh - 190px);
3 margin-top: 20px;
4 color: #4A4A4A;
3 } 5 }
4 .navigation_crumbs { 6 .navigation_crumbs {
5 height: 45px; 7 height: 45px;
6 } 8 }
7 .perinfo { 9 .perinfo {
8 height: 100px; 10 height: 140px;
9 padding: 20px; 11 padding: 30px;
10 box-sizing: border-box; 12 box-sizing: border-box;
11 margin-top: 10px; 13 background: #FFFFFF;
14 border-radius: 4px;
15 border: 1px solid #DEDEDE;
12 } 16 }
13 .perinfo_left{ 17 .perinfo_left{
14 float: left; 18 float: left;
15 } 19 }
20 .perinfo_left ul li {
21 font-size: 16px;
22 color: #6D7278;
23 }
24 .perinfo_left ul li:first-child{
25 margin-top: 7px;
26 color: #4A4A4A;
27 }
28 .perinfo_left ul li:first-child span{
29 font-size: 18px;
30 }
31 .perinfo_left ul li:first-child p {
32 font-size: 18px;
33 }
16 .perinfo_left img { 34 .perinfo_left img {
17 width: 60px; 35 width: 80px;
18 height: 60px; 36 height: 80px;
19 float: left; 37 float: left;
20 } 38 }
21 .perinfo_left ul { 39 .perinfo_left ul {
...@@ -30,6 +48,28 @@ ...@@ -30,6 +48,28 @@
30 .perinfo_left ul li p{ 48 .perinfo_left ul li p{
31 display: inline-block; 49 display: inline-block;
32 } 50 }
51 .perinfo button {
52 float: right;
53 margin-right: 70px;
54 margin-top: 10px;
55 width: 140px;
56 height: 42px;
57 position: relative;
58 }
59 .perinfo button a {
60 color: #FFFFFF;
61 display: block;
62 width: 140px;
63 height: 42px;
64 text-align: center;
65 line-height: 42px;
66 position: absolute;
67 left: 0;
68 top: 0;
69 }
70 .perinfo button a:hover {
71 color: #FFFFFF;
72 }
33 .my_appointment { 73 .my_appointment {
34 color: #5FB878; 74 color: #5FB878;
35 border: 2px solid#5FB878; 75 border: 2px solid#5FB878;
...@@ -51,4 +91,43 @@ ...@@ -51,4 +91,43 @@
51 /* ----------------预约列表-------------------- */ 91 /* ----------------预约列表-------------------- */
52 .appointment_list { 92 .appointment_list {
53 margin-top: 10px; 93 margin-top: 10px;
94 font-size: 0;
95 margin-left: -10px;
96 margin-right: -10px;
97 }
98 .appointment_list li {
99 width: 33.333%;
100 display: inline-block;
101 padding: 0 10px;
102 box-sizing: border-box;
103 }
104 .appointment_list li .item_content {
105 border: 1px solid #CBCBCB;
106 border-radius: 4px;
107 border: 1px solid #CBCBCB;
108 font-size: 16px;
109 }
110 .item_title {
111 height: 48px;
112 line-height: 48px;
113 color: #FFFFFF;
114 padding: 0 20px;
115 box-sizing: border-box;
116 }
117 .item_title h3 {
118 display: inline-block;
119 float: left;
120 }
121 .item_title p {
122 display: inline-block;
123 float: right;
124 }
125 .success {
126 background-color: #44D7B6;
127 }
128 .overdue {
129 background-color: #F26363;
130 }
131 .cancel {
132 background-color: #F26363;
54 } 133 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,7 +12,6 @@ layui.use('carousel', function () { ...@@ -12,7 +12,6 @@ layui.use('carousel', function () {
12 //注意：导航 依赖 element 模块，否则无法进行功能性操作 12 //注意：导航 依赖 element 模块，否则无法进行功能性操作
13 layui.use('element', function () { 13 layui.use('element', function () {
14 var element = layui.element; 14 var element = layui.element;
15
16 //… 15 //…
17 }); 16 });
18 layui.use('util', function () { 17 layui.use('util', function () {
......
...@@ -5,37 +5,4 @@ layui.use('element', function () { ...@@ -5,37 +5,4 @@ layui.use('element', function () {
5 //console.log(elem) 5 //console.log(elem)
6 layer.msg(elem.text()); 6 layer.msg(elem.text());
7 }); 7 });
8 });
9 layui.use('table', function () {
10 var table = layui.table;
11 table.render({
12 elem: '#test'
13 , url: '../staticLib/wdyy/index.json'
14 , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
15 , cols: [[
16 { field: 'zizeng', title: '序号', templet: '#zizeng', align: 'center' }
17 , { field: 'username', title: '预约号', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
18 , { field: 'sex', title: ' 预约人', align: 'center' }
19 , { field: 'city', title: '办事大厅', align: 'center' }
20 , { field: 'sign', title: ' 预约业务', align: 'center' }
21 , { field: 'classify', title: '预约时间', align: 'center' }
22 , { field: 'state', title: '状态', align: 'center', templet: '#state' }
23 , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
24 ]]
25 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
26 return {
27 "code": res.code, //解析接口状态
28 "data": res.data //解析数据列表
29 };
30 }
31 });
32 //监听行工具事件
33 table.on('tool(test)', function (obj) {
34 var data = obj.data;
35 console.log(data)
36 if (obj.event === 'del') {
37 } else if (obj.event === 'edit') {
38
39 }
40 });
41 }); 8 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -22,9 +22,9 @@ ...@@ -22,9 +22,9 @@
22 </div> 22 </div>
23 <!-- -----------------个人信息------------------------ --> 23 <!-- -----------------个人信息------------------------ -->
24 <div class="central_area"> 24 <div class="central_area">
25 <div class="perinfo contentBox layui-bg-gray"> 25 <div class="perinfo contentBox">
26 <div class="perinfo_left"> 26 <div class="perinfo_left">
27 <img src="../../staticImages/logo-realestate.png" alt=""> 27 <img src="../staticImages/person.png" alt="">
28 <ul> 28 <ul>
29 <li> 29 <li>
30 <span>上午好：</span> 30 <span>上午好：</span>
...@@ -36,14 +36,70 @@ ...@@ -36,14 +36,70 @@
36 </li> 36 </li>
37 </ul> 37 </ul>
38 </div> 38 </div>
39 <a class="my_appointment" title="在线预约" href="./yyxz.html">在线预约</a> 39 <button type="button" class="layui-btn layui-btn-normal">
40 <div class="time"> 40 <a href="./yyxz.html">在线预约</a>
41 登录时间：2088-20-88 41 </button>
42 </div>
43 </div> 42 </div>
44 <!-- -------------预约列表--------------- --> 43 <!-- -------------预约列表--------------- -->
45 <div class="appointment_list contentBox"> 44 <div class="contentBox">
46 <table class="layui-hide" id="test" lay-filter="test"></table> 45 <ul class="appointment_list">
46 <li>
47 <div class="item_content">
48 <div class="item_title success">
49 <h3>正常</h3>
50 <p>
51 查看
52 <i class="layui-icon layui-icon-right"></i>
53 </p>
54 </div>
55 <ul>
56 <li>
57 <span>预约人：</span>
58 <p>任超</p>
59 </li>
60 <li>
61 <span>办事大厅：</span>
62 <p>米香园办事大厅</p>
63 </li>
64 <li>
65 <span>办理业务类型：</span>
66 <p>二手房交易</p>
67 <a href="">办事指南</a>
68 </li>
69 <li>
70 <span>预约日期：</span>
71 <p>2020-12-56 上午 16：13</p>
72 </li>
73 <li>
74 <span>预约流水号</span>
75 <p>897987987987</p>
76 </li>
77 </ul>
78 </div>
79 </li>
80 <li>
81 <div class="item_content">
82 <div class="item_title overdue">
83 <h3>正常</h3>
84 <p>
85 查看
86 <i class="layui-icon layui-icon-right"></i>
87 </p>
88 </div>
89 </div>
90 </li>
91 <li>
92 <div class="item_content cancel">
93 <div class="item_title">
94 <h3>正常</h3>
95 <p>
96 查看
97 <i class="layui-icon layui-icon-right"></i>
98 </p>
99 </div>
100 </div>
101 </li>
102 </ul>
47 </div> 103 </div>
48 </div> 104 </div>
49 </div> 105 </div>
......