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 149 additions and 3 deletions
... ... @@ -74,4 +74,6 @@
{{/if}}
{{/content}}
{{! 新新人专享}}
{{> resources/new-user-floor}}
{{> resources/new-user-floor}}
{{! 人气单品}}
{{> resources/hot-single}}
... ...
<div class="hot-single">
{{> common/floor-header-more}}
<a>
<img src="" alt="hot-single-banner" class="hot-single-banner" />
</a>
<div class="hot-single-goods-list" style="background: #A9ECF2">
<ul>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">12人</p>
<p class="view-status">正在浏览</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">22人</p>
<p class="view-status">已加入收藏</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<img src="" alt="little-head-icon" class="head-icon">
<p class="view-num view-margin">大大王</p>
<p class="view-status view-margin">10分钟前购买</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">12人</p>
<p class="view-status">正在浏览</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">22人</p>
<p class="view-status">已加入收藏</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<img src="" alt="little-head-icon" class="head-icon">
<p class="view-num view-margin">大大王</p>
<p class="view-status view-margin">10分钟前购买</p>
</div>
</li>
</ul>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -2,7 +2,7 @@
{{> common/floor-header-more}}
<div class="new-user-icon">新人专享</div>
<a>
<img src="" alt="banner" class="new-user-banner" />
<img src="" alt="new-user-banner" class="new-user-banner" />
</a>
<div class="new-user-goods-container" style="background: #A9D4F3">
<ul>
... ...
... ... @@ -27,6 +27,7 @@
@import "three-picture";
@import "six-lines-floor";
@import "new-user-floor";
@import "hot-single";
.mobile-container {
margin-left: auto;
... ...
.hot-single {
position: relative;
background: #fff;
-webkit-overflow-scrolling: touch;
&-banner {
height: 200px;
width: 100%;
overflow: hidden;
}
&-goods-list {
height: 330px;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
background-size: 100% 100%;
ul {
height: 330px;
padding: 25px 0 17px 26px;
white-space: nowrap;
}
}
&-goods {
display: inline-block;
height: 290px;
width: 153px;
margin-right: 26px;
background: #ccc;
border-radius: 5px;
vertical-align: top;
.goods-pic {
height: 206px;
width: 100%;
}
.goods-info {
position: relative;
height: 84px;
width: 100%;
background: #fff;
padding: 12px 0 10px 10px;
.price {
color: #444;
font-size: 20px;
line-height: 1;
}
.view-num {
color: #b0b0b0;
font-size: 15px;
margin-top: 10px;
line-height: 1;
}
.view-status {
color: #b0b0b0;
font-size: 15px;
margin-top: 7px;
line-height: 1;
}
.view-margin {
margin-left: 40px;
}
.head-icon {
position: absolute;
left: 10px;
bottom: 10px;
height: 32px;
width: 32px;
border-radius: 50%;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -19,6 +19,7 @@
writing-mode: tb-rl;
-webkit-writing-mode: tb-rl;
-ms-writing-mode: tb-rl;
z-index: 9;
}
}
... ... @@ -36,6 +37,7 @@
background-size: 100% 100%;
ul {
height: 213px;
padding: 17px 0 26px 50px;
white-space: nowrap;
}
... ... @@ -89,7 +91,7 @@
margin: 25px 22px 0 26px;
line-height: 1.5;
text-align: right;
font-size: 14px;
font-size: 15px;
color: #c5c5c5;
}
}
... ...