Authored by 郝肖肖

商品样式 优选

@@ -65,31 +65,45 @@ @@ -65,31 +65,45 @@
65 65
66 <div class="goods"> 66 <div class="goods">
67 <!--商品---> 67 <!--商品--->
68 - <div class="goods-box">  
69 - <ul class="cardlist card-large clearfix">  
70 - {{#each result.goods.data}}  
71 - <li class="card">  
72 - <div class="card-pic">  
73 - <a href="">  
74 - <img class="lazy" data-original="{{image src 375 375}}">  
75 - </a>  
76 - </div>  
77 - <div class="card-bd">  
78 - <h2 class="card-label">  
79 - <a href="" class="line-clamp-2">{{item.productName}}</a>  
80 - </h2>  
81 - <span class="good-price old-price">¥ 100{{item.marketPrice}}</span>  
82 - <span class="good-price sale-price">¥ 200{{item.salesPrice}}</span>  
83 - </div>  
84 - </li>  
85 - {{/each}}  
86 - </ul>  
87 - <div class="empty-tip">  
88 - <i class="icon icon-search"></i>  
89 - <p class="empty-tip-cn">未找到相关商品</p>  
90 - <p class="empty-tip-en">Did not find the relevant goods</p>  
91 - </div>  
92 - </div> 68 + <div class="goods-box" infinite-scroll-disable="disableFetch">
  69 + <ul class="cardlist card-large clearfix">
  70 + <li class="card">
  71 + <div class="card-pic">
  72 + <a href="/item/500318.html">
  73 + <img lazy="loaded" src="http://img11.static.yhbimg.com/goodsimg/2016/08/03/20/014ed4df43fad04f72053a5ec46122b437.jpg?imageMogr2/thumbnail/372x499/extent/372x499/background/d2hpdGU=/position/center/quality/80" alt="大神单品店导入3大神单品店导入3大神单品店导入3">
  74 + </a>
  75 + </div>
  76 + <div class="card-bd">
  77 + <h2 class="card-label">
  78 + <a class="line-clamp-2" href="/item/500318.html">大神单品店导入3大神单品店导入3大神单品店导入3</a>
  79 + </h2>
  80 + <span class="good-price old-price">¥ 30000</span>
  81 + <span class="good-price sale-price">¥ 1</span>
  82 + </div>
  83 + </li><li class="card">
  84 + <div class="card-pic">
  85 + <a href="/item/500082.html">
  86 + <img lazy="loaded" src="http://img12.static.yhbimg.com/goodsimg/2016/08/01/20/02d112d336cbefefc157c2bd94bfd7cebc.jpg?imageMogr2/thumbnail/372x499/extent/372x499/background/d2hpdGU=/position/center/quality/80" alt="ooxx男T恤四级类目1">
  87 + </a>
  88 + </div>
  89 + <div class="card-bd">
  90 + <h2 class="card-label">
  91 + <a class="line-clamp-2" href="/item/500082.html">ooxx男T恤四级类目1</a>
  92 + </h2>
  93 + <span class="good-price old-price">¥ 111</span>
  94 + <span class="good-price sale-price">¥ 110</span>
  95 + </div>
  96 + </li>
  97 + </ul>
  98 + <p class="cardlist--loading text-center" style="display: none;">正在加载...</p>
  99 + <p class="cardlist--end text-center" style="display: none;">--End--</p>
  100 +
  101 + <div class="empty-tip" style="display: none;">
  102 + <i class="icon icon-search"></i>
  103 + <p class="empty-tip-cn">未找到相关商品</p>
  104 + <p class="empty-tip-en">Did not find the relevant goods</p>
  105 + </div>
  106 +</div>
93 </div><!--/goods--> 107 </div><!--/goods-->
94 {{/if}} 108 {{/if}}
95 109
@@ -187,6 +187,11 @@ @@ -187,6 +187,11 @@
187 } 187 }
188 } 188 }
189 189
  190 + .goods-box {
  191 + padding-bottom: 20px;
  192 + background-color: #fff;
  193 + }
  194 +
190 .cardlist { 195 .cardlist {
191 list-style: none; 196 list-style: none;
192 margin: 0; 197 margin: 0;
@@ -196,7 +201,7 @@ @@ -196,7 +201,7 @@
196 .card-large { 201 .card-large {
197 .card { 202 .card {
198 float: left; 203 float: left;
199 - width: 372px; 204 + width: 317px;
200 margin-right: 6px; 205 margin-right: 6px;
201 &:nth-child(2n) { 206 &:nth-child(2n) {
202 margin-right: 0; 207 margin-right: 0;
@@ -204,7 +209,6 @@ @@ -204,7 +209,6 @@
204 } 209 }
205 .card-pic { 210 .card-pic {
206 width: 100%; 211 width: 100%;
207 - height: 499px;  
208 a, 212 a,
209 img { 213 img {
210 display: block; 214 display: block;
@@ -213,9 +217,6 @@ @@ -213,9 +217,6 @@
213 } 217 }
214 } 218 }
215 .card-bd { 219 .card-bd {
216 - min-height: 180px;  
217 - margin-left: 30px;  
218 - margin-right: 30px;  
219 padding-top: 25px; 220 padding-top: 25px;
220 text-align: center; 221 text-align: center;
221 font-size: 24px; 222 font-size: 24px;
@@ -238,7 +239,7 @@ @@ -238,7 +239,7 @@
238 text-decoration: line-through; 239 text-decoration: line-through;
239 } 240 }
240 &.sale-price { 241 &.sale-price {
241 - color: $red; 242 + color: red;
242 } 243 }
243 } 244 }
244 245