fe / yohoblk-wap · Commits

Go to a project

Authored by 郭成尧
Commit ce5f26dcce7baff6ed6b5fdd0ef303fb708d44ae 1 parent cf45b212

'资讯列表收藏列表样式调整'

Inline Side-by-side
Showing 2 changed files with 59 additions and 42 deletions
@@ -17,6 +17,7 @@ @@ -17,6 +17,7 @@
17 <span class="time">{{editorial.publishTime}}</span> 17 <span class="time">{{editorial.publishTime}}</span>
18 <span class="icon icon-share share" @click="share(editorial.title, editorial.intro, editorial.src, editorial.id)"></span> 18 <span class="icon icon-share share" @click="share(editorial.title, editorial.intro, editorial.src, editorial.id)"></span>
19 </div> 19 </div>
  20 + <hr class="bottom-hr">
20 </div> 21 </div>
21 </div> 22 </div>
22 </template> 23 </template>
@@ -38,34 +39,47 @@ @@ -38,34 +39,47 @@
38 .title { 39 .title {
39 background: #fff; 40 background: #fff;
40 font-size: 42px; 41 font-size: 42px;
41 - line-height: 1.2; 42 + line-height: 43px;
42 font-weight: 700; 43 font-weight: 700;
43 - padding: 10px 20px; 44 + padding: 30px;
44 } 45 }
45 46
46 .editorial-des { 47 .editorial-des {
47 background: #fff; 48 background: #fff;
48 - padding: 10px 20px; 49 + padding: 0 30px 30px;
49 color: #b0b0b0; 50 color: #b0b0b0;
50 font-size: 28px; 51 font-size: 28px;
51 line-height: 32px; 52 line-height: 32px;
52 } 53 }
53 54
54 hr { 55 hr {
55 - margin: 0 20px; 56 + margin: 0 30px;
56 border: #eee 1px solid; 57 border: #eee 1px solid;
  58 + border-bottom: 0;
57 } 59 }
58 60
59 .bottom { 61 .bottom {
60 - padding: 10px 20px; 62 + padding: 10px 30px;
61 background: #fff; 63 background: #fff;
62 color: #b0b0b0; 64 color: #b0b0b0;
63 font-size: 24px; 65 font-size: 24px;
  66 + height: 78px;
  67 +
  68 + span {
  69 + display: inline-block;
  70 + padding: 12px 0;
  71 + }
64 72
65 .share { 73 .share {
66 float: right; 74 float: right;
  75 + padding-top: 16px;
67 } 76 }
68 } 77 }
  78 +
  79 + .bottom-hr {
  80 + border: #eee 1px solid;
  81 + border-bottom: 0;
  82 + }
69 } 83 }
70 </style> 84 </style>
71 <script> 85 <script>
@@ -129,7 +143,7 @@ @@ -129,7 +143,7 @@
129 143
130 /* 分享资讯 */ 144 /* 分享资讯 */
131 share(title, des, img, id) { 145 share(title, des, img, id) {
132 - title = title.length > 15 ? title.substr(0,15)+'...' : title; 146 + title = title.length > 15 ? title.substr(0, 15) + '...' : title;
133 img = util.getImgUrl(img, 300, 300, 2); 147 img = util.getImgUrl(img, 300, 300, 2);
134 yoho.goShare({ 148 yoho.goShare({
135 title: title, 149 title: title,
1 <template> 1 <template>
2 - <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10" > 2 + <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
3 <ul class="fav-product-list"> 3 <ul class="fav-product-list">
4 - <li v-for="item in productData" track-by="fav_id" id="li-{{item.fav_id}}"  
5 - v-touch-options:pan="{ direction: 'horizontal', threshold: 100}"  
6 - v-touch:panstart="panstart(item.fav_id)"  
7 - v-touch:panmove="panmove(item.fav_id)"  
8 - v-touch:panend="panend(item.fav_id)">  
9 - <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn(item.fav_id)">  
10 - <span class="fav-del-span"><span class="icon icon-edit-del"></span></span>  
11 - </div>  
12 - <a :href="item | goodsUrl 'collection'">  
13 - <div class="fav-img-box">  
14 - <img :src="item.imgUrl | resize 152 203" alt=""/> 4 + <div v-for="item in productData">
  5 + <li track-by="fav_id" id="li-{{item.fav_id}}" v-touch-options:pan="{ direction: 'horizontal', threshold: 100}" v-touch:panstart="panstart(item.fav_id)"
  6 + v-touch:panmove="panmove(item.fav_id)" v-touch:panend="panend(item.fav_id)">
  7 + <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn(item.fav_id)">
  8 + <span class="fav-del-span"><span class="icon icon-edit-del"></span></span>
15 </div> 9 </div>
16 - <div class="fav-info-list">  
17 - <span class="title line-clamp-2">{{item.title}}</span>  
18 - <br/>  
19 - <div class="fav-price">  
20 - <span class="new-price" v-if="item.discountPrice">{{item.discountPrice}}</span>  
21 - <span class="{{ item.discountPrice ? 'price-underline' : ''}}">{{item.price}}</span> 10 + <a :href="item | goodsUrl 'collection'">
  11 + <div class="fav-img-box">
  12 + <img :src="item.imgUrl | resize 152 203" alt="" />
22 </div> 13 </div>
23 - <br/>  
24 - <div class="save-price">  
25 - <span class="sell-out" v-if="item.sellOut || item.invalidGoods">{{item.sellOut ? '已售罄' : '已下架'}}</span> 14 + <div class="fav-info-list">
  15 + <span class="title line-clamp-2">{{item.title}}</span>
  16 + <div class="fav-price">
  17 + <span class="new-price" v-if="item.discountPrice">{{item.discountPrice}}</span>
  18 + <span class="{{ item.discountPrice ? 'price-underline' : ''}}">{{item.price}}</span>
  19 + </div>
  20 + <br/>
  21 + <div class="save-price">
  22 + <span class="sell-out" v-if="item.sellOut || item.invalidGoods">{{item.sellOut ? '已售罄' : '已下架'}}</span>
  23 + </div>
26 </div> 24 </div>
  25 + </a>
  26 + <div class="fav-del-right hide" id="del-{{item.fav_id}}" @click="delItem($index, item.fav_id)">
  27 + <span class="icon icon-delete"></span>
  28 + <br/>
  29 + <span class="fav-del-txt">删除</span>
27 </div> 30 </div>
28 - </a>  
29 - <div class="fav-del-right hide" id="del-{{item.fav_id}}" @click="delItem($index, item.fav_id)">  
30 - <span class="icon icon-delete"></span>  
31 - <br/>  
32 - <span class="fav-del-txt">删除</span>  
33 - </div>  
34 - </li> 31 + </li>
  32 + <hr>
  33 + </div>
35 </ul> 34 </ul>
36 <div class="fav-null-box {{ nullbox }}"> 35 <div class="fav-null-box {{ nullbox }}">
37 <span class="fav-null">您暂无收藏任何商品</span> 36 <span class="fav-null">您暂无收藏任何商品</span>
@@ -266,13 +265,19 @@ @@ -266,13 +265,19 @@
266 } 265 }
267 266
268 .fav-product-list { 267 .fav-product-list {
269 - padding-left: 20px;  
270 list-style: none; 268 list-style: none;
271 overflow: hidden; 269 overflow: hidden;
272 270
  271 + hr {
  272 + margin-right: 30px;
  273 + border: 1px solid #eee;
  274 + border-bottom: 0;
  275 + }
  276 +
273 li { 277 li {
274 position: relative; 278 position: relative;
275 height: 205px; 279 height: 205px;
  280 + margin: 20px 0;
276 } 281 }
277 282
278 .fav-del-left { 283 .fav-del-left {
@@ -301,18 +306,18 @@ @@ -301,18 +306,18 @@
301 306
302 .fav-del-right { 307 .fav-del-right {
303 position: absolute; 308 position: absolute;
304 - top: 0; 309 + top: -20px;
305 right: -126px; 310 right: -126px;
306 background: #ff3b30; 311 background: #ff3b30;
307 width: 126px; 312 width: 126px;
308 - height: 200px; 313 + height: 245px;
309 text-align: center; 314 text-align: center;
310 315
311 .icon-delete { 316 .icon-delete {
312 display: inline-block; 317 display: inline-block;
313 color: white; 318 color: white;
314 font-size: 35px; 319 font-size: 35px;
315 - margin-top: 55px; 320 + margin-top: 85px;
316 } 321 }
317 322
318 .fav-del-txt { 323 .fav-del-txt {
@@ -342,7 +347,6 @@ @@ -342,7 +347,6 @@
342 .fav-info-list { 347 .fav-info-list {
343 color: #444; 348 color: #444;
344 font-size: 24px; 349 font-size: 24px;
345 - border-bottom: 1px solid #e0e0e0;  
346 padding-bottom: 20px; 350 padding-bottom: 20px;
347 height: 203px; 351 height: 203px;
348 overflow: hidden; 352 overflow: hidden;
@@ -352,11 +356,10 @@ @@ -352,11 +356,10 @@
352 width: 98%; 356 width: 98%;
353 text-overflow: ellipsis; 357 text-overflow: ellipsis;
354 font-size: 28px; 358 font-size: 28px;
355 - margin-top: 10px;  
356 } 359 }
357 360
358 .fav-price { 361 .fav-price {
359 - margin-top: 20px; 362 + margin-top: 30px;
360 } 363 }
361 364
362 .new-price { 365 .new-price {
@@ -381,7 +384,7 @@ @@ -381,7 +384,7 @@
381 384
382 .sell-out { 385 .sell-out {
383 float: right; 386 float: right;
384 - padding: 5px 18px; 387 + padding: 5px 30px;
385 color: #b0b0b0; 388 color: #b0b0b0;
386 border-radius: 20px; 389 border-radius: 20px;
387 font-size: 22px; 390 font-size: 22px;