星潮教室

@@ -13,7 +13,7 @@ const starModel = require(`${mRoot}/star`);
 const headTab = [
 const headTab = [
     {
     {
         cur: false,
         cur: false,
-        url: '/guang/star/index',
+        url: '/guang/star',
         name: '全部'
         name: '全部'
     },
     },
     {
     {
@@ -277,8 +277,17 @@ exports.collocationList = (req, res) => {
         res.render('star/collocation-list', _.assign({
         res.render('star/collocation-list', _.assign({
             layout: false,
             layout: false,
             params: params,
             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
 const router = express.Router(); // eslint-disable-line
 
 
 router.get('/star', star.index); // 星潮教室首页
 router.get('/star', star.index); // 星潮教室首页
+router.get('/star/detail', star.detail); // 明星文章专区
 router.get('/star/special', star.special); // 星潮教室星专题
 router.get('/star/special', star.special); // 星潮教室星专题
 router.get('/star/collocation', star.collocation); // 星潮教室星搭配
 router.get('/star/collocation', star.collocation); // 星潮教室星搭配
 router.get('/star/collocation/list', star.collocationList); // 星潮教室星搭配文章请求
 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}}
+{{> star/list}}

+<div class="star-page yoho-page">
+    <ul class="detail-list">
+        {{> star/list}}
+    </ul>
+</div>

@@ -28,16 +28,14 @@
                 </div>
                 </div>
                 <div class="star-article">
                 <div class="star-article">
                     <i class="article-arrow"></i>
                     <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">
                     <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>
                     <div class="artice-o">
                     <div class="artice-o">
                         <span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
                         <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}}

@@ -9,11 +9,38 @@ var $ = require('yoho-jquery'),
     lazyLoad = require('yoho-jquery-lazyload'),
     lazyLoad = require('yoho-jquery-lazyload'),
     ellipsis = require('yoho-mlellipsis');
     ellipsis = require('yoho-mlellipsis');
 
 
-var avatarSwiper, avatarKey, $this, $title, $cont;
+var $starArticle = $('.star-article');
+
+var avatarSwiper, avatarKey;
 
 
 lazyLoad($('img.lazy'));
 lazyLoad($('img.lazy'));
 ellipsis.init();
 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) {
 if ($('.banner-swiper .swiper-slide').length > 1) {
     new Swiper('.banner-swiper', {
     new Swiper('.banner-swiper', {
         lazyLoading: true,
         lazyLoading: true,
@@ -41,26 +68,22 @@ if ($('.avatar-swiper .swiper-slide').length > 1) {
     });
     });
 }
 }
 
 
-
 if ($('.star-info').find('li').length > 0) {
 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');
 $('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 {
 .star-page {
-    .collocation-list {
+    .collocation-list,
+    .detail-list {
         width: 100%;
         width: 100%;
         float: left;
         float: left;
 
 

@@ -214,6 +214,7 @@
             li {
             li {
                 float: left;
                 float: left;
                 margin-left: 6px;
                 margin-left: 6px;
+                position: relative;
             }
             }
 
 
             li:first {
             li:first {
@@ -225,6 +226,29 @@
                 height: 130px;
                 height: 130px;
                 border-radius: 4px;
                 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 {
         .artice-o {