Authored by 王水玲

star

... ... @@ -110,6 +110,24 @@ exports.index = (req, res) => {
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
}
],
articles: [
{
articleId: '48187',
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
title: 'dangerous people 跟着薛之谦维护世界和平T恤',
url: 'http://guang.m.yohobuy.com/info/index?id=48187',
articeTxt: '薛之谦以Dangerous People为主题,以暗黑街头的风格为主线,透过纸袋人的形象,从反面讽刺了社会的种种丑陋与黑暗现象, 从而反映出那些“边缘人物” 想让大家看到真实自我的渴望与期待世界和平的美好憧憬。 作为新一代潮流的引领人,薛之谦也有着自身对潮流文化的理解, Dangerous People的产品系列主要以黑白为主,在产品质量上也力求做到最好。',
articeImg: [
'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b9522beb59efd9863d67e246a7793de8.jpg?imageView/2/w/{width}/h/{height}',
'http://img11.static.yhbimg.com/goodsimg/2016/06/01/03/015720dbe0dfd866a0cdf8701b19f4eebf.jpg?imageView/2/w/{width}/h/{height}',
'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/024f7d9704e5a545e90125432db69cae5c.jpg?imageView/2/w/{width}/h/{height}',
'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b246a819d5de16a0a22316fe8f668926.jpg?imageView/2/w/{width}/h/{height}'
],
publishTime: '6月1日 11:30',
viewsNum: '7694'
}
]
}));
});
... ...
... ... @@ -8,19 +8,6 @@
{{/if}}
{{/content}}
{{!-- <div class="avatar-swiper swiper-container">
<ul class="swiper-wrapper">
{{#each starAvatar}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{image src 180 180}}">
</a>
<div class="swiper-lazy-preloader"></div>
</li>
{{/each}}
</ul>
</div> --}}
<div class="avatar-swiper">
<ul class="clearfix swiper-wrapper">
{{# starAvatar}}
... ... @@ -32,5 +19,34 @@
</li>
{{/ starAvatar}}
</ul>
</div>
</div>
<ul class="star-info">
{{#each articles}}
<li data-id="{{articleId}}">
<div class="star-avatar">
<img class="lazy" data-original="{{image src 100 100}}" />
<p>{{name}}</p>
</div>
<div class="star-article">
<i class="article-arrow"></i>
<h2 class="article-title">{{title}}</h2>
<div class="artice-cont">
<a href="{{url}}">
<p>{{articeTxt}}</p>
<ul class="artice-imgs">
{{#each articeImg}}
<li><img src="{{image . 130 130}}" /></li>
{{/each}}
</ul>
</a>
</div>
<div class="artice-o">
<span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
<span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>
</div>
</div>
</li>
{{/each}}
</ul>
</div>
... ...
... ... @@ -133,5 +133,85 @@
margin-top: 27px;
}
}
.star-info {
margin-top: 30px;
}
.star-avatar {
width: 150px;
text-align: center;
padding-left: 30px;
box-sizing: border-box;
float: left;
img {
width: 104px;
height: 104px;
border-radius: 50%;
}
}
.star-article {
width: 472px;
height: 439px;
position: relative;
border-radius: 8px;
background: #282828;
float: left;
padding: 30px;
box-sizing: border-box;
.article-arrow {
position: absolute;
left: -13px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 13px solid #282828;
}
.article-title {
font-size: 28px;
line-height: 38px;
color: #fff;
}
.artice-cont {
margin-top: 20px;
p {
font-size: 18px;
color: #3e3a39;
}
}
.artice-imgs {
margin: 30px 0;
width: 100%;
li {
float: left;
margin-left: 6px;
}
li:first {
margin-left: 0;
}
img {
width: 130px;
height: 130px;
border-radius: 4px;
}
}
.artice-o {
width: 100%;
border-top: 1px solid #b0b0b0;
}
}
}
... ...