fe / yohobuywap-node · Commits

Go to a project

Authored by zhangxiaoru
Commit f76437f7f7ea83273a6e79162ef0b477ef3e1de0 1 parent 2f3dada0

推荐店铺优化

Inline Side-by-side
Showing 5 changed files with 162 additions and 59 deletions
@@ -254,9 +254,11 @@ const getSearchData = (params) => { @@ -254,9 +254,11 @@ const getSearchData = (params) => {
254 !params.shop_id && !params.brand && !params.isApp) { 254 !params.shop_id && !params.brand && !params.isApp) {
255 255
256 for (let i = 0; i < result.data.rec_shop_list.length; i++) { 256 for (let i = 0; i < result.data.rec_shop_list.length; i++) {
257 - result.data.rec_shop_list[i].is_shop = true;  
258 - newList.list.splice(parseInt(result.data.rec_shop_list[i].insert_index, 10), 0,  
259 - result.data.rec_shop_list[i]); 257 + if (parseInt(result.data.rec_shop_list[i].show_type, 10) === 1) {
  258 + result.data.rec_shop_list[i].is_shop = true;
  259 + newList.list.splice(parseInt(result.data.rec_shop_list[i].insert_index, 10), 0,
  260 + result.data.rec_shop_list[i]);
  261 + }
260 } 262 }
261 } 263 }
262 264
@@ -2,19 +2,21 @@ @@ -2,19 +2,21 @@
2 {{#if is_shop}} 2 {{#if is_shop}}
3 <div class="good-info brand-info" data-type="hot-shop" data-brand="" data-shop=""> 3 <div class="good-info brand-info" data-type="hot-shop" data-brand="" data-shop="">
4 <div class="brand-info-box"> 4 <div class="brand-info-box">
5 - <img src="{{image shop_logo 240 85}}" alt="LALABOBO">  
6 - <h5 class="bname">{{shop_name}}</h5> 5 + <img src="{{image shop_logo 240 85}}" alt="{{shop_name}}">
  6 + {{!-- <h5 class="bname">{{shop_name}}</h5> --}}
7 <p class="summary"> 7 <p class="summary">
8 - <span class="summary-info">  
9 - <b>{{new_product_num}}</b>  
10 - <b>上新</b>  
11 - </span>  
12 - <span class="summary-info">  
13 - <b>{{favorite_num}}</b>  
14 - <b>收藏</b>  
15 - </span> 8 + 上新<b>{{new_product_num}}</b>件&nbsp;
  9 + &nbsp;<b>{{favorite_num}}</b>人收藏
16 </p> 10 </p>
17 <a href="//m.yohobuy.com/product/index/brand?domain={{shop_domain}}" class="entry">进入店铺<span></span></a> 11 <a href="//m.yohobuy.com/product/index/brand?domain={{shop_domain}}" class="entry">进入店铺<span></span></a>
  12 +
  13 + <div class="shop-goods">
  14 + {{#product_list}}
  15 + <div class="info">
  16 + <img class="lazy" src="{{image default_images 110 145}}"></img>
  17 + </div>
  18 + {{/product_list}}
  19 + </div>
18 </div> 20 </div>
19 </div> 21 </div>
20 {{else}} 22 {{else}}
@@ -2,8 +2,16 @@ @@ -2,8 +2,16 @@
2 <div class="good-info brand-info" data-type="hot-shop" data-brand="{{brand_id}}" data-shop="{{shop_id}}"> 2 <div class="good-info brand-info" data-type="hot-shop" data-brand="{{brand_id}}" data-shop="{{shop_id}}">
3 <div class="brand-info-box"> 3 <div class="brand-info-box">
4 <img src="{{image shop_logo 240 100}}" alt="{{shop_name}}"> 4 <img src="{{image shop_logo 240 100}}" alt="{{shop_name}}">
5 - <h5 class="bname">{{shop_name}}</h5>  
6 - <p class="summary">上新<span class="red">{{new_product_num}}</span>件&nbsp;&nbsp;<span class="red">{{favorite_num}}</span>人收藏</p> 5 + {{!-- <h5 class="bname">{{shop_name}}</h5> --}}
  6 + <p class="summary">上新<b>{{new_product_num}}</b>件&nbsp;&nbsp;<b>{{favorite_num}}</b>人收藏</p>
7 <a href="//m.yohobuy.com/product/index/brand?domain={{shop_domain}}" class="entry">进入店铺</a> 7 <a href="//m.yohobuy.com/product/index/brand?domain={{shop_domain}}" class="entry">进入店铺</a>
  8 +
  9 + <div class="shop-goods">
  10 + {{#product_list}}
  11 + <div class="info">
  12 + <img class="lazy" src="{{image default_images 110 145}}"></img>
  13 + </div>
  14 + {{/product_list}}
  15 + </div>
8 </div> 16 </div>
9 -</div>  
  17 +</div>
1 .brand-info { 1 .brand-info {
2 padding-top: 28px; 2 padding-top: 28px;
3 - padding-bottom: 55px;  
4 text-align: center; 3 text-align: center;
5 4
6 .brand-info-box { 5 .brand-info-box {
7 - background-color: #f5f5f5;  
8 - padding-top: 22px;  
9 - height: 368px; 6 + padding-top: 40px;
  7 + height: 478px;
10 overflow: hidden; 8 overflow: hidden;
  9 + border: 2px solid #e0e0e0;
11 } 10 }
12 11
13 img { 12 img {
14 - width: 141px;  
15 - height: 66px; 13 + height: 80px;
16 } 14 }
17 15
18 .bname { 16 .bname {
19 - font-size: 18px;  
20 - color: #b0b0b0; 17 + font-size: 24px;
  18 + color: #444;
21 margin-top: 40px; 19 margin-top: 40px;
22 - margin-bottom: 60px; 20 + margin-bottom: 58px;
23 } 21 }
24 22
25 .summary { 23 .summary {
26 - font-size: 16px;  
27 - margin-bottom: 36px; 24 + font-size: 23px;
  25 + color: #b0b0b0;
  26 + margin-top: 25px;
28 27
29 - .red {  
30 - color: #e27b88; 28 + b {
  29 + color: #d60018;
31 } 30 }
32 } 31 }
33 32
34 .entry { 33 .entry {
35 - display: inline-block;  
36 - height: 50px;  
37 - padding-left: 19px;  
38 - padding-right: 19px;  
39 - line-height: 50px;  
40 - color: #444;  
41 - border: 2px solid #444;  
42 - border-radius: 5px; 34 + display: flex;
  35 + align-items: center;
  36 + justify-content: center;
  37 + height: 45px;
  38 + font-size: 24px;
  39 + line-height: 60px;
  40 + color: #fff;
  41 + background-color: #d0021b;
  42 + width: 170px;
  43 + margin: 35px 53px;
  44 +
  45 + span {
  46 + background-image: resolve("product/shop-entry.png");
  47 + display: inline-block;
  48 + width: 14px;
  49 + height: 20px;
  50 + background-size: 100%;
  51 + margin-left: 10px;
  52 + }
  53 + }
  54 +
  55 + .shop-goods {
  56 + border-top: 1px solid #e0e0e0;
  57 + position: relative;
  58 + padding: 18px 16px;
  59 +
  60 + &:before {
  61 + content: "";
  62 + position: absolute;
  63 + top: -25px;
  64 + left: 47%;
  65 + width: 0;
  66 + height: 0;
  67 + border-right: 10px solid transparent;
  68 + border-bottom: 13px solid #e0e0e0;
  69 + border-top: 10px solid transparent;
  70 + border-left: 10px solid transparent;
  71 + }
  72 +
  73 + &:after {
  74 + content: "";
  75 + position: absolute;
  76 + top: -22px;
  77 + left: 47%;
  78 + width: 0;
  79 + height: 0;
  80 + border-right: 10px solid transparent;
  81 + border-bottom: 13px solid #fff;
  82 + border-top: 10px solid transparent;
  83 + border-left: 10px solid transparent;
  84 + }
  85 +
  86 + .info {
  87 + width: 110px;
  88 + height: 145px;
  89 + float: left;
  90 + }
  91 +
  92 + img {
  93 + width: 100%;
  94 + height: 100%;
  95 + }
  96 +
  97 + .info:first-child {
  98 + margin-right: 20px;
  99 + }
43 } 100 }
44 } 101 }
@@ -402,15 +402,14 @@ @@ -402,15 +402,14 @@
402 text-align: center; 402 text-align: center;
403 403
404 .brand-info-box { 404 .brand-info-box {
405 - padding-top: 72px; 405 + padding-top: 40px;
406 height: 478px; 406 height: 478px;
407 overflow: hidden; 407 overflow: hidden;
408 border: 2px solid #e0e0e0; 408 border: 2px solid #e0e0e0;
409 } 409 }
410 410
411 img { 411 img {
412 - width: 240px;  
413 - height: 100px; 412 + height: 80px;
414 } 413 }
415 414
416 .bname { 415 .bname {
@@ -421,23 +420,12 @@ @@ -421,23 +420,12 @@
421 } 420 }
422 421
423 .summary { 422 .summary {
424 - font-size: 30px;  
425 - color: #444;  
426 - }  
427 -  
428 - .summary-info {  
429 - width: 48%;  
430 - display: inline-block;  
431 - text-align: center; 423 + font-size: 23px;
  424 + color: #b0b0b0;
  425 + margin-top: 25px;
432 426
433 b { 427 b {
434 - display: block;  
435 - width: 100%;  
436 - }  
437 -  
438 - b:nth-child(2) {  
439 - color: #b0b0b0;  
440 - font-size: 22px; 428 + color: #d60018;
441 } 429 }
442 } 430 }
443 431
@@ -445,14 +433,13 @@ @@ -445,14 +433,13 @@
445 display: flex; 433 display: flex;
446 align-items: center; 434 align-items: center;
447 justify-content: center; 435 justify-content: center;
448 - height: 60px; 436 + height: 45px;
449 font-size: 24px; 437 font-size: 24px;
450 - margin: 0 20px;  
451 line-height: 60px; 438 line-height: 60px;
452 color: #fff; 439 color: #fff;
453 background-color: #d0021b; 440 background-color: #d0021b;
454 - width: 85%;  
455 - margin-top: 18px; 441 + width: 170px;
  442 + margin: 35px 53px;
456 443
457 span { 444 span {
458 background-image: resolve("product/shop-entry.png"); 445 background-image: resolve("product/shop-entry.png");
@@ -463,6 +450,53 @@ @@ -463,6 +450,53 @@
463 margin-left: 10px; 450 margin-left: 10px;
464 } 451 }
465 } 452 }
  453 +
  454 + .shop-goods {
  455 + border-top: 1px solid #e0e0e0;
  456 + position: relative;
  457 + padding: 18px 16px;
  458 +
  459 + &:before {
  460 + content: "";
  461 + position: absolute;
  462 + top: -25px;
  463 + left: 47%;
  464 + width: 0;
  465 + height: 0;
  466 + border-right: 10px solid transparent;
  467 + border-bottom: 13px solid #e0e0e0;
  468 + border-top: 10px solid transparent;
  469 + border-left: 10px solid transparent;
  470 + }
  471 +
  472 + &:after {
  473 + content: "";
  474 + position: absolute;
  475 + top: -22px;
  476 + left: 47%;
  477 + width: 0;
  478 + height: 0;
  479 + border-right: 10px solid transparent;
  480 + border-bottom: 13px solid #fff;
  481 + border-top: 10px solid transparent;
  482 + border-left: 10px solid transparent;
  483 + }
  484 +
  485 + .info {
  486 + width: 110px;
  487 + height: 145px;
  488 + float: left;
  489 + }
  490 +
  491 + img {
  492 + width: 100%;
  493 + height: 100%;
  494 + }
  495 +
  496 + .info:first-child {
  497 + margin-right: 20px;
  498 + }
  499 + }
466 } 500 }
467 } 501 }
468 502