Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
56c13a50 by weimo934
Options

feat():绘制业务指南页面

1 parent fab0d062
Inline Side-by-side
Showing 3 changed files with 446 additions and 1 deletions
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <title>新闻详情</title> 5 <title>新闻详情</title>
6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
8 <meta name="format-detection" content="telephone=no"> 7 <meta name="format-detection" content="telephone=no">
9 <meta name="renderer" content="webkit"> 8 <meta name="renderer" content="webkit">
......
1 * {
2 padding: 0;
3 margin: 0;
4 }
5
6 .main {
7 padding-left: 20px;
8 padding-right: 20px;
9 }
10
11 .top li {
12 width: 160px;
13 height: 60px;
14 font-size: 22px;
15 font-weight: 500;
16 color: #4A4A4A;
17 line-height: 60px;
18 background-color: transparent !important;
19 border: none!important;
20 }
21
22 .xsbl-sort {
23 display: flex;
24 justify-content: left;
25 padding-top: 20px;
26 padding-bottom: 20px;
27 }
28
29 .xsbl-sort > li {
30 display: inline-block;
31 font-size: 16px;
32 font-weight: 400;
33 color: #6D7278;
34 line-height: 16px;
35 margin-right: 10px;
36 }
37
38 .td {
39 height: auto;
40 }
41
42 .td-title {
43 height: auto;
44 font-size: 16px;
45 font-weight: 500;
46 color: #4A4A4A;
47 line-height: 40px;
48 background-color: #DEDEDE;
49 border: 1px solid #DEDEDE;
50 padding-left: 15px;
51 }
52
53 .layui-tab-title {
54 height: auto;
55 border-bottom-style:none;
56 }
57
58 .td-body {
59 display: flex;
60 flex-flow: row;
61 flex-wrap: wrap;
62 justify-content: space-between;
63
64 }
65
66 .td-item {
67 width: 48%;
68 height: auto;
69 background: #FFFFFF;
70 border-radius: 2px;
71 display: flex;
72 flex-flow: row nowrap;
73 justify-content: space-between;
74 border-bottom: 1px dashed #DEDEDE;
75 margin-right: 15px;
76 padding-top: 10px;
77 padding-bottom: 10px;
78 padding-left: 10px;
79 }
80
81 .td-item div {
82
83 }
84
85 .td-item button {
86 width: 90px;
87 height: 30px;
88 background: #2FA5FF;
89 border-radius: 4px;
90 border: none;
91 color: white;
92 line-height: 30px;
93 }
94
95 .fw {
96 height: auto;
97 }
98
99 .fw-title {
100 height: 40px;
101 font-size: 16px;
102 font-weight: 500;
103 color: #4A4A4A;
104 line-height: 40px;
105 background-color: #DEDEDE;
106 border: 1px solid #DEDEDE;
107 padding-left: 15px;
108 }
109
110 .fw-body {
111 display: flex;
112 flex-flow: row;
113 flex-wrap: wrap;
114 justify-content: space-between;
115
116 }
117
118 .fw-item {
119 width: 48%;
120 background: #FFFFFF;
121 border-radius: 2px;
122 display: flex;
123 flex-flow: row nowrap;
124 justify-content: space-between;
125 border-bottom: 1px dashed #DEDEDE;
126 margin-right: 15px;
127 padding-top: 10px;
128 padding-bottom: 10px;
129 padding-left: 10px;
130 }
131
132 .fw-item div {
133
134 }
135
136 .fw-item button {
137 width: 90px;
138 height: 30px;
139 background: #2FA5FF;
140 border-radius: 4px;
141 border: none;
142 color: white;
143 line-height: 30px;
144 }
145
146 .gzw {
147 height: auto;
148 }
149
150 .gzw-title {
151 height: 40px;
152 font-size: 16px;
153 font-weight: 500;
154 color: #4A4A4A;
155 line-height: 40px;
156 background-color: #DEDEDE;
157 border: 1px solid #DEDEDE;
158 padding-left: 15px;
159 }
160
161 .gzw-body {
162 display: flex;
163 flex-flow: row;
164 flex-wrap: wrap;
165 justify-content: space-between;
166
167 }
168
169 .gzw-item {
170 width: 48%;
171 height: auto;
172 background: #FFFFFF;
173 border-radius: 2px;
174 display: flex;
175 flex-flow: row nowrap;
176 justify-content: space-between;
177 border-bottom: 1px dashed #DEDEDE;
178 margin-right: 15px;
179 padding-top: 10px;
180 padding-bottom: 10px;
181 padding-left: 10px;
182 }
183
184 .gzw-item div {
185
186 }
187
188 .gzw-item button {
189 width: 90px;
190 height: 30px;
191 background: #2FA5FF;
192 border-radius: 4px;
193 border: none;
194 color: white;
195 line-height: 30px;
196 }
197
198 .sl {
199 height: auto;
200 }
201
202 .sl-title {
203 height: 40px;
204 font-size: 16px;
205 font-weight: 500;
206 color: #4A4A4A;
207 line-height: 40px;
208 background-color: #DEDEDE;
209 border: 1px solid #DEDEDE;
210 padding-left: 15px;
211 }
212
213 .sl-body {
214 display: flex;
215 flex-flow: row;
216 flex-wrap: wrap;
217 justify-content: space-between;
218
219 }
220
221 .sl-item {
222 width: 48%;
223 height: auto;
224 background: #FFFFFF;
225 border-radius: 2px;
226 display: flex;
227 flex-flow: row nowrap;
228 justify-content: space-between;
229 border-bottom: 1px dashed #DEDEDE;
230 margin-right: 15px;
231 padding-top: 10px;
232 padding-bottom: 10px;
233 padding-left: 10px;
234 }
235
236 .sl-item div {
237
238 }
239
240 .sl-item button {
241 width: 90px;
242 height: 30px;
243 background: #2FA5FF;
244 border-radius: 4px;
245 border: none;
246 color: white;
247 line-height: 30px;
248 }
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>业务指南</title>
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7 <meta name="format-detection" content="telephone=no">
8 <meta name="renderer" content="webkit">
9 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
10 <meta http-equiv="Cache-Control" content="no-siteapp"/>
11 <link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css"/>
12 <link rel="alternate icon" type="image/png" href="../../images/logo-realestate.png">
13 <link rel='icon' href='../../favicon.ico' type='image/x-ico'/>
14 <meta name="description" content=""/>
15 <meta name="keywords" content=""/>
16 <link rel="stylesheet" href="../../css/default.min.css?t=227"/>
17 <link rel="stylesheet" type="text/css" href="css/index.css">
18 </head>
19 <body>
20 <div class="main">
21 <div class="layui-tab layui-tab-card">
22 <ul class="layui-tab-title top">
23 <li class="layui-this">线上办理</li>
24 <li>线下办理</li>
25 </ul>
26 <div class="layui-tab-content">
27 <div class="layui-tab-item layui-show ">
28 <div class="xsbl-sort">
29 <li>全部</li>
30 <li>土地</li>
31 <li>房屋建筑物</li>
32 <li>构筑物</li>
33 <li>森林、林木</li>
34 <li>其他</li>
35 </div>
36 <div class="td">
37 <div class="td-title">
38 土地
39 </div>
40 <div class="td-body">
41 <div class="td-item">
42 <div>
43 <span>
44 土地-企业-转移登记（买卖）
45 </span>
46 </div>
47 <div>
48 <button>在线办理</button>
49 </div>
50 </div>
51 <div class="td-item">
52 <div>
53 <span>
54 土地-企业-转移登记（买卖）
55 </span>
56 </div>
57 <div>
58 <button>在线办理</button>
59 </div>
60 </div> <div class="td-item">
61 <div>
62 <span>
63 土地-企业-转移登记（买卖）
64 </span>
65 </div>
66 <div>
67 <button>在线办理</button>
68 </div>
69 </div>
70 </div>
71 </div> <div class="fw">
72 <div class="fw-title">
73 土地
74 </div>
75 <div class="fw-body">
76 <div class="fw-item">
77 <div>
78 <span>
79 土地-企业-转移登记（买卖）
80 </span>
81 </div>
82 <div>
83 <button>在线办理</button>
84 </div>
85 </div>
86 <div class="fw-item">
87 <div>
88 <span>
89 土地-企业-转移登记（买卖）
90 </span>
91 </div>
92 <div>
93 <button>在线办理</button>
94 </div>
95 </div> <div class="fw-item">
96 <div>
97 <span>
98 土地-企业-转移登记（买卖）
99 </span>
100 </div>
101 <div>
102 <button>在线办理</button>
103 </div>
104 </div>
105 </div>
106 </div> <div class="gzw">
107 <div class="gzw-title">
108 土地
109 </div>
110 <div class="gzw-body">
111 <div class="gzw-item">
112 <div>
113 <span>
114 土地-企业-转移登记（买卖）
115 </span>
116 </div>
117 <div>
118 <button>在线办理</button>
119 </div>
120 </div>
121 <div class="gzw-item">
122 <div>
123 <span>
124 土地-企业-转移登记（买卖）
125 </span>
126 </div>
127 <div>
128 <button>在线办理</button>
129 </div>
130 </div> <div class="gzw-item">
131 <div>
132 <span>
133 土地-企业-转移登记（买卖）
134 </span>
135 </div>
136 <div>
137 <button>在线办理</button>
138 </div>
139 </div>
140 </div>
141 </div> <div class="sl">
142 <div class="sl-title">
143 土地
144 </div>
145 <div class="sl-body">
146 <div class="sl-item">
147 <div>
148 <span>
149 土地-企业-转移登记（买卖）
150 </span>
151 </div>
152 <div>
153 <button>在线办理</button>
154 </div>
155 </div>
156 <div class="sl-item">
157 <div>
158 <span>
159 土地-企业-转移登记（买卖）
160 </span>
161 </div>
162 <div>
163 <button>在线办理</button>
164 </div>
165 </div> <div class="sl-item">
166 <div>
167 <span>
168 土地-企业-转移登记（买卖）
169 </span>
170 </div>
171 <div>
172 <button>在线办理</button>
173 </div>
174 </div>
175 </div>
176 </div>
177 </div>
178 <div class="layui-tab-item">内容2</div>
179 </div>
180 </div>
181 </div>
182 </body>
183 </html>
184 <!--[if (gte IE 9)|!(IE)]><!-->
185 <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
186 <!--<![endif]-->
187 <script type="text/javascript" src="../../lib/handlebars/handlebars.min.js"></script>
188 <script type="text/javascript" src="../../lib/iscroll/iscroll-probe.js"></script>
189 <script type="text/javascript" src="../../lib/amazeui/amazeui.min.js"></script>
190 <script type="text/javascript" src="../../lib/raty/jquery.raty.js"></script>
191 <script type="text/javascript" src="../../js/main.min.js?t=1"></script>
192 <script type="text/javascript" src="../../lib/layui/layui.js"></script>
193 <script>
194 layui.use('element', function () {
195 var $ = layui.jquery
196 , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
197 });
198 </script>
...\ No newline at end of file ...\ No newline at end of file