Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
9949a87e by 任超
Options

style:进度条样式的修改

1 parent 19e88277
Inline Side-by-side
Showing 11 changed files with 76 additions and 39 deletions
...@@ -5,20 +5,30 @@ ...@@ -5,20 +5,30 @@
5 } 5 }
6 .name_title { 6 .name_title {
7 padding: 10px; 7 padding: 10px;
8 margin:15px 0; 8 margin-top: 15px;
9 } 9 }
10 .name_title h2 { 10 .name_title h2 {
11 display: inline-block; 11 display: inline-block;
12 font-weight: 600;
13 margin-right: 10px; 12 margin-right: 10px;
14 border-left: 3px solid #0091FF;
15 height: 16px; 13 height: 16px;
16 line-height: 16px; 14 line-height: 16px;
17 padding-left: 5px; 15 color: #4A4A4A;
16 line-height: 16px;
17 position: relative;
18 width: 50px;
19 }
20 .name_title h2::after {
21 position: absolute;
22 content: "";
23 width: 1px;
24 height: 12px;
25 background-color: #9B9B9B;
26 right: -7px;
27 top: 2px;
18 } 28 }
19 .name_title p { 29 .name_title p {
20 display: inline-block; 30 display: inline-block;
21 color: #0091FF; 31 color: #4A4A4A
22 } 32 }
23 .form_title h2 { 33 .form_title h2 {
24 font-weight: 600; 34 font-weight: 600;
...@@ -72,7 +82,7 @@ ...@@ -72,7 +82,7 @@
72 } 82 }
73 /* ----------------预约列表-------------------- */ 83 /* ----------------预约列表-------------------- */
74 .seach_result { 84 .seach_result {
75 /* display: none; */ 85 display: none;
76 } 86 }
77 .appointment_list { 87 .appointment_list {
78 margin-top: 20px; 88 margin-top: 20px;
......
1 .progressBar { 1 .progressBar {
2 padding-top: 30px; 2 padding-top: 20px;
3 color: #4A4A4A; 3 color: #4A4A4A;
4 position: relative; 4 position: relative;
5 margin: 30px 0 50px 0; 5 margin: 30px 0 50px 0;
...@@ -23,18 +23,24 @@ ...@@ -23,18 +23,24 @@
23 .app_progress .layui-progress { 23 .app_progress .layui-progress {
24 flex: 2.1; 24 flex: 2.1;
25 position: relative; 25 position: relative;
26 top: 10px; 26 top: 13px;
27 margin-left: -3.8%; 27 margin-left: -3.8%;
28 margin-right: -3.8%; 28 margin-right: -3.8%;
29 } 29 }
30 .layui-progress {
31 height: 2px!important;
32 }
33 .layui-progress-bar {
34 height: 2px!important;
35 }
30 .item_proress { 36 .item_proress {
31 position: relative; 37 position: relative;
32 width: 50px!important; 38 width: 50px!important;
33 z-index: 10; 39 z-index: 10;
34 } 40 }
35 .app_progress li p{ 41 .app_progress li p{
36 width: 29.5px; 42 width: 26px;
37 height: 29.5px; 43 height: 26px;
38 border-radius: 50%; 44 border-radius: 50%;
39 background-color: #E6E6E6; 45 background-color: #E6E6E6;
40 margin: 0 auto; 46 margin: 0 auto;
......
...@@ -9,10 +9,16 @@ ...@@ -9,10 +9,16 @@
9 .app_progress li:not(:first-child) { 9 .app_progress li:not(:first-child) {
10 margin-left: -47px; 10 margin-left: -47px;
11 } 11 }
12 .layui-progress {
13 height: 2px!important;
14 }
15 .layui-progress-bar {
16 height: 2px!important;
17 }
12 18
13 .app_progress li p{ 19 .app_progress li p{
14 width: 29.5px; 20 width: 26px;
15 height: 29.5px; 21 height: 26px;
16 border-radius: 50%; 22 border-radius: 50%;
17 background-color: #E6E6E6; 23 background-color: #E6E6E6;
18 margin: 0 auto; 24 margin: 0 auto;
...@@ -28,6 +34,9 @@ ...@@ -28,6 +34,9 @@
28 top: -41px; 34 top: -41px;
29 left: -24px; 35 left: -24px;
30 } 36 }
37 .activeing {
38 background-color: #47E1BF!important;
39 }
31 .active { 40 .active {
32 background-color: #47E1BF!important; 41 background-color: #47E1BF!important;
33 position: relative; 42 position: relative;
...@@ -36,8 +45,8 @@ ...@@ -36,8 +45,8 @@
36 content: " "; 45 content: " ";
37 display: block; 46 display: block;
38 position: absolute; 47 position: absolute;
39 left: 10px; 48 left: 8px;
40 top: 6px; 49 top: 4px;
41 width: 8px; 50 width: 8px;
42 height: 12px; 51 height: 12px;
43 border-color: #fff; 52 border-color: #fff;
......
...@@ -50,11 +50,11 @@ ...@@ -50,11 +50,11 @@
50 color: #006CFF!important; 50 color: #006CFF!important;
51 border-color: #006CFF!important; 51 border-color: #006CFF!important;
52 } 52 }
53
54 .business { 53 .business {
55 margin-left: -10px; 54 margin-left: -10px;
56 margin-right: -10px; 55 margin-right: -10px;
57 margin-top: 30px; 56 margin-top: 30px;
57 overflow: hidden;
58 } 58 }
59 .online_processing , .online_examination{ 59 .online_processing , .online_examination{
60 width: 50%; 60 width: 50%;
...@@ -74,6 +74,13 @@ ...@@ -74,6 +74,13 @@
74 margin-left: 10px; 74 margin-left: 10px;
75 color: #4A4A4A; 75 color: #4A4A4A;
76 } 76 }
77 .list_title h2 .icon {
78 float: left;
79 width: 17px;
80 height: 17px;
81 margin-top: 16px;
82 margin-right: 7px;
83 }
77 .online_processing { 84 .online_processing {
78 float: left; 85 float: left;
79 } 86 }
...@@ -106,7 +113,7 @@ ...@@ -106,7 +113,7 @@
106 .button a:hover { 113 .button a:hover {
107 color: #fff; 114 color: #fff;
108 } 115 }
109 .type_title { 116 .type_title, .region_title {
110 height: 16px; 117 height: 16px;
111 padding-left: 8px; 118 padding-left: 8px;
112 font-size: 16px; 119 font-size: 16px;
...@@ -116,7 +123,7 @@ ...@@ -116,7 +123,7 @@
116 padding-bottom: 10px; 123 padding-bottom: 10px;
117 color: #4A4A4A; 124 color: #4A4A4A;
118 } 125 }
119 .type_title::before { 126 .type_title::before, .region_title::before {
120 position:absolute; 127 position:absolute;
121 content:""; 128 content:"";
122 left:0; 129 left:0;
......
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
64 border-color: #0091FF; 64 border-color: #0091FF;
65 color: #0091FF; 65 color: #0091FF;
66 } 66 }
67 .active1 { 67 .activeRegion {
68 border-color: #0091FF!important; 68 border-color: #0091FF!important;
69 color: #0091FF!important; 69 color: #0091FF!important;
70 } 70 }
...@@ -131,6 +131,6 @@ ...@@ -131,6 +131,6 @@
131 color: #fff; 131 color: #fff;
132 } 132 }
133 .hallActive { 133 .hallActive {
134 background-color: rgb(236, 236, 236); 134 border-color: #0091FF!important;
135 color: #0091FF; 135 color: #0091FF!important;
136 } 136 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,14 +9,6 @@ document.writeln("<!DOCTYPE html>"); ...@@ -9,14 +9,6 @@ document.writeln("<!DOCTYPE html>");
9 document.writeln("<html lang=\'en\'>"); 9 document.writeln("<html lang=\'en\'>");
10 document.writeln(""); 10 document.writeln("");
11 document.writeln("<head>"); 11 document.writeln("<head>");
12 document.writeln(" <meta charset=\'UTF-8\'>");
13 document.writeln(" <title>网上“一窗办事”登记系统</title>");
14 document.writeln(" <meta name=\'copyright\' content=\' &reg 技术支持 All Rights Reserved\' />");
15 document.writeln(" <meta name=\'robots\' content=\'index,follow\' />");
16 document.writeln(" <meta name=\'googlebot\' content=\'index,follow,archive\' />");
17 document.writeln(" <link rel=\'icon\' href=\'favicon.ico\' type=\'image/x-ico\' />");
18 document.writeln(" <meta name=\'description\' content=\'\' />");
19 document.writeln(" <meta name=\'Keywords\' content=\'\' />");
20 document.writeln(" <link rel=\'stylesheet\' type=\'text/css\' href=\'"+localhostPaht+"/staticLib/layui/css/layui.css\' />"); 12 document.writeln(" <link rel=\'stylesheet\' type=\'text/css\' href=\'"+localhostPaht+"/staticLib/layui/css/layui.css\' />");
21 document.writeln(" <link type=\'text/css\' rel=\'stylesheet\' href=\'"+localhostPaht+"/staticCss/common.css\' />"); 13 document.writeln(" <link type=\'text/css\' rel=\'stylesheet\' href=\'"+localhostPaht+"/staticCss/common.css\' />");
22 document.writeln(""); 14 document.writeln("");
......
...@@ -5,8 +5,8 @@ $(function () { ...@@ -5,8 +5,8 @@ $(function () {
5 // 办事大厅 5 // 办事大厅
6 var halloffice = '不夜城' 6 var halloffice = '不夜城'
7 $('.area_list li').click(function () { 7 $('.area_list li').click(function () {
8 $(".area_list li").removeClass("active1") 8 $(".area_list li").removeClass("activeRegion")
9 $(this).addClass("active1"); 9 $(this).addClass("activeRegion");
10 10
11 }) 11 })
12 12
......
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
20 </div> 20 </div>
21 <div class="online_application"> 21 <div class="online_application">
22 <div class="selectCity"> 22 <div class="selectCity">
23 <h2 class="region_title">请先选择对应的区域</h2>
23 <form class="layui-form"> 24 <form class="layui-form">
24 <h2 class="title">省</h2> 25 <h2 class="title">省</h2>
25 <div class="layui-inline layui-select-default" style="margin-right: 10px;"> 26 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
...@@ -61,7 +62,12 @@ ...@@ -61,7 +62,12 @@
61 <h1 class="type_title">在线办理即时业务(即时办结)</h1> 62 <h1 class="type_title">在线办理即时业务(即时办结)</h1>
62 <ul class="item_list"> 63 <ul class="item_list">
63 <div class="list_title"> 64 <div class="list_title">
64 <h2>预告类</h2> 65 <h2>
66 <svg class="icon svg-icon" aria-hidden="true">
67 <use xlink:href="#icontudi"></use>
68 </svg>
69 预告类
70 </h2>
65 </div> 71 </div>
66 <li> 72 <li>
67 <p>预售商品房抵押登记</p> 73 <p>预售商品房抵押登记</p>
...@@ -83,7 +89,12 @@ ...@@ -83,7 +89,12 @@
83 <h1 class="type_title">网上预审(现场办结)</h1> 89 <h1 class="type_title">网上预审(现场办结)</h1>
84 <ul class="item_list"> 90 <ul class="item_list">
85 <div class="list_title"> 91 <div class="list_title">
86 <h2>预告类</h2> 92 <h2>
93 <svg class="icon svg-icon" aria-hidden="true">
94 <use xlink:href="#icontudi"></use>
95 </svg>
96 预告类
97 </h2>
87 </div> 98 </div>
88 <li> 99 <li>
89 <p>二手房买卖登记</p> 100 <p>二手房买卖登记</p>
...@@ -108,8 +119,8 @@ ...@@ -108,8 +119,8 @@
108 </div> 119 </div>
109 </div> 120 </div>
110 </body> 121 </body>
111 <script type="text/javascript" src="../staticJs/common.js"></script>
112 <script type="text/javascript" src="../staticJs/down.js"></script> 122 <script type="text/javascript" src="../staticJs/down.js"></script>
123 <script type="text/javascript" src="../staticJs/common.js"></script>
113 <script type="text/javascript" src="../staticJs/city-picker.js"></script> 124 <script type="text/javascript" src="../staticJs/city-picker.js"></script>
114 <script type="text/javascript" src="../staticJs/wssq.js"></script> 125 <script type="text/javascript" src="../staticJs/wssq.js"></script>
115 </html> 126 </html>
...\ No newline at end of file ...\ No newline at end of file
......
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 <style> 6 <style>
6 </style> 7 </style>
...@@ -22,7 +23,7 @@ ...@@ -22,7 +23,7 @@
22 </div> 23 </div>
23 </div> 24 </div>
24 <div class="content_box"> 25 <div class="content_box">
25 <div class="name_title layui-bg-gray"> 26 <div class="name_title">
26 <h2>商品房</h2> 27 <h2>商品房</h2>
27 <p>转移登记</p> 28 <p>转移登记</p>
28 </div> 29 </div>
...@@ -56,15 +57,15 @@ ...@@ -56,15 +57,15 @@
56 <label class="layui-form-label">合同备案号</label> 57 <label class="layui-form-label">合同备案号</label>
57 <div class="layui-input-block record"> 58 <div class="layui-input-block record">
58 <input type="text" name="record" required lay-verify="record" placeholder="请输合同备案号" 59 <input type="text" name="record" required lay-verify="record" placeholder="请输合同备案号"
59 class="layui-input"> 60 class="layui-input">
60 </div> 61 </div>
61 </div> 62 </div>
62 63
63 <div class="layui-form-item submitbutton_con"> 64 <div class="layui-form-item submitbutton_con">
64 <div class="layui-input-block submitbutton"> 65 <div class="layui-input-block submitbutton">
65 <button type="reset" class="layui-btn layui-btn-primary reset">重 置</button> 66 <button type="reset" class="layui-btn layui-btn-primary reset">重 置</button>
66 <button type="submit" class="layui-btn layui-btn-normal submit" lay-submit="" lay-filter="demo1">查 67 <button type="submit" class="layui-btn layui-btn-normal submit" lay-submit=""
67 询</button> 68 lay-filter="demo1">查询</button>
68 </div> 69 </div>
69 </div> 70 </div>
70 </form> 71 </form>
...@@ -189,4 +190,5 @@ ...@@ -189,4 +190,5 @@
189 {{# } }} 190 {{# } }}
190 {{# }); }} 191 {{# }); }}
191 </script> 192 </script>
193
192 </html> 194 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 <div class="layui-progress-bar" lay-percent="100%"></div> 35 <div class="layui-progress-bar" lay-percent="100%"></div>
36 </div> 36 </div>
37 <li> 37 <li>
38 <p class="active"></p> 38 <p class="activeing"></p>
39 <h5> 39 <h5>
40 选择区域 40 选择区域
41 </h5> 41 </h5>
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 <div class="progressBar contentBox"> 28 <div class="progressBar contentBox">
29 <ul class="app_progress"> 29 <ul class="app_progress">
30 <li> 30 <li>
31 <p class="active"></p> 31 <p class="activeing"></p>
32 <h5> 32 <h5>
33 预约须知 33 预约须知
34 </h5> 34 </h5>
......