fe / yoho-blk · Commits

Go to a project

Authored by biao
Commit 6ca974280ee337098a1f093f975f28d56c6bbd2b 1 parent 6d7eb86e

update for fix the channel style issue

Inline Side-by-side
Showing 16 changed files with 40 additions and 255 deletions
<div class="home-page">
<div class="home-page blk-page">
<div class="top-slider-container">
{{# content}}
{{#if slider}}
... ... @@ -6,7 +6,7 @@
{{/if}}
{{/ content}}
</div>
<div class="main-container clearfix">
<div class="main-container center-content clearfix">
{{# content}}
{{#if brandsAd}}
{{> ad}}
... ...
<div class="ad-banner">
{{#adBanner}}
<img class="lazy-img" data-original="{{image img 864 120}}" alt="">
<img class="lazy-img" data-original="{{image img 1150 160}}" alt="">
{{/adBanner}}
</div>
... ...
<div class="ad-container clearfix">
{{# brandsAd}}
<div class="ad {{#if @first}}first{{/if}}">
<img class="lazy-img" data-original="{{image img 165 165}}" alt="">
<img class="lazy-img" data-original="{{image img 240 240}}" alt="">
{{> brand-text-box}}
</div>
{{/ brandsAd}}
... ...
{{# classicBrands}}
<div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
{{# big}}
<img class="big-img lazy-img" data-original="{{image img 426 250}}" alt="big-img">
<img class="big-img lazy-img" data-original="{{image img 556 333}}" alt="big-img">
{{/ big}}
{{# small}}
<img class="small-img lazy-img {{#if @first}}first{{/if}}" data-original="{{image img 213 213}}" alt="big-img">
<img class="small-img lazy-img {{#if @first}}first{{/if}}" data-original="{{image img 283 283}}" alt="big-img">
{{/ small}}
</div>
{{/ classicBrands}}
... ...
<div class="classic-brands-container">
{{> floor-header}}
{{> floor}}
{{#if classicBrands}}
{{> brand-img-box}}
{{/if}}
... ...
<div class="editorial-container">
{{> floor-header}}
{{> floor}}
<div class="news-container">
{{# editorial}}
<div class="news left">
{{# big}}
<img class="lazy-img" data-original="{{image img 288 375}}" alt="">
<img class="lazy-img" data-original="{{image img 395 495}}" alt="">
{{/ big}}
</div>
<div class="news right">
{{# small}}
<img class="lazy-img {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 260 176}}" alt="">
<img class="lazy-img {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 360 240}}" alt="">
{{/ small}}
</div>
{{/ editorial}}
... ...
<div class="new-arrival">
{{> floor-header}}
{{> floor}}
<div class="arrival-item-box">
{{# newArrivals}}
<div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}">
{{#if even}}
<img class="lazy-img" data-original="{{image img 245 370}}" alt="">
<img class="lazy-img" data-original="{{#if smallImg}}{{image img 223 490}}{{^}}{{image img 325 490}}{{/if}}" alt="">
<div class="brand-name">
<span class="bottom">{{name}}</span>
</div>
... ... @@ -12,7 +12,7 @@
<div class="brand-name">
<span class="top">{{name}}</span>
</div>
<img class="lazy-img" data-original="{{image img 245 370}}" alt="">
<img class="lazy-img" data-original="{{#if smallImg}}{{image img 223 490}}{{^}}{{image img 325 490}}{{/if}}" alt="">
{{/if}}
</div>
{{/ newArrivals}}
... ...
<div class="style-icon-container">
{{> floor-header}}
{{> floor}}
<div class="smooth-card-container">
{{# styleIcon}}
<div class="card {{#if @first}}active{{/if}} {{#if @last}}last{{/if}}">
<div class="img" style="background-image: url('{{image img 160 240}}')"></div>
<div class="img" style="background-image: url('{{image img 218 320}}')"></div>
{{> brand-text-box}}
</div>
{{/ styleIcon}}
... ...
.ad-banner {
height: 120px;
height: 160px;
margin-top: 15px;
img {
... ...
.ad-container {
height: 225px;
height: 300px;
margin: 0 auto;
box-sizing: border-box;
border: 1PX solid $grayBorder;
border: 1pX solid $grayBorder;
background-color: #fff;
.ad {
... ... @@ -13,7 +13,7 @@
}
.ad.first {
border-right: 1PX solid $grayBorder;
border-right: 1pX solid $grayBorder;
}
img {
... ...
.brand-img-box {
width: 426px;
width: 566px;
box-sizing: border-box;
display: inline-block;
... ... @@ -17,12 +17,12 @@
.big-img {
width: 100%;
height: 250px;
height: 333px;
}
.small-img {
width: 50%;
height: 213px;
height: 283px;
display: inline-block;
box-sizing: border-box;
border: 1px solid $grayBorder;
... ...
... ... @@ -29,13 +29,13 @@
}
button {
width: 105px;
height: 26px;
width: 140px;
height: 35px;
position: absolute;
bottom: 29px;
background-color: white;
outline: none;
border: 1PX solid black;
border: 1pX solid black;
font-size: 12px;
cursor: pointer;
}
... ...
.editorial-container {
$bigImgWidth: 290px;
$smallImgWidth: 268px;
$smallImgHeight: 176px;
$bigImgWidth: 395px;
$smallImgWidth: 360px;
$smallImgHeight: 240px;
$space: 10px;
@extend .resource-container;
... ...
... ... @@ -78,7 +78,7 @@
margin: -30px 0 0;
width: 30px;
height: 60px;
line-height: 56px;
line-height: 66px;
text-align: center;
z-index: 2;
background: #000;
... ... @@ -263,223 +263,9 @@
}
}
.new-report {
img {
display: block;
width: 100%;
height: 100%;
}
.report-list {
float: left;
width: 868px;
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 282px;
height: 504px;
}
}
}
.last-item {
float: left;
width: 282px;
height: 504px;
overflow: hidden;
}
}
/* 优选品牌 */
.preference-brand {
overflow: hidden;
}
.preference-brand-list {
margin-top: 8px;
width: 1158px;
}
.preference-brand-item {
float: left;
margin-right: 8px;
margin-bottom: 8px;
a {
display: table-cell;
width: 185px;
height: 86px;
text-align: center;
vertical-align: middle;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
}
.preference-more {
float: left;
width: 185px;
height: 86px;
line-height: 100px;
text-align: center;
color: black;
font-size: 16px;
}
.img-slider-wrapper {
position: relative;
width: 100%;
height: 558px;
background: #8ae6e0;
overflow: hidden;
.img-brand-switch {
display: block;
a {
position: absolute;
top: 50%;
font-size: 36px;
color: #fff;
&.next {
right: 30px;
}
&.prev {
left: 30px;
}
}
}
}
.img-container-landscape {
box-sizing: border-box;
margin: 86px auto 0;
width: 982px;
height: 433px;
overflow: hidden;
.img-list {
width: 1000px;
height: 100%;
}
.img-item {
float: left;
box-sizing: border-box;
width: 320px !important;
height: 100%;
margin-right: 10px;
img {
width: 100%;
height: 100%;
}
}
}
.img-brand {
position: relative;
width: 100%;
height: 175px;
overflow: hidden;
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 1158px;
}
li {
float: left;
margin-right: 8px;
width: 378px !important;
height: 175px;
line-height: 175px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.img-brand-switch {
display: none;
a {
position: absolute;
top: 50%;
margin: -20px 0 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 2;
background: #fff;
opacity: 0.55;
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover {
opacity: 0.9;
}
}
}
}
.categorys-list {
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
&.cate-item0 {
width: 185px;
height: 504px;
}
&.cate-item1 {
width: 377px;
height: 504px;
}
img {
display: block;
width: 100%;
height: 100%;
}
}
}
.floor-header {
text-align: center;
height: 60px;
height: 80px;
line-height: 1.4;
font-weight: bold;
font-size: 16px;
... ... @@ -492,7 +278,6 @@
.main-container {
position: relative;
top: -60px;
width: 864px;
margin: 0 auto;
box-sizing: border-box;
}
... ...
.new-arrival {
$textHeight: 35px;
$imgHeight: 370px;
$textHeight: 47px;
$imgHeight: 490px;
@extend .resource-container;
... ... @@ -12,7 +12,7 @@
}
.arrival-item {
width: 245px;
width: 325px;
display: inline-block;
.brand-name {
... ... @@ -28,11 +28,11 @@
border-bottom: 1px solid #000;
&.top {
line-height: 20px;
line-height: 27px;
}
&.bottom {
line-height: 40px;
line-height: 53px;
}
}
}
... ... @@ -54,7 +54,7 @@
}
&.small-img {
width: 160px;
width: 223px;
}
}
}
... ...
.style-icon-container {
$width: 164px;
$height: 240px;
$width: 218px;
$height: 320px;
$space: 15px;
$buttonWidth: 105px;
$buttonWidth: 140px;
@extend .resource-container;
.smooth-card-container {
width: 880px;
width: 1170px;
height: $height;
margin: 0 auto;
overflow: hidden;
... ...