Skip to content

任超 / js.portalStaticPage

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

style:预约结果

1 parent bdb59604
Inline Side-by-side
Showing 4 changed files with 65 additions and 64 deletions
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
36 content: " "; 36 content: " ";
37 display: block; 37 display: block;
38 position: absolute; 38 position: absolute;
39 left: 11px; 39 left: 10px;
40 top: 6px; 40 top: 6px;
41 width: 8px; 41 width: 8px;
42 height: 12px; 42 height: 12px;
......
...@@ -9,38 +9,6 @@ ...@@ -9,38 +9,6 @@
9 padding-top: 25px; 9 padding-top: 25px;
10 margin-bottom: 25 10 margin-bottom: 25
11 } 11 }
12 .app_progress li {
13 padding: 0 30px;
14 line-height: 40px;
15 background: #eee;
16 display: inline-block;
17 color: #fff;
18 position: relative;
19 color: black;
20 cursor: pointer;
21 }
22 .app_progress li:hover {
23 background-color: #1E9FFF;
24 color: #fff;
25 }
26
27 .app_progress li:hover:after {
28 border-left-color: #1E9FFF;
29 }
30 .app_progress li:after{
31 content: '';
32 display: block;
33 border-top: 20px solid #fff;
34 border-bottom: 20px solid #fff;
35 border-left: 12px solid #eee;
36 position: absolute;
37 right:0;
38 top: 0;
39 }
40 .active {
41 background-color: #1E9FFF!important;
42 color: #fff!important;
43 }
44 .app_progress li.active:after { 12 .app_progress li.active:after {
45 border-left-color: #1E9FFF; 13 border-left-color: #1E9FFF;
46 } 14 }
...@@ -79,12 +47,13 @@ ...@@ -79,12 +47,13 @@
79 padding: 10px; 47 padding: 10px;
80 font-size: 14px; 48 font-size: 14px;
81 box-sizing: border-box; 49 box-sizing: border-box;
50 margin-top: 30px!important;
82 } 51 }
83 .status_info { 52 .status_info {
84 float: left; 53 float: left;
85 } 54 }
86 .appointment_status .title { 55 .appointment_status .title {
87 color: #009688; 56 color: #4A4A4A;
88 font-weight: 600; 57 font-weight: 600;
89 margin-bottom: 10px; 58 margin-bottom: 10px;
90 } 59 }
...@@ -93,10 +62,16 @@ ...@@ -93,10 +62,16 @@
93 margin-bottom: 8px; 62 margin-bottom: 8px;
94 } 63 }
95 .appointment_status .title h3 span { 64 .appointment_status .title h3 span {
96 color: #FF5722; 65 color: #FA6400;
66 font-size: 18px;
67 }
68 .appointment_status ul {
69 margin-top: 30px;
97 } 70 }
98 .appointment_status ul li { 71 .appointment_status ul li {
99 line-height: 24px; 72 color: #4A4A4A;
73 line-height: 28px;
74 display: inline-block;
100 } 75 }
101 .code { 76 .code {
102 float: left; 77 float: left;
...@@ -114,20 +89,33 @@ ...@@ -114,20 +89,33 @@
114 font-size: 14px; 89 font-size: 14px;
115 } 90 }
116 .appointment_info { 91 .appointment_info {
117 width: 25%;
118 float: left;
119 height: 500px;
120 box-sizing: border-box; 92 box-sizing: border-box;
121 padding: 10px; 93 padding: 10px;
122 margin-right:10px; 94 margin-right:10px;
123 } 95 }
96 .appointment_info ul {
97 font-size: 0;
98 }
124 .appointment_info h3 { 99 .appointment_info h3 {
125 font-weight: 600; 100 font-weight: 600;
126 margin-bottom: 10px; 101 margin-bottom: 10px;
127 } 102 }
128 .appointment_info li { 103 .appointment_info li {
129 line-height: 30px; 104 line-height: 30px;
105 font-size: 14px;
106 width: 50%;
107 display: inline-block;
130 } 108 }
131 .appointment_info li p { 109 .appointment_info li p {
132 display: inline-block; 110 display: inline-block;
111 }
112 .appointment_info li span {
113 color: #9B9B9B;
114 display: inline-block;
115 width: 80px;
116 text-align: right;
117 }
118 #container {
119 margin-bottom: 100px;
120 margin-top: 10px;
133 } 121 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -24,7 +24,9 @@ $(function () { ...@@ -24,7 +24,9 @@ $(function () {
24 24
25 } else { 25 } else {
26 layui.use('layer', function () { 26 layui.use('layer', function () {
27 layer.alert('请先同意以上协议', {icon: 6,title:'提示'}); 27 layer.msg('请先同意以上协议', function(){
28 //关闭后的操作
29 });
28 }) 30 })
29 } 31 }
30 }) 32 })
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 <title>我的预约-预约结果</title> 8 <title>我的预约-预约结果</title>
9 <script type="text/javascript" src="../staticJs/head.js"></script> 9 <script type="text/javascript" src="../staticJs/head.js"></script>
10 <link rel="stylesheet" type="text/css" href="../staticCss/yyjg.css"> 10 <link rel="stylesheet" type="text/css" href="../staticCss/yyjg.css">
11 <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
11 </head> 12 </head>
12 13
13 <body> 14 <body>
...@@ -23,31 +24,45 @@ ...@@ -23,31 +24,45 @@
23 </div> 24 </div>
24 <!-- ----------------------------------内容模块的开始----------------------------------------------- --> 25 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
25 <div class="central_area"> 26 <div class="central_area">
26 <div class="appointment_notice contentBox"> 27 <div class="progressBar contentBox">
27 <ul class="app_progress"> 28 <ul class="app_progress">
28 <li class="selected"> 29 <li>
29 <span>1</span> 30 <p class="active"></p>
30 预约须知 31 <h5>
32 预约须知
33 </h5>
31 </li> 34 </li>
32 <div class="line"></div> 35 <div class="layui-progress">
33 <li class="selected"> 36 <div class="layui-progress-bar" lay-percent="100%"></div>
34 <span>2</span> 37 </div>
35 选择区域 38 <li>
39 <p class="active"></p>
40 <h5>
41 选择区域
42 </h5>
36 </li> 43 </li>
37 <div class="line"></div> 44 <div class="layui-progress">
38 <li class="selected"> 45 <div class="layui-progress-bar" lay-percent="100%"></div>
39 <span>3</span> 46 </div>
40 预约时间 47 <li>
48 <p class="active"></p>
49 <h5>
50 预约时间
51 </h5>
41 </li> 52 </li>
42 <div class="line"></div> 53 <div class="layui-progress">
43 <li class="active"> 54 <div class="layui-progress-bar" lay-percent="100%"></div>
44 <span>4</span> 55 </div>
45 预约结果 56 <li>
57 <p class="active"></p>
58 <h5>
59 预约结果
60 </h5>
46 </li> 61 </li>
47 </ul> 62 </ul>
48 </div> 63 </div>
49 <!-- ---------------------预约状态------------------------- --> 64 <!-- ---------------------预约状态------------------------- -->
50 <div class="appointment_status layui-bg-gray contentBox"> 65 <div class="appointment_status contentBox">
51 <div class="status_info"> 66 <div class="status_info">
52 <div class="title"> 67 <div class="title">
53 <h3> 68 <h3>
...@@ -62,13 +77,9 @@ ...@@ -62,13 +77,9 @@
62 <li>3.请凭预约号及相关证件，按预约时间提前10分钟到选定的不动产登记中心办理业务</li> 77 <li>3.请凭预约号及相关证件，按预约时间提前10分钟到选定的不动产登记中心办理业务</li>
63 </ul> 78 </ul>
64 </div> 79 </div>
65 <div class="code">
66 <img src="../staticImages/code.png">
67 </div>
68 </div> 80 </div>
69 <div class="appointment_info_content contentBox"> 81 <div class="appointment_info_content contentBox">
70 <div class="appointment_info layui-bg-gray"> 82 <div class="appointment_info">
71 <h3>预约信息</h3>
72 <ul> 83 <ul>
73 <li> 84 <li>
74 <span>姓名：</span> 85 <span>姓名：</span>
...@@ -83,7 +94,7 @@ ...@@ -83,7 +94,7 @@
83 <p>碑林区办事大厅</p> 94 <p>碑林区办事大厅</p>
84 </li> 95 </li>
85 <li> 96 <li>
86 <span>办理业务类型：</span> 97 <span>预约业务：</span>
87 <p>二手房过户</p> 98 <p>二手房过户</p>
88 </li> 99 </li>
89 <li> 100 <li>
...@@ -92,7 +103,7 @@ ...@@ -92,7 +103,7 @@
92 </li> 103 </li>
93 </ul> 104 </ul>
94 </div> 105 </div>
95 <div id="container" style="width: 74%;height: 500px;"></div> 106 <div id="container" style="width: 100%;height: 500px;"></div>
96 </div> 107 </div>
97 </div> 108 </div>
98 </div> 109 </div>
......