Merge branch 'feature/star' into develop

@@ -45,6 +45,7 @@ app.use(bodyParser.urlencoded({
     extended: false
 }));
 app.use(cookieParser());
+
 app.use(session({
     proxy: true,
     resave: false,

+/**
+ * 新潮教室
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/05/30
+ */
+'use strict';
+
+const mRoot = '../models';
+const library = '../../../library';
+const _ = require('lodash');
+const headerModel = require('../../../doraemon/models/header');
+const starModel = require(`${mRoot}/star`);
+const helpers = require(`${library}/helpers`);
+
+const headTab = [
+    {
+        url: '/guang/star',
+        name: '全部'
+    },
+    {
+        url: '/guang/star/special',
+        name: '星专题'
+    },
+    {
+        url: '/guang/star/collocation',
+        name: '星搭配'
+    }
+];
+
+const processPublicData = (req, title, navBtn) => {
+    let channel = req.query.channel || req.cookies._Channel || 'boys';
+    let headerData = headerModel.setNavHeader(title, channel, '', '', navBtn);
+    let renderData = {
+        module: 'guang',
+        title: title,
+        pageHeader: headerData
+    };
+
+    return renderData;
+};
+
+/**
+ * 星潮教室首页
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.index = (req, res) => {
+    const pageHeadTab = _.cloneDeep(headTab);
+
+    pageHeadTab[0].cur = true;
+    res.render('star/index', _.assign({
+        page: 'star',
+        isStarIndexPage: true,
+        headTab: pageHeadTab
+    }, processPublicData(req, '星潮教室')));
+};
+
+exports.getIndexHtml = (req, res) => {
+    starModel.getIndexData().then((result) => {
+        res.render('star/index-html', _.assign({
+            layout: false,
+            content: {
+                focus: true,
+                data: result.ads
+            },
+            starAvatar: result.starAvatar,
+            articles: result.articles
+        }));
+    });
+};
+
+/**
+ * 星专题
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.special = (req, res) => {
+    starModel.getSpecialData().then((result) => {
+        const pageHeadTab = _.cloneDeep(headTab);
+
+        pageHeadTab[1].cur = true;
+        res.render('star/special', _.assign({
+            page: 'special'
+        }, processPublicData(req, '星潮教室'), {
+            resources: result,
+            headTab: pageHeadTab
+        }));
+    });
+};
+
+
+/**
+ * 星搭配
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.collocation = (req, res) => {
+    const pageHeadTab = _.cloneDeep(headTab);
+
+    pageHeadTab[2].cur = true;
+    res.render('star/collocation', _.assign({
+        isStarDetailPage: true,
+        page: 'collocation'
+    }, processPublicData(req, '星潮教室'), {
+        headTab: pageHeadTab
+    }));
+};
+
+/**
+ * 星搭配文章请求
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.collocationList = (req, res) => {
+    let params = req.query;
+    let uid = req.user.uid || 0;
+
+    starModel.getCollocationListData(params, uid).then((result) => {
+        res.render('star/list', _.assign({
+            layout: false,
+            params: params,
+            list: result,
+            isApp: req.query.appVersion || false
+        }));
+    });
+};
+
+/**
+ * 收藏文章
+ * @param  {[type]} req [description]
+ * @param  {[type]} res [description]
+ * @return {[type]}
+ */
+exports.setFavorite = (req, res) => {
+    let params = req.body;
+    let uid = req.user.uid || 0;
+    let isApp = req.query.appVersion || false;
+    let url = '/guang/star/collocation';
+    let urlEncode = '';
+
+    starModel.setFavorite(params, uid).then((result) => {
+        if (result.code === 401) {
+            if (!isApp) {
+                result.data = helpers.urlFormat('/signin.html', {
+                    refer: req.get('Referer') || url
+                });
+            } else {
+                urlEncode = '\\/guang\\/star\\/collocation';
+                result.data = `${url}?openby:yohobuy={"action":"go.weblogin","params":{"jumpurl":{"url":"${urlEncode}","param":{"from":"app"}},"requesturl":{"url":"","param":{}},"priority":"N"}}`; // eslint-disable-line
+            }
+        }
+        res.json(result);
+    });
+};
+
+/**
+ * 明星文章专区
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.detail = (req, res) => {
+    res.render('star/detail', _.assign({
+        isStarDetailPage: true,
+        page: 'detail-list'
+    }, processPublicData(req, req.query.tag, false)));
+};
+
+/**
+ * 明星专题文章请求
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.detailList = (req, res) => {
+    let params = req.query;
+
+    starModel.getDetailData(params).then((result) => {
+        res.render('star/list', _.assign({
+            layout: false,
+            params: params,
+            list: result,
+            isApp: req.query.appVersion || false
+        }));
+    });
+};

+/**
+ * sub app guang
+ * @author: Bi Kai<kai.bi@yoho.cn>
+ * @date: 2016/05/09
+ */
+
+var express = require('express'),
+    path = require('path'),
+    hbs = require('express-handlebars');
+
+var app = express();
+
+// set view engin
+var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
+
+app.on('mount', function(parent) {
+    delete parent.locals.settings; // 不继承父 App 的设置
+    Object.assign(app.locals, parent.locals);
+});
+
+app.set('views', path.join(__dirname, 'views/action'));
+app.engine('.hbs', hbs({
+    extname: '.hbs',
+    defaultLayout: 'layout',
+    layoutsDir: doraemon,
+    partialsDir: [path.join(__dirname, 'views/partial'), `${doraemon}/partial`],
+    helpers: require(`${global.library}/helpers`)
+}));
+
+// router
+app.use(require('./router'));
+
+module.exports = app;

+/**
+ * 新潮教室
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/05/30
+ */
+'use strict';
+const library = '../../../library';
+const utils = '../../../utils';
+const resourcesProcess = require(`${utils}/resources-process`);
+const ServiceAPI = require(`${library}/api`).ServiceAPI;
+const API = require(`${library}/api`).API;
+const sign = require(`${library}/sign`);
+const logger = require(`${library}/logger`);
+const camelCase = require(`${library}/camel-case`);
+const helpers = require(`${library}/helpers`);
+const _ = require('lodash');
+const serviceAPI = new ServiceAPI();
+const api = new API();
+
+const contentCode = {
+    special: '89cc20483ee2cbc8a716dcfe2b6c7603'
+};
+
+class Star {
+    /**
+     * 获取资源位数据
+     * @param  {[string]} page
+     * @return {[array]}
+     */
+    static getResources(page) {
+        return serviceAPI.get('operations/api/v5/resource/get', sign.apiSign({
+            content_code: contentCode[page]
+        })).then((result) => {
+            if (result && result.code === 200) {
+                return resourcesProcess(result.data);
+            } else {
+                logger.error('星潮教室页面资源位返回 code 不是 200');
+                return [];
+            }
+        });
+    }
+
+    /**
+     * 星潮教室首页数据处理
+     * @param  {[array]} list
+     * @return {[array]}
+     */
+    static processIndexData(list) {
+        const formatData = {
+            ads: [],
+            starAvatar: [],
+            articles: []
+        };
+
+        list = list || {};
+        list = camelCase(list);
+
+        // 首页资源位数据处理
+        _.forEach(list.ads.data, (data) => {
+            formatData.ads.push({
+                src: data.src,
+                url: data.url
+            });
+        });
+
+        // 首页明星文章数据处理
+        _.forEach(list.list, (data) => {
+            const avatar = {
+                tags: []
+            };
+
+            if (data.ext.tags.length > 1) {
+                avatar.isSwiper = true;
+            }
+
+            _.forEach(data.ext.tags, (tags) => {
+                avatar.tags.push({
+                    avatarUrl: `/guang/star/detail?tag=${tags.tagName}`,
+                    cover: tags.cover,
+                    tagName: tags.tagName
+                });
+            });
+
+            formatData.articles.push(_.merge({
+                id: data.id,
+                url: data.url,
+                title: data.title,
+                articeTxt: data.intro,
+                src: data.src,
+                publishTime: helpers.dateFormat('MM月DD日 hh:mm', data.publishTime),
+                viewsNum: data.viewsNum
+            }, avatar));
+        });
+
+        // 首页明星头像数据处理
+        _.forEach(list.tags, (data) => {
+            let url = `/guang/star/detail?tag=${data.tagName}`;
+
+            formatData.starAvatar.push({
+                url: url,
+                cover: data.cover
+            });
+        });
+
+        return formatData;
+    }
+
+    static processShareUrl(post) {
+        return `${post.share.url}&openby:yohobuy={"action":"go.share","params":{"pic":"${helpers.image(post.src, 640, 640)}","title":"${post.title}","url":"${post.share.url}","content":"潮流资讯，新鲜贩售，YOHO!Buy有货【逛】不停"}}`; // eslint-disable-line
+    }
+
+    /**
+     * 明星专题列表数据处理
+     * @param  {[array]} list
+     * @return {[array]}
+     */
+    static processDetailData(list) {
+        const formatData = [];
+
+        list = list || [];
+        list = camelCase(list);
+
+        _.forEach(list, (data) => {
+            data.publishTime = helpers.dateFormat('MM月DD日 hh:mm', data.publishTime);
+            if (data.share && data.share.url) {
+                data.share.url = Star.processShareUrl(data);
+            }
+            formatData.push(data);
+        });
+
+        return formatData;
+    }
+
+
+    /**
+     * 星搭配文章列表数据处理
+     */
+    static processCollocationData(list) {
+        const formatData = [];
+
+        list = list || [];
+        list = camelCase(list);
+
+        _.forEach(list, (data) => {
+            if (data.isFavor === 'N') {
+                data.isCollected = false;
+            } else {
+                data.isCollected = true;
+            }
+            formatData.push(data);
+        });
+
+        return formatData;
+    }
+
+    /**
+     * 星潮首页
+     */
+    static getIndexData() {
+        return api.get('', sign.apiSign({
+            method: 'app.starClass.index',
+            code: '8adc27fcf5676f356602889afcfd2a8e'
+        })).then((result) => {
+            if (result && result.code === 200) {
+                return Star.processIndexData(result.data);
+            } else {
+                logger.error('星潮教室首页数据返回 code 不是 200');
+                return {};
+            }
+        });
+    }
+
+    /**
+     * 明星专题
+     */
+    static getDetailData(params) {
+        return api.get('', sign.apiSign({
+            method: 'app.starClass.lastTagArticle',
+            tag: params.tag,
+            page: params.page || 1,
+            size: 10
+        })).then((result) => {
+            if (result && result.code === 200) {
+                if (params.page > result.data.totalPage) {
+                    return '';
+                } else {
+                    return Star.processDetailData(result.data.list);
+                }
+            } else {
+                logger.error('明星专题文章数据返回 code 不是 200');
+                return [];
+            }
+        });
+    }
+
+
+    /**
+     * 星专题
+     */
+    static getSpecialData() {
+        return Star.getResources('special');
+    }
+
+    /**
+     * 星搭配
+     */
+    static getCollocationListData(params, uid) {
+
+        return serviceAPI.get('guang/api/v5/article/getStarClassroomArticleList', sign.apiSign(Object.assign({
+            limit: '20',
+            uid: uid
+        }, params))).then((result) => {
+            if (result && result.code === 200) {
+                return Star.processCollocationData(result.data.list.artList);
+            } else {
+                logger.error('获取星搭配文章列表返回 code 不是 200');
+                return [];
+            }
+        });
+    }
+
+    static setFavorite(params, uid) {
+        if (!uid) {
+            return Promise.resolve({
+                code: 401,
+                message: '未登录'
+            });
+        }
+
+        return api.get('', sign.apiSign({
+            method: params.type === 'del' ? 'app.sns.cancelFavorBackCount' : 'app.sns.setFavorBackCount',
+            client_type: 'h5',
+            article_id: params.articleId,
+            uid: uid
+        }));
+    }
+}
+
+module.exports = Star;

+/**
+ * router of sub app channel
+ * @author: Bi Kai<kai.bi@yoho.cn>
+ * @date: 2016/05/09
+ */
+
+'use strict';
+
+const express = require('express');
+const cRoot = './controllers';
+const star = require(cRoot + '/star');
+
+const router = express.Router(); // eslint-disable-line
+
+router.get('/star', star.index); // 星潮教室首页
+router.get('/star/getIndexHtml', star.getIndexHtml); // 星潮教室首页
+router.get('/star/detail', star.detail); // 明星文章专区
+router.get('/star/detailList', star.detailList); // 明星文章专区文章Ajax请求
+router.get('/star/special', star.special); // 星潮教室星专题
+router.get('/star/collocation', star.collocation); // 星潮教室星搭配
+router.get('/star/collocation/list', star.collocationList); // 星潮教室星搭配文章请求
+
+router.post('/star/setFavorite', star.setFavorite); // 收藏文章
+
+module.exports = router;

+<div class="star-page yoho-page"> 
+    {{> star/head-tab}}
+    <ul class="collocation-list"></ul>
+</div>
\ No newline at end of file

+<div class="star-page yoho-page">
+    <ul class="detail-list" data-name="{{title}}">
+        {{> star/list}}
+    </ul>
+</div>
\ No newline at end of file

+<div class="loading-tip">松手开始刷新...</div>
+<div class="star-wrap">
+    <div class="star-content">
+        {{#content}}
+            {{#if focus}}
+                {{> resources/banner-top}}
+            {{/if}}
+        {{/content}}
+
+        <div class="avatar-wrap">
+            <div class="avatar-swiper avatar">
+                <ul class="clearfix swiper-wrapper">
+                    {{# starAvatar}}
+                        <li class="swiper-slide">
+                            <span class="rank-avatar" data-url="{{url}}" data-avatar="{{image cover 180 180}}"></span>
+                        </li>
+                    {{/ starAvatar}}
+                </ul>
+            </div>
+        </div>
+
+        <ul class="star-info clearfix">
+            {{#each articles}}
+                <li data-id="{{id}}">
+                    <div class="star-avatar">
+                        {{#if isSwiper}}
+                            <div class="article-avatar-swiper">
+                                <ul class="clearfix swiper-wrapper">
+                                    {{#each tags}}
+                                        <li class="swiper-slide">
+                                            <a href="{{avatarUrl}}">
+                                                <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
+                                                <p class="name">{{tagName}}</p>
+                                            </a>
+                                        </li>
+                                    {{/each}}
+                                </ul>
+                            </div>
+                        {{else}}
+                            {{# tags}}
+                                <a href="{{avatarUrl}}">
+                                    <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
+                                    <p class="name">{{tagName}}</p>
+                                </a>
+                            {{/ tags}}
+                        {{/if}}
+                    </div>
+                    <div class="star-article">
+                        <i class="article-arrow"></i>
+                        <a href="{{url}}"><h2 class="article-title">{{title}}</h2></a>
+                        <div class="artice-cont">
+                            <a href="{{url}}"><p>{{articeTxt}}</p></a>
+                            <div class="artice-imgs-area">
+                                <img src="{{image src 266 266}}" />
+
+                                {{!-- <ul class="artice-imgs">
+                                    {{#each articeImg}}
+                                        <li><img src="{{image . 640 640}}" /></li>
+                                    {{/each}}
+                                </ul> --}}
+
+                            </div>
+                        </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>
+                <li data-id="{{id}}">
+                    <div class="star-avatar">
+                        {{#if isSwiper}}
+                            <div class="article-avatar-swiper">
+                                <ul class="clearfix swiper-wrapper">
+                                    {{#each tags}}
+                                        <li class="swiper-slide">
+                                            <a href="{{avatarUrl}}">
+                                                <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
+                                                <p class="name">{{tagName}}</p>
+                                            </a>
+                                        </li>
+                                    {{/each}}
+                                </ul>
+                            </div>
+                        {{else}}
+                            {{# tags}}
+                                <a href="{{avatarUrl}}">
+                                    <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
+                                    <p class="name">{{tagName}}</p>
+                                </a>
+                            {{/ tags}}
+                        {{/if}}
+                    </div>
+                    <div class="star-article">
+                        <i class="article-arrow"></i>
+                        <a href="{{url}}"><h2 class="article-title">{{title}}</h2></a>
+                        <div class="artice-cont">
+                            <a href="{{url}}"><p>{{articeTxt}}</p></a>
+                            <div class="artice-imgs-area">
+                                <img src="{{image src 266 266}}" />
+
+                                {{!-- <ul class="artice-imgs">
+                                    {{#each articeImg}}
+                                        <li><img src="{{image . 640 640}}" /></li>
+                                    {{/each}}
+                                </ul> --}}
+
+                            </div>
+                        </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>
+</div>
+
+{{!-- <div class="view-img">
+    <div class="mask-bg"></div>
+    <div class="view-area">
+        <div class="swiper-view">
+            <ul class="clearfix swiper-wrapper"></ul>
+        </div>
+    </div>
+</div> --}}

+<div class="star-page yoho-page">
+    {{> star/head-tab}}
+    <div class="swiper-num"></div>
+    <div class="star-main"></div>
+</div>

+{{> star/list}}
\ No newline at end of file

+<div class="star-page yoho-page"> 
+    {{> star/head-tab}}
+    <ul class="special-list">
+        {{#each resources}}
+            {{# data}}
+                <li data-bp-id="guang_subjectList_{{title}}_false" class="buriedpoint">
+                    <a href="{{url}}">
+                        <img class="lazy" data-original="{{image src 640 310}}" alt="{{alt}}"/>
+                        <p>{{title}}</p>
+                    </a>            
+                </li>
+            {{/ data}}
+        {{/each}}
+    </ul>
+</div>
\ No newline at end of file

+<ul class="head-tab">
+    {{#each headTab}}
+    <li {{#if cur}} class="cur" {{/if}} ><a href="{{ url }}" data-bp-id="guang_tab_{{name}}_false">{{ name }}</a></li>
+    {{/each}}
+</ul>
\ No newline at end of file

+{{#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>
+                {{#if ../isApp}}
+                    {{#if share.url}}
+                        <a href="{{share.url}}" class="iconfont forward">&#xe600;</a>
+                    {{/if}}
+                {{/if}}
+                <span class="collection"><i class="iconfont collected-ico {{#isCollected}} collected {{/isCollected}}">&#xe605;</i></span>
+            </div>
+        </div>
+    </li>
+{{/each}}

@@ -177,7 +177,7 @@ exports.search = (req, res) => {
     let params = Object.assign({}, req.query);
 
     // uid = 9239279
-    let uid = req.user.uid || 0;
+    let uid = 9239279 || req.user.uid || 0;
 
     saleModel.getSearchData(params, uid).then((result) => {
         let vipLevel = result[1].curLevel;
@@ -187,10 +187,7 @@ exports.search = (req, res) => {
             vipObj = Object.assign({
                 saleVip: (req.query.saleType === '2' && (!uid || vipLevel === '0')),
                 vipLevel: vipLevel,
-                saleViplogin: vipLevel >= 1 ? true : false,
-                vipPrice1: vipLevel === '1',
-                vipPrice2: vipLevel === '2',
-                vipPrice3: vipLevel === '3'
+                saleViplogin: vipLevel >= 1 ? true : false
             }, vipObj);
         }
 

@@ -13,6 +13,7 @@ module.exports = app => {
 
     // 业务模块
     app.use('/product', require('./apps/product'));
+    app.use('/guang', require('./apps/guang'));
     app.use('/passport', require('./apps/passport'));
     app.use('/coupon', require('./apps/coupon'));
 };

@@ -26,7 +26,7 @@
         <link rel="apple-touch-startup-image" sizes="640x920" href="http://static.yohobuy.com/m/v1/img/startup/startup-retina.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">
         <link rel="apple-touch-startup-image" sizes="320x460" href="http://static.yohobuy.com/m/v1/img/startup/startup.png" media="screen and (max-device-width: 320)">
     </head>
-    <body {{#if isPassportPage}}class=passport-body{{/if}}>
+    <body {{#if isPassportPage}}class=passport-body{{/if}} {{#if isStarIndexPage}} class="star-index-bg"{{/if}} {{#if isStarDetailPage}}class="star-class-body"{{/if}}>
         <div class="main-wrap">
             {{#if systemUpdate}}
                 {{> updata}}

@@ -33,11 +33,11 @@
   "dependencies": {
     "bluebird": "^3.4.0",
     "body-parser": "^1.15.0",
-    "cookie-parser": "^1.4.1",
+    "cookie-parser": "^1.4.3",
     "express": "^4.13.1",
     "express-handlebars": "^3.0.0",
     "influxdb-winston": "^1.0.1",
-    "lodash": "^4.12.0",
+    "lodash": "^4.13.1",
     "md5": "^2.1.0",
     "memcached": "^2.2.1",
     "moment": "^2.13.0",
@@ -49,16 +49,16 @@
     "serve-favicon": "^2.3.0",
     "uuid": "^2.0.2",
     "winston": "^2.2.0",
-    "winston-daily-rotate-file": "^1.0.1",
+    "winston-daily-rotate-file": "^1.1.3",
     "yoho-connect-memcached": "^1.0.3",
     "yoho-express-session": "^1.0.3"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
-    "ava": "^0.14.0",
+    "ava": "^0.15.2",
     "babel-preset-es2015": "^6.9.0",
     "babel-register": "^6.9.0",
-    "eslint": "^2.10.2",
+    "eslint": "^2.12.0",
     "eslint-config-yoho": "^1.0.1",
     "gulp": "^3.9.1",
     "gulp-cssnano": "^2.1.2",
@@ -68,15 +68,15 @@
     "gulp-util": "^3.0.7",
     "husky": "^0.11.4",
     "nodemon": "1.9.2",
-    "nyc": "^6.4.3",
+    "nyc": "^6.4.4",
     "postcss-assets": "^4.0.1",
-    "postcss-cachebuster": "^0.1.2",
+    "postcss-cachebuster": "^0.1.3",
     "postcss-calc": "^5.2.1",
     "postcss-center": "^1.0.0",
     "postcss-clearfix": "^1.0.0",
     "postcss-crip": "^2.0.0",
     "postcss-opacity": "^3.0.0",
-    "postcss-position": "^0.4.0",
+    "postcss-position": "^0.5.0",
     "postcss-pxtorem": "^3.3.1",
     "postcss-short": "^1.4.0",
     "postcss-sprites": "^3.1.2",
@@ -84,17 +84,18 @@
     "precss": "^1.4.0",
     "rewire": "^2.5.1",
     "shelljs": "^0.7.0",
-    "stylelint": "^6.4.1",
+    "stylelint": "^6.5.1",
     "stylelint-config-yoho": "^1.2.3",
-    "webpack": "^1.13.0",
+    "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1",
     "webpack-stream": "^3.1.0",
     "yoho-fastclick": "^1.0.6",
     "yoho-hammer": "^2.0.7",
     "yoho-handlebars": "^4.0.5",
+    "yoho-iscroll": "^5.2.0",
     "yoho-jquery": "^2.2.4",
     "yoho-jquery-lazyload": "^1.9.7",
-    "yoho-mlellipsis": "0.0.2",
+    "yoho-mlellipsis": "0.0.3",
     "yoho-swiper": "^3.3.1"
   }
 }

@@ -266,21 +266,23 @@ $('.nav-home').on('touchstart', function() {
     window.cancelAnimationFrame = cancelAnimationFrame;
 }());
 
+function queryString() {
+    var vars = [],
+        hash,
+        i;
+    var hashes = window.location.search.slice(1).split('&');
+
+    for (i = 0; i < hashes.length; i++) {
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+    }
+    return vars;
+}
+
 // 给jQuery 扩展 queryString函数
 $.extend({
-    queryString: function() {
-        var vars = [],
-            hash,
-            i;
-        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
-
-        for (i = 0; i < hashes.length; i++) {
-            hash = hashes[i].split('=');
-            vars.push(hash[0]);
-            vars[hash[0]] = hash[1];
-        }
-        return vars;
-    }
+    queryString: queryString
 });
 
 // 临时修改  footer
@@ -308,3 +310,5 @@ window.getShoppingKey = getShoppingKey;
 window.rePosFooter = rePosFooter;
 
 window.reMarginFooter = reMarginFooter;
+
+window.queryString = queryString();

+/**
+ * 星潮教室-星搭配分页加载
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/4/12
+ */
+
+var $ = require('yoho-jquery'),
+    tip = require('../plugin/tip'),
+    loading = require('../plugin/loading'),
+    lazyLoad = require('yoho-jquery-lazyload'),
+    ellipsis = require('yoho-mlellipsis');
+
+var stopLoading = false,
+    page = 1;
+
+require('./list-common');
+
+ellipsis.init();
+
+function massageAJAX(pageData) {
+    var $this, $title, $cont;
+
+    loading.showLoadingMask();
+    $.ajax({
+        type: 'GET',
+        url: '/guang/star/collocation/list',
+        data: {
+            page: pageData,
+            appVersion: window.queryString.app_version
+        },
+        dataType: 'html',
+        success: function(data) {
+            stopLoading = false;
+
+            if (data === '') {
+                stopLoading = true;
+                tip.show('没有更多内容了');
+            }
+
+            $('.collocation-list').append(data);
+
+            // 限制标题字数
+            $('.cont-area').each(function() {
+                $this = $(this);
+                $title = $this.find('.title');
+                $cont = $this.find('.cont-txt');
+
+                $title[0].mlellipsis(2);
+                $cont[0].mlellipsis(2);
+            });
+
+            loading.hideLoadingMask();
+            lazyLoad($('img.lazy'));
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+}
+
+function scrollHandler() {
+    if (!stopLoading && ($(window).scrollTop() + $(window).height() > $('body').height() - 100)) {
+        stopLoading = true;
+        page++;
+        massageAJAX(page);
+    }
+}
+
+$(window).scroll(function() {
+    scrollHandler();
+});
+
+if ($('.collocation-list').find('li').length === 0) {
+    massageAJAX(1);
+}

+/**
+ * 星潮教室-明星专题列表
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/6/7
+ */
+var $ = require('yoho-jquery'),
+    tip = require('../plugin/tip'),
+    loading = require('../plugin/loading'),
+    lazyLoad = require('yoho-jquery-lazyload'),
+    ellipsis = require('yoho-mlellipsis');
+
+var $detailList = $('.detail-list'),
+    stopLoading = false,
+    page = 1;
+
+require('./list-common');
+
+ellipsis.init();
+
+// 翻页
+function massageAJAX(pageData) {
+    var $this, $title, $cont;
+
+    loading.showLoadingMask();
+    $.ajax({
+        type: 'GET',
+        url: '/guang/star/detailList',
+        data: {
+            page: pageData,
+            tag: $('.detail-list').data('name')
+        },
+        dataType: 'html',
+        success: function(data) {
+            stopLoading = false;
+
+            if (data === '') {
+                stopLoading = true;
+                tip.show('没有更多内容了');
+            }
+
+            $('.detail-list').append(data);
+
+            // 限制标题字数
+            $('.cont-area').each(function() {
+                $this = $(this);
+                $title = $this.find('.title');
+                $cont = $this.find('.cont-txt');
+
+                $title[0].mlellipsis(2);
+                $cont[0].mlellipsis(2);
+            });
+
+            lazyLoad($('img.lazy'));
+            loading.hideLoadingMask();
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+}
+
+function scrollHandler() {
+    if (!stopLoading && ($(window).scrollTop() + $(window).height() > $('body').height() - 100)) {
+        stopLoading = true;
+        page++;
+        massageAJAX(page);
+    }
+}
+
+$(window).scroll(function() {
+    scrollHandler();
+});
+
+if ($detailList.find('li').length === 0) {
+    massageAJAX(1);
+}

+/**
+ * 星潮教室-列表公共部分
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/6/7
+*/
+
+var $ = require('yoho-jquery'),
+    tip = require('../plugin/tip');
+
+require('../common');
+
+// 星搭配收藏请求
+$(document).on('click', '.collection', function() {
+    var $that = $(this),
+        $icon = $that.find('.collected-ico');
+
+    var type;
+
+    if ($icon.hasClass('collected')) {
+        type = 'del';
+    } else {
+        type = 'fav';
+    }
+
+
+    $.ajax({
+        type: 'POST',
+        url: '/guang/star/setFavorite',
+        data: {
+            articleId: $that.parents('li').attr('articleId'),
+            type: type
+        },
+        success: function(data) {
+            var code = data.code;
+
+            if (code === 200) {
+                if ($icon.hasClass('collected')) {
+                    $icon.removeClass('collected');
+                } else {
+                    $icon.addClass('collected');
+                }
+
+            }
+
+            if (code === 401) {
+                if ($('#collocation-link').length <= 0) {
+                    $('body').append('<a href=\'' + data.data + '\' style="display:none;" id="collocation-link">' +
+                    '<span class="collocation-link"></span></a>');
+                }
+
+                $('.collocation-link').click();
+            }
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+});
+
+// 分享成功
+window.successShare = function() {
+    $.ajax({
+        type: 'POST',
+        url: '/guang/starclass/forward',
+        success: function(data) {
+            var code = data.code;
+
+            if (code === 200 && data.data > 0) {
+                tip.show('分享成功，亲密度+10');
+            }
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+};

+/**
+ * 星专题
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/6/7
+ */
+
+var $ = require('yoho-jquery'),
+    lazyLoad = require('yoho-jquery-lazyload');
+
+require('../common');
+
+lazyLoad($('img.lazy'));

+/**
+ * 星潮教室首页
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/5/31
+ */
+
+var $ = require('yoho-jquery'),
+    Swiper = require('yoho-swiper'),
+    tip = require('../plugin/tip'),
+    lazyLoad = require('yoho-jquery-lazyload'),
+    ellipsis = require('yoho-mlellipsis'),
+    loading = require('../plugin/loading'),
+    PullRefresh = require('../plugin/pull-refresh');
+
+var $window = $(window),
+    $starArticle = $('.star-article'),
+    $headTab = $('.head-tab'),
+    stopLoading = false,
+    avatarSwiper,
+    avatarSwiperClone,
+    getIndexHtml;
+
+/*
+    $swiperView = $('.swiper-view'),
+    $viewImg = $('.view-img'),
+    $body = $('body'),
+    imgs = [],
+    allImgs = {};
+
+var mySwiper;
+*/
+
+var avatarKey, bannerLen;
+
+require('../common');
+
+lazyLoad($('img.lazy'));
+ellipsis.init();
+
+$window.on('mousewheel', false);
+
+// 限制标题字数
+function txtLimit(dom, item1, item2) {
+    var $title = dom.find(item1),
+        $cont = dom.find(item2);
+
+    $title[0].mlellipsis(2);
+    $cont[0].mlellipsis(3);
+}
+
+// 设置默认头像
+function setAvatar($userAvatar) {
+    var myImage = new Image(),
+        avatar = '';
+
+    // 部分老用户没有头像，显示默认头像
+    avatar = $userAvatar.data('avatar');
+
+    if (avatar) {
+        myImage.src = avatar;
+    }
+
+    myImage.onload = function() {
+        $userAvatar.css('background-image', 'url(' + avatar + ')');
+    };
+}
+
+function setIndexAction() {
+    var starIScroll;
+
+    var commonHeaderTop = $('#yoho-header').outerHeight(),
+        $loadingTip = $('.loading-tip'),
+        $avatarWrap = $('.avatar-wrap'),
+        avatarHeight = $('.avatar').height(),
+        infoTop = $('.star-info').css('margin-top');
+
+    // 下拉刷新，上拉加载
+    starIScroll = new PullRefresh('.star-wrap', {
+        height: $(window).height() - commonHeaderTop - avatarHeight - parseInt(infoTop) * 2,
+        pullDown: function() {
+            if (!stopLoading) {
+                stopLoading = true;
+
+                if (avatarSwiperClone) {
+                    avatarSwiperClone.destroy(true, true);
+                    avatarSwiperClone = '';
+                }
+                getIndexHtml();
+            }
+        }
+    });
+
+    starIScroll.iScroll.on('scrollStart', function() {
+        // 下拉
+        if (this.directionY === -1) {
+            $headTab.slideDown();
+            $loadingTip.slideDown();
+        }
+    });
+
+    starIScroll.iScroll.on('scroll', function() {
+        if (commonHeaderTop > $avatarWrap.offset().top) {
+            $('.avatar-clone').show();
+
+            if (!avatarSwiperClone) {
+                avatarSwiperClone = new Swiper('.avatar-0', {
+                    loop: true,
+                    initialSlide: $('.avatar-1').find('.swiper-slide-active').index(),
+                    centeredSlides: true,
+                    slidesPerView: 'auto',
+                    loopedSlides: bannerLen,
+                    spaceBetween: 10,
+                    slidesOffsetBefore: -($('.swiper-num').width()),
+                    watchSlidesProgress: true,
+                    watchSlidesVisibility: true
+                });
+
+                avatarSwiperClone.params.control = avatarSwiper;
+                avatarSwiper.params.control = avatarSwiperClone;
+            }
+        }
+
+        if (Math.abs(this.startY) < $('.banner-top').height() + avatarHeight + $('.head-tab').height()) {
+            $('.avatar-clone').hide();
+        }
+    });
+
+    starIScroll.iScroll.on('scrollEnd', function() {
+        // 上滑
+        if (this.directionY === 1) {
+            $headTab.slideUp(1000);
+        }
+
+        $loadingTip.slideUp();
+    });
+
+    // 明星动态文章图片相关操作
+    /*
+    function articleImgAction(dom, key) {
+        var $articeImgs = dom.find('.artice-imgs'),
+            $li = $articeImgs.find('li'),
+            imgLen = $articeImgs.find('img').length,
+            addFlagDom = $li.eq(2);
+
+        var i;
+
+        imgs = [];
+
+        $li.each(function() {
+            imgs.push($(this).find('img').attr('src'));
+        });
+
+        allImgs[key] = imgs;
+
+        $li.on('click', function() {
+            for (i = 0; i < imgLen; i++) {
+                $swiperView.find('ul').append('<li class="swiper-slide">' +
+                '<img class="swiper-lazy" data-src="' + allImgs[key][i] + '">' +
+                '<div class="swiper-lazy-preloader"></div></li>');
+            }
+            setTimeout(function() {
+                mySwiper = new Swiper('.swiper-view', {
+                    lazyLoading: true,
+                    lazyLoadingInPrevNext: true,
+                    slideElement: 'li'
+                });
+
+                $('.swiper-view li').on('click', function(e) {
+                    if (e.target.nodeName === 'IMG') {
+                        return;
+                    }
+                    $viewImg.hide();
+                    $body.css({
+                        overflow: 'auto'
+                    });
+                    $viewImg.find('li').remove();
+                    mySwiper.destroy(false);
+                });
+            }, 100);
+
+            $viewImg.show();
+
+            $body.css({
+                overflow: 'hidden'
+            });
+        });
+
+        if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
+            addFlagDom.append('<div class="img-size"><i class="pic-icon"></i>' + imgLen + '</div>');
+        }
+    }
+    */
+
+    $('.avatar').each(function(key, item) {
+        $(item).addClass('avatar-' + key);
+    });
+
+    // banner swiper 初始化
+    if ($('.banner-swiper').find('li').length > 1) {
+        new Swiper('.banner-swiper', {
+            lazyLoading: true,
+            lazyLoadingInPrevNext: true,
+            loop: true,
+            autoplay: 3000,
+            autoplayDisableOnInteraction: false,
+            paginationClickable: true,
+            slideElement: 'li',
+            pagination: '.banner-top .pagination-inner'
+        });
+    }
+
+    // 明星头像 swiper 初始化
+    if (bannerLen > 1) {
+        avatarSwiper = new Swiper('.avatar-1', {
+            loop: true,
+            centeredSlides: true,
+            slidesPerView: 'auto',
+            loopedSlides: bannerLen,
+            spaceBetween: 10,
+            slidesOffsetBefore: -($('.swiper-num').width()),
+            watchSlidesProgress: true,
+            watchSlidesVisibility: true
+        });
+    }
+
+    // 明星动态头像左右滑动
+    if ($('.article-avatar-swiper').find('li').length > 1) {
+        new Swiper('.article-avatar-swiper', {
+            initialSlide: 0,
+            lazyLoading: true,
+            lazyLoadingInPrevNext: true,
+            loop: true,
+            autoplay: 5000
+        });
+    }
+
+
+    if ($('.star-info').find('li').length > 0) {
+        $starArticle.each(function(key, item) {
+            txtLimit($(item), '.article-title', 'p');
+
+            // articleImgAction($(item), key);
+        });
+    }
+
+    // 明星头像点击居中显示或跳转
+    $('.avatar-swiper li').on('click', function() {
+        if ($(this).hasClass('swiper-slide-active')) {
+            location.href = $(this).find('span').data('url');
+        } else {
+            avatarKey = $(this).index();
+
+            if (avatarKey >= (2 * bannerLen + 1)) {
+                avatarSwiperClone && avatarSwiperClone.slideTo(bannerLen + 1, 0);
+                avatarSwiper.slideTo(bannerLen + 1, 0);
+            } else if (avatarKey <= (bannerLen - 1)) {
+                avatarSwiperClone && avatarSwiperClone.slideTo(2 * bannerLen - 1, 0);
+                avatarSwiper.slideTo(2 * bannerLen - 1, 0);
+            } else {
+                avatarSwiperClone && avatarSwiperClone.slideTo(avatarKey, 0);
+                avatarSwiper.slideTo(avatarKey, 0);
+            }
+        }
+    });
+
+    $('.rank-avatar').each(function(key, item) {
+        if ($(item).attr('data-avatar') !== '') {
+            setAvatar($(item));
+        }
+    });
+
+}
+
+getIndexHtml = function() {
+    var $starMain = $('.star-main');
+
+    loading.showLoadingMask();
+    $.ajax({
+        url: '/guang/star/getIndexHtml',
+        dataType: 'html',
+        success: function(data) {
+            stopLoading = false;
+
+            if (!data) {
+                stopLoading = true;
+                tip.show('没有更多内容了');
+            }
+
+            $starMain.html(data);
+            bannerLen = $('.avatar .swiper-slide').length;
+
+            if ($('.avatar-clone')) {
+                $('.avatar-clone').remove();
+            }
+
+            $('.avatar li').each(function() {
+                setAvatar($(this).find('span'));
+            });
+
+            $starMain.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
+
+            // 限制标题字数
+            $('.cont-area').each(function() {
+                txtLimit($(this), '.title', '.cont-txt');
+            });
+
+            loading.hideLoadingMask();
+            lazyLoad($('img.lazy'));
+
+            setTimeout(function() {
+                setIndexAction();
+            }, 100);
+
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+};
+
+getIndexHtml();

@@ -48,3 +48,5 @@ function hideLoadingMask() {
 exports.init = init;
 exports.showLoadingMask = showLoadingMask;
 exports.hideLoadingMask = hideLoadingMask;
+exports.show = showLoadingMask;
+exports.hide = hideLoadingMask;

+var $ = require('yoho-jquery'),
+    IScroll = require('yoho-iscroll/build/iscroll-probe');
+
+// 下拉刷新，上滑加载插件
+// 参数一选择器，参数二选项
+// height：容器高度
+// pullDown：下拉回调
+// pullUp：上滑回调
+// 示例代码：
+// new PullRefresh('.star-wrap', {
+//     height: $(window).height() - $('#yoho-header').height() - $('.head-tab').height(),
+//     pullDown: function() {
+//         console.log('下拉了');
+//     },
+//     pullUp: function() {
+//         console.log('上滑了');
+//     }
+// });
+
+function PullRefresh(seclector, options) {
+    var $window = $(window),
+        $em,
+        pullFormTop = false,
+        pullStart,
+        topOffset;
+
+    $em = $(seclector);
+
+    if (!$em.length) {
+        return;
+    }
+
+    if (options.height) {
+        $em.height(options.height);
+    }
+
+    topOffset = -$em.outerHeight();
+
+    this.iScroll = new IScroll($em.get(0), {
+        click: true,
+        probeType: 3
+    });
+
+    this.iScroll.on('scrollStart', function() {
+        if (this.y >= topOffset) {
+            pullFormTop = true;
+        }
+
+        pullStart = this.y;
+        $window.trigger('scroll');
+    });
+
+    this.iScroll.on('scrollEnd', function() {
+        if (pullFormTop && this.directionY === -1) {
+            options.pullDown && options.pullDown();
+        }
+        pullFormTop = false;
+
+        if (pullStart === this.y && this.directionY === 1) {
+            options.pullUp && options.pullUp();
+        }
+
+        $window.trigger('scroll');
+    });
+}
+
+module.exports = PullRefresh;

+@import "star/index";

+.star-page {
+    .collocation-list,
+    .detail-list {
+        width: 100%;
+        float: left;
+
+        li {
+            float: left;
+            width: 100%;
+            margin-top: 30px;
+            background: #000;
+
+            .cont-area {
+                width: 100%;
+                box-sizing: border-box;
+                padding: 30px;
+            }
+
+            .cont-txt {
+                font-size: 28px;
+                line-height: 46px;
+                color: #b0b0b0;
+                margin-top: 10px;
+            }
+
+            img {
+                width: 100%;
+            }
+
+            .title {
+                font-size: 40px;
+                line-height: 48px;
+                color: #fff;
+                width: 100%;
+            }
+        }
+    }
+
+    .count-area {
+        position: relative;
+        width: 100%;
+        height: 32px;
+
+        span {
+            font-size: 24px;
+            color: #b0b0b0;
+            height: 32px;
+            line-height: 32px;
+
+            i {
+                display: inline-block;
+                margin-right: 5px;
+                font-size: 24px;
+                position: relative;
+                top: -2px;
+            }
+        }
+
+        .time {
+            float: left;
+        }
+
+        .see {
+            float: left;
+            margin-left: 20px;
+        }
+
+        .time-ico {
+            width: 24px;
+            height: 24px;
+        }
+
+        .see-ico {
+            width: 31px;
+            height: 24px;
+        }
+
+        .collection {
+            float: right;
+        }
+
+        .collected-ico {
+            width: 34px;
+            height: 32px;
+            vertical-align: text-bottom;
+        }
+
+        .collected {
+            color: #d62927;
+        }
+
+        .forward {
+            width: 40px;
+            height: 28px;
+            float: right;
+            margin-left: 45px;
+            font-size: 24px;
+            color: #b0b0b0;
+            height: 32px;
+            line-height: 32px;
+        }
+    }
+}
+
+.star-class-body {
+    background: #333;
+    width: 100%;
+    font: 12px/1.5 Arial, '黑体';
+    float: left;
+}

+@import "star";
+@import "special";
+@import "collocation";

+.star-page {
+    .special-list {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+
+        li {
+            width: 100%;
+            float: left;
+            background: #000;
+            margin-top: 30px;
+
+            img {
+                width: 100%;
+            }
+
+            p {
+                width: 100%;
+                height: 88px;
+                box-sizing: border-box;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                padding: 0 34px;
+                font-size: 34px;
+                line-height: 88px;
+            }
+
+            a {
+                color: #fff;
+            }
+        }
+    }
+}

+.star-page {
+    background: #333;
+
+    a {
+        text-decoration: none;
+        outline: none;
+        color: #000;
+
+        &:link,
+        &:visited,
+        &:hover,
+        &:actived {
+            color: #000;
+        }
+    }
+
+    *:focus {
+        outline: none;
+    }
+
+    .font-bold {
+        font-weight: bold;
+    }
+
+    .head-tab {
+        position: relative;
+        width: 100%;
+        height: 88px;
+        background: #000;
+        z-index: 1;
+        transform-origin: top;
+        transform: scale(1, 1);
+        transition: transform 400ms;
+
+        &.hide-tab {
+            transform: scale(1, 0);
+        }
+
+        li {
+            width: 33.3%;
+            text-align: center;
+            float: left;
+            line-height: 88px;
+            font-size: 30px;
+
+            a {
+                color: #b0b0b0;
+                display: inline-block;
+            }
+
+            &.cur a {
+                color: #fff;
+            }
+        }
+    }
+
+    .banner-top {
+        width: 100%;
+        height: auto;
+        position: relative;
+
+        .banner-swiper {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            position: relative;
+
+            ul {
+                position: relative;
+                height: auto;
+
+                li {
+                    float: left;
+                    width: 100%;
+                    height: auto;
+                }
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .swiper-pagination {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 20px;
+            text-align: center;
+            z-index: 1;
+
+            .pagination-inner {
+                display: inline-block;
+            }
+
+            span {
+                display: inline-block;
+                width: 14px;
+                height: 14px;
+                background: #fff;
+                opacity: 0.5;
+                margin: 0  10px;
+                border-radius: 50%;
+            }
+
+            .swiper-pagination-bullet-active {
+                background: #fff;
+                opacity: 1;
+            }
+        }
+    }
+
+    .avatar-swiper {
+        overflow: hidden;
+        margin-top: 30px;
+        background: #000;
+
+        &.avatar-clone {
+            margin-top: 0;
+            position: relative;
+            padding: 5px 0;
+            z-index: 9;
+            background: #000;
+        }
+
+        li {
+            float: left;
+            width: auto;
+            width: 110px;
+            height: 110px;
+            margin-top: 34px;
+            background: #282828;
+
+            span {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .swiper-slide-active {
+            width: 180px;
+            height: 180px;
+            margin-top: 0;
+        }
+
+        .swiper-slide-prev,
+        .swiper-slide-next {
+            width: 130px;
+            height: 130px;
+            margin-top: 27px;
+        }
+    }
+
+    .star-info {
+        margin-top: 30px;
+        background: #000;
+
+        li {
+            float: left;
+            margin-bottom: 30px;
+        }
+    }
+
+    .star-avatar {
+        width: 134px;
+        padding-left: 30px;
+        box-sizing: border-box;
+        float: left;
+        overflow: hidden;
+
+        .article-avatar-swiper {
+            width: 104px;
+            overflow: hidden;
+        }
+
+        .rank-avatar {
+            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;
+            text-align: center;
+        }
+    }
+
+    .star-article {
+        width: 472px;
+        position: relative;
+        border-radius: 8px;
+        background: #282828;
+        float: left;
+        padding: 20px 30px;
+        box-sizing: border-box;
+        margin-left: 18px;
+
+        .article-arrow {
+            position: absolute;
+            left: -13px;
+            width: 0;
+            height: 0;
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-right: 13px solid #282828;
+        }
+
+        .article-title {
+            font-size: 28px;
+            line-height: 38px;
+            color: #fff;
+        }
+
+        .artice-cont {
+            margin-top: 10px;
+
+            p {
+                font-size: 18px;
+                line-height: 29px;
+                color: #969696;
+            }
+        }
+
+        .artice-imgs-area {
+            width: 100%;
+            overflow: hidden;
+
+            img {
+                width: 266px;
+                float: left;
+                margin: 25px 0;
+            }
+        }
+
+        .artice-imgs {
+            margin: 25px 0 0;
+            width: 2500px;
+            float: left;
+            overflow: hidden;
+
+            li {
+                display: inline-block;
+                margin-left: 6px;
+                position: relative;
+            }
+
+            li:first {
+                margin-left: 0;
+            }
+
+            img {
+                width: 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 {
+            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-bottom;
+                }
+            }
+
+            .time {
+                float: left;
+            }
+
+            .see {
+                float: left;
+                margin-left: 30px;
+            }
+
+            .time-ico {
+                width: 24px;
+                height: 24px;
+            }
+
+            .see-ico {
+                width: 31px;
+                height: 24px;
+            }
+        }
+    }
+
+    .view-area {
+        height: 100%;
+        position: relative;
+    }
+
+    .swiper-view {
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    .view-img {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: none;
+        z-index: 9;
+
+        li {
+            float: left;
+
+            img {
+                width: 90%;
+                transform: translate(-50%, -50%);
+                position: absolute;
+                top: 50%;
+                left: 50%;
+            }
+        }
+    }
+
+    .rank-avatar {
+        background-image: resolve("guang/star/user-avatar.png");
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+
+    .loading-tip {
+        display: none;
+        text-align: center;
+        color: #ccc;
+        font-size: 12px;
+        margin: 30px 0;
+    }
+
+    .swiper-num {
+        width: 55px;
+        display: none;
+    }
+}
+
+.star-index-bg {
+    background: #000;
+
+    .star-page {
+        background: #000;
+    }
+}

@@ -10,3 +10,4 @@
 @import "common/index";
 @import "cart/chose-panel";
 @import "coupon/index";
+@import "guang/index";

 .loading-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.1);
+
     @keyframes scale {
         0% {
-            opacity: 1;
             transform: scale(1);
+            opacity: 1;
         }
 
         45% {
-            opacity: 0.7;
             transform: scale(0.1);
+            opacity: 0.7;
         }
 
         80% {
-            opacity: 1;
             transform: scale(1);
+            opacity: 1;
         }
     }
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.1);
 
     .loading {
         position: absolute;
@@ -35,12 +36,13 @@
             $init: 0.12;
 
             @for $i from 1 to 3 {
-                $init: ($i + 1) * 0.12;
-
                 &:nth-child($i) {
                     animation: scale 0.75s $(init)s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
                 }
+
+                $init: calc(($i + 1) * 0.12);
             }
+
             display: inline-block;
             margin: 4px;
             width: 30px;