Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
570404c5 by 任超
Options

style:样式

1 parent 9949a87e
Inline Side-by-side
Showing 10 changed files with 180 additions and 136 deletions
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
43 } 43 }
44 .submitbutton { 44 .submitbutton {
45 text-align: center; 45 text-align: center;
46 margin: 30px 0 60px 0; 46 margin: 50px 0;
47 } 47 }
48 .layui-form-item button { 48 .layui-form-item button {
49 width: 120px; 49 width: 120px;
...@@ -171,4 +171,50 @@ ...@@ -171,4 +171,50 @@
171 .next_button { 171 .next_button {
172 text-align: center; 172 text-align: center;
173 margin: 50px 0 100px 0; 173 margin: 50px 0 100px 0;
174 }
175 .input_search {
176 margin-top: 60px;
177 }
178 /* ------------------弹框样式-------------------- */
179 .layui-layer-dialog {
180 margin-top: -1.5%;
181 }
182 .successInfo , .seizureInfo{
183 background-color: #44D7B6;
184 width: 140%;
185 margin-left: -20px;
186 padding-left: 10px;
187 box-sizing: border-box;
188 color: #ffffff;
189 }
190 .seizureInfo {
191 background-color: #F26363;
192 opacity: 0.8;
193 }
194 .layui-layer-btn {
195 position: relative;
196 top: 50px;
197 left: -89px;
198 }
199 .layui-layer-btn0 {
200 width: 120px!important;
201 height: 42px!important;
202 text-align: center;
203 line-height: 42px!important;
204 font-size: 16px;
205 }
206 .layui-layer-content {
207 height: auto!important;
208 }
209 .dialog_con li {
210 line-height: 36px;
211 color: #303030;
212 font-size: 14px!important;
213 }
214 .dialog_con li span {
215 color: #9B9B9B;
216 display: inline-block;
217 width: 85px;
218 text-align: right;
219 margin-right: 10px;
174 } 220 }
...\ No newline at end of file ...\ No newline at end of file
......
1 /* ------------------------公共头部和尾部css------------------------------------ */ 1 /* ------------------------公共头部和尾部css------------------------------------ */
2 /* layer confim */ 2
3 .layui-layer-btn .layui-layer-btn0 {
4 background-color: #F7B500!important;
5 color: #fff!important;
6 border: 1px solid #F7B500!important;
7 }
8 .layui-layer-btn .layui-layer-btn1 {
9 border-color: #1E9FFF;
10 background-color: #1E9FFF;
11 color: #fff;
12 }
13 .layui-icon-search { 3 .layui-icon-search {
14 color: #6D7278; 4 color: #6D7278;
15 } 5 }
...@@ -279,4 +269,18 @@ div.footer .system_service ul li a:hover { ...@@ -279,4 +269,18 @@ div.footer .system_service ul li a:hover {
279 font-size: 12px; 269 font-size: 12px;
280 color: #CBCBCB; 270 color: #CBCBCB;
281 margin-top: 5px; 271 margin-top: 5px;
272 }
273
274 /* ------------layui 弹框样式---------------- */
275 .layui-layer-ico {
276 background: none!important;
277 position: relative;
278 }
279 .layui-layer-ico::after {
280 content: '\2716';
281 position: absolute;
282 left: 0;
283 top: -5px;
284 font-size: 14px;
285 color: #fff;
282 } 286 }
...\ No newline at end of file ...\ No newline at end of file
......
1 /* layer confim */
2 .layui-layer-btn .layui-layer-btn0 {
3 background-color: #F7B500!important;
4 color: #fff!important;
5 border: 1px solid #F7B500!important;
6 }
7 .layui-layer-btn .layui-layer-btn1 {
8 border-color: #1E9FFF;
9 background-color: #1E9FFF;
10 color: #fff;
11 }
1 .progressBar { 1 .progressBar {
2 padding-top: 20px; 2 padding-top: 30px;
3 color: #4A4A4A; 3 color: #4A4A4A;
4 position: relative; 4 position: relative;
5 margin: 30px 0 50px 0; 5 width: 93%;
6 width: 95%; 6 margin: 0 auto;
7 } 7 }
8 .app_progress { 8 .app_progress {
9 display: flex; 9 display: flex;
10 width: 106%; 10 width: 100%;
11 } 11 }
12 .app_progress li { 12 .app_progress li {
13 display: inline-block; 13 display: inline-block;
...@@ -35,7 +35,6 @@ ...@@ -35,7 +35,6 @@
35 } 35 }
36 .item_proress { 36 .item_proress {
37 position: relative; 37 position: relative;
38 width: 50px!important;
39 z-index: 10; 38 z-index: 10;
40 } 39 }
41 .app_progress li p{ 40 .app_progress li p{
...@@ -91,4 +90,19 @@ ...@@ -91,4 +90,19 @@
91 } 90 }
92 .next_button a:hover { 91 .next_button a:hover {
93 color: #ffffff; 92 color: #ffffff;
93 }
94
95 /* ------------中间内容区域------------- */
96 .content_area {
97 background: #FFFFFF;
98 box-shadow: 0px 4px 16px 0px rgba(40, 120, 254, 0.24);
99 -webkit-box-shadow: 0px 4px 16px 0px rgba(40, 120, 254, 0.24);
100 -moz-box-shadow: 0px 4px 16px 0px rgba(40, 120, 254, 0.24);
101 border-radius: 6px;
102 box-sizing: border-box;
103 padding: 20px;
104 margin-top: 10px;
105 }
106 .progressBar_con {
107 text-align: center;
94 } 108 }
...\ No newline at end of file ...\ No newline at end of file
......
1 $(function () { 1 $(function () {
2 layui.use('element', function () { 2 layui.use('element', function () {
3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 3 let element = layui.element;
4 }); 4 });
5 addTabs('#wssq') 5 addTabs('#wssq')
6 // 业务 6 // 业务
...@@ -18,7 +18,7 @@ $(function () { ...@@ -18,7 +18,7 @@ $(function () {
18 }); 18 });
19 19
20 //监听提交 20 //监听提交
21 form.on('submit(demo1)', function (data) { 21 form.on('submit(submit)', function (data) {
22 layer.alert(JSON.stringify(data.field), { 22 layer.alert(JSON.stringify(data.field), {
23 title: '最终的提交信息' 23 title: '最终的提交信息'
24 }) 24 })
...@@ -73,4 +73,49 @@ $(function () { ...@@ -73,4 +73,49 @@ $(function () {
73 element.init(); 73 element.init();
74 }); 74 });
75 }); 75 });
76
77 // 结果弹框
78 $('.reset').click(function () {
79 successResult()
80 // seizureResult()
81 })
82
76 }) 83 })
84 function successResult() {
85 layui.use('layer', function () {
86 layer.open({
87 title: '<p class="system_prompt successInfo">房屋状态：正常</p>',
88 area: ['370px', '335px'],
89 scrollbar: false,
90 content:'<ul class="dialog_con">'
91 + '<li><span>姓名：</span>任超</li>'
92 + '<li><span>身份证号：</span>610124193335522</li>'
93 + '<li><span>联系电话：</span>18740677386</li>'
94 + '<li><span>产权证号：</span>89897987987987</li>'
95 + '<li><span>坐落：</span>西安市雁塔区南二环西段</li>'
96 + '<li><span>面积：</span>2000</li>'
97 + '<li><span>合同备案号：</span>9798798798798</li>'
98 + '</ul>'
99 });
100 })
101
102 }
103
104 function seizureResult() {
105 layui.use('layer', function () {
106 layer.open({
107 title: '<p class="system_prompt seizureInfo">房屋状态：正常</p>',
108 area: ['370px', '335px'],
109 scrollbar: false,
110 content:'<ul class="dialog_con">'
111 + '<li><span>姓名：</span>任超</li>'
112 + '<li><span>身份证号：</span>610124193335522</li>'
113 + '<li><span>联系电话：</span>18740677386</li>'
114 + '<li><span>产权证号：</span>89897987987987</li>'
115 + '<li><span>坐落：</span>西安市雁塔区南二环西段</li>'
116 + '<li><span>面积：</span>2000</li>'
117 + '<li><span>合同备案号：</span>9798798798798</li>'
118 + '</ul>'
119 });
120 })
121 }
......
...@@ -14,6 +14,7 @@ $(function () { ...@@ -14,6 +14,7 @@ $(function () {
14 var layer = layui.layer; 14 var layer = layui.layer;
15 layer.confirm('本人承诺所填的预约信息属实，如有虚假，将承担法律责任', { 15 layer.confirm('本人承诺所填的预约信息属实，如有虚假，将承担法律责任', {
16 title: '真实准确的承诺', 16 title: '真实准确的承诺',
17 scrollbar: false,
17 btn: ['不同意', '同意进入下一步'] //按钮 18 btn: ['不同意', '同意进入下一步'] //按钮
18 }, function () { 19 }, function () {
19 layer.closeAll(); 20 layer.closeAll();
......
...@@ -18,136 +18,57 @@ ...@@ -18,136 +18,57 @@
18 <span class="layui-breadcrumb"> 18 <span class="layui-breadcrumb">
19 <a href="../../index.html">首页</a> 19 <a href="../../index.html">首页</a>
20 <a href="./wssq.html">网上申请</a> 20 <a href="./wssq.html">网上申请</a>
21 <a><cite>在线申请</cite></a> 21 <a><cite>信息校验</cite></a>
22 </span> 22 </span>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="content_box"> 25 <div class="content_box">
26 <div class="name_title"> 26 <div class="name_title">
27 <h2>商品房</h2> 27 <h2>商品房</h2>
28 <p>转移登记</p> 28 <p>商品房转移买卖登记（个人）</p>
29 </div> 29 </div>
30 <div class="progressBar"> 30 <div class="content_area">
31 <ul class="app_progress" id="app_progress"> 31 <div class="progressBar_con">
32 </ul> 32 <div class="progressBar">
33 </div> 33 <ul class="app_progress" id="app_progress">
34 <div class="input_search"> 34 </ul>
35 <div class="form_title"> 35 </div>
36 <h2>信息校验</h2>
37 </div> 36 </div>
38 <form class="layui-form" action=""> 37 <div class="input_search">
39 <div class="layui-form-item"> 38 <form class="layui-form" action="">
40 <div class="layui-inline"> 39 <div class="layui-form-item">
41 <label class="layui-form-label">权利人</label> 40 <div class="layui-inline">
42 <div class="layui-input-block"> 41 <label class="layui-form-label">权利人</label>
43 <input type="text" name="title" required lay-verify="title" placeholder="请输权利人" 42 <div class="layui-input-block">
44 class="layui-input"> 43 <input type="text" name="title" required lay-verify="title" placeholder="请输权利人"
44 class="layui-input">
45 </div>
45 </div> 46 </div>
46 </div> 47 <div class="layui-inline">
47 <div class="layui-inline"> 48 <label class="layui-form-label">身份证</label>
48 <label class="layui-form-label">身份证</label> 49 <div class="layui-input-block">
49 <div class="layui-input-block"> 50 <input type="text" name="idcard" required lay-verify="identity" placeholder="请输身份证"
50 <input type="text" name="idcard" required lay-verify="identity" placeholder="请输身份证" 51 class="layui-input">
51 class="layui-input"> 52 </div>
52 </div> 53 </div>
53 </div> 54 </div>
54 </div> 55
55 56 <div class="layui-form-item record_con">
56 <div class="layui-form-item record_con"> 57 <label class="layui-form-label">合同备案号</label>
57 <label class="layui-form-label">合同备案号</label> 58 <div class="layui-input-block record">
58 <div class="layui-input-block record"> 59 <input type="text" name="record" required lay-verify="record" placeholder="请输合同备案号"
59 <input type="text" name="record" required lay-verify="record" placeholder="请输合同备案号" 60 class="layui-input">
60 class="layui-input">
61 </div>
62 </div>
63
64 <div class="layui-form-item submitbutton_con">
65 <div class="layui-input-block submitbutton">
66 <button type="reset" class="layui-btn layui-btn-primary reset">重 置</button>
67 <button type="submit" class="layui-btn layui-btn-normal submit" lay-submit=""
68 lay-filter="demo1">查询</button>
69 </div>
70 </div>
71 </form>
72 </div>
73 <div class="seach_result">
74 <!-- <div class="no_data">暂无数据</div> -->
75 <ul class="appointment_list">
76 <li>
77 <div class="item_content">
78 <div class="item_title overdue">
79 <h3>正常</h3>
80 <p>
81 查看
82 <i class="layui-icon layui-icon-right"></i>
83 </p>
84 </div> 61 </div>
85 <ul class="item_info">
86 <li>
87 <span>预约人：</span>
88 <p>任超</p>
89 </li>
90 <li>
91 <span>办事大厅：</span>
92 <p>米香园办事大厅</p>
93 </li>
94 <li>
95 <span>办理业务类型：</span>
96 <p>二手房交易</p>
97 <a href="">办事指南</a>
98 </li>
99 <li>
100 <span>预约日期：</span>
101 <p>2020-12-56 上午 16：13</p>
102 </li>
103 <li>
104 <span>预约流水号：</span>
105 <p>897987987987</p>
106 </li>
107 </ul>
108 <a class="cancel_reservation">取消预约</a>
109 </div> 62 </div>
110 </li> 63
111 <li> 64 <div class="layui-form-item submitbutton_con">
112 <div class="item_content"> 65 <div class="layui-input-block submitbutton">
113 <div class="item_title cancel"> 66 <button type="reset" class="layui-btn layui-btn-primary reset">重 置</button>
114 <h3>正常</h3> 67 <button type="submit" class="layui-btn layui-btn-normal submit" lay-submit=""
115 <p> 68 lay-filter="submit">查询</button>
116 查看
117 <i class="layui-icon layui-icon-right"></i>
118 </p>
119 </div> 69 </div>
120 <ul class="item_info">
121 <li>
122 <span>预约人：</span>
123 <p>任超</p>
124 </li>
125 <li>
126 <span>办事大厅：</span>
127 <p>米香园办事大厅</p>
128 </li>
129 <li>
130 <span>办理业务类型：</span>
131 <p>二手房交易</p>
132 <a href="">办事指南</a>
133 </li>
134 <li>
135 <span>预约日期：</span>
136 <p>2020-12-56 上午 16：13</p>
137 </li>
138 <li>
139 <span>预约流水号：</span>
140 <p>897987987987</p>
141 </li>
142 </ul>
143 <a class="cancel_reservation">取消预约</a>
144 </div> 70 </div>
145 </li> 71 </form>
146 </ul>
147 <div class="next_button">
148 <button type="button" class="layui-btn layui-btn-normal">
149 <a href="./tbxx.html">下一步</a>
150 </button>
151 </div> 72 </div>
152 </div> 73 </div>
153 </div> 74 </div>
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
54 <div class="layui-progress-bar" lay-percent="100%"></div> 54 <div class="layui-progress-bar" lay-percent="100%"></div>
55 </div> 55 </div>
56 <li> 56 <li>
57 <p class="active"></p> 57 <p class="activeing"></p>
58 <h5> 58 <h5>
59 预约结果 59 预约结果
60 </h5> 60 </h5>
......
...@@ -10,6 +10,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...@@ -10,6 +10,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
10 <link rel="stylesheet" href="../staticCss/swiper-bundle.min.css"> 10 <link rel="stylesheet" href="../staticCss/swiper-bundle.min.css">
11 <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css"> 11 <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
12 <link rel="stylesheet" type="text/css" href="../staticCss/yysj.css"> 12 <link rel="stylesheet" type="text/css" href="../staticCss/yysj.css">
13 <link rel="stylesheet" type="text/css" href="../staticCss/layuiDialog.css">
13 </head> 14 </head>
14 15
15 16
...@@ -47,7 +48,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...@@ -47,7 +48,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
47 <div class="layui-progress-bar" lay-percent="100%"></div> 48 <div class="layui-progress-bar" lay-percent="100%"></div>
48 </div> 49 </div>
49 <li> 50 <li>
50 <p class="active"></p> 51 <p class="activeing"></p>
51 <h5> 52 <h5>
52 预约时间 53 预约时间
53 </h5> 54 </h5>
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
11 <link rel="stylesheet" type="text/css" href="../staticCss/yyxz.css"> 11 <link rel="stylesheet" type="text/css" href="../staticCss/yyxz.css">
12 <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css"> 12 <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
13 <link rel="stylesheet" type="text/css" href="../staticCss/layuiedit.css"> 13 <link rel="stylesheet" type="text/css" href="../staticCss/layuiedit.css">
14 <link rel="stylesheet" type="text/css" href="../staticCss/layuiDialog.css">
14 </head> 15 </head>
15 16
16 <body> 17 <body>
......