fe / yohobuywap-node · Commits

Go to a project

Authored by zzzzzzz
Commit df9819a65b003b8b55cbdc7b73066ab088d1ec8a 1 parent 48d053e1

人气单品楼层

Inline Side-by-side
Showing 6 changed files with 148 additions and 2 deletions
@@ -75,3 +75,5 @@ @@ -75,3 +75,5 @@
75 {{/content}} 75 {{/content}}
76 {{! 新新人专享}} 76 {{! 新新人专享}}
77 {{> resources/new-user-floor}} 77 {{> resources/new-user-floor}}
  78 +{{! 人气单品}}
  79 + {{> resources/hot-single}}
  1 +<div class="hot-single">
  2 + {{> common/floor-header-more}}
  3 + <a>
  4 + <img src="" alt="hot-single-banner" class="hot-single-banner" />
  5 + </a>
  6 + <div class="hot-single-goods-list" style="background: #A9ECF2">
  7 + <ul>
  8 + <li class="hot-single-goods">
  9 + <img src="" alt="goods" class="goods-pic">
  10 + <div class="goods-info">
  11 + <h3 class="price">&yen; 188.00</h3>
  12 + <p class="view-num">12人</p>
  13 + <p class="view-status">正在浏览</p>
  14 + </div>
  15 + </li>
  16 + <li class="hot-single-goods">
  17 + <img src="" alt="goods" class="goods-pic">
  18 + <div class="goods-info">
  19 + <h3 class="price">&yen; 188.00</h3>
  20 + <p class="view-num">22人</p>
  21 + <p class="view-status">已加入收藏</p>
  22 + </div>
  23 + </li>
  24 + <li class="hot-single-goods">
  25 + <img src="" alt="goods" class="goods-pic">
  26 + <div class="goods-info">
  27 + <h3 class="price">&yen; 188.00</h3>
  28 + <img src="" alt="little-head-icon" class="head-icon">
  29 + <p class="view-num view-margin">大大王</p>
  30 + <p class="view-status view-margin">10分钟前购买</p>
  31 + </div>
  32 + </li>
  33 + <li class="hot-single-goods">
  34 + <img src="" alt="goods" class="goods-pic">
  35 + <div class="goods-info">
  36 + <h3 class="price">&yen; 188.00</h3>
  37 + <p class="view-num">12人</p>
  38 + <p class="view-status">正在浏览</p>
  39 + </div>
  40 + </li>
  41 + <li class="hot-single-goods">
  42 + <img src="" alt="goods" class="goods-pic">
  43 + <div class="goods-info">
  44 + <h3 class="price">&yen; 188.00</h3>
  45 + <p class="view-num">22人</p>
  46 + <p class="view-status">已加入收藏</p>
  47 + </div>
  48 + </li>
  49 + <li class="hot-single-goods">
  50 + <img src="" alt="goods" class="goods-pic">
  51 + <div class="goods-info">
  52 + <h3 class="price">&yen; 188.00</h3>
  53 + <img src="" alt="little-head-icon" class="head-icon">
  54 + <p class="view-num view-margin">大大王</p>
  55 + <p class="view-status view-margin">10分钟前购买</p>
  56 + </div>
  57 + </li>
  58 + </ul>
  59 + </div>
  60 +</div>
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 {{> common/floor-header-more}} 2 {{> common/floor-header-more}}
3 <div class="new-user-icon">新人专享</div> 3 <div class="new-user-icon">新人专享</div>
4 <a> 4 <a>
5 - <img src="" alt="banner" class="new-user-banner" /> 5 + <img src="" alt="new-user-banner" class="new-user-banner" />
6 </a> 6 </a>
7 <div class="new-user-goods-container" style="background: #A9D4F3"> 7 <div class="new-user-goods-container" style="background: #A9D4F3">
8 <ul> 8 <ul>
@@ -27,6 +27,7 @@ @@ -27,6 +27,7 @@
27 @import "three-picture"; 27 @import "three-picture";
28 @import "six-lines-floor"; 28 @import "six-lines-floor";
29 @import "new-user-floor"; 29 @import "new-user-floor";
  30 +@import "hot-single";
30 31
31 .mobile-container { 32 .mobile-container {
32 margin-left: auto; 33 margin-left: auto;
  1 +.hot-single {
  2 + position: relative;
  3 + background: #fff;
  4 + -webkit-overflow-scrolling: touch;
  5 +
  6 + &-banner {
  7 + height: 200px;
  8 + width: 100%;
  9 + overflow: hidden;
  10 + }
  11 +
  12 + &-goods-list {
  13 + height: 330px;
  14 + width: 100%;
  15 + overflow-x: scroll;
  16 + overflow-y: hidden;
  17 + background-size: 100% 100%;
  18 +
  19 + ul {
  20 + height: 330px;
  21 + padding: 25px 0 17px 26px;
  22 + white-space: nowrap;
  23 + }
  24 + }
  25 +
  26 + &-goods {
  27 + display: inline-block;
  28 + height: 290px;
  29 + width: 153px;
  30 + margin-right: 26px;
  31 + background: #ccc;
  32 + border-radius: 5px;
  33 + vertical-align: top;
  34 +
  35 + .goods-pic {
  36 + height: 206px;
  37 + width: 100%;
  38 + }
  39 +
  40 + .goods-info {
  41 + position: relative;
  42 + height: 84px;
  43 + width: 100%;
  44 + background: #fff;
  45 + padding: 12px 0 10px 10px;
  46 +
  47 + .price {
  48 + color: #444;
  49 + font-size: 20px;
  50 + line-height: 1;
  51 + }
  52 +
  53 + .view-num {
  54 + color: #b0b0b0;
  55 + font-size: 15px;
  56 + margin-top: 10px;
  57 + line-height: 1;
  58 + }
  59 +
  60 + .view-status {
  61 + color: #b0b0b0;
  62 + font-size: 15px;
  63 + margin-top: 7px;
  64 + line-height: 1;
  65 + }
  66 +
  67 + .view-margin {
  68 + margin-left: 40px;
  69 + }
  70 +
  71 + .head-icon {
  72 + position: absolute;
  73 + left: 10px;
  74 + bottom: 10px;
  75 + height: 32px;
  76 + width: 32px;
  77 + border-radius: 50%;
  78 + }
  79 + }
  80 + }
  81 +}
@@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
19 writing-mode: tb-rl; 19 writing-mode: tb-rl;
20 -webkit-writing-mode: tb-rl; 20 -webkit-writing-mode: tb-rl;
21 -ms-writing-mode: tb-rl; 21 -ms-writing-mode: tb-rl;
  22 + z-index: 9;
22 } 23 }
23 } 24 }
24 25
@@ -36,6 +37,7 @@ @@ -36,6 +37,7 @@
36 background-size: 100% 100%; 37 background-size: 100% 100%;
37 38
38 ul { 39 ul {
  40 + height: 213px;
39 padding: 17px 0 26px 50px; 41 padding: 17px 0 26px 50px;
40 white-space: nowrap; 42 white-space: nowrap;
41 } 43 }
@@ -89,7 +91,7 @@ @@ -89,7 +91,7 @@
89 margin: 25px 22px 0 26px; 91 margin: 25px 22px 0 26px;
90 line-height: 1.5; 92 line-height: 1.5;
91 text-align: right; 93 text-align: right;
92 - font-size: 14px; 94 + font-size: 15px;
93 color: #c5c5c5; 95 color: #c5c5c5;
94 } 96 }
95 } 97 }