fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 812cdeb89bfc9a384b50be9741f71f22fceadb16 1 parent 1286b5bd

星潮教室首页

Inline Side-by-side
Showing 5 changed files with 199 additions and 17 deletions
... ... @@ -130,6 +130,101 @@ exports.index = (req, res) => {
],
publishTime: '6月1日 11:30',
viewsNum: '7694'
},
{
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'
},
{
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'
},
{
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'
},
{
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'
},
{
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'
}
]
}));
... ...
... ... @@ -12,7 +12,7 @@ const star = require(cRoot + '/star');
const router = express.Router(); // eslint-disable-line
router.get('/star/index', star.index); // 星潮教室首页
router.get('/star', star.index); // 星潮教室首页
router.get('/star/special', star.special); // 星潮教室星专题
router.get('/star/collocation', star.collocation); // 星潮教室星搭配
router.get('/star/collocation/list', star.collocationList); // 星潮教室星搭配文章请求
... ...
... ... @@ -12,9 +12,7 @@
<ul class="clearfix swiper-wrapper">
{{# starAvatar}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{image src 180 180}}">
</a>
<img class="swiper-lazy" data-url="{{url}}" data-src="{{image src 180 180}}">
<div class="swiper-lazy-preloader"></div>
</li>
{{/ starAvatar}}
... ... @@ -26,7 +24,7 @@
<li data-id="{{articleId}}">
<div class="star-avatar">
<img class="lazy" data-original="{{image src 100 100}}" />
<p>{{name}}</p>
<p class="name">{{name}}</p>
</div>
<div class="star-article">
<i class="article-arrow"></i>
... ...
... ... @@ -6,9 +6,13 @@
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
lazyLoad = require('yoho-jquery-lazyload');
lazyLoad = require('yoho-jquery-lazyload'),
ellipsis = require('yoho-mlellipsis');
var avatarSwiper, avatarKey, $this, $title, $cont;
lazyLoad($('img.lazy'));
ellipsis.init();
if ($('.banner-swiper .swiper-slide').length > 1) {
new Swiper('.banner-swiper', {
... ... @@ -24,7 +28,7 @@ if ($('.banner-swiper .swiper-slide').length > 1) {
}
if ($('.avatar-swiper .swiper-slide').length > 1) {
new Swiper('.avatar-swiper', {
avatarSwiper = new Swiper('.avatar-swiper', {
loop: true,
initialSlide: 3,
centeredSlides: true,
... ... @@ -36,3 +40,27 @@ if ($('.avatar-swiper .swiper-slide').length > 1) {
watchSlidesVisibility: true
});
}
if ($('.star-info').find('li').length > 0) {
// 限制标题字数
$('.star-article').each(function() {
$this = $(this);
$title = $this.find('.article-title');
$cont = $this.find('p');
$title[0].mlellipsis(2);
$cont[0].mlellipsis(3);
});
}
$('body').addClass('star-index-bg');
$('.avatar-swiper li').not('.swiper-slide-active').on('click', function() {
avatarKey = $(this).index();
avatarSwiper.slideTo(avatarKey, 1000, false);
});
$('.swiper-slide-active').on('click', function() {
location.href = $(this).find('img').data('url');
});
... ...
... ... @@ -136,11 +136,15 @@
.star-info {
margin-top: 30px;
li {
float: left;
margin-bottom: 30px;
}
}
.star-avatar {
width: 150px;
text-align: center;
width: 134px;
padding-left: 30px;
box-sizing: border-box;
float: left;
... ... @@ -149,26 +153,38 @@
width: 104px;
height: 104px;
border-radius: 50%;
float: left;
}
.name {
font-size: 24px;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #fff;
margin-top: 8px;
float: left;
}
}
.star-article {
width: 472px;
height: 439px;
position: relative;
border-radius: 8px;
background: #282828;
float: left;
padding: 30px;
padding: 20px 30px;
box-sizing: border-box;
margin-left: 18px;
.article-arrow {
position: absolute;
left: -13px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 13px solid #282828;
}
... ... @@ -179,17 +195,21 @@
}
.artice-cont {
margin-top: 20px;
margin-top: 10px;
p {
font-size: 18px;
color: #3e3a39;
line-height: 29px;
color: #969696;
}
}
.artice-imgs {
margin: 30px 0;
margin: 25px 0 30px;
width: 100%;
height: 130px;
float: left;
overflow: hidden;
li {
float: left;
... ... @@ -209,9 +229,50 @@
.artice-o {
width: 100%;
float: left;
border-top: 1px solid #b0b0b0;
padding-top: 20px;
span {
font-size: 18px;
color: #b0b0b0;
height: 22px;
line-height: 22px;
i {
display: inline-block;
margin-right: 5px;
font-size: 22px;
vertical-align: text-top;
}
}
.time {
float: left;
}
.see {
float: left;
margin-left: 30px;
}
.time-ico {
width: 24px;
height: 24px;
}
.see-ico {
width: 31px;
height: 24px;
}
}
}
}
.star-index-bg {
background: #000;
.star-page {
background: #000;
}
}
... ...