dlstatic / seven-piece · Commits

Commit cf2f694982573fd2e653f662c601a22cefcc1cbb

Authored by bichao.dong
1 parent 55a2bc63

scroll

Inline Side-by-side
Showing 5 changed files with 91 additions and 1281 deletions
css/common.css
  View file @cf2f694
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
  View file @cf2f694
@@ -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
  View file @cf2f694
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
  View file @cf2f694
@@ -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
  View file @cf2f694
@@ -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