fe / yohobuy-node · Commits

Go to a project

Authored by OF1706
Commit d01d510120c37fbedccabc212c22d65da5b2aad5 1 parent 5710e410

m

Inline Side-by-side
Showing 4 changed files with 244 additions and 138 deletions
@@ -68,20 +68,22 @@ @@ -68,20 +68,22 @@
68 </div> 68 </div>
69 <div class="dl choose-size"> 69 <div class="dl choose-size">
70 <div class="dd">尺码:</div> 70 <div class="dd">尺码:</div>
71 - <div class="dt active"> 71 + <div class="choose-size-detail">
  72 + <div class="dt active">
72 40 73 40
73 - </div>  
74 - <div class="dt"> 74 + </div>
  75 + <div class="dt">
75 42 76 42
76 - </div>  
77 - <div class="dt"> 77 + </div>
  78 + <div class="dt">
78 44 79 44
79 - </div>  
80 - <div class="dt"> 80 + </div>
  81 + <div class="dt">
81 46 82 46
82 - </div>  
83 - <div class="dt disabled"> 83 + </div>
  84 + <div class="dt disabled">
84 48 85 48
  86 + </div>
85 </div> 87 </div>
86 </div> 88 </div>
87 <div class="button-group"> 89 <div class="button-group">
@@ -28,91 +28,156 @@ @@ -28,91 +28,156 @@
28 </a> 28 </a>
29 </div> 29 </div>
30 </li> 30 </li>
  31 + <li class="img-item">
  32 + <span class="hide goods-id">{{goods_id}}</span>
  33 + <div class="good">
  34 + <a href="{{url}}" target="_blank">
  35 + <img class="lazy" src="{{pic_url}}"/>
  36 + </a>
  37 + </div>
  38 + </li>
  39 + <li class="img-item">
  40 + <span class="hide goods-id">{{goods_id}}</span>
  41 + <div class="good">
  42 + <a href="{{url}}" target="_blank">
  43 + <img class="lazy" src="{{pic_url}}"/>
  44 + </a>
  45 + </div>
  46 + </li>
  47 + <li class="img-item">
  48 + <span class="hide goods-id">{{goods_id}}</span>
  49 + <div class="good">
  50 + <a href="{{url}}" target="_blank">
  51 + <img class="lazy" src="{{pic_url}}"/>
  52 + </a>
  53 + </div>
  54 + </li>
  55 + <li class="img-item">
  56 + <span class="hide goods-id">{{goods_id}}</span>
  57 + <div class="good">
  58 + <a href="{{url}}" target="_blank">
  59 + <img class="lazy" src="{{pic_url}}"/>
  60 + </a>
  61 + </div>
  62 + </li>
  63 + <li class="img-item">
  64 + <span class="hide goods-id">{{goods_id}}</span>
  65 + <div class="good">
  66 + <a href="{{url}}" target="_blank">
  67 + <img class="lazy" src="{{pic_url}}"/>
  68 + </a>
  69 + </div>
  70 + </li>
  71 + <li class="img-item">
  72 + <span class="hide goods-id">{{goods_id}}</span>
  73 + <div class="good">
  74 + <a href="{{url}}" target="_blank">
  75 + <img class="lazy" src="{{pic_url}}"/>
  76 + </a>
  77 + </div>
  78 + </li>
  79 + <li class="img-item">
  80 + <span class="hide goods-id">{{goods_id}}</span>
  81 + <div class="good">
  82 + <a href="{{url}}" target="_blank">
  83 + <img class="lazy" src="{{pic_url}}"/>
  84 + </a>
  85 + </div>
  86 + </li>
  87 + <li class="img-item">
  88 + <span class="hide goods-id">{{goods_id}}</span>
  89 + <div class="good">
  90 + <a href="{{url}}" target="_blank">
  91 + <img class="lazy" src="{{pic_url}}"/>
  92 + </a>
  93 + </div>
  94 + </li>
31 </ul> 95 </ul>
32 </div> 96 </div>
33 </div> 97 </div>
34 - <div class="detail-bigpic">  
35 - <div class="bigpic">  
36 - <img src="">  
37 - </div>  
38 - <div class="bigpic none">  
39 - <img src="">  
40 - </div>  
41 - <div class="bigpic none">  
42 - <img src="">  
43 - </div>  
44 - <div class="bigpic none">  
45 - <img src="">  
46 - </div>  
47 - <div class="bigpic none">  
48 - <img src="">  
49 - </div>  
50 - <div class="bigpic none">  
51 - <img src="">  
52 - </div>  
53 - <div class="piclist">  
54 - <span class="pre"></span>  
55 - <div class="con">  
56 - <ul>  
57 - <li class="active"><img src=""></li>  
58 - <li><img src=""></li>  
59 - <li><img src=""></li>  
60 - <li><img src=""></li>  
61 - <li><img src=""></li>  
62 - </ul>  
63 - </div>  
64 - <span class="next"></span>  
65 - </div>  
66 - </div>  
67 - <div class="detail-bigpic none">  
68 - <div class="bigpic">  
69 - <img src="">  
70 - </div>  
71 - <div class="bigpic none">  
72 - <img src="">  
73 - </div>  
74 - <div class="bigpic none">  
75 - <img src="">  
76 - </div>  
77 - <div class="bigpic none">  
78 - <img src="">  
79 - </div>  
80 - <div class="bigpic none">  
81 - <img src="">  
82 - </div>  
83 - <div class="bigpic none">  
84 - <img src="">  
85 - </div>  
86 - <div class="piclist">  
87 - <span class="pre"></span>  
88 - <div class="con">  
89 - <ul>  
90 - <li class="active"><img src=""></li>  
91 - <li><img src=""></li>  
92 - <li><img src=""></li>  
93 - <li><img src=""></li>  
94 - <li><img src=""></li>  
95 - </ul>  
96 - </div>  
97 - <span class="next"></span> 98 + <div class="detail-goods">
  99 + <div class="detail-bigpic">
  100 + <div class="bigpic">
  101 + <img src="">
  102 + </div>
  103 + <div class="bigpic none">
  104 + <img src="">
  105 + </div>
  106 + <div class="bigpic none">
  107 + <img src="">
  108 + </div>
  109 + <div class="bigpic none">
  110 + <img src="">
  111 + </div>
  112 + <div class="bigpic none">
  113 + <img src="">
  114 + </div>
  115 + <div class="bigpic none">
  116 + <img src="">
  117 + </div>
  118 + <div class="piclist">
  119 + <span class="pre"></span>
  120 + <div class="con">
  121 + <ul>
  122 + <li class="active"><img src=""></li>
  123 + <li><img src=""></li>
  124 + <li><img src=""></li>
  125 + <li><img src=""></li>
  126 + <li><img src=""></li>
  127 + </ul>
  128 + </div>
  129 + <span class="next"></span>
  130 + </div>
98 </div> 131 </div>
99 - </div>  
100 - <div class="detail-info">  
101 - <div class="title">  
102 - <h2>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈{{name}}</h2> 132 + <div class="detail-bigpic none">
  133 + <div class="bigpic">
  134 + <img src="">
  135 + </div>
  136 + <div class="bigpic none">
  137 + <img src="">
  138 + </div>
  139 + <div class="bigpic none">
  140 + <img src="">
  141 + </div>
  142 + <div class="bigpic none">
  143 + <img src="">
  144 + </div>
  145 + <div class="bigpic none">
  146 + <img src="">
  147 + </div>
  148 + <div class="bigpic none">
  149 + <img src="">
  150 + </div>
  151 + <div class="piclist">
  152 + <span class="pre"></span>
  153 + <div class="con">
  154 + <ul>
  155 + <li class="active"><img src=""></li>
  156 + <li><img src=""></li>
  157 + <li><img src=""></li>
  158 + <li><img src=""></li>
  159 + <li><img src=""></li>
  160 + </ul>
  161 + </div>
  162 + <span class="next"></span>
  163 + </div>
103 </div> 164 </div>
104 - <div class="price"> 165 + <div class="detail-info">
  166 + <div class="title">
  167 + <h2>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈{{name}}</h2>
  168 + </div>
  169 + <div class="price">
105 170
106 <span class="newprice">现价：<b class="promotion-price">¥7777{{salePrice}}</b></span> 171 <span class="newprice">现价：<b class="promotion-price">¥7777{{salePrice}}</b></span>
107 <span class="activityprice">活动价：<b class="promotion-price">¥5555{{marketPrice}}</b></span> 172 <span class="activityprice">活动价：<b class="promotion-price">¥5555{{marketPrice}}</b></span>
108 173
109 - </div>  
110 - <div class="order">  
111 - <dl>  
112 - <dd class="colorBox">选颜色：</dd>  
113 - <dt>  
114 - <div class="colorBox">  
115 - <ul> 174 + </div>
  175 + <div class="order">
  176 + <dl>
  177 + <dd class="colorBox">选颜色：</dd>
  178 + <dt>
  179 + <div class="colorBox">
  180 + <ul>
116 <li class="color active"> 181 <li class="color active">
117 <p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p> 182 <p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p>
118 <span>{{name}}</span> 183 <span>{{name}}</span>
@@ -121,64 +186,66 @@ @@ -121,64 +186,66 @@
121 <p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p> 186 <p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p>
122 <span>{{name}}</span> 187 <span>{{name}}</span>
123 </li> 188 </li>
124 - </ul>  
125 - </div>  
126 - </dt>  
127 - </dl>  
128 - <dl>  
129 - <dd class="showSizeBox">选尺码：</dd>  
130 - <dt>  
131 - <div class="showSizeBox"> 189 + </ul>
  190 + </div>
  191 + </dt>
  192 + </dl>
  193 + <dl>
  194 + <dd class="showSizeBox">选尺码：</dd>
  195 + <dt>
  196 + <div class="showSizeBox">
132 <span data-sku="{{sku}}" data-num="{{num}}" class="disabled">40码{{name}}</span> 197 <span data-sku="{{sku}}" data-num="{{num}}" class="disabled">40码{{name}}</span>
133 <span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span> 198 <span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
134 <span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span> 199 <span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
135 <span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span> 200 <span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
  201 + </div>
  202 + <p>内长&nbsp;25.5com</p>
  203 + </dt>
  204 + </dl>
  205 + <dl>
  206 + <dd>选件数：</dd>
  207 + <dt>
  208 + <div class="amount_wrapper">
  209 + <input type="text" id="num" class="num" value="1" readonly="readonly">
  210 + <i class="amount cut"></i>
  211 + <i class="amount add"></i>
136 </div> 212 </div>
137 - </dt>  
138 - </dl>  
139 - <dl>  
140 - <dd>选件数：</dd>  
141 - <dt>  
142 - <div class="amount_wrapper">  
143 - <input type="text" id="num" class="num" value="1" readonly="readonly">  
144 - <i class="amount cut"></i>  
145 - <i class="amount add"></i>  
146 - </div>  
147 - </dt>  
148 - </dl>  
149 - </div>  
150 - <div class="submit">  
151 - <button class="btn-red"><i class="addCart"></i>添加到购物车</button>  
152 - <button class="btn-favCount"><i class="favCount"></i>收藏商品</button> 213 + </dt>
  214 + </dl>
  215 + </div>
  216 + <div class="submit">
  217 + <button class="btn-red"><i class="addCart"></i>添加到购物车</button>
  218 + <button class="btn-favCount"><i class="favCount"></i>收藏商品</button>
  219 + </div>
153 </div> 220 </div>
154 - </div>  
155 -  
156 - <div class="detail-size">  
157 - <h3>尺码信息（单位：厘米）</h3>  
158 - <table>  
159 - <thead>  
160 - <tr> 221 + <div class="detail-size">
  222 + <h3>尺码信息（单位：厘米）</h3>
  223 + <table>
  224 + <thead>
  225 + <tr>
161 <th width="{{width}}">吊牌吃吗</th> 226 <th width="{{width}}">吊牌吃吗</th>
162 <th width="{{width}}">吊牌吃吗</td> 227 <th width="{{width}}">吊牌吃吗</td>
163 <th width="{{width}}">吊牌吃吗</td> 228 <th width="{{width}}">吊牌吃吗</td>
164 <th width="{{width}}">吊牌吃吗</td> 229 <th width="{{width}}">吊牌吃吗</td>
165 <th width="{{width}}">吊牌吃吗</td> 230 <th width="{{width}}">吊牌吃吗</td>
166 <th width="{{width}}">吊牌吃吗</td> 231 <th width="{{width}}">吊牌吃吗</td>
167 - </tr>  
168 - </thead>  
169 - <tbody> 232 + </tr>
  233 + </thead>
  234 + <tbody>
170 <tr> 235 <tr>
171 - <td>6666{{.}}</td> 236 + <td>6666{{.}}</td>
172 </tr> 237 </tr>
173 <tr> 238 <tr>
174 - <td>4444{{.}}</td> 239 + <td>4444{{.}}</td>
175 </tr> 240 </tr>
176 - </tbody>  
177 - </table>  
178 - <div class="size-info">  
179 - ※ 以上尺寸为实物实际测量，因测量方式不同会有略微误差，相关数据仅作参考，以收到实物为准。 241 + </tbody>
  242 + </table>
  243 + <div class="size-info">
  244 + ※ 以上尺寸为实物实际测量，因测量方式不同会有略微误差，相关数据仅作参考，以收到实物为准。
  245 + </div>
180 </div> 246 </div>
181 </div> 247 </div>
  248 +
182 </div> 249 </div>
183 <input value="{{addToCart}}" id="addToCart" type="hidden" /> 250 <input value="{{addToCart}}" id="addToCart" type="hidden" />
184 251
@@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
19 padding: 15px; 19 padding: 15px;
20 margin: 0 auto; 20 margin: 0 auto;
21 *zoom: 1; 21 *zoom: 1;
  22 + box-sizing: border-box;
22 &:after{ 23 &:after{
23 content:''; 24 content:'';
24 display: block; 25 display: block;
@@ -31,6 +32,17 @@ @@ -31,6 +32,17 @@
31 } 32 }
32 } 33 }
33 34
  35 + .detail-goods {
  36 + *zoom: 1;
  37 + &:after{
  38 + content:'';
  39 + display: block;
  40 + height: 0;
  41 + clear: both;
  42 + overflow: hidden;
  43 + }
  44 + }
  45 +
34 .detail-bigpic { 46 .detail-bigpic {
35 width: 180px; 47 width: 180px;
36 padding-bottom: 30px; 48 padding-bottom: 30px;
@@ -161,6 +173,7 @@ @@ -161,6 +173,7 @@
161 display: block; 173 display: block;
162 clear: both; 174 clear: both;
163 height: auto; 175 height: auto;
  176 + overflow: hidden;
164 } 177 }
165 } 178 }
166 dd { 179 dd {
@@ -172,7 +185,6 @@ @@ -172,7 +185,6 @@
172 dt { 185 dt {
173 width: 300px; 186 width: 300px;
174 float: left; 187 float: left;
175 - padding-bottom: 15px;  
176 text-align: left; 188 text-align: left;
177 } 189 }
178 dd.colorBox { 190 dd.colorBox {
@@ -181,6 +193,16 @@ @@ -181,6 +193,16 @@
181 dd.showSizeBox { 193 dd.showSizeBox {
182 line-height: 23px; 194 line-height: 23px;
183 } 195 }
  196 + dt.showSizeBox {
  197 + *zoom: 1;
  198 + &:after {
  199 + content: '';
  200 + display: block;
  201 + clear: both;
  202 + height: auto;
  203 + overflow: hidden;
  204 + }
  205 + }
184 206
185 .colorBox { 207 .colorBox {
186 &>ul { 208 &>ul {
@@ -225,10 +247,11 @@ @@ -225,10 +247,11 @@
225 .showSizeBox{ 247 .showSizeBox{
226 span { 248 span {
227 cursor: pointer; 249 cursor: pointer;
228 - min-width:38px;  
229 height: 23px; 250 height: 23px;
  251 + min-width: 29px;
  252 + text-align: center;
230 line-height: 23px; 253 line-height: 23px;
231 - padding: 0px 12px; 254 + padding: 0px 4px;
232 border: 1px #f5f6f5 solid; 255 border: 1px #f5f6f5 solid;
233 margin: 1px 5px 5px 1px; 256 margin: 1px 5px 5px 1px;
234 display: inline; 257 display: inline;
@@ -370,6 +393,12 @@ @@ -370,6 +393,12 @@
370 } 393 }
371 } 394 }
372 } 395 }
  396 +
  397 +.side-img-dd {
  398 + height: 90px;
  399 + overflow: hidden;
  400 +}
  401 +
373 .slide-img { 402 .slide-img {
374 margin-bottom: 25px; 403 margin-bottom: 25px;
375 p { 404 p {
@@ -407,21 +436,28 @@ @@ -407,21 +436,28 @@
407 height: 100%; 436 height: 100%;
408 li { 437 li {
409 float: left; 438 float: left;
410 - width: 232px;  
411 - height: 410px; 439 + width: 65px;
  440 + height: 90px;
  441 + border: 1px solid #e9e9e9;
  442 + box-sizing: border-box;
412 overflow: hidden; 443 overflow: hidden;
  444 + margin-right: 20px;
  445 + &:nth-child(7n){
  446 + margin-right: 0;
  447 + }
413 } 448 }
414 .good { 449 .good {
415 float: left; 450 float: left;
416 - width: 225px;  
417 - margin-right: 10px; 451 + width: 65px;
418 a { 452 a {
419 cursor: pointer; 453 cursor: pointer;
  454 + border: none;
  455 + display: block;
420 } 456 }
421 img { 457 img {
422 display: block; 458 display: block;
423 - width: 222px;  
424 - height: 300px; 459 + width: 65px;
  460 + height: 90px;
425 } 461 }
426 } 462 }
427 } 463 }
@@ -924,10 +924,14 @@ @@ -924,10 +924,14 @@
924 .choose-size { 924 .choose-size {
925 margin-bottom: 13px; 925 margin-bottom: 13px;
926 min-height: 56px; 926 min-height: 56px;
927 - .dd{ 927 + .dd {
928 height:18px; 928 height:18px;
929 line-height:18px; 929 line-height:18px;
930 } 930 }
  931 + .choose-size-detail {
  932 + float: left;
  933 + width: 128px;
  934 + }
931 .dt { 935 .dt {
932 padding-left: 6px; 936 padding-left: 6px;
933 padding-right: 6px; 937 padding-right: 6px;
@@ -937,9 +941,6 @@ @@ -937,9 +941,6 @@
937 text-align: center; 941 text-align: center;
938 line-height: 16px; 942 line-height: 16px;
939 margin-bottom: 10px; 943 margin-bottom: 10px;
940 - &:nth-child(5n) {  
941 - margin-left: 37px;  
942 - }  
943 } 944 }
944 .active { 945 .active {
945 border-color: #000; 946 border-color: #000;