fe / yoho-blk · Commits

Go to a project

Authored by biao
Commit ad6ae285391acc6d3c1571c5b5fc1ff701db0564 1 parent 427f9121

update for classic brands

Inline Side-by-side
Showing 13 changed files with 167 additions and 6 deletions
... ... @@ -72,11 +72,73 @@ const getContent = () => {
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/30/10/01714bacda5e9fa323a1dc5f720a7f7140.jpg?imageView2/1/w/185/h/248',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/30/10/01714bacda5e9fa323a1dc5f720a7f7140.jpg?imageView2/1/w/185/h/248',
link: ''
}
],
bottomSpace: true
},
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
right: true,
bottomSpace: true
},
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
]
},
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
right: true
}
]
},
{
... ... @@ -115,7 +177,7 @@ const getContent = () => {
},
{
adBanner: {
img: '',
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
},
... ...
... ... @@ -12,9 +12,15 @@
{{#if newArrivals}}
{{> new-arrival}}
{{/if}}
{{#if classicBrands}}
{{> classic-brands}}
{{/if}}
{{#if styleIcon}}
{{> style-icon}}
{{/if}}
{{#if adBanner}}
{{> ad-banner}}
{{/if}}
{{/ content}}
</div>
</div>
... ...
<div class="ad-banner">
{{#adBanner}}
<img src="{{image img 864 120}}" alt="">
{{/adBanner}}
</div>
... ...
{{# classicBrands}}
<div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
{{# big}}
<img class="big-img" src="{{image img 426 250}}" alt="big-img">
{{/ big}}
{{# small}}
<img class="small-img {{#if @first}}first{{/if}}" src="{{image img 213 213}}" alt="big-img">
{{/ small}}
</div>
{{/ classicBrands}}
... ...
<div class="classic-brands-container">
{{> floor-header}}
{{#if classicBrands}}
{{> brand-img-box}}
{{/if}}
</div>
... ...
... ... @@ -2,7 +2,7 @@
{{> floor-header}}
<div class="smooth-card-container">
{{# styleIcon}}
<div class="card {{#if @first}}active{{/if}}">
<div class="card {{#if @first}}active{{/if}} {{#if @last}}last{{/if}}">
<div class="img" style="background-image: url('{{image img 160 240}}')"></div>
{{> brand-text-box}}
</div>
... ...
.ad-banner {
height: 120px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
border: none;
}
}
... ...
.brand-img-box {
width: 426px;
box-sizing: border-box;
display: inline-block;
&.mb10 {
margin-bottom: 10px;
}
&.right {
float: right;
}
img {
float: left;
}
.big-img {
width: 100%;
height: 250px;
}
.small-img {
width: 50%;
height: 213px;
display: inline-block;
box-sizing: border-box;
border: 1px solid $grayBorder;
border-top: none;
&.first {
border-right: none;
}
}
}
... ...
... ... @@ -38,5 +38,6 @@
outline: none;
border: 1PX solid black;
font-size: 12px;
cursor: pointer;
}
}
... ...
.classic-brands-container {
@extend .resource-container;
}
... ...
... ... @@ -4,9 +4,15 @@ $grayBorder: #f0f0f0;
margin-top: 60px;
}
.cursor-pointer {
cursor: pointer;
}
@import "home";
@import "ad";
@import "brand-text-box";
@import "brand-img-box";
@import "new-arrival";
@import "classic-brands";
@import "style-icon";
@import "ad-banner";
... ...
... ... @@ -20,6 +20,8 @@
font-size: 12px;
span {
@extend .cursor-pointer;
padding-bottom: 3px;
border-bottom: 1px solid #000;
... ... @@ -35,13 +37,15 @@
img {
@extend .cursor-pointer;
width: 100%;
height: $imgHeight;
}
&.normal {
float: left;
margin-right: 17px;
margin-right: 18px;
}
&.last {
... ...
.style-icon-container {
$width: 160px;
$width: 164px;
$height: 240px;
$space: 15px;
@extend .resource-container;
clear: both;
.smooth-card-container {
width: 880px;
height: $height;
margin: 0 auto;
overflow: hidden;
}
.card {
... ... @@ -17,6 +19,7 @@
position: relative;
box-sizing: border-box;
.img {
width: $width;
height: 100%;
... ... @@ -27,6 +30,12 @@
background-position: center center;
}
&.last {
.img {
margin-right: 0;
}
}
.brand-text-box {
$size: 12px;
$line-height: 1.2;
... ... @@ -35,6 +44,7 @@
width: 0;
border: none;
p {
height: calc($size*$line-height*$lines-to-show);
width: calc($width-2*$space);
... ... @@ -58,6 +68,7 @@
&.active {
width: calc($width*2+$space);
float: left;
.img {
margin-right: 0;
... ... @@ -69,7 +80,7 @@
display: inline-block;
float: left;
padding: 25px 0 25px $space;
border: 1px solid #ccc;
border: 1px solid #404040;
border-left: none;
* {
... ... @@ -81,5 +92,6 @@
}
}
}
}
... ...