fe / yoho-blk · Commits

Go to a project

Authored by zhangxiaoru
Commit e175e24aa6c5a4f0921ef38cf2a97c5050574261 2 parents 5c6e8927 58e1f826

样式

Inline Side-by-side
Showing 3 changed files with 40 additions and 15 deletions
... ... @@ -135,6 +135,8 @@ const _getEditorial = d => {
small: []
};
console.log(d);
_.forEach(d, (data, index) => {
if (index === 0) {
e.big = data;
... ...
... ... @@ -4,16 +4,22 @@
{{# editorial}}
<div class="news left">
{{# big}}
<a href="{{url}}">
<img class="lazy-img" data-original="{{image src 395 495}}" alt="">
</a>
<span class="box">
<a href="{{url}}" target="_blank">
<img class="lazy-img" data-original="{{image src 395 495}}" alt="{{alt}}">
</a>
<p class="editorial-title">{{title}}</p>
</span>
{{/ big}}
</div>
<div class="news right">
{{# small}}
<a href="{{url}}">
<img class="lazy-img {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image src 360 240}}" alt="">
</a>
<span class="box {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}">
<a href="{{url}}" target="_blank">
<img class="lazy-img" data-original="{{image src 360 240}}" alt="{{alt}}">
</a>
<p class="editorial-title">{{title}}</p>
</span>
{{/ small}}
</div>
{{/ editorial}}
... ...
.editorial-container {
$bigImgWidth: 395px;
$smallImgWidth: 360px;
$smallImgHeight: 240px;
$bigImgWidth: 390px;
$smallImgWidth: 358px;
$smallImgHeight: 243px;
$space: 10px;
@extend .resource-container;
... ... @@ -14,12 +14,28 @@
display: inline-block;
box-sizing: border-box;
.bottom-space {
margin-bottom: $space;
.box {
display: inline-block;
position: relative;
&.bottom-space {
margin-bottom: 14px;
}
&.right-space {
margin-right: 15px;
}
}
.right-space {
margin-right: $space;
.editorial-title {
width: 100%;
min-height: 50px;
padding: $space;
position: absolute;
bottom: 2px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 14px;
}
img {
... ... @@ -33,7 +49,7 @@
img {
width: $bigImgWidth;
height: calc($smallImgHeight*2+$space+2px);
height: calc($smallImgHeight*2+$space+4px);
}
}
... ... @@ -41,7 +57,8 @@
width: calc($smallImgWidth*2+$space*2);
float: right;
img {
img,
.box {
width: $smallImgWidth;
height: $smallImgHeight;
}
... ...