fe / YOHOBUYWAP · Commits

Go to a project

Authored by 杨延青
Commit c496602986c14defd2bf0eb674ccb8faeef4bb8e 1 parent 3f5d48ee

merge develop/wap

Inline Side-by-side
Showing 10 changed files with 579 additions and 872 deletions
@@ -7,3 +7,7 @@ @@ -7,3 +7,7 @@
7 @import "recommend-for-you"; 7 @import "recommend-for-you";
8 @import "limit"; 8 @import "limit";
9 @import "limit-help"; 9 @import "limit-help";
  10 +
  11 +@import "shop-index";
  12 +@import "shop-prodfile";
  13 +@import "product-category";
1 -.limit-good-page {  
2 - background-color: #f4f4f4;  
3 - color: #444;  
4 -  
5 - .top {  
6 - font-size: 0.6rem;  
7 - height: 2rem;  
8 - line-height: 2.2rem;  
9 - margin-bottom: 0.1rem;  
10 - background-color: #fff;  
11 - padding: 0.2rem 0 0.2rem 0.5rem;  
12 -  
13 -  
14 - div {  
15 - width: 20%;  
16 - display: inline-block;  
17 - float: left;  
18 - img {  
19 - width: 1.5rem;  
20 - border: 1px solid #ccc;  
21 - border-radius: 100%;  
22 - position: relative;  
23 - top: 0.25rem;  
24 - }  
25 - }  
26 -  
27 - p {  
28 - display: inline-block;  
29 - float: left;  
30 - width: 80%;  
31 - }  
32 - }  
33 -  
34 - .detail {  
35 - background-color: #fff;  
36 - padding: 0.6rem 0.8rem;  
37 - border-bottom: 1px solid #e6e6e6;  
38 - margin-bottom: 1rem;  
39 -  
40 - .name {  
41 - font-size: 0.9rem;  
42 - margin-bottom: 0.5rem;  
43 - }  
44 - .sale-info {  
45 - height: 1rem;  
46 - line-height: 1rem;  
47 - }  
48 - .price {  
49 - font-size: 0.8rem;  
50 - color: #d0021b;  
51 - float: left;  
52 - }  
53 -  
54 - .date {  
55 - font-size: 0.6rem;  
56 - float: right;  
57 -  
58 - .text {  
59 - position: relative;  
60 - top: 0.08rem;  
61 - }  
62 - }  
63 - }  
64 -  
65 - .goodDesc {  
66 - padding: 0.5rem;  
67 - border-top: 1px solid #e6e6e6;  
68 - background-color: #fff;  
69 -  
70 - p {  
71 - font-size: 0.6rem;  
72 - line-height: 1rem;  
73 - text-indent: 2em;  
74 - }  
75 -  
76 - img {  
77 - margin: 0.3rem 0;  
78 - max-width: 100%;  
79 - }  
80 - }  
81 -  
82 - .bottom {  
83 - background-color: #fff;  
84 - border-top: 1px solid #e6e6e6;  
85 - padding: 0.5rem 2rem 2rem 2rem;  
86 - height: 3rem;  
87 - width: 12rem;  
88 - margin: 0 auto;  
89 -  
90 - .logo {  
91 - width: 100;  
92 - height: 2.5rem;  
93 -  
94 - background-image: image-url('logo-bottom.png');  
95 - background-size: 100%;  
96 - background-repeat: no-repeat;  
97 - background-position: center;  
98 - }  
99 -  
100 - .btn {  
101 - font-size: 0.8rem;  
102 - background-color: #fff;  
103 - border: 1px solid #444;  
104 - border-radius: 0.2rem;  
105 - padding: 0.3rem 0.6rem;  
106 - }  
107 -  
108 - .btn:active {  
109 - background-color: #ccc;  
110 - }  
111 -  
112 - .left, .right {  
113 - display: inline-block;  
114 - float: left;  
115 - }  
116 -  
117 - .left {  
118 - width: 39%;  
119 - }  
120 -  
121 - .right {  
122 - width: 60%;  
123 - font-size: 0.65rem;  
124 -  
125 - span {  
126 - display: block;  
127 - width: 95%;  
128 - margin: 0 auto;  
129 - }  
130 - }  
131 - }  
132 -}  
1 -.product-category {  
2 - font-size: 30rem / $pxConvertRem;  
3 - background-color: #fff;  
4 -  
5 - .allproduct {  
6 - position: relative;  
7 - padding: 15px 0px;  
8 - background: #fff;  
9 - border-top: 15px;  
10 - border-bottom: 15px;  
11 - padding-left: 32rem / $pxConvertRem;  
12 - border-top: 1px solid #e6e6e6;  
13 - }  
14 -  
15 - .margin-under-allproduct{  
16 - width: 100%;  
17 - height: 30rem / $pxConvertRem;  
18 - background-color: #f0f0f0;  
19 - }  
20 -  
21 - .category-container{  
22 - border-top: 1px solid #e6e6e6;  
23 - }  
24 - .arrow-icon {  
25 - position: absolute;  
26 - font-size: 16px;  
27 - top: 15px;  
28 - right: 20px;  
29 - color: #e1e1e1;  
30 - }  
31 -  
32 - .allproductParagaraph {  
33 - font-size: 18px;  
34 - left: 20px;  
35 - }  
36 -  
37 - .content {  
38 - background: #fff;  
39 -  
40 - &.hide {  
41 - display: none;  
42 - }  
43 - }  
44 -  
45 - .primary-level {  
46 - float: left;  
47 - box-sizing: border-box;  
48 - width: 100%;  
49 - position: absolute;  
50 - > li {  
51 - position:relative;  
52 - height: 89rem / $pxConvertRem;  
53 - line-height: 89rem / $pxConvertRem;  
54 - box-sizing: border-box;  
55 - border-bottom: 1px solid #e6e6e6;  
56 - background-color: #fff;  
57 - margin-left: 30rem / $pxConvertRem;  
58 - }  
59 - }  
60 -  
61 - .primary-level-trilangle{  
62 - float: right;  
63 - background: image-url('product/arrow.png');  
64 - margin-top: 14rem / $pxConvertRem;  
65 - width: 21rem / $pxConvertRem;  
66 - height: 60rem / $pxConvertRem;  
67 - background-repeat: no-repeat;  
68 - }  
69 -  
70 - .trilanglefont {  
71 - font-family: "iconfont" !important;  
72 - font-size: 30px;  
73 - font-style: normal;  
74 - text-decoration: none;  
75 - -webkit-font-smoothing: antialiased;  
76 - -webkit-text-stroke-width: 0.2px;  
77 - -moz-osx-font-smoothing: grayscale;  
78 - color: #f4f4f4;  
79 - }  
80 -  
81 -  
82 - .sub-level-container {  
83 - float: right;  
84 - box-sizing: border-box;  
85 - background: #f4f4f4;  
86 - width: 55%;  
87 - height: 100%;  
88 - position: relative;  
89 - }  
90 -  
91 - .sub-level {  
92 - width: 100%;  
93 -  
94 - &.hide {  
95 - display: none;  
96 - }  
97 -  
98 - > li {  
99 - box-sizing: border-box;  
100 - height: 89rem / $pxConvertRem;  
101 - line-height: 89rem / $pxConvertRem;  
102 - border-bottom: 1px solid #e6e6e6;  
103 - margin-left: 30rem / $pxConvertRem;  
104 - padding-left: 0rem / $pxConvertRem;  
105 -  
106 - &.highlight {  
107 - background: #dbdbdb;  
108 - margin-left: 0rem / $pxConvertRem;  
109 - padding-left: 30rem / $pxConvertRem;  
110 - }  
111 -  
112 - &:last-child {  
113 - border-bottom: none;  
114 - }  
115 - }  
116 -  
117 - a {  
118 - display: block;  
119 - height: 100%;  
120 - width: 100%;  
121 - color: #afafaf;  
122 - }  
123 - }  
124 -} 1 +.product-category {
  2 + font-size: 30px;
  3 + background-color: #fff;
  4 +
  5 + .allproduct {
  6 + position: relative;
  7 + padding: 15px 0;
  8 + background: #fff;
  9 + border-top: 15px;
  10 + border-bottom: 15px;
  11 + padding-left: 32px;
  12 + border-top: 1px solid #e6e6e6;
  13 + }
  14 +
  15 + .margin-under-allproduct{
  16 + width: 100%;
  17 + height: 30px;
  18 + background-color: #f0f0f0;
  19 + }
  20 +
  21 + .category-container{
  22 + border-top: 1px solid #e6e6e6;
  23 + }
  24 + .arrow-icon {
  25 + position: absolute;
  26 + font-size: 16px;
  27 + top: 15px;
  28 + right: 20px;
  29 + color: #e1e1e1;
  30 + }
  31 +
  32 + .allproductParagaraph {
  33 + font-size: 18px;
  34 + left: 20px;
  35 + }
  36 +
  37 + .content {
  38 + background: #fff;
  39 +
  40 + &.hide {
  41 + display: none;
  42 + }
  43 + }
  44 +
  45 + .primary-level {
  46 + float: left;
  47 + box-sizing: border-box;
  48 + width: 100%;
  49 + position: absolute;
  50 + > li {
  51 + position:relative;
  52 + height: 89px;
  53 + line-height: 89px;
  54 + box-sizing: border-box;
  55 + border-bottom: 1px solid #e6e6e6;
  56 + background-color: #fff;
  57 + margin-left: 30px;
  58 + }
  59 + }
  60 +
  61 + .primary-level-trilangle{
  62 + float: right;
  63 + background: url('product/arrow.png');
  64 + margin-top: 14px;
  65 + width: 21px;
  66 + height: 60px;
  67 + background-repeat: no-repeat;
  68 + }
  69 +
  70 + .trilanglefont {
  71 + font-family: "iconfont" !important;
  72 + font-size: 30px;
  73 + font-style: normal;
  74 + text-decoration: none;
  75 + -webkit-font-smoothing: antialiased;
  76 + -webkit-text-stroke-width: 0.2px;
  77 + -moz-osx-font-smoothing: grayscale;
  78 + color: #f4f4f4;
  79 + }
  80 +
  81 +
  82 + .sub-level-container {
  83 + float: right;
  84 + box-sizing: border-box;
  85 + background: #f4f4f4;
  86 + width: 55%;
  87 + height: 100%;
  88 + position: relative;
  89 + }
  90 +
  91 + .sub-level {
  92 + width: 100%;
  93 +
  94 + &.hide {
  95 + display: none;
  96 + }
  97 +
  98 + > li {
  99 + box-sizing: border-box;
  100 + height: 89px;
  101 + line-height: 89px;
  102 + border-bottom: 1px solid #e6e6e6;
  103 + margin-left: 30px;
  104 + padding-left: 0;
  105 +
  106 + &.highlight {
  107 + background: #dbdbdb;
  108 + margin-left: 0;
  109 + padding-left: 30px;
  110 + }
  111 +
  112 + &:last-child {
  113 + border-bottom: none;
  114 + }
  115 + }
  116 +
  117 + a {
  118 + display: block;
  119 + height: 100%;
  120 + width: 100%;
  121 + color: #afafaf;
  122 + }
  123 + }
  124 +}
1 -.shop-index {  
2 - position: absolute;  
3 - top: 0;  
4 - bottom: 0;  
5 - left: 0;  
6 - right: 0;  
7 - overflow: hidden;  
8 -  
9 - .branner-top {  
10 - width: 100%;  
11 - height: 200rem / $pxConvertRem;  
12 - position: relative;  
13 - overflow: hidden;  
14 - }  
15 -  
16 - .logo {  
17 - position: absolute;  
18 - overflow: hidden;  
19 - left: 30rem / $pxConvertRem;  
20 - bottom: 30rem / $pxConvertRem;  
21 - width: 100rem / $pxConvertRem;  
22 - height: 100rem / $pxConvertRem;  
23 - }  
24 -  
25 - .name {  
26 - color: #fff;  
27 - font-size: 28rem / $pxConvertRem;  
28 - position: absolute;  
29 - overflow: hidden;  
30 - left: 148rem / $pxConvertRem;  
31 - bottom: 20rem / $pxConvertRem;  
32 - }  
33 -  
34 - .collect {  
35 - width: 128rem / $pxConvertRem;  
36 - height: 50rem / $pxConvertRem;  
37 - position: absolute;  
38 - bottom: 30rem / $pxConvertRem;  
39 - right: 30rem / $pxConvertRem;  
40 - border-radius: 10rem / $pxConvertRem;  
41 - text-align: center;  
42 - background: image-url('product/collect.png') no-repeat;  
43 - background-size: contain;  
44 - }  
45 -  
46 - .nav {  
47 - width: 100%;  
48 - height: 88rem / $pxConvertRem;  
49 - margin: 0;  
50 - padding: 0;  
51 - border: 0;  
52 - font: inherit;  
53 - vertical-align: baseline;  
54 - list-style: none;  
55 - font-size: 0.7rem;  
56 - background: #fff;  
57 - overflow: hidden;  
58 - border-sizing: border-box;  
59 - border-bottom: 1rem / $pxConvertRem solid #e1e1e1;  
60 -  
61 - li{  
62 - color: #b1b1b1;  
63 - display: block;  
64 - height: 28rem /$pxConvertRem;  
65 - float: left;  
66 - line-height: 28rem /$pxConvertRem;  
67 - width: 24%;  
68 - text-align: center;  
69 - border-left: 1rem / $pxConvertRem solid #e1e1e1;  
70 - margin-top: 30rem / $pxConvertRem;  
71 - border-sizing: border-box;  
72 - color: #b1b1b1;  
73 -  
74 - &:first-child {  
75 - border-left: none;  
76 - }  
77 -  
78 - a {  
79 - color: #b1b1b1;  
80 - }  
81 - }  
82 -  
83 - .color {  
84 - color: #000;  
85 - }  
86 - }  
87 -  
88 - .main {  
89 - background: #f0f0f0;  
90 - padding-bottom: 1rem;  
91 - overflow: hidden;  
92 - }  
93 -  
94 - .banner-area {  
95 - @extend .banner-top;  
96 -  
97 - .banner-swiper ul {  
98 - height: 6.5rem;  
99 - }  
100 -  
101 - .swiper-pagination {  
102 - bottom: 1.5rem;  
103 - }  
104 -  
105 - }  
106 -  
107 - .hide {  
108 - display: hidden;  
109 - }  
110 -  
111 - .coupon {  
112 - width: 100%;  
113 - padding: 30rem / $pxConvertRem 0;  
114 - overflow: hidden;  
115 -  
116 - img {  
117 - width: 245rem / $pxConvertRem;  
118 - height: 120rem / $pxConvertRem;  
119 - vertical-align: top;  
120 - margin-left: 30rem / $pxConvertRem;  
121 - float: left;  
122 - }  
123 - }  
124 -  
125 - .multi-brands {  
126 - width: 100%;  
127 - height: 270rem / $pxConvertRem;  
128 - background: #fff;  
129 - border: 1px solid #e1e1e1;  
130 - border-top: none;  
131 - font-size: 20px;  
132 - text-align: center;  
133 - padding-top: 25rem / $pxConvertRem;  
134 - margin-bottom: 30rem / $pxConvertRem;  
135 - overflow: hidden;  
136 - }  
137 -  
138 - .multi-browse {  
139 - margin-top: 50rem / $pxConvertRem;  
140 -  
141 - @extend .swiper-container  
142 - }  
143 -  
144 - .brand-img {  
145 - margin-left: 30rem / $pxConvertRem;  
146 - width: 30%;  
147 - height: 55%;  
148 - overflow: hidden;  
149 - padding-bottom: 20rem / $pxConvertRem;  
150 - float: left;  
151 -  
152 - p {  
153 - font-size: 25rem / $pxConvertRem;  
154 - color: #b1b1b1;  
155 - padding-top: 10rem / $pxConvertRem;  
156 - }  
157 - }  
158 -  
159 - .spring {  
160 - margin: 0;  
161 - overflow: hidden;  
162 -  
163 - li {  
164 - width: 50%;  
165 - float: left;  
166 - text-align: center;  
167 - list-style: none;  
168 - display: list-item;  
169 -  
170 - img {  
171 - width: 90%;  
172 - border-radius: 10rem / $pxConvertRem;  
173 - vertical-align: top;  
174 - }  
175 - }  
176 - }  
177 -  
178 - .popularity-title {  
179 - background: #fff;  
180 - border-bottom: 1px solid #e8e8e8;  
181 - text-align: center;  
182 - line-height: 98rem / $pxConvertRem;  
183 - font-size: 0.8rem;  
184 - margin-top: 1rem;  
185 - position: relative;  
186 - }  
187 -  
188 - .more {  
189 - position: absolute;  
190 - right: .75rem;  
191 - top: 0;  
192 - bottom: 0;  
193 - color: #b0b0b0;  
194 - font-size: 1.25rem;  
195 - font-family: "iconfont" !important;  
196 - font-style: normal;  
197 - text-decoration: none;  
198 - }  
199 -  
200 - .product-list {  
201 - margin: 0;  
202 - padding: 0 0 30rem / $pxConvertRem 30rem / $pxConvertRem;  
203 - overflow: hidden;  
204 - background: #fff;  
205 -  
206 - li {  
207 - width: 275rem / $pxConvertRem;  
208 - height: 368rem / $pxConvertRem;  
209 - margin-top: 50rem / $pxConvertRem;  
210 - margin-right: 30rem / $pxConvertRem;  
211 - float: left;  
212 - text-align: center;  
213 - list-style: none;  
214 -  
215 - img {  
216 - width: 100%;  
217 - vertical-align: top;  
218 - }  
219 - }  
220 - }  
221 -  
222 - .list-price {  
223 - height: 60rem / $pxConvertRem;  
224 - background: #ABACAC;  
225 - color: #FFFFFF;  
226 - font-size: 22rem / $pxConvertRem;  
227 - margin-top: -60rem / $pxConvertRem;  
228 - position: relative;  
229 - opacity: 0.7;  
230 - padding-left: 15rem / $pxConvertRem;  
231 -  
232 - p {  
233 - margin: 0;  
234 - line-height: 32rem / $pxConvertRem;  
235 - text-align: left;  
236 - }  
237 - }  
238 -  
239 - .red {  
240 - color: red;  
241 - }  
242 -  
243 - .icon {  
244 - position: relative;  
245 -  
246 - i {  
247 - position: absolute;  
248 - }  
249 -  
250 - .up {  
251 - top: -5rem / $pxConvertRem;  
252 - left: 8rem / $pxConvertRem;  
253 - }  
254 -  
255 - .down {  
256 - top: 8rem / $pxConvertRem;  
257 - left: 8rem / $pxConvertRem;  
258 - }  
259 - }  
260 -  
261 - .iconfont {  
262 - color: #b1b1b1;  
263 - }  
264 -  
265 - .cur {  
266 - color: #000;  
267 - }  
268 -  
269 - .goods-container {  
270 - position: relative;  
271 - min-height: 440rem / $pxConvertRem;  
272 - padding-left: 0.375rem;  
273 - padding-top: 20rem / $pxConvertRem;  
274 - border-bottom: 1px solid #e0e0e0;  
275 - }  
276 -  
277 - .discount-area {  
278 - @extend .discount-page;  
279 -  
280 - .list-nav li {  
281 - display: block;  
282 - height: 28rem / $pxConvertRem;  
283 - float: left;  
284 - line-height: 28rem / $pxConvertRem;  
285 - width: 24%;  
286 - text-align: center;  
287 - border-left: 1px solid #e1e1e1;  
288 - margin-top: 30rem / $pxConvertRem;  
289 - margin-bottom: 30rem / $pxConvertRem;  
290 - border-sizing: border-box;  
291 -  
292 - span {  
293 - font-size: 0.7rem;  
294 - }  
295 -  
296 - &:first-child {  
297 - border-left: none;  
298 - }  
299 - }  
300 -  
301 - .list-nav .icon .up {  
302 - top: -6rem / $pxConvertRem;  
303 - }  
304 -  
305 - .list-nav .icon .down {  
306 - top: 8rem / $pxConvertRem;  
307 - }  
308 -  
309 - .goods-container {  
310 - padding-top: 30rem / $pxConvertRem;  
311 - padding-bottom: 100rem / $pxConvertRem;  
312 - }  
313 - }  
314 -  
315 - .search-area {  
316 - @extend .search-page;  
317 - }  
318 -  
319 - .hide {  
320 - display: none;  
321 - }  
322 -  
323 - .nav-title {  
324 - position: absolute;  
325 - margin-left: 200rem / $pxConvertRem;  
326 - height: 100%;  
327 - font-size: 36rem / $pxConvertRem;  
328 - color: #fff;  
329 - font-weight: bold;  
330 - top: 0;  
331 - right: 0;  
332 - left: 0;  
333 - overflow: hidden;  
334 - white-space: nowrap;  
335 - text-overflow: ellipsis;  
336 - text-align: center;  
337 -  
338 - }  
339 -  
340 - .shop-foot-wrapper {  
341 - position: absolute;  
342 - bottom: 0;  
343 - display: table;  
344 - width: 100%;  
345 - height: 2.2rem;  
346 - line-height: 2.2rem;  
347 - font-size: 0.7rem;  
348 - background: #fff;  
349 - border-top: 1px solid #eaeaea;  
350 -  
351 -  
352 - ul {  
353 - display: table-row;  
354 - }  
355 -  
356 - li {  
357 - display: table-cell;  
358 - text-align: center;  
359 -  
360 - .wall {  
361 - width: 0;  
362 - height: 0.8rem;  
363 - margin-top: 0.7rem;  
364 - float: right;  
365 - border-right: 1px solid #eaeaea;  
366 - display: inline-block;  
367 - }  
368 - }  
369 -  
370 - .sub-group {  
371 - position: absolute;  
372 - background: #fff;  
373 - border-right: 1px solid #eaeaea;  
374 - border-radius: 5px;  
375 - bottom: 2.6rem;  
376 - width: 30%;  
377 -  
378 - dl {  
379 - width: 80%;  
380 - margin: 0 auto;  
381 - }  
382 -  
383 - dd {  
384 - line-height: 2rem;  
385 - text-align: center;  
386 - border-top: 1px solid #eaeaea;  
387 - }  
388 -  
389 - dd:first-child {  
390 - border-top: 0;  
391 - }  
392 - }  
393 -  
394 - .sharp {  
395 - position: absolute;  
396 - width: 100%;  
397 - height: 8px;  
398 - background: image-url("/img/product/sharp.png") no-repeat center center;  
399 - }  
400 - }  
401 -  
402 - .bytouch{  
403 - background:#eee;  
404 - }  
405 - 1 +.shop-index {
  2 + position: absolute;
  3 + top: 0;
  4 + bottom: 0;
  5 + left: 0;
  6 + right: 0;
  7 + overflow: hidden;
  8 +
  9 + .branner-top {
  10 + width: 100%;
  11 + height: 200px;
  12 + position: relative;
  13 + overflow: hidden;
  14 + }
  15 +
  16 + .logo {
  17 + position: absolute;
  18 + overflow: hidden;
  19 + left: 30px;
  20 + bottom: 30px;
  21 + width: 100px;
  22 + height: 100px;
  23 + }
  24 +
  25 + .name {
  26 + color: #fff;
  27 + font-size: 28px;
  28 + position: absolute;
  29 + overflow: hidden;
  30 + left: 148px;
  31 + bottom: 20px;
  32 + }
  33 +
  34 + .collect {
  35 + width: 128px;
  36 + height: 50px;
  37 + position: absolute;
  38 + bottom: 30px;
  39 + right: 30px;
  40 + border-radius: 10px;
  41 + text-align: center;
  42 + background: image-url('product/collect.png') no-repeat;
  43 + background-size: contain;
  44 + }
  45 +
  46 + .nav {
  47 + width: 100%;
  48 + height: 88px;
  49 + margin: 0;
  50 + padding: 0;
  51 + border: 0;
  52 + font: inherit;
  53 + vertical-align: baseline;
  54 + list-style: none;
  55 + font-size: 28px;
  56 + background: #fff;
  57 + overflow: hidden;
  58 + border-sizing: border-box;
  59 + border-bottom: 1px solid #e1e1e1;
  60 +
  61 + li{
  62 + color: #b1b1b1;
  63 + display: block;
  64 + height: 28px;
  65 + float: left;
  66 + line-height: 28px;
  67 + width: 24%;
  68 + text-align: center;
  69 + border-left: 1px solid #e1e1e1;
  70 + margin-top: 30px;
  71 + border-sizing: border-box;
  72 + color: #b1b1b1;
  73 +
  74 + &:first-child {
  75 + border-left: none;
  76 + }
  77 +
  78 + a {
  79 + color: #b1b1b1;
  80 + }
  81 + }
  82 +
  83 + .color {
  84 + color: #000;
  85 + }
  86 + }
  87 +
  88 + .main {
  89 + background: #f0f0f0;
  90 + padding-bottom: 40px;
  91 + overflow: hidden;
  92 + }
  93 +
  94 + .banner-area {
  95 + @extend .banner-top;
  96 +
  97 + .banner-swiper ul {
  98 + height: 260px;
  99 + }
  100 +
  101 + .swiper-pagination {
  102 + bottom: 60px;
  103 + }
  104 +
  105 + }
  106 +
  107 + .hide {
  108 + display: hidden;
  109 + }
  110 +
  111 + .coupon {
  112 + width: 100%;
  113 + padding: 30px 0;
  114 + overflow: hidden;
  115 +
  116 + img {
  117 + width: 245px;
  118 + height: 120px;
  119 + vertical-align: top;
  120 + margin-left: 30px;
  121 + float: left;
  122 + }
  123 + }
  124 +
  125 + .multi-brands {
  126 + width: 100%;
  127 + height: 270px;
  128 + background: #fff;
  129 + border: 1px solid #e1e1e1;
  130 + border-top: none;
  131 + font-size: 20px;
  132 + text-align: center;
  133 + padding-top: 25px;
  134 + margin-bottom: 30px;
  135 + overflow: hidden;
  136 + }
  137 +
  138 + .multi-browse {
  139 + margin-top: 50px;
  140 +
  141 + @extend .swiper-container
  142 + }
  143 +
  144 + .brand-img {
  145 + margin-left: 30px;
  146 + width: 30%;
  147 + height: 55%;
  148 + overflow: hidden;
  149 + padding-bottom: 20px;
  150 + float: left;
  151 +
  152 + p {
  153 + font-size: 25px;
  154 + color: #b1b1b1;
  155 + padding-top: 10px;
  156 + }
  157 + }
  158 +
  159 + .spring {
  160 + margin: 0;
  161 + overflow: hidden;
  162 +
  163 + li {
  164 + width: 50%;
  165 + float: left;
  166 + text-align: center;
  167 + list-style: none;
  168 + display: list-item;
  169 +
  170 + img {
  171 + width: 90%;
  172 + border-radius: 10px;
  173 + vertical-align: top;
  174 + }
  175 + }
  176 + }
  177 +
  178 + .popularity-title {
  179 + background: #fff;
  180 + border-bottom: 1px solid #e8e8e8;
  181 + text-align: center;
  182 + line-height: 98px;
  183 + font-size: 32px;
  184 + margin-top: 40px;
  185 + position: relative;
  186 + }
  187 +
  188 + .more {
  189 + position: absolute;
  190 + right: 30px;
  191 + top: 0;
  192 + bottom: 0;
  193 + color: #b0b0b0;
  194 + font-size: 50px;
  195 + font-family: "iconfont" !important;
  196 + font-style: normal;
  197 + text-decoration: none;
  198 + }
  199 +
  200 + .product-list {
  201 + margin: 0;
  202 + padding: 0 0 30px 30px;
  203 + overflow: hidden;
  204 + background: #fff;
  205 +
  206 + li {
  207 + width: 275px;
  208 + height: 368px;
  209 + margin-top: 50px;
  210 + margin-right: 30px;
  211 + float: left;
  212 + text-align: center;
  213 + list-style: none;
  214 +
  215 + img {
  216 + width: 100%;
  217 + vertical-align: top;
  218 + }
  219 + }
  220 + }
  221 +
  222 + .list-price {
  223 + height: 60px;
  224 + background: #ABACAC;
  225 + color: #FFFFFF;
  226 + font-size: 22px;
  227 + margin-top: -60px;
  228 + position: relative;
  229 + opacity: 0.7;
  230 + padding-left: 15px;
  231 +
  232 + p {
  233 + margin: 0;
  234 + line-height: 32px;
  235 + text-align: left;
  236 + }
  237 + }
  238 +
  239 + .red {
  240 + color: red;
  241 + }
  242 +
  243 + .icon {
  244 + position: relative;
  245 +
  246 + i {
  247 + position: absolute;
  248 + }
  249 +
  250 + .up {
  251 + top: -5px;
  252 + left: 8px;
  253 + }
  254 +
  255 + .down {
  256 + top: 8px;
  257 + left: 8px;
  258 + }
  259 + }
  260 +
  261 + .iconfont {
  262 + color: #b1b1b1;
  263 + }
  264 +
  265 + .cur {
  266 + color: #000;
  267 + }
  268 +
  269 + .goods-container {
  270 + position: relative;
  271 + min-height: 440px;
  272 + padding-left: 15px;
  273 + padding-top: 20px;
  274 + border-bottom: 1px solid #e0e0e0;
  275 + }
  276 +
  277 + .discount-area {
  278 + @extend .discount-page;
  279 +
  280 + .list-nav li {
  281 + display: block;
  282 + height: 28px;
  283 + float: left;
  284 + line-height: 28px;
  285 + width: 24%;
  286 + text-align: center;
  287 + border-left: 1px solid #e1e1e1;
  288 + margin-top: 30px;
  289 + margin-bottom: 30px;
  290 + border-sizing: border-box;
  291 +
  292 + span {
  293 + font-size: 28px;
  294 + }
  295 +
  296 + &:first-child {
  297 + border-left: none;
  298 + }
  299 + }
  300 +
  301 + .list-nav .icon .up {
  302 + top: -6px;
  303 + }
  304 +
  305 + .list-nav .icon .down {
  306 + top: 8px;
  307 + }
  308 +
  309 + .goods-container {
  310 + padding-top: 30px;
  311 + padding-bottom: 100px;
  312 + }
  313 + }
  314 +
  315 + .search-area {
  316 + @extend .search-page;
  317 + }
  318 +
  319 + .hide {
  320 + display: none;
  321 + }
  322 +
  323 + .nav-title {
  324 + position: absolute;
  325 + margin-left: 200px;
  326 + height: 100%;
  327 + font-size: 36px;
  328 + color: #fff;
  329 + font-weight: bold;
  330 + top: 0;
  331 + right: 0;
  332 + left: 0;
  333 + overflow: hidden;
  334 + white-space: nowrap;
  335 + text-overflow: ellipsis;
  336 + text-align: center;
  337 +
  338 + }
  339 +
  340 + .shop-foot-wrapper {
  341 + position: absolute;
  342 + bottom: 0;
  343 + display: table;
  344 + width: 100%;
  345 + height: 88px;
  346 + line-height: 88px;
  347 + font-size: 28px;
  348 + background: #fff;
  349 + border-top: 1px solid #eaeaea;
  350 +
  351 +
  352 + ul {
  353 + display: table-row;
  354 + }
  355 +
  356 + li {
  357 + display: table-cell;
  358 + text-align: center;
  359 +
  360 + .wall {
  361 + width: 0;
  362 + height: 28px;
  363 + margin-top: 30px;
  364 + float: right;
  365 + border-right: 1px solid #eaeaea;
  366 + display: inline-block;
  367 + }
  368 + }
  369 +
  370 + .sub-group {
  371 + position: absolute;
  372 + background: #fff;
  373 + border-right: 1px solid #eaeaea;
  374 + border-radius: 5px;
  375 + bottom: 104px;
  376 + width: 30%;
  377 +
  378 + dl {
  379 + width: 80%;
  380 + margin: 0 auto;
  381 + }
  382 +
  383 + dd {
  384 + line-height: 80px;
  385 + text-align: center;
  386 + border-top: 1px solid #eaeaea;
  387 + }
  388 +
  389 + dd:first-child {
  390 + border-top: 0;
  391 + }
  392 + }
  393 +
  394 + .sharp {
  395 + position: absolute;
  396 + width: 100%;
  397 + height: 8px;
  398 + background: url('product/sharp.png') no-repeat center center;
  399 + }
  400 + }
  401 +
  402 + .bytouch{
  403 + background:#eee;
  404 + }
  405 +
406 } 406 }
1 -.shop-introduce{  
2 - .banner {  
3 - margin: 30px auto;  
4 - width: auto;  
5 - height: auto;  
6 - display: block;  
7 - background-size: 100%;  
8 - }  
9 -  
10 - .descripition {  
11 - margin: 40px 20px 0px 20px;  
12 - font-size: 16px;  
13 - line-height: 22px;  
14 - padding: 20px 0;  
15 - border-top: 1px solid #e6e6e6;  
16 - border-bottom: 1px solid #e6e6e6;  
17 - text-indent:2em;  
18 - }  
19 -  
20 - .sign-icon {  
21 - font-size: 20px;  
22 - height: 40px;  
23 - line-height: 40px;  
24 - text-align: center;  
25 - font-weight: 100;  
26 - }  
27 -  
28 - .sign-icon > span {  
29 - width:auto;  
30 - }  
31 -}  
32 -  
33 -.brand{  
34 - .brand-list{  
35 - margin-left: 20px;  
36 - font-size: 18px;  
37 - border-bottom: 1px solid #e6e6e6;  
38 - text-align: left;  
39 - height: 44px;  
40 - line-height: 44px;  
41 - vertical-align:middle;  
42 - display: block;  
43 - width: 100%;  
44 - } 1 +.shop-introduce{
  2 + .banner {
  3 + margin: 30px auto;
  4 + width: auto;
  5 + height: auto;
  6 + display: block;
  7 + background-size: 100%;
  8 + }
  9 +
  10 + .descripition {
  11 + margin: 40px 20px 0px 20px;
  12 + font-size: 16px;
  13 + line-height: 22px;
  14 + padding: 20px 0;
  15 + border-top: 1px solid #e6e6e6;
  16 + border-bottom: 1px solid #e6e6e6;
  17 + text-indent: 2em;
  18 + }
  19 +
  20 + .sign-icon {
  21 + font-size: 20px;
  22 + height: 40px;
  23 + line-height: 40px;
  24 + text-align: center;
  25 + font-weight: 100;
  26 + }
  27 +
  28 + .sign-icon > span {
  29 + width:auto;
  30 + }
  31 +}
  32 +
  33 +.brand{
  34 + .brand-list{
  35 + margin-left: 20px;
  36 + font-size: 18px;
  37 + border-bottom: 1px solid #e6e6e6;
  38 + text-align: left;
  39 + height: 44px;
  40 + line-height: 44px;
  41 + vertical-align:middle;
  42 + display: block;
  43 + width: 100%;
  44 + }
45 } 45 }
1 -.shop-introduce{  
2 - .banner {  
3 - margin: 30px auto;  
4 - width: auto;  
5 - height: auto;  
6 - display: block;  
7 - background-size: 100%;  
8 - }  
9 -  
10 - .descripition {  
11 - margin: 40px 20px 0px 20px;  
12 - font-size: 16px;  
13 - line-height: 22px;  
14 - padding: 20px 0;  
15 - border-top: 1px solid #e6e6e6;  
16 - border-bottom: 1px solid #e6e6e6;  
17 - text-indent:2em;  
18 - }  
19 -  
20 - .sign-icon {  
21 - font-size: 20px;  
22 - height: 40px;  
23 - line-height: 40px;  
24 - text-align: center;  
25 - font-weight: 100;  
26 - }  
27 -  
28 - .sign-icon > span {  
29 - width:auto;  
30 - }  
31 -}  
32 -  
33 -.brand{  
34 - .brand-list{  
35 - margin-left: 20px;  
36 - font-size: 18px;  
37 - border-bottom: 1px solid #e6e6e6;  
38 - text-align: left;  
39 - height: 44px;  
40 - line-height: 44px;  
41 - vertical-align:middle;  
42 - display: block;  
43 - width: 100%;  
44 - }  
45 -}  
1 -.product-category {  
2 - font-size: 30rem / $pxConvertRem;  
3 - background-color: #fff;  
4 -  
5 - .allproduct {  
6 - position: relative;  
7 - padding: 15px 0px;  
8 - background: #fff;  
9 - border-top: 15px;  
10 - border-bottom: 15px;  
11 - padding-left: 32rem / $pxConvertRem;  
12 - border-top: 1px solid #e6e6e6;  
13 - }  
14 -  
15 - .margin-under-allproduct{  
16 - width: 100%;  
17 - height: 30rem / $pxConvertRem;  
18 - background-color: #f0f0f0;  
19 - }  
20 -  
21 - .category-container{  
22 - border-top: 1px solid #e6e6e6;  
23 - }  
24 - .arrow-icon {  
25 - position: absolute;  
26 - font-size: 12px;  
27 - top: 15px;  
28 - right: 20px;  
29 - }  
30 -  
31 - .allproductParagaraph {  
32 - font-size: 18px;  
33 - left: 20px;  
34 - }  
35 -  
36 - .content {  
37 - background: #f8f8f8;  
38 -  
39 - &.hide {  
40 - display: none;  
41 - }  
42 - }  
43 -  
44 - .primary-level {  
45 - float: left;  
46 - box-sizing: border-box;  
47 - width: 100%;  
48 - position: absolute;  
49 - > li {  
50 - position:relative;  
51 - height: 89rem / $pxConvertRem;  
52 - line-height: 89rem / $pxConvertRem;  
53 - padding-left: 32rem / $pxConvertRem;  
54 - box-sizing: border-box;  
55 - border-bottom: 1px solid #e6e6e6;  
56 - background-color: #fff;  
57 - }  
58 - }  
59 -  
60 - .primary-level-trilangle{  
61 - float: right;  
62 - background: image-url('product/arrow.png')  
63 - width: 20px;  
64 - height: 20px;  
65 - }  
66 -  
67 - .trilanglefont {  
68 - font-family: "iconfont" !important;  
69 - font-size: 30px;  
70 - font-style: normal;  
71 - text-decoration: none;  
72 - -webkit-font-smoothing: antialiased;  
73 - -webkit-text-stroke-width: 0.2px;  
74 - -moz-osx-font-smoothing: grayscale;  
75 - color: #f4f4f4;  
76 - }  
77 -  
78 -  
79 - .sub-level-container {  
80 - float: right;  
81 - box-sizing: border-box;  
82 - background: #f4f4f4;  
83 - width: 55%;  
84 - height: 100%;  
85 - position: relative;  
86 - }  
87 -  
88 - .sub-level {  
89 - width: 100%;  
90 -  
91 - &.hide {  
92 - display: none;  
93 - }  
94 -  
95 - > li {  
96 - box-sizing: border-box;  
97 - height: 89rem / $pxConvertRem;  
98 - line-height: 89rem / $pxConvertRem;  
99 - border-bottom: 1px solid #e6e6e6;  
100 - padding-left: 2rem / $pxConvertRem;  
101 - //border-left: 50rem / $pxConvertRem;  
102 - margin-left: 30rem / $pxConvertRem;  
103 -  
104 - &.highlight {  
105 - background: #dbdbdb;  
106 - }  
107 -  
108 - &:last-child {  
109 - border-bottom: none;  
110 - }  
111 - }  
112 -  
113 - a {  
114 - display: block;  
115 - height: 100%;  
116 - width: 100%;  
117 - color: #afafaf;  
118 - }  
119 - }  
120 -}  
@@ -104,7 +104,7 @@ @@ -104,7 +104,7 @@
104 <div id="popularity" class=""></div> 104 <div id="popularity" class=""></div>
105 105
106 </div> 106 </div>
107 - 107 + {{> product/shop-footer}}
108 <ul id="pos-nav" class="nav hide"> 108 <ul id="pos-nav" class="nav hide">
109 <li class="active color">首页</li> 109 <li class="active color">首页</li>
110 <li>上新</li> 110 <li>上新</li>
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 </div> 16 </div>
17 </li> 17 </li>
18 <li> 18 <li>
19 - 品牌一栏 19 + 品牌一览
20 <div class="wall"></div> 20 <div class="wall"></div>
21 <div class="sub-group hide"> 21 <div class="sub-group hide">
22 <dl> 22 <dl>