Commit fb0326e43e143338cdc8356b3beba602decb4e70
Merge branch 'master' of git3.diligrp.com:dlstatic/seven-piece
Showing
17 changed files
with
91 additions
and
1281 deletions
css/common.css
1 | -@import "icon.css"; | ||
2 | -@import "icon_admin.css"; | ||
3 | -* { | ||
4 | - -moz-tap-highlight-color: rgba(0, 0, 0, 0); | ||
5 | - -o-tap-highlight-color: rgba(0, 0, 0, 0); | ||
6 | - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | ||
7 | -} | ||
8 | -html { | ||
9 | - height: 100%; | ||
10 | -} | ||
11 | -html, | ||
12 | -body, | ||
13 | -div, | ||
14 | -span, | ||
15 | -object, | ||
16 | -iframe, | ||
17 | -h1, | ||
18 | -h2, | ||
19 | -h3, | ||
20 | -h4, | ||
21 | -h5, | ||
22 | -h6, | ||
23 | -p, | ||
24 | -blockquote, | ||
25 | -pre, | ||
26 | -abbr, | ||
27 | -address, | ||
28 | -cite, | ||
29 | -code, | ||
30 | -del, | ||
31 | -dfn, | ||
32 | -em, | ||
33 | -img, | ||
34 | -ins, | ||
35 | -kbd, | ||
36 | -q, | ||
37 | -samp, | ||
38 | -small, | ||
39 | -strong, | ||
40 | -sub, | ||
41 | -sup, | ||
42 | -var, | ||
43 | -b, | ||
44 | -i, | ||
45 | -dl, | ||
46 | -dt, | ||
47 | -dd, | ||
48 | -ol, | ||
49 | -ul, | ||
50 | -li, | ||
51 | -fieldset, | ||
52 | -form, | ||
53 | -label, | ||
54 | -legend, | ||
55 | -table, | ||
56 | -caption, | ||
57 | -tbody, | ||
58 | -tfoot, | ||
59 | -thead, | ||
60 | -tr, | ||
61 | -th, | ||
62 | -td, | ||
63 | -article, | ||
64 | -aside, | ||
65 | -canvas, | ||
66 | -details, | ||
67 | -figcaption, | ||
68 | -figure, | ||
69 | -footer, | ||
70 | -header, | ||
71 | -menu, | ||
72 | -nav, | ||
73 | -section, | ||
74 | -summary, | ||
75 | -time, | ||
76 | -mark, | ||
77 | -audio, | ||
78 | -video { | ||
79 | - margin: 0; | ||
80 | - padding: 0; | ||
81 | - border: 0; | ||
82 | - outline: 0; | ||
83 | - vertical-align: baseline; | ||
84 | - background: transparent; | ||
85 | -} | ||
86 | -body { | ||
87 | - font: 12px/1.5 sans-serif; | ||
88 | - background-color: #F5F5F5; | ||
89 | - position: relative; | ||
90 | - color: #333; | ||
91 | - min-height: 100%; | ||
92 | - overflow-x: hidden; | ||
93 | -} | ||
94 | -article, | ||
95 | -aside, | ||
96 | -details, | ||
97 | -figcaption, | ||
98 | -figure, | ||
99 | -footer, | ||
100 | -header, | ||
101 | -menu, | ||
102 | -nav, | ||
103 | -section { | ||
104 | - display: block; | ||
105 | -} | ||
106 | -nav ul { | ||
107 | - list-style: none; | ||
108 | -} | ||
109 | -li { | ||
110 | - list-style: none; | ||
111 | -} | ||
112 | -em { | ||
113 | - font-style: normal; | ||
114 | -} | ||
115 | -ins { | ||
116 | - background-color: #ff9; | ||
117 | - color: #000; | ||
118 | - text-decoration: none; | ||
119 | -} | ||
120 | -mark { | ||
121 | - background-color: #ff9; | ||
122 | - color: #000; | ||
123 | - font-style: italic; | ||
124 | - font-weight: bold; | ||
125 | -} | ||
126 | -table { | ||
127 | - border-collapse: collapse; | ||
128 | - border-spacing: 0; | ||
129 | -} | ||
130 | -hr { | ||
131 | - display: block; | ||
132 | - height: 1px; | ||
133 | - border: 0; | ||
134 | - border-top: 1px solid #cccccc; | ||
135 | - margin: 0; | ||
136 | - padding: 0; | ||
137 | -} | ||
138 | -input, | ||
139 | -select { | ||
140 | - vertical-align: middle; | ||
141 | -} | ||
142 | -input:focus, | ||
143 | -button:focus { | ||
144 | - outline: none; | ||
145 | -} | ||
146 | -a { | ||
147 | - color: #333; | ||
148 | - text-decoration: none; | ||
149 | - margin: 0; | ||
150 | - padding: 0; | ||
151 | - vertical-align: baseline; | ||
152 | - background: transparent; | ||
153 | -} | ||
154 | -a:active, | ||
155 | -a:visited { | ||
156 | - color: #333; | ||
157 | -} | ||
158 | -input, | ||
159 | -img { | ||
160 | - border: 0; | ||
161 | - vertical-align: middle; | ||
162 | -} | ||
163 | -textarea, | ||
164 | -input, | ||
165 | -a { | ||
166 | - -webkit-tap-highlight-color: transparent; | ||
167 | -} | ||
168 | -/* ๆธ ้คๆตฎๅจ */ | ||
169 | -.clearfix, | ||
170 | -.clear { | ||
171 | - display: inline-table; | ||
172 | - zoom: 1; | ||
173 | -} | ||
174 | -* html .clearfix, | ||
175 | -* html .clear { | ||
176 | - height: 1%; | ||
177 | -} | ||
178 | -* html .clearfix, | ||
179 | -* html .clear { | ||
180 | - zoom: 1; | ||
181 | -} | ||
182 | -.clearfix, | ||
183 | -.clear { | ||
184 | - display: block; | ||
185 | -} | ||
186 | -.clear { | ||
187 | - clear: both; | ||
188 | -} | ||
189 | -.clearfix:after, | ||
190 | -.clear:after { | ||
191 | - content: " "; | ||
192 | - display: block; | ||
193 | - height: 0; | ||
194 | - clear: both; | ||
195 | - visibility: hidden; | ||
196 | - line-height: 0px; | ||
197 | -} | ||
198 | -.border-1px { | ||
199 | - position: relative; | ||
200 | -} | ||
201 | -.border-1px:before, | ||
202 | -.border-1px:after { | ||
203 | - border-top: 1px solid #e2e2e2; | ||
204 | - content: ''; | ||
205 | - display: block; | ||
206 | - width: 100%; | ||
207 | - position: absolute; | ||
208 | - left: 0; | ||
209 | - z-index: 1; | ||
210 | -} | ||
211 | -.border-1px:before { | ||
212 | - top: 0; | ||
213 | -} | ||
214 | -.border-1px:after { | ||
215 | - bottom: 0; | ||
216 | -} | ||
217 | -.border-1px.border-top:after { | ||
218 | - display: none; | ||
219 | -} | ||
220 | -.border-1px.border-bottom:before { | ||
221 | - display: none; | ||
222 | -} | ||
223 | -.border-1px-full { | ||
224 | - position: relative; | ||
225 | -} | ||
226 | -.border-1px-full:after { | ||
227 | - content: ''; | ||
228 | - position: absolute; | ||
229 | - top: 0; | ||
230 | - left: 0; | ||
231 | - z-index: 1; | ||
232 | - border: 1px solid #e2e2e2; | ||
233 | - -webkit-box-sizing: border-box; | ||
234 | - box-sizing: border-box; | ||
235 | - width: 200%; | ||
236 | - height: 200%; | ||
237 | - -webkit-transform: scale(0.5); | ||
238 | - transform: scale(0.5); | ||
239 | - -webkit-transform-origin: left top; | ||
240 | - transform-origin: left top; | ||
241 | -} | ||
242 | -@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { | ||
243 | - .border-1px::after, | ||
244 | - .border-1px::before { | ||
245 | - -webkit-transform: scaleY(0.7); | ||
246 | - -webkit-transform-origin: 0 0; | ||
247 | - transform: scaleY(0.7); | ||
248 | - } | ||
249 | - .border-1px::after { | ||
250 | - -webkit-transform-origin: left bottom; | ||
251 | - } | ||
252 | -} | ||
253 | -@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { | ||
254 | - .border-1px::after, | ||
255 | - .border-1px::before { | ||
256 | - -webkit-transform: scaleY(0.5); | ||
257 | - transform: scaleY(0.5); | ||
258 | - } | ||
259 | -} | ||
260 | -/*************************************************** | ||
261 | -* feature : ๅ จๅฑๅคด้จ๏ผๆไพ้ป่ฎค ๆทฑ่ฒ(็ปฟๅบ็ฝๅญ) & ๆต ่ฒ(็ฝๅบ้ปๅญ)ไธป้ข; | ||
262 | -* update : 2015/02/03; | ||
263 | -* use : .m-header; | ||
264 | -* extend : .header-*; | ||
265 | -* example : <header class="m-header header-light"></header>; | ||
266 | -* desc : ้ป่ฎคไธบๆทฑ่ฒไธป้ข, ้่ฟ .header-light ๆฅๅผ็จๆต ่ฒไธป้ข; | ||
267 | -* feedback : ๆญคๅคๅกซๅ ฅ issue, ๅนถ่ฏท้ๅธฆไปฅไธไฟกๆฏ[os_version, browser_version, page_path, issue_description] | ||
268 | -* - demo => [windows 7, IE 8, http://diligrp.com/icon.html, ๅจไธๅฎheightไธๆช่ฝๅ็ดๅฑ ไธญ]; | ||
269 | -****************************************************/ | ||
270 | -.m-header { | ||
271 | - z-index: 5; | ||
272 | - color: #FFF; | ||
273 | - color: #ffffff; | ||
274 | - background-color: #23AC38; | ||
275 | - position: relative; | ||
276 | -} | ||
277 | -.m-header .head { | ||
278 | - padding: 0 50px; | ||
279 | - box-sizing: border-box; | ||
280 | - height: 44px; | ||
281 | - text-align: center; | ||
282 | -} | ||
283 | -.m-header .head h1 { | ||
284 | - display: inline-block; | ||
285 | - vertical-align: middle; | ||
286 | - line-height: 44px; | ||
287 | - font-weight: normal; | ||
288 | - font-size: 18px; | ||
289 | - white-space: nowrap; | ||
290 | - text-overflow: ellipsis; | ||
291 | - overflow: hidden; | ||
292 | -} | ||
293 | -.m-header .lt-bar, | ||
294 | -.m-header .rt-bar { | ||
295 | - position: absolute; | ||
296 | - left: 0; | ||
297 | - top: 0; | ||
298 | - bottom: 0; | ||
299 | - min-width: 44px; | ||
300 | - line-height: 44px; | ||
301 | - height: 100%; | ||
302 | - text-align: center; | ||
303 | - cursor: pointer; | ||
304 | - z-index: 1; | ||
305 | -} | ||
306 | -.m-header .lt-bar { | ||
307 | - float: left; | ||
308 | -} | ||
309 | -.m-header .lt-bar.text { | ||
310 | - padding-left: 10px; | ||
311 | - text-align: left; | ||
312 | -} | ||
313 | -.m-header .rt-bar { | ||
314 | - float: right; | ||
315 | - left: auto; | ||
316 | - right: 0; | ||
317 | -} | ||
318 | -.m-header .rt-bar.text { | ||
319 | - padding-right: 10px; | ||
320 | - text-align: right; | ||
321 | -} | ||
322 | -.m-header .text { | ||
323 | - text-align: center; | ||
324 | - line-height: 44px; | ||
325 | - font-size: 15px; | ||
326 | - color: #FFF; | ||
327 | -} | ||
328 | -.m-header.header-light { | ||
329 | - background-color: #FFF; | ||
330 | - color: #666; | ||
331 | -} | ||
332 | -.m-header.header-light .text { | ||
333 | - color: #666; | ||
334 | -} | ||
335 | -.m-header.header-light .m-input { | ||
336 | - color: #333; | ||
337 | -} | ||
338 | -.m-header.header-light .m-input::-webkit-input-placeholder { | ||
339 | - color: #999; | ||
340 | -} | ||
341 | -/* | ||
342 | - * Swiper 2.7.0 | ||
343 | - * Mobile touch slider and framework with hardware accelerated transitions | ||
344 | - * | ||
345 | - * http://www.idangero.us/sliders/swiper/ | ||
346 | - * | ||
347 | - * Copyright 2010-2014, Vladimir Kharlampidi | ||
348 | - * The iDangero.us | ||
349 | - * http://www.idangero.us/ | ||
350 | - * | ||
351 | - * Licensed under GPL & MIT | ||
352 | - * | ||
353 | - * Released on: August 30, 2014 | ||
354 | -*/ | ||
355 | -/* =============================================================== | ||
356 | -Basic Swiper Styles | ||
357 | -================================================================*/ | ||
358 | -.swiper-container { | ||
359 | - margin: 0 auto; | ||
360 | - position: relative; | ||
361 | - overflow: hidden; | ||
362 | - -webkit-backface-visibility: hidden; | ||
363 | - -moz-backface-visibility: hidden; | ||
364 | - -ms-backface-visibility: hidden; | ||
365 | - -o-backface-visibility: hidden; | ||
366 | - backface-visibility: hidden; | ||
367 | - /* Fix of Webkit flickering */ | ||
368 | - z-index: 1; | ||
369 | -} | ||
370 | -.swiper-wrapper { | ||
371 | - position: relative; | ||
372 | - width: 100%; | ||
373 | - -webkit-transition-property: -webkit-transform, left, top; | ||
374 | - -webkit-transition-duration: 0s; | ||
375 | - -webkit-transform: translate3d(0px, 0, 0); | ||
376 | - -webkit-transition-timing-function: ease; | ||
377 | - -moz-transition-property: -moz-transform, left, top; | ||
378 | - -moz-transition-duration: 0s; | ||
379 | - -moz-transform: translate3d(0px, 0, 0); | ||
380 | - -moz-transition-timing-function: ease; | ||
381 | - -o-transition-property: -o-transform, left, top; | ||
382 | - -o-transition-duration: 0s; | ||
383 | - -o-transform: translate3d(0px, 0, 0); | ||
384 | - -o-transition-timing-function: ease; | ||
385 | - -o-transform: translate(0px, 0px); | ||
386 | - -ms-transition-property: -ms-transform, left, top; | ||
387 | - -ms-transition-duration: 0s; | ||
388 | - -ms-transform: translate3d(0px, 0, 0); | ||
389 | - -ms-transition-timing-function: ease; | ||
390 | - transition-property: transform, left, top; | ||
391 | - transition-duration: 0s; | ||
392 | - transform: translate3d(0px, 0, 0); | ||
393 | - transition-timing-function: ease; | ||
394 | - -webkit-box-sizing: content-box; | ||
395 | - -moz-box-sizing: content-box; | ||
396 | - box-sizing: content-box; | ||
397 | -} | ||
398 | -.swiper-free-mode > .swiper-wrapper { | ||
399 | - -webkit-transition-timing-function: ease-out; | ||
400 | - -moz-transition-timing-function: ease-out; | ||
401 | - -ms-transition-timing-function: ease-out; | ||
402 | - -o-transition-timing-function: ease-out; | ||
403 | - transition-timing-function: ease-out; | ||
404 | - margin: 0 auto; | ||
405 | -} | ||
406 | -.swiper-slide { | ||
407 | - float: left; | ||
408 | - -webkit-box-sizing: content-box; | ||
409 | - -moz-box-sizing: content-box; | ||
410 | - box-sizing: content-box; | ||
411 | -} | ||
412 | -/* IE10 Windows Phone 8 Fixes */ | ||
413 | -.swiper-wp8-horizontal { | ||
414 | - -ms-touch-action: pan-y; | ||
415 | -} | ||
416 | -.swiper-wp8-vertical { | ||
417 | - -ms-touch-action: pan-x; | ||
418 | -} | ||
419 | -/* =============================================================== | ||
420 | -Your custom styles, here you need to specify container's and slide's | ||
421 | -sizes, pagination, etc. | ||
422 | -================================================================*/ | ||
423 | -.swiper-container { | ||
424 | - /* Specify Swiper's Size: */ | ||
425 | - /*width:200px; | ||
426 | - height: 100px;*/ | ||
427 | -} | ||
428 | -.swiper-slide { | ||
429 | - /* Specify Slides's Size: */ | ||
430 | - /*width: 100%; | ||
431 | - height: 100%;*/ | ||
432 | -} | ||
433 | -.swiper-slide-active { | ||
434 | - /* Specific active slide styling: */ | ||
435 | -} | ||
436 | -.swiper-slide-visible { | ||
437 | - /* Specific visible slide styling: */ | ||
438 | -} | ||
439 | -/* =============================================================== | ||
440 | -Pagination Styles | ||
441 | -================================================================*/ | ||
442 | -.swiper-pagination-switch { | ||
443 | - /* Stylize pagination button: */ | ||
444 | -} | ||
445 | -.swiper-active-switch { | ||
446 | - /* Specific active button style: */ | ||
447 | -} | ||
448 | -.swiper-visible-switch { | ||
449 | - /* Specific visible button style: */ | ||
450 | -} | ||
451 | -.swiper-pagination { | ||
452 | - position: absolute; | ||
453 | - text-align: center; | ||
454 | - -webkit-transition: 300ms; | ||
455 | - -moz-transition: 300ms; | ||
456 | - -o-transition: 300ms; | ||
457 | - transition: 300ms; | ||
458 | - -webkit-transform: translate3d(0, 0, 0); | ||
459 | - -ms-transform: translate3d(0, 0, 0); | ||
460 | - -o-transform: translate3d(0, 0, 0); | ||
461 | - transform: translate3d(0, 0, 0); | ||
462 | - z-index: 10; | ||
463 | -} | ||
464 | -.swiper-pagination { | ||
465 | - bottom: 10px; | ||
466 | - left: 0; | ||
467 | - width: 100%; | ||
468 | -} | ||
469 | -.swiper-pagination .swiper-pagination-switch { | ||
470 | - margin: 0 5px; | ||
471 | -} | ||
472 | -.swiper-pagination-switch { | ||
473 | - width: 8px; | ||
474 | - height: 8px; | ||
475 | - display: inline-block; | ||
476 | - /*background: #FFF;*/ | ||
477 | - background: none; | ||
478 | - -webkit-box-shadow: inset 0 0 0 2px #ddd; | ||
479 | - box-shadow: inset 0 0 0 2px #ddd; | ||
480 | - -webkit-box-shadow: inset hoff voff blur color; | ||
481 | - box-shadow: inset hoff voff blur color; | ||
482 | - border-radius: 100%; | ||
483 | - /* -webkit-transition: all ease-in-out .15s; | ||
484 | - -o-transition: all ease-in-out .15s; | ||
485 | - transition: all ease-in-out .15s;*/ | ||
486 | -} | ||
487 | -.swiper-active-switch { | ||
488 | - opacity: 1; | ||
489 | - -webkit-box-shadow: inset 0 0 0 4px #23AC38; | ||
490 | - box-shadow: inset 0 0 0 4px #23AC38; | ||
491 | - /*background: #23AC38;*/ | ||
492 | - /*-webkit-box-shadow: none;*/ | ||
493 | - /*box-shadow: none;*/ | ||
494 | -} | ||
495 | -.m-slider { | ||
496 | - height: 120px; | ||
497 | - position: relative; | ||
498 | - overflow: hidden; | ||
499 | - font-size: 0; | ||
500 | -} | ||
501 | -.m-slider a { | ||
502 | - display: block; | ||
503 | - width: 100%; | ||
504 | - height: 100%; | ||
505 | -} | ||
506 | -.m-slider img { | ||
507 | - display: inline-block; | ||
508 | - width: 100%; | ||
509 | - height: 100%; | ||
510 | - float: left; | ||
511 | -} | ||
512 | -.m-slider .swiper-container { | ||
513 | - height: 100%; | ||
514 | -} | ||
515 | -.m-slider .swiper-wrapper { | ||
516 | - height: 100%; | ||
517 | -} | ||
518 | -.m-section .section-head { | ||
519 | - line-height: 45px; | ||
520 | - padding: 0 10px; | ||
521 | - background-color: #fff; | ||
522 | - font-size: 14px; | ||
523 | - color: #666; | ||
524 | - text-align: left; | ||
525 | - font-weight: bold; | ||
526 | - margin-bottom: 10px; | ||
527 | -} | ||
528 | -.m-section .section-head:first-letter { | ||
529 | - font-size: 18px; | ||
530 | - color: #23ac38; | ||
531 | -} | ||
532 | -.section-items { | ||
533 | - margin-bottom: 10px; | ||
534 | -} | ||
535 | -.section-items .section-item { | ||
536 | - display: block; | ||
537 | - margin-bottom: 5px; | ||
538 | - width: 100%; | ||
539 | -} | ||
540 | -.section-items .section-item img { | ||
541 | - width: 100%; | ||
542 | - max-width: 100%; | ||
543 | -} | ||
544 | -.product-items { | ||
545 | - background-color: #FFF; | ||
546 | - margin-bottom: 10px; | ||
547 | -} | ||
548 | -.product-items .items .item { | ||
549 | - width: 33.33%; | ||
550 | - float: left; | ||
551 | - font-size: 13px; | ||
552 | - text-align: center; | ||
553 | - padding: 8px 0; | ||
554 | -} | ||
555 | -.product-items .items .item a { | ||
556 | - display: block; | ||
557 | - position: relative; | ||
558 | - z-index: 2; | ||
559 | -} | ||
560 | -.product-items .items .item h3 { | ||
561 | - font-size: 13px; | ||
562 | - padding: 0 5px; | ||
563 | - font-weight: 700; | ||
564 | - color: #333; | ||
565 | - line-height: 16px; | ||
566 | - padding: 0 10px; | ||
567 | - text-align: left; | ||
568 | - text-overflow: ellipsis; | ||
569 | - overflow: hidden; | ||
570 | - white-space: nowrap; | ||
571 | -} | ||
572 | -.product-items .items .item p { | ||
573 | - padding: 0 10px; | ||
574 | - text-align: left; | ||
575 | -} | ||
576 | -.product-items .items .item em { | ||
577 | - text-align: left; | ||
578 | - display: block; | ||
579 | - font-size: 13px; | ||
580 | - font-weight: 700; | ||
581 | - font-style: normal; | ||
582 | - color: #FA4535; | ||
583 | - text-overflow: ellipsis; | ||
584 | - overflow: hidden; | ||
585 | - white-space: nowrap; | ||
586 | -} | ||
587 | -.product-items .items .item span { | ||
588 | - display: block; | ||
589 | - text-align: center; | ||
590 | - overflow: hidden; | ||
591 | - white-space: nowrap; | ||
592 | - text-overflow: ellipsis; | ||
593 | -} | ||
594 | -.product-items .items .item .pic { | ||
595 | - max-width: 100%; | ||
596 | - height: 60px; | ||
597 | - display: inline-block; | ||
598 | - vertical-align: middle; | ||
599 | -} | ||
600 | -.product-items .items .item:after { | ||
601 | - border-left: none; | ||
602 | - border-top: none; | ||
603 | -} | ||
604 | -.m-list-view { | ||
605 | - margin-bottom: 10px; | ||
606 | -} | ||
607 | -.m-list-view .cell { | ||
608 | - font-size: 14px; | ||
609 | - padding: 0 0 0 15px; | ||
610 | - background-color: #FFF; | ||
611 | - overflow: hidden; | ||
612 | - position: relative; | ||
613 | - text-align: left; | ||
614 | -} | ||
615 | -.m-list-view .cell-header { | ||
616 | - background-color: #f8f8f8; | ||
617 | - padding: 0 10px; | ||
618 | -} | ||
619 | -.m-list-view .cell-header .title { | ||
620 | - font-size: 13px; | ||
621 | - color: #333; | ||
622 | - line-height: 35px; | ||
623 | - width: auto; | ||
624 | -} | ||
625 | -.m-list-view .cell-header .text { | ||
626 | - font-size: 13px; | ||
627 | - line-height: 35px; | ||
628 | - float: right; | ||
629 | - color: #9e9e9e; | ||
630 | - text-align: right; | ||
631 | - margin: 0; | ||
632 | -} | ||
633 | -.m-list-view .cell-basic { | ||
634 | - padding: 11px 10px; | ||
635 | -} | ||
636 | -.m-list-view .cell-basic .title, | ||
637 | -.m-list-view .cell-basic .text { | ||
638 | - float: none; | ||
639 | - display: inline-block; | ||
640 | - vertical-align: middle; | ||
641 | - margin: 0 10px 0 0; | ||
642 | - line-height: 1.5; | ||
643 | -} | ||
644 | -.m-list-view .cell-basic .sub-title { | ||
645 | - padding-top: 10px; | ||
646 | - font-size: 13px; | ||
647 | - color: #999; | ||
648 | -} | ||
649 | -.m-list-view .cell-radio { | ||
650 | - text-align: right; | ||
651 | - padding: 0 10px; | ||
652 | - margin-bottom: 10px; | ||
653 | - background-color: #eee; | ||
654 | -} | ||
655 | -.m-list-view .cell-radio .title { | ||
656 | - color: #333; | ||
657 | - width: auto; | ||
658 | - text-align: left; | ||
659 | -} | ||
660 | -.m-list-view .cell-radio .text { | ||
661 | - float: none; | ||
662 | - text-align: right; | ||
663 | -} | ||
664 | -.m-list-view .cell-radio .m-radio { | ||
665 | - margin-left: 8px; | ||
666 | -} | ||
667 | -.m-list-view .cell-radio .m-table-view { | ||
668 | - margin: 0 -10px; | ||
669 | -} | ||
670 | -.m-list-view .cell-radio .m-table-view .cell-radio { | ||
671 | - margin: 0; | ||
672 | - background-color: #FFF; | ||
673 | -} | ||
674 | -.m-list-view .cell-block { | ||
675 | - padding: 8px 10px; | ||
676 | -} | ||
677 | -.m-list-view .cell-block h3 { | ||
678 | - font-size: 16px; | ||
679 | - font-weight: normal; | ||
680 | - padding-right: 60px; | ||
681 | - white-space: nowrap; | ||
682 | - text-overflow: ellipsis; | ||
683 | - overflow: hidden; | ||
684 | -} | ||
685 | -.m-list-view .cell-block p { | ||
686 | - font-size: 14px; | ||
687 | - color: #666; | ||
688 | -} | ||
689 | -.m-list-view .cell-block .bottom { | ||
690 | - margin-top: 10px; | ||
691 | - padding-top: 8px; | ||
692 | - line-height: 30px; | ||
693 | -} | ||
694 | -.m-list-view .cell-extend .m-table-view { | ||
695 | - margin: 0 0 0 45px; | ||
696 | -} | ||
697 | -.m-list-view .cell-extend .m-table-view .cell { | ||
698 | - padding: 0; | ||
699 | -} | ||
700 | -.m-list-view .cell-extend .m-table-view .text { | ||
701 | - margin-left: 0; | ||
702 | -} | ||
703 | -.m-list-view .cell-pic { | ||
704 | - padding: 15px; | ||
705 | -} | ||
706 | -.m-list-view .cell-pic .pic { | ||
707 | - float: left; | ||
708 | -} | ||
709 | -.m-list-view .cell-pic .cont { | ||
710 | - margin-left: 90px; | ||
711 | -} | ||
712 | -.m-list-view .cell-pic h3 { | ||
713 | - font-size: 14px; | ||
714 | - font-weight: normal; | ||
715 | -} | ||
716 | -.m-list-view .cell-pic em { | ||
717 | - font-size: 16px; | ||
718 | - font-weight: normal; | ||
719 | -} | ||
720 | -.m-list-view .cell-pic p { | ||
721 | - color: #9b9b9b; | ||
722 | - font-size: 12px; | ||
723 | -} | ||
724 | -.m-list-view .acc-icon { | ||
725 | - position: relative; | ||
726 | - padding-right: 30px; | ||
727 | -} | ||
728 | -.m-list-view .acc-icon .acc { | ||
729 | - position: absolute; | ||
730 | - right: 0; | ||
731 | - top: 0; | ||
732 | - min-width: 30px; | ||
733 | - height: 100%; | ||
734 | - line-height: 44px; | ||
735 | - text-align: left; | ||
736 | - color: #999; | ||
737 | - text-align: right; | ||
738 | -} | ||
739 | -.m-list-view .acc-icon .acc .m-icon { | ||
740 | - margin-right: 4px; | ||
741 | -} | ||
742 | -.m-list-view .title { | ||
743 | - font-size: 15px; | ||
744 | - color: #999; | ||
745 | - float: left; | ||
746 | - font-weight: 400; | ||
747 | - line-height: 44px; | ||
748 | -} | ||
749 | -.m-list-view .text { | ||
750 | - display: block; | ||
751 | - font-size: 15px; | ||
752 | - color: #333; | ||
753 | - line-height: 44px; | ||
754 | - position: relative; | ||
755 | - white-space: nowrap; | ||
756 | - word-break: break-all; | ||
757 | - text-overflow: ellipsis; | ||
758 | - overflow: hidden; | ||
759 | -} | ||
760 | -.m-list-view .text .m-input { | ||
761 | - font-size: 15px; | ||
762 | -} | ||
763 | -.m-goods-items { | ||
764 | - padding: 0 5px 5px; | ||
765 | - overflow-x: scroll; | ||
766 | - overflow-y: hidden; | ||
767 | - -webkit-overflow-scrolling: touch; | ||
768 | -} | ||
769 | -.m-goods-items li { | ||
770 | - float: left; | ||
771 | - width: 110px; | ||
772 | - padding: 0 5px 10px; | ||
773 | - box-sizing: border-box; | ||
774 | -} | ||
775 | -.m-goods-items a { | ||
776 | - display: block; | ||
777 | - background-color: #fff; | ||
778 | - padding-bottom: 5px; | ||
779 | - position: relative; | ||
780 | -} | ||
781 | -.m-goods-items .hot { | ||
782 | - position: absolute; | ||
783 | - top: -1px; | ||
784 | - right: 10px; | ||
785 | - width: 20px; | ||
786 | - height: 56px; | ||
787 | - background: url(../images/icon_mark.png) 0 0 no-repeat; | ||
788 | - background-size: 100%; | ||
789 | - font-size: 0; | ||
790 | - overflow: hidden; | ||
791 | -} | ||
792 | -.m-goods-items .pic { | ||
793 | - display: block; | ||
794 | - width: 100%; | ||
795 | - height: 110px; | ||
796 | - margin: 0 auto 5px; | ||
797 | - background-position: center center; | ||
798 | - background-repeat: no-repeat; | ||
799 | - background-size: cover; | ||
800 | -} | ||
801 | -.m-goods-items h3 { | ||
802 | - font-size: 13px; | ||
803 | - padding: 0 5px; | ||
804 | - font-weight: 700; | ||
805 | - color: #333; | ||
806 | - text-align: left; | ||
807 | - line-height: 16px; | ||
808 | - height: 32px; | ||
809 | - overflow: hidden; | ||
810 | -} | ||
811 | -.m-goods-items em { | ||
812 | - text-align: left; | ||
813 | - display: block; | ||
814 | - padding: 0 5px; | ||
815 | - font-size: 13px; | ||
816 | - font-weight: 700; | ||
817 | - font-style: normal; | ||
818 | - color: #FA4535; | ||
819 | -} | ||
820 | -.m-goods-items .origin-price { | ||
821 | - font-size: 12px; | ||
822 | - color: #bbb; | ||
823 | - text-decoration: line-through; | ||
824 | -} | ||
825 | -.photo-wall { | ||
826 | - width: 100%; | ||
827 | - padding-left: 5px; | ||
828 | - box-sizing: border-box; | ||
829 | - margin-bottom: 5px; | ||
830 | -} | ||
831 | -.photo-wall .photo-item { | ||
832 | - float: left; | ||
833 | - box-sizing: border-box; | ||
834 | - padding: 0 5px 5px 0; | ||
835 | - height: 105px; | ||
836 | -} | ||
837 | -.photo-wall .photo-item img { | ||
838 | - width: 100%; | ||
839 | - height: 100%; | ||
840 | - max-width: 100%; | ||
841 | - max-height: 100%; | ||
842 | -} | ||
843 | -.photo-wall .photo-1p { | ||
844 | - width: 33.33%; | ||
845 | -} | ||
846 | -.photo-wall .photo-2p { | ||
847 | - width: 66.66%; | ||
848 | -} | ||
849 | -.m-nav { | ||
850 | - width: 100%; | ||
851 | - background-color: #444; | ||
852 | - font-size: 14px; | ||
853 | - color: #999; | ||
854 | - overflow: hidden; | ||
855 | - box-sizing: border-box; | ||
856 | -} | ||
857 | -.m-nav a { | ||
858 | - color: #999; | ||
859 | - padding: 0 10px; | ||
860 | - min-width: 70px; | ||
861 | -} | ||
862 | -.m-nav li { | ||
863 | - float: left; | ||
864 | - line-height: 40px; | ||
865 | - text-align: center; | ||
866 | - position: relative; | ||
867 | -} | ||
868 | -.m-nav li:last-child { | ||
869 | - padding-right: 0; | ||
870 | -} | ||
871 | -.m-nav .on a { | ||
872 | - color: #FFF; | ||
873 | - background-color: #23ac38; | ||
874 | - display: block; | ||
875 | - position: relative; | ||
876 | -} | ||
877 | -.m-tab { | ||
878 | - width: 100%; | ||
879 | - background-color: #FFF; | ||
880 | - font-size: 14px; | ||
881 | - color: #999; | ||
882 | - border-width: 1px 0; | ||
883 | - overflow: hidden; | ||
884 | - box-sizing: border-box; | ||
885 | - margin-bottom: 10px; | ||
886 | -} | ||
887 | -.m-tab a { | ||
888 | - display: block; | ||
889 | - color: #999; | ||
890 | - padding: 0 10px; | ||
891 | - min-width: 70px; | ||
892 | -} | ||
893 | -.m-tab li { | ||
894 | - float: left; | ||
895 | - line-height: 45px; | ||
896 | - text-align: center; | ||
897 | - position: relative; | ||
898 | -} | ||
899 | -.m-tab li:last-child { | ||
900 | - padding-right: 0; | ||
901 | -} | ||
902 | -.m-tab .on a { | ||
903 | - color: #23ac38; | ||
904 | - display: block; | ||
905 | - position: relative; | ||
906 | -} | ||
907 | -.m-tab .on a:after { | ||
908 | - content: ''; | ||
909 | - position: absolute; | ||
910 | - bottom: 0; | ||
911 | - left: 0; | ||
912 | - right: 0; | ||
913 | - height: 2px; | ||
914 | - background-color: #23ac38; | ||
915 | -} | ||
916 | -/*************************************************** | ||
917 | -* feature : ๅทฅๅ ท็ฑปclass๏ผๆไพๆตฎๅจๆธ ้คใๆๆฌๅฏน้ฝใๆพ็คบ้่็ญ; | ||
918 | -* update : 2015/02/03; | ||
919 | -* use : ๆ้ไฝฟ็จๅฏนๅบclassๅณๅฏ; | ||
920 | -* desc : ; | ||
921 | -* feedback : ๆญคๅคๅกซๅ ฅ issue, ๅนถ่ฏท้ๅธฆไปฅไธไฟกๆฏ[os_version, browser_version, page_path, issue_description] | ||
922 | -* - demo => [windows 7, IE 8, http://diligrp.com/icon.html, ๅจไธๅฎheightไธๆช่ฝๅ็ดๅฑ ไธญ]; | ||
923 | -****************************************************/ | ||
924 | -.text-left { | ||
925 | - text-align: left !important; | ||
926 | -} | ||
927 | -.text-center { | ||
928 | - text-align: center !important; | ||
929 | -} | ||
930 | -.text-right { | ||
931 | - text-align: right !important; | ||
932 | -} | ||
933 | -.text-nowrap { | ||
934 | - white-space: nowrap !important; | ||
935 | -} | ||
936 | -.text-overflow { | ||
937 | - overflow: hidden; | ||
938 | - text-overflow: ellipsis; | ||
939 | -} | ||
940 | -.text-lowercase { | ||
941 | - text-transform: lowercase; | ||
942 | -} | ||
943 | -.text-uppercase { | ||
944 | - text-transform: uppercase; | ||
945 | -} | ||
946 | -.text-capitalize { | ||
947 | - text-transform: capitalize; | ||
948 | -} | ||
949 | -.text-indent { | ||
950 | - text-indent: -999em; | ||
951 | -} | ||
952 | -.float-left { | ||
953 | - float: left !important; | ||
954 | -} | ||
955 | -.float-right { | ||
956 | - float: right !important; | ||
957 | -} | ||
958 | -.float-none { | ||
959 | - float: none !important; | ||
960 | -} | ||
961 | -.display-block { | ||
962 | - display: block !important; | ||
963 | -} | ||
964 | -.clearfix:after { | ||
965 | - content: ''; | ||
966 | - display: block; | ||
967 | - height: 0; | ||
968 | - overflow: hidden; | ||
969 | - font-size: 0; | ||
970 | - clear: both; | ||
971 | -} | ||
972 | -.m-hide { | ||
973 | - display: none !important; | ||
974 | - visibility: hidden; | ||
975 | - opacity: 0; | ||
976 | - z-index: -1; | ||
977 | -} | ||
978 | -.m-hidden { | ||
979 | - visibility: hidden; | ||
980 | - opacity: 0; | ||
981 | - z-index: -1; | ||
982 | -} | ||
983 | -.m-show { | ||
984 | - display: block !important; | ||
985 | - visibility: visible; | ||
986 | -} | ||
987 | -.m-separate { | ||
988 | - position: relative; | ||
989 | - width: 100%; | ||
990 | - line-height: 50px; | ||
991 | - text-align: center; | ||
992 | - font-size: 12px; | ||
993 | - color: #666; | ||
994 | - overflow: visible; | ||
995 | -} | ||
996 | -.m-more, | ||
997 | -a.m-more { | ||
998 | - display: block; | ||
999 | - font-size: 12px; | ||
1000 | - text-align: center; | ||
1001 | - color: #999; | ||
1002 | - line-height: 45px; | ||
1003 | - background-color: #FFF; | ||
1004 | -} | ||
1005 | -.m-animate-hide { | ||
1006 | - -webkit-transform: translate(0, 100%) translateZ(0) !important; | ||
1007 | - -ms-transform: translate(0, 100%) translateZ(0) !important; | ||
1008 | - -o-transform: translate(0, 100%) translateZ(0) !important; | ||
1009 | - transform: translate(0, 100%) translateZ(0) !important; | ||
1010 | -} | ||
1011 | -.m-animate-show { | ||
1012 | - -webkit-transform: translate(0, 0) translateZ(0) !important; | ||
1013 | - -ms-transform: translate(0, 0) translateZ(0) !important; | ||
1014 | - -o-transform: translate(0, 0) translateZ(0) !important; | ||
1015 | - transform: translate(0, 0) translateZ(0) !important; | ||
1016 | -} | ||
1017 | -.hidden { | ||
1018 | - opacity: 0; | ||
1019 | - z-index: -1; | ||
1020 | -} | ||
1021 | -.mask-hidden { | ||
1022 | - opacity: 0; | ||
1023 | -} | ||
1024 | -.font-white { | ||
1025 | - color: #FFF !important; | ||
1026 | -} | ||
1027 | -.font-white-opacity { | ||
1028 | - color: rgba(255, 255, 255, 0.8) !important; | ||
1029 | -} | ||
1030 | -.font-deep { | ||
1031 | - color: #333 !important; | ||
1032 | -} | ||
1033 | -.font-gray { | ||
1034 | - color: #666 !important; | ||
1035 | -} | ||
1036 | -.font-light { | ||
1037 | - color: #999 !important; | ||
1038 | -} | ||
1039 | -.font-yellow { | ||
1040 | - color: #FF9D2C !important; | ||
1041 | -} | ||
1042 | -.font-orange { | ||
1043 | - color: #FF6B00 !important; | ||
1044 | -} | ||
1045 | -.font-red { | ||
1046 | - color: #fa4535 !important; | ||
1047 | -} | ||
1048 | -.font-green { | ||
1049 | - color: #23ac38 !important; | ||
1050 | -} | ||
1051 | -.background-gray { | ||
1052 | - background-color: #666 !important; | ||
1053 | -} | ||
1054 | -.background-yellow { | ||
1055 | - background-color: #FF9D2C !important; | ||
1056 | -} | ||
1057 | -.background-orange { | ||
1058 | - background-color: #FF6B00 !important; | ||
1059 | -} | ||
1060 | -.background-red { | ||
1061 | - background-color: #fa4535 !important; | ||
1062 | -} | ||
1063 | -.background-green { | ||
1064 | - background-color: #23ac38 !important; | ||
1065 | -} | ||
1066 | -.position-relative { | ||
1067 | - position: relative; | ||
1068 | -} | ||
1069 | -.z-index2 { | ||
1070 | - z-index: 2; | ||
1071 | -} | ||
1072 | -.width-auto { | ||
1073 | - width: auto !important; | ||
1074 | -} | ||
1075 | -.width-200p { | ||
1076 | - width: 200%; | ||
1077 | -} | ||
1078 | -.m-col-1 { | ||
1079 | - width: 100% !important; | ||
1080 | -} | ||
1081 | -.m-col-2 { | ||
1082 | - width: 50% !important; | ||
1083 | -} | ||
1084 | -.m-col-3 { | ||
1085 | - width: 33.33% !important; | ||
1086 | -} | ||
1087 | -.m-col-4 { | ||
1088 | - width: 25% !important; | ||
1089 | -} | 1 | +@import "icon.css";@import "icon_admin.css";*{-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}html{height:100%}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:0 0}body{font:12px/1.5 sans-serif;background-color:#F5F5F5;position:relative;color:#333;min-height:100%;overflow-x:hidden}article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}nav ul{list-style:none}li{list-style:none}em{font-style:normal}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:0;padding:0}input,select{vertical-align:middle}button:focus,input:focus{outline:0}a{color:#333;text-decoration:none;margin:0;padding:0;vertical-align:baseline;background:0 0}a:active,a:visited{color:#333}img,input{border:0;vertical-align:middle}a,input,textarea{-webkit-tap-highlight-color:transparent}.clear,.clearfix{display:inline-table;zoom:1}* html .clear,* html .clearfix{height:1%}* html .clear,* html .clearfix{zoom:1}.clear,.clearfix{display:block}.clear{clear:both}.clear:after,.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;line-height:0}.border-1px{position:relative}.border-1px:after,.border-1px:before{border-top:1px solid #e2e2e2;content:'';display:block;width:100%;position:absolute;left:0;z-index:1}.border-1px:before{top:0}.border-1px:after{bottom:0}.border-1px.border-top:after{display:none}.border-1px.border-bottom:before{display:none}.border-1px-full{position:relative}.border-1px-full:after{content:'';position:absolute;top:0;left:0;z-index:1;border:1px solid #e2e2e2;-webkit-box-sizing:border-box;box-sizing:border-box;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:left top;transform-origin:left top}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){.border-1px::after,.border-1px::before{-webkit-transform:scaleY(.7);-webkit-transform-origin:0 0;transform:scaleY(.7)}.border-1px::after{-webkit-transform-origin:left bottom}}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.border-1px::after,.border-1px::before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}}.m-header{z-index:5;color:#FFF;color:#fff;background-color:#23AC38;position:relative}.m-header .head{padding:0 50px;box-sizing:border-box;height:44px;text-align:center}.m-header .head h1{display:inline-block;vertical-align:middle;line-height:44px;font-weight:400;font-size:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.m-header .lt-bar,.m-header .rt-bar{position:absolute;left:0;top:0;bottom:0;min-width:44px;line-height:44px;height:100%;text-align:center;cursor:pointer;z-index:1}.m-header .lt-bar{float:left}.m-header .lt-bar.text{padding-left:10px;text-align:left}.m-header .rt-bar{float:right;left:auto;right:0}.m-header .rt-bar.text{padding-right:10px;text-align:right}.m-header .text{text-align:center;line-height:44px;font-size:15px;color:#FFF}.m-header.header-light{background-color:#FFF;color:#666}.m-header.header-light .text{color:#666}.m-header.header-light .m-input{color:#333}.m-header.header-light .m-input::-webkit-input-placeholder{color:#999}.swiper-container{margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-wrapper{position:relative;width:100%;-webkit-transition-property:-webkit-transform,left,top;-webkit-transition-duration:0s;-webkit-transform:translate3d(0,0,0);-webkit-transition-timing-function:ease;-moz-transition-property:-moz-transform,left,top;-moz-transition-duration:0s;-moz-transform:translate3d(0,0,0);-moz-transition-timing-function:ease;-o-transition-property:-o-transform,left,top;-o-transition-duration:0s;-o-transform:translate3d(0,0,0);-o-transition-timing-function:ease;-o-transform:translate(0,0);-ms-transition-property:-ms-transform,left,top;-ms-transition-duration:0s;-ms-transform:translate3d(0,0,0);-ms-transition-timing-function:ease;transition-property:transform,left,top;transition-duration:0s;transform:translate3d(0,0,0);transition-timing-function:ease;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{float:left;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-wp8-horizontal{-ms-touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination{bottom:10px;left:0;width:100%}.swiper-pagination .swiper-pagination-switch{margin:0 5px}.swiper-pagination-switch{width:8px;height:8px;display:inline-block;background:0 0;-webkit-box-shadow:inset 0 0 0 2px #ddd;box-shadow:inset 0 0 0 2px #ddd;-webkit-box-shadow:inset hoff voff blur color;box-shadow:inset hoff voff blur color;border-radius:100%}.swiper-active-switch{opacity:1;-webkit-box-shadow:inset 0 0 0 4px #23AC38;box-shadow:inset 0 0 0 4px #23AC38}.m-slider{height:120px;position:relative;overflow:hidden;font-size:0}.m-slider a{display:block;width:100%;height:100%}.m-slider img{display:inline-block;width:100%;height:100%;float:left}.m-slider .swiper-container{height:100%}.m-slider .swiper-wrapper{height:100%}.m-section .section-head{line-height:45px;padding:0 10px;background-color:#fff;font-size:14px;color:#666;text-align:left;font-weight:700;margin-bottom:10px}.m-section .section-head:first-letter{font-size:18px;color:#23ac38}.section-items{margin-bottom:10px}.section-items .section-item{display:block;margin-bottom:5px;width:100%}.section-items .section-item img{width:100%;max-width:100%}.product-items{background-color:#FFF;margin-bottom:10px}.product-items .items .item{width:33.33%;float:left;font-size:13px;text-align:center;padding:8px 0}.product-items .items .item a{display:block;position:relative;z-index:2}.product-items .items .item h3{font-size:13px;padding:0 5px;font-weight:700;color:#333;line-height:16px;padding:0 10px;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.product-items .items .item p{padding:0 10px;text-align:left}.product-items .items .item em{text-align:left;display:block;font-size:13px;font-weight:700;font-style:normal;color:#FA4535;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.product-items .items .item span{display:block;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.product-items .items .item .pic{max-width:100%;height:60px;display:inline-block;vertical-align:middle}.product-items .items .item:after{border-left:none;border-top:none}.m-list-view{margin-bottom:10px}.m-list-view .cell{font-size:14px;padding:0 0 0 15px;background-color:#FFF;overflow:hidden;position:relative;text-align:left}.m-list-view .cell-header{background-color:#f8f8f8;padding:0 10px}.m-list-view .cell-header .title{font-size:13px;color:#333;line-height:35px;width:auto}.m-list-view .cell-header .text{font-size:13px;line-height:35px;float:right;color:#9e9e9e;text-align:right;margin:0}.m-list-view .cell-basic{padding:11px 10px}.m-list-view .cell-basic .text,.m-list-view .cell-basic .title{float:none;display:inline-block;vertical-align:middle;margin:0 10px 0 0;line-height:1.5}.m-list-view .cell-basic .sub-title{padding-top:10px;font-size:13px;color:#999}.m-list-view .cell-radio{text-align:right;padding:0 10px;margin-bottom:10px;background-color:#eee}.m-list-view .cell-radio .title{color:#333;width:auto;text-align:left}.m-list-view .cell-radio .text{float:none;text-align:right}.m-list-view .cell-radio .m-radio{margin-left:8px}.m-list-view .cell-radio .m-table-view{margin:0 -10px}.m-list-view .cell-radio .m-table-view .cell-radio{margin:0;background-color:#FFF}.m-list-view .cell-block{padding:8px 10px}.m-list-view .cell-block h3{font-size:16px;font-weight:400;padding-right:60px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.m-list-view .cell-block p{font-size:14px;color:#666}.m-list-view .cell-block .bottom{margin-top:10px;padding-top:8px;line-height:30px}.m-list-view .cell-extend .m-table-view{margin:0 0 0 45px}.m-list-view .cell-extend .m-table-view .cell{padding:0}.m-list-view .cell-extend .m-table-view .text{margin-left:0}.m-list-view .cell-pic{padding:15px}.m-list-view .cell-pic .pic{float:left}.m-list-view .cell-pic .cont{margin-left:90px}.m-list-view .cell-pic h3{font-size:14px;font-weight:400}.m-list-view .cell-pic em{font-size:16px;font-weight:400}.m-list-view .cell-pic p{color:#9b9b9b;font-size:12px}.m-list-view .acc-icon{position:relative;padding-right:30px}.m-list-view .acc-icon .acc{position:absolute;right:0;top:0;min-width:30px;height:100%;line-height:44px;text-align:left;color:#999;text-align:right}.m-list-view .acc-icon .acc .m-icon{margin-right:4px}.m-list-view .title{font-size:15px;color:#999;float:left;font-weight:400;line-height:44px}.m-list-view .text{display:block;font-size:15px;color:#333;line-height:44px;position:relative;white-space:nowrap;word-break:break-all;text-overflow:ellipsis;overflow:hidden}.m-list-view .text .m-input{font-size:15px}.m-goods-items{padding:0 5px 5px;overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling:touch}.m-goods-items li{float:left;width:110px;padding:0 5px 10px;box-sizing:border-box}.m-goods-items a{display:block;background-color:#fff;padding-bottom:5px;position:relative}.m-goods-items .hot{position:absolute;top:-1px;right:10px;width:20px;height:56px;background:url(../images/icon_mark.png)0 0 no-repeat;background-size:100%;font-size:0;overflow:hidden}.m-goods-items .pic{display:block;width:100%;height:110px;margin:0 auto 5px;background-position:center center;background-repeat:no-repeat;background-size:cover}.m-goods-items h3{font-size:13px;padding:0 5px;font-weight:700;color:#333;text-align:left;line-height:16px;height:32px;overflow:hidden}.m-goods-items em{text-align:left;display:block;padding:0 5px;font-size:13px;font-weight:700;font-style:normal;color:#FA4535}.m-goods-items .origin-price{font-size:12px;color:#bbb;text-decoration:line-through}.photo-wall{width:100%;padding-left:5px;box-sizing:border-box;margin-bottom:5px}.photo-wall .photo-item{float:left;box-sizing:border-box;padding:0 5px 5px 0;height:105px}.photo-wall .photo-item img{width:100%;height:100%;max-width:100%;max-height:100%}.photo-wall .photo-1p{width:33.33%}.photo-wall .photo-2p{width:66.66%}.m-nav{width:100%;background-color:#444;font-size:14px;color:#999;overflow:hidden;box-sizing:border-box}.m-nav a{color:#999;padding:0 10px;min-width:70px}.m-nav li{float:left;line-height:40px;text-align:center;position:relative}.m-nav li:last-child{padding-right:0}.m-nav .on a{color:#FFF;background-color:#23ac38;display:block;position:relative}.m-tab{width:100%;background-color:#FFF;font-size:14px;color:#999;border-width:1px 0;overflow:hidden;box-sizing:border-box;margin-bottom:10px}.m-tab a{display:block;color:#999;padding:0 10px;min-width:70px}.m-tab li{float:left;line-height:45px;text-align:center;position:relative}.m-tab li:last-child{padding-right:0}.m-tab .on a{color:#23ac38;display:block;position:relative}.m-tab .on a:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background-color:#23ac38}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-nowrap{white-space:nowrap!important}.text-overflow{overflow:hidden;text-overflow:ellipsis}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-indent{text-indent:-999em}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.display-block{display:block!important}.clearfix:after{content:'';display:block;height:0;overflow:hidden;font-size:0;clear:both}.m-hide{display:none!important;visibility:hidden;opacity:0;z-index:-1}.m-hidden{visibility:hidden;opacity:0;z-index:-1}.m-show{display:block!important;visibility:visible}.m-separate{position:relative;width:100%;line-height:50px;text-align:center;font-size:12px;color:#666;overflow:visible}.m-more,a.m-more{display:block;font-size:12px;text-align:center;color:#999;line-height:45px;background-color:#FFF}.m-animate-hide{-webkit-transform:translate(0,100%) translateZ(0)!important;-ms-transform:translate(0,100%) translateZ(0)!important;-o-transform:translate(0,100%) translateZ(0)!important;transform:translate(0,100%) translateZ(0)!important}.m-animate-show{-webkit-transform:translate(0,0) translateZ(0)!important;-ms-transform:translate(0,0) translateZ(0)!important;-o-transform:translate(0,0) translateZ(0)!important;transform:translate(0,0) translateZ(0)!important}.hidden{opacity:0;z-index:-1}.mask-hidden{opacity:0}.font-white{color:#FFF!important}.font-white-opacity{color:rgba(255,255,255,.8)!important}.font-deep{color:#333!important}.font-gray{color:#666!important}.font-light{color:#999!important}.font-yellow{color:#FF9D2C!important}.font-orange{color:#FF6B00!important}.font-red{color:#fa4535!important}.font-green{color:#23ac38!important}.background-white{background-color:#FFF}.background-gray{background-color:#666!important}.background-yellow{background-color:#FF9D2C!important}.background-orange{background-color:#FF6B00!important}.background-red{background-color:#fa4535!important}.background-green{background-color:#23ac38!important}.position-relative{position:relative}.z-index2{z-index:2}.width-auto{width:auto!important}.width-200p{width:200%}.m-col-1{width:100%!important}.m-col-2{width:50%!important}.m-col-3{width:33.33%!important}.m-col-4{width:25%!important}.scroll-wrap{overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:touch}.scroll-wrap .m-goods-items{white-space:nowrap}.scroll-wrap .m-goods-items li{float:none;display:inline;width:110px!important}.scroll-wrap .m-goods-items li a{display:inline-block;width:100px}.scroll-wrap .m-tab{white-space:nowrap;overflow:visible;width:auto}.scroll-wrap .m-tab li{float:none;display:inline;width:90px}.scroll-wrap .m-tab li a{display:inline-block} |
1090 | \ No newline at end of file | 2 | \ No newline at end of file |
css/common.less
@@ -11,6 +11,36 @@ | @@ -11,6 +11,36 @@ | ||
11 | @import "icon.css"; | 11 | @import "icon.css"; |
12 | @import "icon_admin.css"; | 12 | @import "icon_admin.css"; |
13 | 13 | ||
14 | +.scroll-wrap{ | ||
15 | + overflow-y: hidden; | ||
16 | + overflow-x:scroll; | ||
17 | + -webkit-overflow-scrolling: touch; | ||
18 | + .m-goods-items{ | ||
19 | + white-space: nowrap; | ||
20 | + li{ | ||
21 | + float: none; | ||
22 | + display: inline; | ||
23 | + width: 110px !important; | ||
24 | + a{ | ||
25 | + display: inline-block; | ||
26 | + width: 100px; | ||
27 | + } | ||
28 | + } | ||
29 | + } | ||
30 | + .m-tab{ | ||
31 | + white-space: nowrap; | ||
32 | + overflow: visible; | ||
33 | + width: auto; | ||
34 | + li{ | ||
35 | + float: none; | ||
36 | + display: inline; | ||
37 | + width: 90px; | ||
38 | + a{ | ||
39 | + display: inline-block; | ||
40 | + } | ||
41 | + } | ||
42 | + } | ||
43 | +} | ||
14 | //่ชๅฎไน ้ๅๅนถๅพ | 44 | //่ชๅฎไน ้ๅๅนถๅพ |
15 | // | 45 | // |
16 | // body{ | 46 | // body{ |
css/util.css
1 | -/*************************************************** | ||
2 | -* feature : ๅทฅๅ ท็ฑปclass๏ผๆไพๆตฎๅจๆธ ้คใๆๆฌๅฏน้ฝใๆพ็คบ้่็ญ; | ||
3 | -* update : 2015/02/03; | ||
4 | -* use : ๆ้ไฝฟ็จๅฏนๅบclassๅณๅฏ; | ||
5 | -* desc : ; | ||
6 | -* feedback : ๆญคๅคๅกซๅ ฅ issue, ๅนถ่ฏท้ๅธฆไปฅไธไฟกๆฏ[os_version, browser_version, page_path, issue_description] | ||
7 | -* - demo => [windows 7, IE 8, http://diligrp.com/icon.html, ๅจไธๅฎheightไธๆช่ฝๅ็ดๅฑ ไธญ]; | ||
8 | -****************************************************/ | ||
9 | -.text-left { | ||
10 | - text-align: left !important; | ||
11 | -} | ||
12 | -.text-center { | ||
13 | - text-align: center !important; | ||
14 | -} | ||
15 | -.text-right { | ||
16 | - text-align: right !important; | ||
17 | -} | ||
18 | -.text-nowrap { | ||
19 | - white-space: nowrap !important; | ||
20 | -} | ||
21 | -.text-overflow { | ||
22 | - overflow: hidden; | ||
23 | - text-overflow: ellipsis; | ||
24 | -} | ||
25 | -.text-lowercase { | ||
26 | - text-transform: lowercase; | ||
27 | -} | ||
28 | -.text-uppercase { | ||
29 | - text-transform: uppercase; | ||
30 | -} | ||
31 | -.text-capitalize { | ||
32 | - text-transform: capitalize; | ||
33 | -} | ||
34 | -.text-indent { | ||
35 | - text-indent: -999em; | ||
36 | -} | ||
37 | -.float-left { | ||
38 | - float: left !important; | ||
39 | -} | ||
40 | -.float-right { | ||
41 | - float: right !important; | ||
42 | -} | ||
43 | -.float-none { | ||
44 | - float: none !important; | ||
45 | -} | ||
46 | -.display-block { | ||
47 | - display: block !important; | ||
48 | -} | ||
49 | -.clearfix:after { | ||
50 | - content: ''; | ||
51 | - display: block; | ||
52 | - height: 0; | ||
53 | - overflow: hidden; | ||
54 | - font-size: 0; | ||
55 | - clear: both; | ||
56 | -} | ||
57 | -.m-hide { | ||
58 | - display: none !important; | ||
59 | - visibility: hidden; | ||
60 | - opacity: 0; | ||
61 | - z-index: -1; | ||
62 | -} | ||
63 | -.m-hidden { | ||
64 | - visibility: hidden; | ||
65 | - opacity: 0; | ||
66 | - z-index: -1; | ||
67 | -} | ||
68 | -.m-show { | ||
69 | - display: block !important; | ||
70 | - visibility: visible; | ||
71 | -} | ||
72 | -.m-separate { | ||
73 | - position: relative; | ||
74 | - width: 100%; | ||
75 | - line-height: 50px; | ||
76 | - text-align: center; | ||
77 | - font-size: 12px; | ||
78 | - color: #666; | ||
79 | - overflow: visible; | ||
80 | -} | ||
81 | -.m-more, | ||
82 | -a.m-more { | ||
83 | - display: block; | ||
84 | - font-size: 12px; | ||
85 | - text-align: center; | ||
86 | - color: #999; | ||
87 | - line-height: 45px; | ||
88 | - background-color: #FFF; | ||
89 | -} | ||
90 | -.m-animate-hide { | ||
91 | - -webkit-transform: translate(0, 100%) translateZ(0) !important; | ||
92 | - -ms-transform: translate(0, 100%) translateZ(0) !important; | ||
93 | - -o-transform: translate(0, 100%) translateZ(0) !important; | ||
94 | - transform: translate(0, 100%) translateZ(0) !important; | ||
95 | -} | ||
96 | -.m-animate-show { | ||
97 | - -webkit-transform: translate(0, 0) translateZ(0) !important; | ||
98 | - -ms-transform: translate(0, 0) translateZ(0) !important; | ||
99 | - -o-transform: translate(0, 0) translateZ(0) !important; | ||
100 | - transform: translate(0, 0) translateZ(0) !important; | ||
101 | -} | ||
102 | -.hidden { | ||
103 | - opacity: 0; | ||
104 | - z-index: -1; | ||
105 | -} | ||
106 | -.mask-hidden { | ||
107 | - opacity: 0; | ||
108 | -} | ||
109 | -.font-white { | ||
110 | - color: #FFF !important; | ||
111 | -} | ||
112 | -.font-white-opacity { | ||
113 | - color: rgba(255, 255, 255, 0.8) !important; | ||
114 | -} | ||
115 | -.font-deep { | ||
116 | - color: #333 !important; | ||
117 | -} | ||
118 | -.font-gray { | ||
119 | - color: #666 !important; | ||
120 | -} | ||
121 | -.font-light { | ||
122 | - color: #999 !important; | ||
123 | -} | ||
124 | -.font-yellow { | ||
125 | - color: #FF9D2C !important; | ||
126 | -} | ||
127 | -.font-orange { | ||
128 | - color: #FF6B00 !important; | ||
129 | -} | ||
130 | -.font-red { | ||
131 | - color: #fa4535 !important; | ||
132 | -} | ||
133 | -.font-green { | ||
134 | - color: #23ac38 !important; | ||
135 | -} | ||
136 | -.background-gray { | ||
137 | - background-color: #666 !important; | ||
138 | -} | ||
139 | -.background-yellow { | ||
140 | - background-color: #FF9D2C !important; | ||
141 | -} | ||
142 | -.background-orange { | ||
143 | - background-color: #FF6B00 !important; | ||
144 | -} | ||
145 | -.background-red { | ||
146 | - background-color: #fa4535 !important; | ||
147 | -} | ||
148 | -.background-green { | ||
149 | - background-color: #23ac38 !important; | ||
150 | -} | ||
151 | -.position-relative { | ||
152 | - position: relative; | ||
153 | -} | ||
154 | -.z-index2 { | ||
155 | - z-index: 2; | ||
156 | -} | ||
157 | -.width-auto { | ||
158 | - width: auto !important; | ||
159 | -} | ||
160 | -.width-200p { | ||
161 | - width: 200%; | ||
162 | -} | ||
163 | -.m-col-1 { | ||
164 | - width: 100% !important; | ||
165 | -} | ||
166 | -.m-col-2 { | ||
167 | - width: 50% !important; | ||
168 | -} | ||
169 | -.m-col-3 { | ||
170 | - width: 33.33% !important; | ||
171 | -} | ||
172 | -.m-col-4 { | ||
173 | - width: 25% !important; | ||
174 | -} | 1 | +.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-nowrap{white-space:nowrap!important}.text-overflow{overflow:hidden;text-overflow:ellipsis}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-indent{text-indent:-999em}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.display-block{display:block!important}.clearfix:after{content:'';display:block;height:0;overflow:hidden;font-size:0;clear:both}.m-hide{display:none!important;visibility:hidden;opacity:0;z-index:-1}.m-hidden{visibility:hidden;opacity:0;z-index:-1}.m-show{display:block!important;visibility:visible}.m-separate{position:relative;width:100%;line-height:50px;text-align:center;font-size:12px;color:#666;overflow:visible}.m-more,a.m-more{display:block;font-size:12px;text-align:center;color:#999;line-height:45px;background-color:#FFF}.m-animate-hide{-webkit-transform:translate(0,100%) translateZ(0)!important;-ms-transform:translate(0,100%) translateZ(0)!important;-o-transform:translate(0,100%) translateZ(0)!important;transform:translate(0,100%) translateZ(0)!important}.m-animate-show{-webkit-transform:translate(0,0) translateZ(0)!important;-ms-transform:translate(0,0) translateZ(0)!important;-o-transform:translate(0,0) translateZ(0)!important;transform:translate(0,0) translateZ(0)!important}.hidden{opacity:0;z-index:-1}.mask-hidden{opacity:0}.font-white{color:#FFF!important}.font-white-opacity{color:rgba(255,255,255,.8)!important}.font-deep{color:#333!important}.font-gray{color:#666!important}.font-light{color:#999!important}.font-yellow{color:#FF9D2C!important}.font-orange{color:#FF6B00!important}.font-red{color:#fa4535!important}.font-green{color:#23ac38!important}.background-white{background-color:#FFF}.background-gray{background-color:#666!important}.background-yellow{background-color:#FF9D2C!important}.background-orange{background-color:#FF6B00!important}.background-red{background-color:#fa4535!important}.background-green{background-color:#23ac38!important}.position-relative{position:relative}.z-index2{z-index:2}.width-auto{width:auto!important}.width-200p{width:200%}.m-col-1{width:100%!important}.m-col-2{width:50%!important}.m-col-3{width:33.33%!important}.m-col-4{width:25%!important} |
175 | \ No newline at end of file | 2 | \ No newline at end of file |
css/util.less
@@ -173,6 +173,9 @@ | @@ -173,6 +173,9 @@ | ||
173 | color: #23ac38 !important; | 173 | color: #23ac38 !important; |
174 | } | 174 | } |
175 | 175 | ||
176 | +.background-white{ | ||
177 | + background-color: #FFF; | ||
178 | +} | ||
176 | .background-gray{ | 179 | .background-gray{ |
177 | background-color: #666 !important; | 180 | background-color: #666 !important; |
178 | } | 181 | } |
html/index.html
@@ -50,8 +50,44 @@ | @@ -50,8 +50,44 @@ | ||
50 | </div> | 50 | </div> |
51 | 51 | ||
52 | <!-- goods --> | 52 | <!-- goods --> |
53 | - | ||
54 | - <ul class="m-goods-items width-200p clearfix"> | 53 | +<div class="scroll-wrap"> |
54 | + <ul class="m-goods-items clearfix"> | ||
55 | + <li> | ||
56 | + <a href="#"> | ||
57 | + <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div> | ||
58 | + <h3> ไธ็ ไบงๅฐๅฑฑไธๆฝๅๅธ ไบงๅฐๅฑฑไธๆฝๅๅธ</h3> | ||
59 | + <p> | ||
60 | + <em>0.8-0.9ๅ /ๆค</em> | ||
61 | + </p> | ||
62 | + <p> | ||
63 | + <em class="origin-price">1.5ๅ /ๆค</em> | ||
64 | + </p> | ||
65 | + </a> | ||
66 | + </li> | ||
67 | + <li> | ||
68 | + <a href="#"> | ||
69 | + <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div> | ||
70 | + <h3> ไธ็ ไบงๅฐๅฑฑไธๆฝๅๅธ ไบงๅฐๅฑฑไธๆฝๅๅธ</h3> | ||
71 | + <p> | ||
72 | + <em>0.8-0.9ๅ /ๆค</em> | ||
73 | + </p> | ||
74 | + <p> | ||
75 | + <em class="origin-price">1.5ๅ /ๆค</em> | ||
76 | + </p> | ||
77 | + </a> | ||
78 | + </li> | ||
79 | + <li> | ||
80 | + <a href="#"> | ||
81 | + <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div> | ||
82 | + <h3> ไธ็ ไบงๅฐๅฑฑไธๆฝๅๅธ ไบงๅฐๅฑฑไธๆฝๅๅธ</h3> | ||
83 | + <p> | ||
84 | + <em>0.8-0.9ๅ /ๆค</em> | ||
85 | + </p> | ||
86 | + <p> | ||
87 | + <em class="origin-price">1.5ๅ /ๆค</em> | ||
88 | + </p> | ||
89 | + </a> | ||
90 | + </li> | ||
55 | <li> | 91 | <li> |
56 | <a href="#"> | 92 | <a href="#"> |
57 | <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div> | 93 | <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div> |
@@ -89,7 +125,7 @@ | @@ -89,7 +125,7 @@ | ||
89 | </a> | 125 | </a> |
90 | </li> | 126 | </li> |
91 | </ul> | 127 | </ul> |
92 | - | 128 | +</div> |
93 | 129 | ||
94 | <!-- section --> | 130 | <!-- section --> |
95 | <div class="m-section"> | 131 | <div class="m-section"> |
@@ -282,12 +318,14 @@ | @@ -282,12 +318,14 @@ | ||
282 | </ul> | 318 | </ul> |
283 | 319 | ||
284 | <!-- tab --> | 320 | <!-- tab --> |
285 | - <ul class="m-tab width-200p border-1px border-bottom"> | ||
286 | - <li class="on"><a href="#">ไปๆฅๅฟ ๆข</a></li> | ||
287 | - <li><a href="#">ๅๅคๅฑ</a></li> | ||
288 | - <li><a href="#">ๆๆฏๅ่ดง</a></li> | ||
289 | - <li><a href="#">ๆๆฏๅ่ดง</a></li> | ||
290 | - </ul> | 321 | + <div class="scroll-wrap background-white"> |
322 | + <ul class="m-tab border-1px border-bottom"> | ||
323 | + <li class="on"><a href="#">ไปๆฅๅฟ ๆข</a></li> | ||
324 | + <li><a href="#">ๅๅคๅฑ</a></li> | ||
325 | + <li><a href="#">ๆๆฏๅ่ดง</a></li> | ||
326 | + <li><a href="#">ๆๆฏๅ่ดง</a></li> | ||
327 | + </ul> | ||
328 | + </div> | ||
291 | 329 | ||
292 | <ul class="m-goods-items clearfix"> | 330 | <ul class="m-goods-items clearfix"> |
293 | <li class="m-col-2"> | 331 | <li class="m-col-2"> |
@@ -330,15 +368,15 @@ | @@ -330,15 +368,15 @@ | ||
330 | 368 | ||
331 | <script src="../js/swipe.min.js"></script> | 369 | <script src="../js/swipe.min.js"></script> |
332 | <script> | 370 | <script> |
333 | - var swiper = new Swiper('.swiper-container', { /*่ฝฎๆญๅพ*/ | ||
334 | - pagination: '.swiper-pagination', | ||
335 | - paginationClickable: true, | ||
336 | - centeredSlides: true, | ||
337 | - loop: true, | ||
338 | - spaceBetween: 0, | ||
339 | - autoplay: 3000, | ||
340 | - autoplayDisableOnInteraction: false | ||
341 | - }); | 371 | + var swiper = new Swiper('.swiper-container', { /*่ฝฎๆญๅพ*/ |
372 | + pagination: '.swiper-pagination', | ||
373 | + paginationClickable: true, | ||
374 | + centeredSlides: true, | ||
375 | + loop: true, | ||
376 | + spaceBetween: 0, | ||
377 | + autoplay: 3000, | ||
378 | + autoplayDisableOnInteraction: false | ||
379 | + }); | ||
342 | </script> | 380 | </script> |
343 | </body> | 381 | </body> |
344 | 382 |
temp/p_1.jpg
0 โ 100644
44 KB
temp/p_2.jpg
0 โ 100644
40 KB
temp/p_3.jpg
0 โ 100644
44.1 KB
temp/pic_100.png
0 โ 100644
24.3 KB
temp/pic_220.png
0 โ 100644
64 KB
temp/pic_320.png
0 โ 100644
307 KB
temp/pic_80.png
0 โ 100644
36.5 KB
temp/wall_1.jpg
0 โ 100644
25.6 KB
temp/wall_2.jpg
0 โ 100644
21.4 KB
temp/wall_3.jpg
0 โ 100644
17.8 KB
temp/wall_4.jpg
0 โ 100644
8.11 KB
temp/wall_5.jpg
0 โ 100644
13.2 KB