fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit aefd8bfe22b08cd2f1b6a37666eba6cd01a50715 1 parent 812cdeb8

星潮教室

Inline Side-by-side
Showing 11 changed files with 113 additions and 52 deletions
... ... @@ -13,7 +13,7 @@ const starModel = require(`${mRoot}/star`);
const headTab = [
{
cur: false,
url: '/guang/star/index',
url: '/guang/star',
name: '全部'
},
{
... ... @@ -277,8 +277,17 @@ exports.collocationList = (req, res) => {
res.render('star/collocation-list', _.assign({
layout: false,
params: params,
collocationList: result
list: result
}));
});
};
/**
* 明星文章专区
* @param {[object]} req
* @param {[object]} res
* @return {[type]}
*/
exports.detail = (req, res) => {
res.render('star/detail');
};
... ...
... ... @@ -13,6 +13,7 @@ const star = require(cRoot + '/star');
const router = express.Router(); // eslint-disable-line
router.get('/star', star.index); // 星潮教室首页
router.get('/star/detail', star.detail); // 明星文章专区
router.get('/star/special', star.special); // 星潮教室星专题
router.get('/star/collocation', star.collocation); // 星潮教室星搭配
router.get('/star/collocation/list', star.collocationList); // 星潮教室星搭配文章请求
... ...
{{#each collocationList}}
{{log this}}
<li articleId="{{id}}" data-bp-id="guang_collocationList_{{title}}_false" class="buriedpoint">
{{#if src}}
<a href="{{url}}"><img class="lazy" src ="" data-original="{{image src 640 310}}" /></a>
{{/if}}
<div class="cont-area ">
<a href="{{url}}"><h2 class="title">{{title}}</h2></a>
<p class="cont-txt">{{intro}}</p>
<div class="count-area">
<span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
<span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>
<span class="collection"><i class="iconfont collected-ico {{#isCollected}} collected {{/isCollected}}">&#xe605;</i></span>
{{# share.url}}
<a href="{{this}}" class="iconfont forward">&#xe600;</a>
{{/ share.url}}
</div>
</div>
</li>
{{/each}}
\ No newline at end of file
{{> star/list}}
\ No newline at end of file
... ...
<div class="star-page yoho-page">
<ul class="detail-list">
{{> star/list}}
</ul>
</div>
\ No newline at end of file
... ...
... ... @@ -28,16 +28,14 @@
</div>
<div class="star-article">
<i class="article-arrow"></i>
<h2 class="article-title">{{title}}</h2>
<a href="{{url}}"><h2 class="article-title">{{title}}</h2></a>
<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>
<a href="{{url}}"><p>{{articeTxt}}</p></a>
<ul class="artice-imgs">
{{#each articeImg}}
<li><img src="{{image . 130 130}}" /></li>
{{/each}}
</ul>
</div>
<div class="artice-o">
<span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
... ...
{{#each list}}
<li articleId="{{id}}" data-bp-id="guang_collocationList_{{title}}_false" class="buriedpoint">
{{#if src}}
<a href="{{url}}"><img class="lazy" src ="" data-original="{{image src 640 310}}" /></a>
{{/if}}
<div class="cont-area ">
<a href="{{url}}"><h2 class="title">{{title}}</h2></a>
<p class="cont-txt">{{intro}}</p>
<div class="count-area">
<span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
<span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>
<span class="collection"><i class="iconfont collected-ico {{#isCollected}} collected {{/isCollected}}">&#xe605;</i></span>
{{# share.url}}
<a href="{{this}}" class="iconfont forward">&#xe600;</a>
{{/ share.url}}
</div>
</div>
</li>
{{/each}}
\ No newline at end of file
... ...
... ... @@ -9,11 +9,38 @@ var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload'),
ellipsis = require('yoho-mlellipsis');
var avatarSwiper, avatarKey, $this, $title, $cont;
var $starArticle = $('.star-article');
var avatarSwiper, avatarKey;
lazyLoad($('img.lazy'));
ellipsis.init();
// 限制标题字数
function txtLimit(dom) {
var $title = dom.find('.article-title'),
$cont = dom.find('p');
$title[0].mlellipsis(2);
$cont[0].mlellipsis(3);
}
// 明星动态文章图片相关操作
function articleImgAction(dom) {
var $articeImgs = dom.find('.artice-imgs'),
$li = $articeImgs.find('li'),
imgLen = $articeImgs.find('img').length,
addFlagDom = $li.eq(2);
$li.on('click', function() {
console.log('1');
});
if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
addFlagDom.append('<div class="img-size"><i class="pic-icon"></i>' + imgLen + '</div>');
}
}
if ($('.banner-swiper .swiper-slide').length > 1) {
new Swiper('.banner-swiper', {
lazyLoading: true,
... ... @@ -41,26 +68,22 @@ if ($('.avatar-swiper .swiper-slide').length > 1) {
});
}
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);
$starArticle.each(function(key, item) {
txtLimit($(item));
articleImgAction($(item));
});
}
$('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');
// 明星头像点击居中显示或跳转
$('.avatar-swiper li').on('click', function() {
if ($(this).hasClass('swiper-slide-active')) {
location.href = $(this).find('img').data('url');
} else {
avatarKey = $(this).index();
avatarSwiper.slideTo(avatarKey, 1000, false);
}
});
... ...
.star-page {
.collocation-list {
.collocation-list,
.detail-list {
width: 100%;
float: left;
... ...
... ... @@ -214,6 +214,7 @@
li {
float: left;
margin-left: 6px;
position: relative;
}
li:first {
... ... @@ -225,6 +226,29 @@
height: 130px;
border-radius: 4px;
}
.img-size {
width: 50px;
height: 26px;
line-height: 28px;
border-radius: 13px;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 18px;
}
.pic-icon {
width: 19px;
height: 15px;
background: url('/guang/star/img.png') no-repeat;
background-size: contain;
display: inline-block;
margin: 6px 4px 0 8px;
vertical-align: top;
}
}
.artice-o {
... ...