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