Authored by biao

add thumb-row for the home page

@import "header-download", "banner-top","banner-center","banner-bottom", "side-nav", "floor-header", "hot-brands", "fine-brands", "creative-life", "plus-star", "maybe-like",
"icons-enter","trendsetter-collocation",
"trend-topics","goods-category","hot-brands", "hot-category", "home-header";
"trend-topics","goods-category","hot-brands", "hot-category", "home-header", "thumb-row";
.mobile-container{
width: 100%;
overflow: hidden;
... ... @@ -21,7 +21,7 @@
.overlay {
display: none;
position: absolute;
top: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
... ...
#thumb-row {
@include flexbox((
display: box,
box-pack: justify
), $version: 1);
@include flexbox((
display: flex,
justify-content: space-around
), $version: 3);
background-color: #f0f0f0;
text-align: center;
padding: 32rem/$pxConvertRem 14rem/$pxConvertRem 0;
.thumb-row-box {
display: inline-block;
width: 275rem/$pxConvertRem;
height: 160rem/$pxConvertRem;
border-radius: 4px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
}
... ...
... ... @@ -14,6 +14,11 @@
{{> home/banner}}
{{/ banner}}
{{! 两个小图}}
{{# smallPic}}
{{> home/thumb_row}}
{{/ smallPic}}
{{! 热门品类}}
{{# hotCategory}}
{{> home/hot_category}}
... ... @@ -38,7 +43,7 @@
{{# trendTopics}}
{{> home/trend_topics}}
{{/ trendTopics}}
{{! 潮流时装/经典裤裙/时尚靴履/潮人配饰/潮流上装}}
{{# goodsCategory}}
{{> home/goods_category}}
... ... @@ -55,5 +60,5 @@
{{/ plusStar}}
{{/ content}}
{{! 可能喜欢}}
{{> home/maybe_like}}
\ No newline at end of file
{{! 可能喜欢}}
{{> home/maybe_like}}
... ...
<div id="thumb-row">
{{# list}}
<a href="{{url}}">
<div class="thumb-row-box" style="background-image:url({{img}})"></div>
</a>
{{/ list}}
</div>
... ...