fe / YOHOBUYPC · Commits

Go to a project

Authored by 梁志锋
Commit c54d37c6d2464f041d4b25222e6454ff26457183 1 parent 889379e3

update product desc

Inline Side-by-side
Showing 2 changed files with 589 additions and 588 deletions
@@ -24,8 +24,8 @@ goodsSwiper = new Swiper('.banner-swiper', { @@ -24,8 +24,8 @@ goodsSwiper = new Swiper('.banner-swiper', {
24 loop: true, 24 loop: true,
25 paginationClickable: true, 25 paginationClickable: true,
26 pagination: '.banner-top .pagination-inner', 26 pagination: '.banner-top .pagination-inner',
27 - nextButton: '.swiper-button-next',  
28 - prevButton: '.swiper-button-prev' 27 + nextButton: '.my-swiper-button-next',
  28 + prevButton: '.my-swiper-button-prev'
29 }); 29 });
30 30
31 31
@@ -4,607 +4,608 @@ $borderC:#e0e0e0; @@ -4,607 +4,608 @@ $borderC:#e0e0e0;
4 $tableCellC:#eee; 4 $tableCellC:#eee;
5 $basicBtnC:#eb0313; 5 $basicBtnC:#eb0313;
6 6
7 -.good-detail-page {  
8 -overflow: hidden;  
9 -/* basic component */  
10 -.page-block{  
11 - box-sizing:border-box;  
12 - width: 100%;  
13 - border-bottom: 2px solid $borderC;  
14 - border-top: 1px solid $borderC;  
15 - padding: 0 pxToRem(28px);  
16 - >.title{  
17 - line-height: pxToRem(88px);  
18 - color: $mainFontC;  
19 - font-size : pxToRem(28px);  
20 - border-bottom: 1px solid $borderC;  
21 -  
22 - span{  
23 - color:#a0a0a0;  
24 - font-size:pxToRem(18px);  
25 - }  
26 - }  
27 - .detail{  
28 - margin-top: pxToRem(20px);  
29 - margin-bottom: pxToRem(20px);  
30 - font-size: pxToRem(24px);  
31 - line-height: pxToRem(36px);  
32 -  
33 - &.table{  
34 - display: table;  
35 - width: 100%;  
36 - .row{  
37 - display: table-row;  
38 - .column{  
39 - display: table-cell;  
40 - padding: 0.4em 0.8em;  
41 - border:1px solid #fff;  
42 - font-size: pxToRem(24px);  
43 - background-color: $tableCellC;  
44 - }  
45 - }  
46 - }  
47 - } 7 +.my-swiper-button-prev,
  8 +.my-swiper-button-next {
  9 + position: absolute;
  10 + top: 50%;
  11 + width: pxToRem(48px);
  12 + height: pxToRem(48px);
  13 + margin-top: pxToRem(-44px);
  14 + cursor: pointer;
  15 + -moz-background-size: pxToRem(48px) pxToRem(48px);
  16 + -webkit-background-size: pxToRem(48px) pxToRem(48px);
  17 + background-size: pxToRem(48px) pxToRem(48px);
  18 + background-position: center;
  19 + background-repeat: no-repeat;
48 } 20 }
49 21
50 -.gap-block{  
51 - min-height: 30rem/$pxConvertRem;  
52 - background-color: #f0f0f0; 22 +.next-grey {
  23 + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
  24 + right: pxToRem(30px);
  25 + left: auto;
53 } 26 }
54 27
55 -.banner-container{  
56 - position: relative;  
57 - // overflow: hidden;  
58 - .is-new-lable{  
59 - position: absolute;  
60 - left: pxToRem(108px);  
61 - top:pxToRem(40px);  
62 - height: pxToRem(35px);  
63 - width:pxToRem(70px);  
64 -  
65 - color:#fff;  
66 - text-align: center;  
67 - font-size: pxToRem(20px);  
68 - line-height: pxToRem(35px);  
69 - background-color: #7cd881;  
70 - // z-index: 16;  
71 - }  
72 - }  
73 - .banner-top{  
74 - // width: 100%;  
75 - min-height: 660rem / $pxConvertRem;  
76 - overflow: hidden;  
77 - position: relative;  
78 -  
79 - .swiper-pagination{  
80 - position:absolute;  
81 - bottom: pxToRem(40px);  
82 - .swiper-pagination-bullet {  
83 - margin-right: 2px;  
84 - }  
85 - .swiper-pagination-bullet-active {  
86 - background-color: #000;  
87 - }  
88 -  
89 - .swiper-button-prev,  
90 - .swiper-button-next {  
91 - position: absolute;  
92 - top: 50%;  
93 - width: pxToRem(48px);  
94 - height: pxToRem(48px);  
95 - margin-top: pxToRem(-44px);  
96 - cursor: pointer;  
97 - z-index:10;  
98 - -moz-background-size: pxToRem(48px) pxToRem(48px);  
99 - -webkit-background-size: pxToRem(48px) pxToRem(48px);  
100 - background-size: pxToRem(48px) pxToRem(48px);  
101 - background-position: center;  
102 - background-repeat: no-repeat;  
103 - }  
104 -  
105 - .swiper-button-next.swiper-button-grey {  
106 - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");  
107 - right: pxToRem(30px);  
108 - left: auto;  
109 - }  
110 -  
111 - .swiper-button-prev.swiper-button-grey {  
112 - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");  
113 - left: pxToRem(30px);  
114 - right: auto;  
115 - }  
116 - }  
117 -  
118 - }  
119 -  
120 - .banner-swiper {  
121 - min-height: pxToRem(600px);  
122 - min-width: pxToRem(448px);  
123 - margin: pxToRem(30px) pxToRem(96px);  
124 - // position: relative;  
125 - overflow: hidden;  
126 - ul {  
127 - position: relative;  
128 - height: 100%;  
129 - li {  
130 - float: left;  
131 - height: 100%;  
132 - }  
133 - }  
134 - }  
135 -  
136 -  
137 - .goodsName {  
138 - min-height: pxToRem(83px);  
139 - font-size: pxToRem(28px);  
140 - color: #fff;  
141 - padding-left: pxToRem(25px);  
142 - padding-right: pxToRem(25px);  
143 - line-height: pxToRem(36px);  
144 - background-color: #515150;  
145 - }  
146 -  
147 - .goodsSubtitle{  
148 - min-height: pxToRem(87px);  
149 - font-size: pxToRem(24px);  
150 - line-height: pxToRem(36px);  
151 - color:$subFontC;  
152 - padding-left:pxToRem(28px);  
153 - padding-right:pxToRem(28px);  
154 - border-bottom:1px solid $borderC;  
155 - background-color: #f4f4f4;  
156 - }  
157 -  
158 - .price-date{  
159 - // width: 100%;  
160 - color:$subFontC;  
161 - min-height: pxToRem(88px);  
162 - padding-left:pxToRem(28px);  
163 - padding-right:pxToRem(28px);  
164 - border-bottom: 1px solid $borderC;  
165 - }  
166 - .goodsPrice{  
167 - float: left;  
168 - font-size: pxToRem(34.59px);  
169 - h1{  
170 - display: inline-block;  
171 - line-height: pxToRem(88px);  
172 - }  
173 - .currentPrice{  
174 - color:red;  
175 - margin-right: pxToRem(10px);  
176 - }  
177 - .previousPrice{  
178 - text-decoration:line-through;  
179 - }  
180 -}  
181 -.periodOfMarket{  
182 - font-size: pxToRem(24px);  
183 - float: right;  
184 - h1{  
185 - display: inline-block;  
186 - line-height: pxToRem(88px);  
187 - }  
188 -}  
189 -.goodsName,  
190 -.goodsSubtitle{  
191 - // width: 100%;  
192 - display:table;  
193 - span{  
194 - display: table-cell;  
195 - vertical-align: middle;  
196 - }  
197 - }  
198 - .vipLevel {  
199 - width: 100%;  
200 - box-sizing:border-box;  
201 - display: table;  
202 - min-height: pxToRem(88px);  
203 - padding-left:pxToRem(28px);  
204 - padding-right:pxToRem(28px);  
205 - font-size: pxToRem(22px);  
206 - color: #999999;  
207 -  
208 - border-bottom: 1px solid $borderC;  
209 - span{  
210 - display: table-cell;  
211 - vertical-align: middle;  
212 - }  
213 - .vip-img{  
214 - padding-right: pxToRem(22px);  
215 - img{  
216 - width: pxToRem(52px);  
217 - height: pxToRem(32px);  
218 - }  
219 - }  
220 - .vip-price{  
221 - padding-right: pxToRem(55px);  
222 - }  
223 - .vip-price:last-child{  
224 - padding-right: 0;  
225 - }  
226 -}  
227 -.goodsDiscount{  
228 - min-height: pxToRem(88px);  
229 - padding-left:pxToRem(28px);  
230 - padding-right:pxToRem(28px);  
231 - font-size: pxToRem(28px);  
232 - color: $mainFontC;  
233 - line-height: pxToRem(88px);  
234 -  
235 - border-bottom: 1px solid $borderC;  
236 -  
237 - .iconfont{  
238 - display: inline-block;  
239 - width: pxToRem(35px);  
240 - font-size: pxToRem(45px);  
241 - float: right;  
242 - color:#e0e0e0;  
243 - // padding-left:pxToRem(50px);  
244 - }  
245 -}  
246 -.goodsSubtitle,  
247 -.goodsDiscount{  
248 - text-indent: pxToRem(-14px); 28 +.prev-grey {
  29 + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
  30 + left: pxToRem(30px);
  31 + right: auto;
249 } 32 }
250 -.feedback-list-page {  
251 - padding-top: pxToRem(30px);  
252 - background-color: #f0f0f0;  
253 -  
254 - .nav-tab{  
255 - width: 100%;  
256 - }  
257 -  
258 - .nav-tab {  
259 - height: pxToRem(60px);  
260 - padding: pxToRem(10px) 0;  
261 - background-color: #fff;  
262 - border-top: 1px solid $borderC;  
263 - border-bottom: 1px solid $borderC;  
264 - }  
265 -  
266 - .comment-nav, .consult-nav {  
267 - box-sizing: border-box;  
268 - float: left;  
269 - width: 50%;  
270 - height: pxToRem(60px);  
271 - line-height: pxToRem(60px);  
272 - font-size: pxToRem(28px);  
273 - text-align: center;  
274 - color: #ccc;  
275 -  
276 - &.focus {  
277 - color: #000;  
278 - }  
279 - }  
280 - .comment-nav {  
281 - border-right: 1px solid #ccc;  
282 - }  
283 - .content{  
284 - .content-main{  
285 - background-color: #fff;  
286 - border-bottom: 1px solid $borderC;  
287 - &.comment-content-main{  
288 - .user-name{  
289 - font-size: pxToRem(24px);  
290 - line-height: pxToRem(62px);  
291 - color:$mainFontC;  
292 - padding-left: pxToRem(28px);  
293 - padding-right: pxToRem(18px);  
294 - }  
295 - .goods-spec,  
296 - .comment-time{  
297 - font-size: pxToRem(24px);  
298 - line-height: pxToRem(62px);  
299 - }  
300 - .detail-content{  
301 - // font-size: pxToRem(28px);  
302 - // line-height: pxToRem(36px);  
303 - font-size: pxToRem(24px);  
304 - line-height: pxToRem(62px);  
305 - color:$mainFontC;  
306 - padding-left: pxToRem(28px);  
307 - padding-right: pxToRem(18px);  
308 - }  
309 - .goods-spec,  
310 - .comment-time{  
311 - font-size: pxToRem(24px);  
312 - line-height: pxToRem(62px);  
313 - }  
314 - .detail-content{  
315 - font-size: pxToRem(28px);  
316 - line-height: pxToRem(36px);  
317 - }  
318 - .goods-spec,  
319 - .detail-content{  
320 - color:$mainFontC;  
321 - }  
322 - .detail-content,  
323 - .comment-time{  
324 - padding-left: pxToRem(28px);  
325 -  
326 - }  
327 - .detail-content{  
328 - padding-right: pxToRem(28px);  
329 - padding-left: pxToRem(28px);  
330 - }  
331 - .detail-content{  
332 - padding-right: pxToRem(28px);  
333 - }  
334 - .comment-time{  
335 - color:#c1c1c1;  
336 - }  
337 - }  
338 - &.consult-content-main{  
339 - padding-right: pxToRem(28px);  
340 - padding-left: pxToRem(28px);  
341 - padding-top: pxToRem(20px);  
342 - padding-bottom: pxToRem(20px);  
343 - .question{  
344 - font-size: pxToRem(24px);  
345 - color:$mainFontC;  
346 - span{  
347 - display: block;  
348 - float: left;  
349 - font-size: inherit;  
350 - padding-right: pxToRem(15px);  
351 - }  
352 - p{  
353 - overflow: hidden;  
354 - }  
355 - }  
356 - .time{  
357 - font-size: pxToRem(22px);  
358 - color:$subFontC;  
359 - }  
360 - .answer{  
361 - font-size: pxToRem(24px);  
362 - line-height: pxToRem(36px);  
363 - color:$subFontC;  
364 - margin-top: pxToRem(14px);  
365 - span{  
366 - display: block;  
367 - float: left;  
368 - font-size: inherit;  
369 - color:$mainFontC;  
370 - padding-right: pxToRem(15px); 33 +
  34 +.good-detail-page {
  35 + overflow: hidden;
  36 +
  37 + .page-block{
  38 + box-sizing:border-box;
  39 + width: 100%;
  40 + border-bottom: 2px solid $borderC;
  41 + border-top: 1px solid $borderC;
  42 + padding: 0 pxToRem(28px);
  43 + >.title{
  44 + line-height: pxToRem(88px);
  45 + color: $mainFontC;
  46 + font-size : pxToRem(28px);
  47 + border-bottom: 1px solid $borderC;
  48 +
  49 + span{
  50 + color:#a0a0a0;
  51 + font-size:pxToRem(18px);
  52 + }
  53 + }
  54 + .detail{
  55 + margin-top: pxToRem(20px);
  56 + margin-bottom: pxToRem(20px);
  57 + font-size: pxToRem(24px);
  58 + line-height: pxToRem(36px);
  59 +
  60 + &.table{
  61 + display: table;
  62 + width: 100%;
  63 + .row{
  64 + display: table-row;
  65 + .column{
  66 + display: table-cell;
  67 + padding: 0.4em 0.8em;
  68 + border:1px solid #fff;
  69 + font-size: pxToRem(24px);
  70 + background-color: $tableCellC;
  71 + }
  72 + }
  73 + }
  74 + }
  75 + }
  76 +
  77 + .gap-block{
  78 + min-height: 30rem/$pxConvertRem;
  79 + background-color: #f0f0f0;
  80 + }
  81 +
  82 + .banner-container{
  83 + position: relative;
  84 + // overflow: hidden;
  85 + .is-new-lable{
  86 + position: absolute;
  87 + left: pxToRem(108px);
  88 + top:pxToRem(40px);
  89 + height: pxToRem(35px);
  90 + width:pxToRem(70px);
  91 +
  92 + color:#fff;
  93 + text-align: center;
  94 + font-size: pxToRem(20px);
  95 + line-height: pxToRem(35px);
  96 + background-color: #7cd881;
  97 + // z-index: 16;
  98 + }
  99 + }
  100 + .banner-top{
  101 + // width: 100%;
  102 + min-height: 660rem / $pxConvertRem;
  103 + overflow: hidden;
  104 + position: relative;
  105 +
  106 + .swiper-pagination{
  107 + position:absolute;
  108 + bottom: pxToRem(40px);
  109 + .swiper-pagination-bullet {
  110 + margin-right: 2px;
371 } 111 }
372 - p{  
373 - overflow: hidden; 112 + .swiper-pagination-bullet-active {
  113 + background-color: #000;
374 } 114 }
375 - }  
376 - }  
377 -  
378 - }  
379 115
  116 + }
  117 +
  118 + }
  119 +
  120 + .banner-swiper {
  121 + min-height: pxToRem(600px);
  122 + min-width: pxToRem(448px);
  123 + margin: pxToRem(30px) pxToRem(96px);
  124 + // position: relative;
  125 + overflow: hidden;
  126 + ul {
  127 + position: relative;
  128 + height: 100%;
  129 + li {
  130 + float: left;
  131 + height: 100%;
  132 + }
  133 + }
  134 +
  135 + }
  136 +
  137 +
  138 + .goodsName {
  139 + min-height: pxToRem(83px);
  140 + font-size: pxToRem(28px);
  141 + color: #fff;
  142 + padding-left: pxToRem(25px);
  143 + padding-right: pxToRem(25px);
  144 + line-height: pxToRem(36px);
  145 + background-color: #515150;
  146 + }
  147 +
  148 + .goodsSubtitle{
  149 + min-height: pxToRem(87px);
  150 + font-size: pxToRem(24px);
  151 + line-height: pxToRem(36px);
  152 + color:$subFontC;
  153 + padding-left:pxToRem(28px);
  154 + padding-right:pxToRem(28px);
  155 + border-bottom:1px solid $borderC;
  156 + background-color: #f4f4f4;
  157 + }
  158 +
  159 + .price-date{
  160 + // width: 100%;
  161 + color:$subFontC;
  162 + min-height: pxToRem(88px);
  163 + padding-left:pxToRem(28px);
  164 + padding-right:pxToRem(28px);
  165 + border-bottom: 1px solid $borderC;
  166 + }
  167 + .goodsPrice{
  168 + float: left;
  169 + font-size: pxToRem(34.59px);
  170 + h1{
  171 + display: inline-block;
  172 + line-height: pxToRem(88px);
  173 + }
  174 + .currentPrice{
  175 + color:red;
  176 + margin-right: pxToRem(10px);
  177 + }
  178 + .previousPrice{
  179 + text-decoration:line-through;
  180 + }
  181 + }
  182 + .periodOfMarket{
  183 + font-size: pxToRem(24px);
  184 + float: right;
  185 + h1{
  186 + display: inline-block;
  187 + line-height: pxToRem(88px);
  188 + }
  189 + }
  190 + .goodsName,
  191 + .goodsSubtitle{
  192 + // width: 100%;
  193 + display:table;
  194 + span{
  195 + display: table-cell;
  196 + vertical-align: middle;
  197 + }
  198 + }
  199 + .vipLevel {
  200 + width: 100%;
  201 + box-sizing:border-box;
  202 + display: table;
  203 + min-height: pxToRem(88px);
  204 + padding-left:pxToRem(28px);
  205 + padding-right:pxToRem(28px);
  206 + font-size: pxToRem(22px);
  207 + color: #999999;
  208 +
  209 + border-bottom: 1px solid $borderC;
  210 + span{
  211 + display: table-cell;
  212 + vertical-align: middle;
  213 + }
  214 + .vip-img{
  215 + padding-right: pxToRem(22px);
  216 + img{
  217 + width: pxToRem(52px);
  218 + height: pxToRem(32px);
  219 + }
  220 + }
  221 + .vip-price{
  222 + padding-right: pxToRem(55px);
  223 + }
  224 + .vip-price:last-child{
  225 + padding-right: 0;
  226 + }
  227 + }
  228 + .goodsDiscount{
  229 + min-height: pxToRem(88px);
  230 + padding-left:pxToRem(28px);
  231 + padding-right:pxToRem(28px);
  232 + font-size: pxToRem(28px);
  233 + color: $mainFontC;
  234 + line-height: pxToRem(88px);
  235 +
  236 + border-bottom: 1px solid $borderC;
  237 +
  238 + .iconfont{
  239 + display: inline-block;
  240 + width: pxToRem(35px);
  241 + font-size: pxToRem(45px);
  242 + float: right;
  243 + color:#e0e0e0;
  244 + // padding-left:pxToRem(50px);
  245 + }
  246 + }
  247 + .goodsSubtitle,
  248 + .goodsDiscount{
  249 + text-indent: pxToRem(-14px);
  250 + }
  251 + .feedback-list-page {
  252 + padding-top: pxToRem(30px);
  253 + background-color: #f0f0f0;
  254 +
  255 + .nav-tab{
  256 + width: 100%;
  257 + }
  258 +
  259 + .nav-tab {
  260 + height: pxToRem(60px);
  261 + padding: pxToRem(10px) 0;
  262 + background-color: #fff;
  263 + border-top: 1px solid $borderC;
  264 + border-bottom: 1px solid $borderC;
  265 + }
  266 +
  267 + .comment-nav, .consult-nav {
  268 + box-sizing: border-box;
  269 + float: left;
  270 + width: 50%;
  271 + height: pxToRem(60px);
  272 + line-height: pxToRem(60px);
  273 + font-size: pxToRem(28px);
  274 + text-align: center;
  275 + color: #ccc;
  276 +
  277 + &.focus {
  278 + color: #000;
  279 + }
  280 + }
  281 + .comment-nav {
  282 + border-right: 1px solid #ccc;
  283 + }
  284 + .content{
  285 + .content-main{
  286 + background-color: #fff;
  287 + border-bottom: 1px solid $borderC;
  288 + &.comment-content-main{
  289 + .user-name{
  290 + font-size: pxToRem(24px);
  291 + line-height: pxToRem(62px);
  292 + color:$mainFontC;
  293 + padding-left: pxToRem(28px);
  294 + padding-right: pxToRem(18px);
  295 + }
  296 + .goods-spec,
  297 + .comment-time{
  298 + font-size: pxToRem(24px);
  299 + line-height: pxToRem(62px);
  300 + }
  301 + .detail-content{
  302 + // font-size: pxToRem(28px);
  303 + // line-height: pxToRem(36px);
  304 + font-size: pxToRem(24px);
  305 + line-height: pxToRem(62px);
  306 + color:$mainFontC;
  307 + padding-left: pxToRem(28px);
  308 + padding-right: pxToRem(18px);
  309 + }
  310 + .goods-spec,
  311 + .comment-time{
  312 + font-size: pxToRem(24px);
  313 + line-height: pxToRem(62px);
  314 + }
  315 + .detail-content{
  316 + font-size: pxToRem(28px);
  317 + line-height: pxToRem(36px);
  318 + }
  319 + .goods-spec,
  320 + .detail-content{
  321 + color:$mainFontC;
  322 + }
  323 + .detail-content,
  324 + .comment-time{
  325 + padding-left: pxToRem(28px);
380 326
381 -}  
382 -.comment-content-footer,  
383 -.consult-content-footer{ 327 + }
  328 + .detail-content{
  329 + padding-right: pxToRem(28px);
  330 + padding-left: pxToRem(28px);
  331 + }
  332 + .detail-content{
  333 + padding-right: pxToRem(28px);
  334 + }
  335 + .comment-time{
  336 + color:#c1c1c1;
  337 + }
  338 + }
  339 + &.consult-content-main{
  340 + padding-right: pxToRem(28px);
  341 + padding-left: pxToRem(28px);
  342 + padding-top: pxToRem(20px);
  343 + padding-bottom: pxToRem(20px);
  344 + .question{
  345 + font-size: pxToRem(24px);
  346 + color:$mainFontC;
  347 + span{
  348 + display: block;
  349 + float: left;
  350 + font-size: inherit;
  351 + padding-right: pxToRem(15px);
  352 + }
  353 + p{
  354 + overflow: hidden;
  355 + }
  356 + }
  357 + .time{
  358 + font-size: pxToRem(22px);
  359 + color:$subFontC;
  360 + }
  361 + .answer{
  362 + font-size: pxToRem(24px);
  363 + line-height: pxToRem(36px);
  364 + color:$subFontC;
  365 + margin-top: pxToRem(14px);
  366 + span{
  367 + display: block;
  368 + float: left;
  369 + font-size: inherit;
  370 + color:$mainFontC;
  371 + padding-right: pxToRem(15px);
  372 + }
  373 + p{
  374 + overflow: hidden;
  375 + }
  376 + }
  377 + }
384 378
385 - min-height: pxToRem(88px);  
386 - text-align: center;  
387 - background-color: #fff; 379 + }
388 380
389 - border-bottom: 1px solid $borderC;  
390 - line-height: pxToRem(88px);  
391 - font-size: pxToRem(28px);  
392 381
393 - a{  
394 - color: #e0e0e0;  
395 - .iconfont{  
396 - font-size: inherit;  
397 - }  
398 - } 382 + }
  383 + .comment-content-footer,
  384 + .consult-content-footer{
399 385
400 -} 386 + min-height: pxToRem(88px);
  387 + text-align: center;
  388 + background-color: #fff;
401 389
402 -.content.hide {  
403 - display: none;  
404 -}  
405 -} 390 + border-bottom: 1px solid $borderC;
  391 + line-height: pxToRem(88px);
  392 + font-size: pxToRem(28px);
406 393
407 -.enter-store{  
408 - min-height: pxToRem(100px);  
409 - display: table;  
410 - a{  
411 - display: table-cell;  
412 - vertical-align: middle;  
413 - text-align: left;  
414 - }  
415 - .store-logo{  
416 - // padding-right: 35rem/$pxConvertRem;  
417 - img{  
418 - width: pxToRem(109px);  
419 - height: pxToRem(68px);  
420 - margin-left: 0;  
421 - margin-right: pxToRem(-25px);  
422 - }  
423 -}  
424 -.store-name{  
425 - font-size: pxToRem(34px);  
426 - color:$mainFontC;  
427 -}  
428 -.store-link{  
429 - font-size:pxToRem(28px) ;  
430 - color:$subFontC;  
431 - text-align: right;  
432 - span{  
433 - font-size: inherit;  
434 - }  
435 -}  
436 -}  
437 -.goods-desc{  
438 - .service{  
439 - width: pxToRem(489px);  
440 - height: pxToRem(28px);  
441 - margin-top: pxToRem(22px);  
442 - }  
443 -}  
444 -.tips{  
445 - color:$subFontC;  
446 - font-size: pxToRem(18px);  
447 - margin-top: pxToRem(20px);  
448 -}  
449 -.materials{  
450 - .detail{  
451 - img{  
452 - display: block;  
453 - overflow: hidden;  
454 - width: pxToRem(90px);  
455 - height: pxToRem(120px);  
456 - padding-right: pxToRem(20px);  
457 - float: left;  
458 - }  
459 - .material-desc{  
460 - font-size: pxToRem(24px);  
461 - overflow: hidden;  
462 -  
463 - }  
464 - }  
465 - .material-type{  
466 - width: pxToRem(581px);  
467 - height: pxToRem(99px);  
468 - border-top: 1px solid $borderC;  
469 - padding: pxToRem(17px) 0;  
470 - }  
471 - }  
472 -  
473 - .product-detail{  
474 - .detail{  
475 - img{  
476 - margin-top: pxToRem(20px);  
477 - width: pxToRem(581px);  
478 - height: pxToRem(772px);  
479 - }  
480 - }  
481 - margin-bottom: pxToRem(120px);  
482 - }  
483 -  
484 - .detail-swiper{  
485 - .swiper-wrapper{  
486 - .swiper-slide{  
487 - width: pxToRem(114px);  
488 - div{  
489 - text-align: center;  
490 - &.cell{  
491 - font-size: pxToRem(24px);  
492 - background-color: $tableCellC;  
493 - padding:pxToRem(15px) 0;  
494 - border: 1px solid #fff;  
495 - }  
496 - }  
497 - }  
498 - }  
499 - }  
500 -  
501 - #reference-swiper-container{  
502 -  
503 - .first-group{  
504 - width: pxToRem(70px);  
505 - margin-top: pxToRem(66px);  
506 - .avatar{  
507 - line-height: pxToRem(40px);  
508 - width: pxToRem(40px);  
509 - height: pxToRem(40px);  
510 - margin: pxToRem(18px) 0;  
511 - }  
512 - }  
513 - }  
514 -  
515 - .measurement-method{  
516 - .detail{  
517 - width: 100%;  
518 - // height: pxToRem(300px);  
519 - img{  
520 - float:left;  
521 - width: pxToRem(270px);  
522 - height: pxToRem(239px);  
523 - margin-top: pxToRem(18px);  
524 - margin-right: pxToRem(28px);  
525 - }  
526 - .right-part{  
527 - overflow: hidden;  
528 - .title{  
529 - >h1{  
530 - margin-top: pxToRem(10px);  
531 - display: inline-block;  
532 - padding-right: pxToRem(10px);  
533 - border-right: 1px solid $borderC;  
534 - line-height: 100%;  
535 - }  
536 - >span{  
537 - font-size: pxToRem(12px);  
538 - }  
539 - }  
540 - ul.items{  
541 - margin-top: pxToRem(20px);  
542 - padding: 0;  
543 - line-height: pxToRem(30px);  
544 - font-size: pxToRem(13px);  
545 - li{  
546 - span{  
547 - display: inline-block;  
548 - width: pxToRem(15px);  
549 - height: pxToRem(15px);  
550 - background-color: $basicBtnC;  
551 - border-radius: 50%;  
552 - color:#fff;  
553 - text-align: center;  
554 - line-height: pxToRem(15px);  
555 - font-size: pxToRem(13px);  
556 - margin-right: pxToRem(12px);  
557 - vertical-align: text-bottom;  
558 - } 394 + a{
  395 + color: #e0e0e0;
  396 + .iconfont{
  397 + font-size: inherit;
559 } 398 }
560 } 399 }
561 - }  
562 - clear:both;  
563 -}  
564 -}  
565 -.cart-bar{  
566 - position: relative;  
567 - box-sizing:border-box;  
568 - width: 100%;  
569 - height: pxToRem(120px);  
570 - position:fixed;  
571 - bottom: 0;  
572 - background-color: #fff;  
573 - z-index:2;  
574 - padding:pxToRem(20px) pxToRem(28px);  
575 - text-align: center;  
576 - a{  
577 - display: inline-block;  
578 - &.num-incart{  
579 - font-size: pxToRem(47px);  
580 - color:#444;  
581 - }  
582 - &.favorite{  
583 - font-size: pxToRem(34px);  
584 - color:$basicBtnC;  
585 - }  
586 - &.addto-cart{  
587 - height: pxToRem(80px);  
588 - width: pxToRem(260px);  
589 - margin:0 pxToRem(100px) 0 pxToRem(115px);  
590 - color: #fff;  
591 - background-color: $basicBtnC;  
592 - font-size: pxToRem(40px);  
593 - line-height: pxToRem(80px);  
594 - text-align: center;  
595 - }  
596 - }  
597 - .num-tag{  
598 - position: absolute;  
599 - left:pxToRem(66px);  
600 - height: pxToRem(20px);  
601 - display: block;  
602 - width: pxToRem(36px);  
603 - height: pxToRem(36px);  
604 - background-color: $basicBtnC;  
605 - border-radius: 50%;  
606 - color:#fff;  
607 - font-size: pxToRem(24px);  
608 - }  
609 -} 400 +
  401 + }
  402 +
  403 + .content.hide {
  404 + display: none;
  405 + }
  406 + }
  407 +
  408 + .enter-store{
  409 + min-height: pxToRem(100px);
  410 + display: table;
  411 + a{
  412 + display: table-cell;
  413 + vertical-align: middle;
  414 + text-align: left;
  415 + }
  416 + .store-logo{
  417 + // padding-right: 35rem/$pxConvertRem;
  418 + img{
  419 + width: pxToRem(109px);
  420 + height: pxToRem(68px);
  421 + margin-left: 0;
  422 + margin-right: pxToRem(-25px);
  423 + }
  424 + }
  425 + .store-name{
  426 + font-size: pxToRem(34px);
  427 + color:$mainFontC;
  428 + }
  429 + .store-link{
  430 + font-size:pxToRem(28px) ;
  431 + color:$subFontC;
  432 + text-align: right;
  433 + span{
  434 + font-size: inherit;
  435 + }
  436 + }
  437 + }
  438 + .goods-desc{
  439 + .service{
  440 + width: pxToRem(489px);
  441 + height: pxToRem(28px);
  442 + margin-top: pxToRem(22px);
  443 + }
  444 + }
  445 + .tips{
  446 + color:$subFontC;
  447 + font-size: pxToRem(18px);
  448 + margin-top: pxToRem(20px);
  449 + }
  450 + .materials{
  451 + .detail{
  452 + img{
  453 + display: block;
  454 + overflow: hidden;
  455 + width: pxToRem(90px);
  456 + height: pxToRem(120px);
  457 + padding-right: pxToRem(20px);
  458 + float: left;
  459 + }
  460 + .material-desc{
  461 + font-size: pxToRem(24px);
  462 + overflow: hidden;
  463 +
  464 + }
  465 + }
  466 + .material-type{
  467 + width: pxToRem(581px);
  468 + height: pxToRem(99px);
  469 + border-top: 1px solid $borderC;
  470 + padding: pxToRem(17px) 0;
  471 + }
  472 + }
  473 +
  474 + .product-detail{
  475 + .detail{
  476 + img{
  477 + margin-top: pxToRem(20px);
  478 + width: pxToRem(581px);
  479 + height: pxToRem(772px);
  480 + }
  481 + }
  482 + margin-bottom: pxToRem(120px);
  483 + }
  484 +
  485 + .detail-swiper{
  486 + .swiper-wrapper{
  487 + .swiper-slide{
  488 + width: pxToRem(114px);
  489 + div{
  490 + text-align: center;
  491 + &.cell{
  492 + font-size: pxToRem(24px);
  493 + background-color: $tableCellC;
  494 + padding:pxToRem(15px) 0;
  495 + border: 1px solid #fff;
  496 + }
  497 + }
  498 + }
  499 + }
  500 + }
  501 +
  502 + #reference-swiper-container{
  503 +
  504 + .first-group{
  505 + width: pxToRem(70px);
  506 + margin-top: pxToRem(66px);
  507 + .avatar{
  508 + line-height: pxToRem(40px);
  509 + width: pxToRem(40px);
  510 + height: pxToRem(40px);
  511 + margin: pxToRem(18px) 0;
  512 + }
  513 + }
  514 + }
  515 +
  516 + .measurement-method{
  517 + .detail{
  518 + width: 100%;
  519 + // height: pxToRem(300px);
  520 + img{
  521 + float:left;
  522 + width: pxToRem(270px);
  523 + height: pxToRem(239px);
  524 + margin-top: pxToRem(18px);
  525 + margin-right: pxToRem(28px);
  526 + }
  527 + .right-part{
  528 + overflow: hidden;
  529 + .title{
  530 + >h1{
  531 + margin-top: pxToRem(10px);
  532 + display: inline-block;
  533 + padding-right: pxToRem(10px);
  534 + border-right: 1px solid $borderC;
  535 + line-height: 100%;
  536 + }
  537 + >span{
  538 + font-size: pxToRem(12px);
  539 + }
  540 + }
  541 + ul.items{
  542 + margin-top: pxToRem(20px);
  543 + padding: 0;
  544 + line-height: pxToRem(30px);
  545 + font-size: pxToRem(13px);
  546 + li{
  547 + span{
  548 + display: inline-block;
  549 + width: pxToRem(15px);
  550 + height: pxToRem(15px);
  551 + background-color: $basicBtnC;
  552 + border-radius: 50%;
  553 + color:#fff;
  554 + text-align: center;
  555 + line-height: pxToRem(15px);
  556 + font-size: pxToRem(13px);
  557 + margin-right: pxToRem(12px);
  558 + vertical-align: text-bottom;
  559 + }
  560 + }
  561 + }
  562 + }
  563 + clear:both;
  564 + }
  565 + }
  566 + .cart-bar{
  567 + position: relative;
  568 + box-sizing:border-box;
  569 + width: 100%;
  570 + height: pxToRem(120px);
  571 + position:fixed;
  572 + bottom: 0;
  573 + background-color: #fff;
  574 + z-index:2;
  575 + padding:pxToRem(20px) pxToRem(28px);
  576 + text-align: center;
  577 + a{
  578 + display: inline-block;
  579 + &.num-incart{
  580 + font-size: pxToRem(47px);
  581 + color:#444;
  582 + }
  583 + &.favorite{
  584 + font-size: pxToRem(34px);
  585 + color:$basicBtnC;
  586 + }
  587 + &.addto-cart{
  588 + height: pxToRem(80px);
  589 + width: pxToRem(260px);
  590 + margin:0 pxToRem(100px) 0 pxToRem(115px);
  591 + color: #fff;
  592 + background-color: $basicBtnC;
  593 + font-size: pxToRem(40px);
  594 + line-height: pxToRem(80px);
  595 + text-align: center;
  596 + }
  597 + }
  598 + .num-tag{
  599 + position: absolute;
  600 + left:pxToRem(66px);
  601 + height: pxToRem(20px);
  602 + display: block;
  603 + width: pxToRem(36px);
  604 + height: pxToRem(36px);
  605 + background-color: $basicBtnC;
  606 + border-radius: 50%;
  607 + color:#fff;
  608 + font-size: pxToRem(24px);
  609 + }
  610 + }
610 } 611 }