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 2 \ No newline at end of file
... ...
css/common.less
  View file @cf2f694
... ... @@ -11,6 +11,36 @@
11 11 @import "icon.css";
12 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 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 2 \ No newline at end of file
... ...
css/util.less
  View file @cf2f694
... ... @@ -173,6 +173,9 @@
173 173 color: #23ac38 !important;
174 174 }
175 175  
  176 +.background-white{
  177 + background-color: #FFF;
  178 +}
176 179 .background-gray{
177 180 background-color: #666 !important;
178 181 }
... ...
html/index.html
  View file @cf2f694
... ... @@ -50,8 +50,44 @@
50 50 </div>
51 51  
52 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 91 <li>
56 92 <a href="#">
57 93 <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
... ... @@ -89,7 +125,7 @@
89 125 </a>
90 126 </li>
91 127 </ul>
92   -
  128 +</div>
93 129  
94 130 <!-- section -->
95 131 <div class="m-section">
... ... @@ -282,12 +318,14 @@
282 318 </ul>
283 319  
284 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 330 <ul class="m-goods-items clearfix">
293 331 <li class="m-col-2">
... ... @@ -330,15 +368,15 @@
330 368  
331 369 <script src="../js/swipe.min.js"></script>
332 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 380 </script>
343 381 </body>
344 382  
... ...