Review by:@王成龙

@@ -61,6 +61,103 @@
         ]
         ]
     }
     }
 
 
+
+## 站点头部
+    {
+        gobuytype: 'gobuyboys',//购物车样式
+        searchcate: 'searchcateboys', //搜索栏样式
+        navbars: [{//一级导航
+            name_cn: '男生',
+            name_en: 'BOYS',
+            link: '',
+            classname: 'boys',
+            index_main: 0,
+            subnav: [{
+                name: '新品到着',
+                link: '',
+                index_sub:0,
+                thirdnav: [
+                    {
+                        title: '上装',
+                        branditems: [
+                            {
+                                brandname: '背心',
+                                link: ''
+                            },
+                            {
+                                brandname: 'T恤',
+                                link: ''
+                            },
+                            {
+                                brandname: '衬衫',
+                                link: ''
+                            },
+                            {
+                                brandname: 'POLO',
+                                link: ''
+                            },
+                            {
+                                brandname: '毛衣/针织',
+                                link: ''
+                            }]
+                    }
+            ]
+            }, {
+                name: '品牌一览',
+                link: '',
+                thirdnav: []
+            }]
+        }],
+        myyoho: {
+            email: 'caomei@163.com',
+            viptype: '普通会员',
+            currentscore: 495,
+            totalscore: 600,
+            cardtype: '银卡',
+            infolist: [{
+                name: '待处理的订单',
+                link: '',
+                num: '0'
+            }, {
+                name: '我的收藏',
+                link: '',
+                num: '1'
+            }, {
+                name: '我的优惠券',
+                link: '',
+                num: '2'
+            }, {
+                name: '我的YOHO币',
+                link: '',
+                num: '1'
+            }, {
+                name: '我的退货换货',
+                link: '',
+                num: '1'
+            }],
+            updlink: ''
+        },
+        gobuy: {
+            gobuynum: 3
+        },
+        breadcrumbnav: [{
+            notend: {
+                link: 'http://www.yohobuy.com',
+                name: 'BOYS首页'
+            }
+        }, {
+            notend: {
+                link: 'http://www.yohobuy.com',
+                name: '上衣'
+            }
+        }, {
+            isend: {
+                link: 'http://list.yohobuy.com/?msort=1&gender=1,3',
+                name: '衬衫'
+            }
+        }]
+    }
+
 ## 男首
 ## 男首
 
 
     {
     {
@@ -490,98 +587,200 @@
         }
         }
     }
     }
 
 
-## 站点头部
+## 逛
+
+### 【公用】资讯
+
     {
     {
-        gobuytype: 'gobuyboys',//购物车样式
-        searchcate: 'searchcateboys', //搜索栏样式
-        navbars: [{//一级导航
-            name_cn: '男生',
-            name_en: 'BOYS',
-            link: '',
-            classname: 'boys', 
-            index_main: 0,
-            subnav: [{
-                name: '新品到着',
-                link: '',
-                index_sub:0,
-                thirdnav: [
-                    {
-                        title: '上装',
-                        branditems: [
-                            {
-                                brandname: '背心',
-                                link: ''
-                            }, 
-                            {
-                                brandname: 'T恤',
-                                link: ''
-                            }, 
-                            {
-                                brandname: '衬衫',
-                                link: ''
-                            }, 
-                            {
-                                brandname: 'POLO',
-                                link: ''
-                            }, 
+        id: '',
+        classification: '最新',
+        isReco: true, //是否推荐
+        url: '',
+        isSquareImg: true, //是否是正方形图
+        img: '',
+        title: '',
+        editorUrl: '',
+        author: '',
+        pTime: '',
+        pView: '',
+        content: '',
+        tags: [
+            {
+                url: '',
+                tag: ''
+            },
+            ...
+        ],
+        liked: true,
+        like: 10,
+        comment: 10
+    }
+
+### 【共用】右侧栏
+
+    {
+        exRecos: [
+            {
+                url: '',
+                img: '',
+                title: ''
+            },
+            ..
+        ],
+        hotTags: [
+            {
+                url: '',
+                tagName: ''
+            },
+            ...
+        ],
+        ads: [
+            {
+                url: '',
+                img: ''
+            },
+            ...
+        ]
+    }
+
+### 首页
+    
+    {
+        guang: {
+            slider: [
+                {
+                    url: '',
+                    img: ''
+                },
+                ...
+            ],
+            msgTypes: [
+                {
+                    typeId: '',
+                    isActive: true,
+                    navUrl: '',
+                    type: '最新'
+                },
+                ...
+            ],
+            msgs: [
+                {
+                    ...//资讯
+                }
+            ],
+            msgPager: ''//HTML
+        }
+    }
+
+### 列表页
+
+    {
+        guang: {
+            tag: '户外', //XX关联的文章
+            msgs: [
+                {
+                    ..//资讯
+                },
+                ...
+            ],
+            msgPager: ''
+        }
+    }
+
+### 编辑页
+    
+    {
+        guang: {
+            editor: {
+                avatar: '',
+                name: '',
+                intro: ''
+            },
+            msgs: [],
+            msgPager: ''
+        }
+    }
+
+
+### 逛详情页
+    {
+        guang：{
+            id: 1,  //详情页id
+            header: {
+                title: '',  //大标题 
+                avatar: '',    //作者头像
+                name: '' ,      //作者名字
+                authorUrl: '',     //作者主页url
+                intro: '',         //作者简介
+                time: '',        //时间
+                click: '',       //点击数
+                commentNum: ''      //评论数
+            },
+            content: [
+                {
+                    pic: ''    //内容大图
+                },
+                {
+                    text: ''    //内容文字
+                },
+                {
+                    smallPic: [    //内容两张并列小图
+                        'http://img02.static.yohobuy.com/cms/2015/06/26/12/027eb72bc880b4fe1aad361296c871c2ea.jpg',
+                        'http://img02.static.yohobuy.com/cms/2015/06/26/12/027eb72bc880b4fe1aad361296c871c2ea.jpg'
+                    ]
+                },
+                {
+                    relatedReco: {      //相关推荐
+                        recos: [
                             {
                             {
-                                brandname: '毛衣/针织',
-                                link: ''
-                            }]
+                                ..//通用商品信息
+                            }
+                            ...
+                        ],
+                        moreReco: '',  //标题是否有more，有传url，没有不传
                     }
                     }
-            ]
-            }, {
-                name: '品牌一览',
-                link: '',
-                thirdnav: []
-            }]
-        }],
-        myyoho: {
-            email: 'caomei@163.com',
-            viptype: '普通会员',
-            currentscore: 495,
-            totalscore: 600,
-            cardtype: '银卡',
-            infolist: [{
-                name: '待处理的订单',
-                link: '',
-                num: '0'
-            }, {
-                name: '我的收藏',
-                link: '',
-                num: '1'
-            }, {
-                name: '我的优惠券',
-                link: '',
-                num: '2'
-            }, {
-                name: '我的YOHO币',
-                link: '',
-                num: '1'
-            }, {
-                name: '我的退货换货',
-                link: '',
-                num: '1'
-            }],
-            updlink: ''
-        },
-        gobuy: {
-            gobuynum: 3
-        },
-        breadcrumbnav: [{
-            notend: {
-                link: 'http://www.yohobuy.com',
-                name: 'BOYS首页'
-            }
-        }, {
-            notend: {
-                link: 'http://www.yohobuy.com',
-                name: '上衣'
-            }
-        }, {
-            isend: {
-                link: 'http://list.yohobuy.com/?msort=1&gender=1,3',
-                name: '衬衫'
+                }
+            ],
+            brands: [   //相关品牌
+                {
+                    'thumb' => '',      //品牌图片
+                    'name' => '004',    //品牌名称
+                    'url' => ''         //品牌url
+                }
+                ...
+            ],
+            userInfo: {             //用户点赞收藏
+                isLike: true,       //当前用户是否点赞
+                likeNum: 84,        //点赞次数
+                isCollected: true   //当前用户是否收藏
+            },
+            tag: [      //内容标签
+                {
+                    name: LEE,      //标签内容
+                    url: www.baidu.com      //标签链接
+                }
+                ...
+            ],
+            relatedPost:[   //相关文章
+                {
+                    url => '',      //链接
+                    thumb => '',        //图片
+                    title => ''         //标题
+                }
+                ...
+            ],
+            commentInfo: '',  //初始内容，用于登陆页跳转回来后的内容不丢失
+            comment: {    
+                commentNum: 4,  //如果没有评论，数字为0，list和commentPager可以不传
+                list: [     //评论列表
+                    {
+                        avatar: '',  //评论用户头像
+                        name: '',      //用户名字
+                        content: '',    //评论内容
+                        time: ''        //发表时间
+                    }
+                    ...
+                ]
             }
             }
-        }]
+        }
     }
     }

+{{> layout/header}}
+
+{{# guang}}
+<div class="guang-detail-page guang-page yoho-page clearfix" data-id="{{id}}"> 
+    <div class="left-side detail-body">
+        {{# header}}
+        <div class="detail-title">{{title}}</div>
+        <div class="article-info clearfix">
+            <div class="article-author">
+                <div class="author-avatar">
+                    <img src="{{avatar}}" alt="">
+                </div>
+            </div>
+            <div class="author-info">
+                <a class="author-name" href="{{authorUrl}}">{{name}}</a>
+            </div>
+            <div class="article-status clearfix">
+                <span class="article-time">{{time}}</span>
+                <span class="article-click">点击：{{click}}</span>
+                <span id="article-comment" class="article-comment"><em class="comment-num">{{commentNum}}</em>条评论</span>
+            </div>
+        </div>
+        {{/ header}}
+        
+        <div class="article-main">
+        {{# content}}
+            {{# pic}}
+                <div class="article-pic block">
+                    <img class="lazy" data-original="{{.}}">
+                </div>
+            {{/ pic}}
+            {{# text}}
+                <div class="article-text block">
+                    <p>{{.}}</p>
+                </div>
+            {{/ text}}
+            {{#if smallPic}}
+                <div class="article-small-pic block clearfix"> 
+                    {{# smallPic}}
+                        <img class="lazy" data-original="{{.}}">
+                    {{/ smallPic}}
+                </div>
+            {{/if}}
+            {{# relatedReco}}
+                <div class="related-reco block clearfix">
+                <div class="block-header">
+                    相关推荐
+                    {{# moreReco}}
+                    <a class="more-reco" href="{{.}}">MORE ></a>
+                    {{/ moreReco}}
+                </div>
+                <div class="recos clearfix">
+                    {{# recos}}
+                        {{> product/good}}
+                    {{/ recos}}
+                </div>
+            </div>
+            {{/ relatedReco}}
+        {{/ content}}
+        </div>
+        <div class="related-brand block clearfix">
+            <div class="block-header">相关品牌</div>
+            <div class="brands">
+                {{# brands}}
+                    <div class="brand">
+                        <a class="thumb" href="{{url}}">
+                            <img class="lazy" data-original="{{thumb}}">
+                        </a>
+                        <p class="brand-name">{{name}}</p>
+                    </div>
+                {{/ brands}}
+            </div>
+        </div>
+        {{# userInfo}}
+        <div class="user-handle">
+            <ul class="clearfix">
+                <li id="prise-btn" class="like-status{{#isLike}} liked{{/isLike}}">
+                    <a href="javascript:;">
+                        <i class="iconfont">&#xe626;</i>
+                        <span class="like-num">{{likeNum}}</span>
+                    </a>
+                </li>
+                <li id="collect-btn" class="sort-collect{{#isCollected}} collected{{/isCollected}}">
+                    <a href="javascript:;">
+                        <i class="iconfont">&#xe616;</i>
+                        <span>收藏</span>
+                        <span class="cancel-collect">取消收藏</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        {{/ userInfo}}
+        <div class="article-bottom-info clearfix">
+            {{#if tag}}
+                <div class="article-tag clearfix">
+                    <i class="tag-icon iconfont">&#xe624;</i>
+                    <ul class="clearfix">
+                        {{# tag}}
+                        <li>
+                            <a href="{{url}}">{{name}}</a>
+                        </li>
+                        {{/ tag}}
+                    </ul>
+                </div>
+            {{/if}}
+            <div class="article-share">
+                <span class="share-to">
+                    分享至：
+                    <a class="share-a share-sina" data-type="weibo" title="分享到新浪微博"></a>
+                    <a class="share-a share-weixin" data-type="weixin" title="分享到微信朋友圈"></a>
+                    <a class="share-a share-tencent" data-type="tqq" title="分享到腾讯微博"></a>
+                    <a class="share-a share-qzone" data-type="qzone" title="分享到QQ空间"></a>
+                    <a class="share-a share-qq" data-type="qq" title="分享到QQ好友"></a>
+                    <a class="share-a share-renren" data-type="renren" title="分享到人人网"></a>
+                    <a class="share-a share-douban" data-type="douban" title="分享到豆瓣"></a>
+                    <div class="shareWeixin"></div>
+                </span>
+                <input id="share-img" type="hidden" value="{{sharedImg}}">
+                <input id="share-title" type="hidden" value="{{title}}">
+                <input id="weixin-url" type="hidden" value="{{weixinUrl}}">
+            </div>
+        </div>
+        {{#if relatedPost}}
+        <div class="detail-related-posts">
+            <ul class="clearfix">
+                {{# relatedPost}}
+                <li>
+                    <a href="{{url}}">
+                        <span class="bg-img">
+                            <img src="{{thumb}}" alt="">
+                        </span>
+                        <div class="post-title">
+                            <h2>{{title}}</h2>
+                        </div>
+                    </a>
+                </li>
+                {{/ relatedPost}}
+            </ul>
+        </div>
+        {{/if}}
+
+        <div id="comment-area" class="comment-area">
+            <div class="comment-textarea">
+                <textarea id="comment-info" placeholder="我有话要说。。。">{{commentInfo}}</textarea>
+            </div>
+            <div class="comment-publish clearfix">
+                <span id="word-count-tip" class="word-count-tip"></span>
+                <a id="comment-btn" class="publish-btn disable">评论</a>
+            </div>
+            <div id="pjax-container" class="comments-wrap">
+                {{# comment}}
+                <h4>
+                    <span class="comment-num">{{commentNum}}</span>
+                    条评论 <i></i>
+                </h4>
+                <p class="comments-empty">还没有评论，快抢沙发吧</p>
+                <div class="commnets-resultwrapper">
+                    <ul class="comments-list">
+                        {{# list}}
+                        <li class="clearfix">
+                            <div class="avatar">
+                                <img class="comment-user-avatar" src="{{avatar}}" alt=""></div>
+                            <div class="comment-info">
+                                    <p class="comment-user-name">{{name}}</p>
+                                    <p class="comment-content">{{content}}</p>
+                                    <p class="comment-time">{{time}}</p>
+                            </div>
+                        </li>
+                        {{/ list}}
+                    </ul>
+                    <div class="comment-pager pager">{{{commentPager}}}</div>
+                </div>
+                {{/ comment}}
+            </div>
+        </div>
+    </div>
+    <div class="right-side detail-side">
+        {{> guang/right-side}}
+    </div>
+</div>
+{{/ guang}}
+
+{{> layout/footer}}

+{{> layout/header}}
+<div class="guang-editor-page guang-page yoho-page clearfix">
+    {{# guang}}
+        {{# editor}}
+            <div class="editor-info clearfix">
+                <div class="author-avatar">
+                    <img src="{{avatar}}" alt="">
+                </div>
+                <div class="author-info">
+                    <p class="author-name">{{name}}</p>
+                    <p class="author-introduce">{{intro}}</p>
+                </div>
+            </div>
+        {{/ editor}}
+        <div class="left-side">
+            <div id="msg-list" class="msg-list">
+                {{# msgs}}
+                    {{> guang/msg}}
+                {{/ msgs}}
+            </div>
+            <div class="msg-pager pager">
+                {{{msgPager}}} 
+            </div>
+        </div>
+        <div class="right-side">
+            {{> guang/right-side}}
+        </div>
+    {{/ guang}}
+</div>
+{{> layout/footer}}

+{{> layout/header}}
+<div class="guang-index-page guang-page yoho-page clearfix">
+    {{# guang}}
+        <div class="left-side">
+            <div id="slider" class="slider">
+                <ul class="slide-wrapper">
+                    {{#each slider}}
+                        <li>
+                            <a href="{{url}}">
+                                {{#if @first}}
+                                    <img src="{{img}}">
+                                {{^}}
+                                    <img class="lazy" data-original="{{img}}">
+                                {{/if}}
+                            </a>
+                        </li>
+                    {{/each}}
+                </ul>
+            </div>
+            <div id="pjax-container" class="msg">
+                <ul class="msg-nav">
+                    {{# msgTypes}}
+                        <li data-type="{{typeId}}" {{#if isActive}}class="actived"{{/if}}>
+                            <a class="pjax-link" href="{{navUrl}}">{{type}}</a>
+                        </li>
+                    {{/ msgTypes}}
+                </ul>
+                <div id="msg-list" class="msg-list">
+                    {{# msgs}}
+                        {{> guang/msg}}
+                    {{/ msgs}}
+                </div>
+                <div class="msg-pager pager">
+                    {{{msgPager}}}
+                </div>
+            </div> 
+        </div>
+        <div class="right-side">
+            {{> guang/right-side}}
+        </div>
+    {{/ guang}}
+</div>
+{{> layout/footer}}

+{{> layout/header}}
+<div class="guang-list-page guang-page yoho-page clearfix">
+    {{# guang}}
+        <div class="left-side">
+            <div class="tag-header">
+                <span>{{tag}}</span>
+                关联的文章
+            </div>
+            <div id="msg-list" class="msg-list">
+                {{# msgs}}
+                    {{> guang/msg}}
+                {{/ msgs}}
+            </div>
+            <div class="msg-pager pager">
+                {{{msgPager}}} 
+            </div>
+        </div>
+        <div class="right-side">
+            {{> guang/right-side}}
+        </div>
+    {{/ guang}}
+</div>
+{{> layout/footer}}

+<div class="msg-content clearfix" data-id="{{id}}">
+    <div class="msg-img">
+        <div class="classification">
+            {{classification}}
+        </div>
+        {{#if isReco}}
+            <div class="reco"></div>
+        {{/if}}
+        <a href="{{url}}">
+            <img class="lazy{{#if isSquareImg}} square{{/if}}" data-original="{{img}}">
+        </a>
+    </div>
+    <div class="msg-info">
+        <a class="msg-title" href="{{url}}">{{title}}</a>
+        <p class="msg-app">
+            <a href="{{editorUrl}}">
+                <span class="author">{{author}}</span>
+            </a>
+            <span class="publish-time">
+                <i class="iconfont">&#xe625;</i>
+                {{pTime}}
+            </span>
+            <span class="page-view">
+                <i class="iconfont">&#xe627;</i>
+                {{pView}}
+            </span>
+        </p>
+        <p class="content">{{content}}</p>
+        <div class="footer">
+            <div class="tags">
+                {{# tags}}
+                    <a class="msg-tag" href="{{url}}" target="_blank">{{tag}}</a>
+                {{/ tags}}
+            </div>
+            <div class="like-comment">
+                <span class="like">
+                    <i class="iconfont like-icon{{#if liked}} liked{{/if}}">&#xe626;</i>
+                    {{#if like}}<b class="like-num">(<em class="num">{{like}}</em>)</b>{{/if}}
+                </span>
+                <span class="comment">
+                    <i class="iconfont">&#xe623;</i>
+                    {{# comment}}
+                        ({{.}})
+                    {{/ comment}}
+                </span>
+            </div>
+        </div>
+    </div>
+</div>

+<div class="ex-reco">
+    <h1 class="ex-reco-title">精彩推荐</h1>
+    <div id="ex-reco-list" class="ex-reco-list">
+        {{# exRecos}}
+           <div class="ex-reco-item clearfix">
+                <a class="ex-reco-img" href="{{url}}" target="_blank">
+                    <span class="bg-img" style="background-image:url({{img}})"></span>
+                </a>
+                <a href="{{url}}" target="_blank">
+                    <p class="ex-reco-context">{{title}}</p>
+                </a>
+            </div>
+        {{/ exRecos}}
+    </div>
+</div>
+
+<div class="hot">
+    <h1 class="hot-title">热门标签</h1>
+    <div class="hot-tag-list">
+        {{#hotTags}}
+            <a class="hot-tag" href="{{url}}">
+                {{tagName}}
+            </a>
+        {{/hotTags}}
+    </div>
+</div>
+
+<div class="ads">
+    {{# ads}}
+        <a class="ad" href="{{url}}">
+            <img class="lazy" data-original="{{img}}">
+        </a>
+    {{/ ads}}
+</div>

@@ -19,9 +19,29 @@
 
 
 {{!-- 列表 --}}
 {{!-- 列表 --}}
 {{#if productListPage}}
 {{#if productListPage}}
-<script>
-    seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
-        product.init(4);
-    });
-</script>
+    <script>
+        seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
+            product.init(4);
+        });
+    </script>
+{{/if}}
+
+{{!-- 逛 --}}
+{{#if guangIndexPage}}
+    <script>
+        seajs.use('js/guang/index');
+    </script>
+{{/if}}
+
+{{!-- 逛详情页 --}}
+{{#if guangDetailPage}}
+    <script>
+        seajs.use('js/guang/detail');
+    </script>
+{{/if}}
+
+{{#if guangListPage}}
+    <script>
+        seajs.use('js/guang/list');
+    </script>
 {{/if}}
 {{/if}}

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
 <metadata>
-Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015
+Created by FontForge 20120731 at Wed Dec 16 11:17:36 2015
  By Ads
  By Ads
 </metadata>
 </metadata>
 <defs>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015
     bbox="0 -214 1172.1 864"
     bbox="0 -214 1172.1 864"
     underline-thickness="50"
     underline-thickness="50"
     underline-position="-100"
     underline-position="-100"
-    unicode-range="U+0078-E61B"
+    unicode-range="U+0078-E627"
   />
   />
 <missing-glyph horiz-adv-x="374" 
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -97,5 +97,42 @@ d="M903 493l-68 69l-388 -388l-231 230l-68 -68l299 -298l65 65z" />
     <glyph glyph-name="uniE61B" unicode="&#xe61b;" 
     <glyph glyph-name="uniE61B" unicode="&#xe61b;" 
 d="M505 253l2 -2q2 -1 4 -1l3 1l430 364q2 2 1 6l-2 2q-1 1 -3 1h-435h-424q-2 0 -3 -1l-2 -2l1 -6zM72 585q-3 2 -6 0l-3 -4v-584q0 -4 3.5 -5t5.5 1l288 346zM953 585h-5l-288 -246l287 -346q3 -2 6 -1t3 5v584q0 3 -3 4zM641 322l-131 -111l-5 5l-125 103l-275 -328
 d="M505 253l2 -2q2 -1 4 -1l3 1l430 364q2 2 1 6l-2 2q-1 1 -3 1h-435h-424q-2 0 -3 -1l-2 -2l1 -6zM72 585q-3 2 -6 0l-3 -4v-584q0 -4 3.5 -5t5.5 1l288 346zM953 585h-5l-288 -246l287 -346q3 -2 6 -1t3 5v584q0 3 -3 4zM641 322l-131 -111l-5 5l-125 103l-275 -328
 q-2 -3 -1 -6l2 -2q1 -1 3 -1h396h407q4 0 5 3t-1 6z" />
 q-2 -3 -1 -6l2 -2q1 -1 3 -1h396h407q4 0 5 3t-1 6z" />
+    <glyph glyph-name="uniE61C" unicode="&#xe61c;" 
+d="M982 137l-4 6l-10 12q-12 13 -42 38q-12 10 -25.5 20.5t-27.5 21t-26 17.5l-48 31l-21 11q-5 2 -11.5 3t-13 0.5t-11.5 -2.5q-7 -2 -13.5 -7.5t-9.5 -10.5l-17 -25q-4 -6 -8 -13l-12 -24q-9 -18 -15 -28q-7 -14 -21 -24t-32 -13.5t-36 7.5q-102 57 -171 123
+q-101 95 -135 172q-8 13 -1.5 37t26.5 34q12 6 25 11.5t23 9.5t18 9q7 4 14.5 8.5t18.5 11.5l2 1l4 4l2 1l3 3q19 18 9 43l-3 8q-1 4 -4 10t-12.5 24.5t-19.5 34.5q-8 14 -19.5 31t-21.5 31q-10 13 -20.5 24t-18.5 17.5t-14.5 11.5t-9.5 6l-4 2l-13 7q-9 4 -17.5 4.5t-16 -1
+t-16.5 -4.5q-5 -2 -9.5 -4.5t-8.5 -4t-9 -4.5l-7 -4q-3 -2 -8 -6t-7 -5t-7.5 -5.5t-7 -5.5t-8 -6.5t-7.5 -5.5q-44 -37 -69.5 -82.5t-19.5 -86.5q10 -72 88 -198.5t182.5 -225.5t237.5 -173t209 -84q79 -10 169 73q16 15 31.5 34.5t24.5 38.5q6 14 7.5 30t-5.5 31v0z
+M982 137z" />
+    <glyph glyph-name="uniE61D" unicode="&#xe61d;" 
+d="M888 620q8 8 18.5 10.5t20.5 0t18 -10.5q4 -4 6.5 -8.5t4 -9.5t1.5 -10.5t-1.5 -10t-4 -9.5t-6.5 -9l-406 -405q-12 -12 -28.5 -12t-27.5 12q-6 5 -9 12.5t-3 15.5t3 15t9 13zM539 214q3 -3 5 -6t3.5 -7t2 -7.5t0.5 -7.5t-0.5 -8t-2 -7.5t-3.5 -6.5t-5 -6
+q-12 -12 -28.5 -12t-28.5 12l-406 405q-7 8 -10 18.5t0 20.5t10 18q6 6 13.5 9t15 3t15 -3t13.5 -9zM539 214z" />
+    <glyph glyph-name="uniE61E" unicode="&#xe61e;" 
+d="M127 769v-770h770v770h-770zM555 170h-86v86h86v-86zM555 298h-86v257h86v-257z" />
+    <glyph glyph-name="uniE61F" unicode="&#xe61f;" 
+d="M511.5 747q-72.5 0 -141 -22.5t-123.5 -64t-96 -96.5t-63.5 -123t-22.5 -141q0 -91 35 -173.5t95 -142.5t143 -95.5t173.5 -35.5t173.5 35.5t143 95.5t95 142.5t35 173.5q1 73 -22 141t-64 123t-96 96.5t-123.5 64t-141 22.5zM452 100h-1v0l-38 38l-179 180l38 37
+l179 -179l318 318l38 -38zM512 -147q-91 0 -175 35q-80 34 -142 96t-96 142q-8 21 -15 42t-11 43t-6.5 44t-2.5 45q0 91 35 174q34 81 96 142.5t142 95.5q84 36 175 36q45 0 88.5 -9t85.5 -27q40 -16 75.5 -40.5t66.5 -54.5q20 -21 38 -44t32.5 -47.5t25.5 -51.5
+q35 -83 35 -174t-35 -174q-34 -80 -96 -142t-142 -96q-14 -6 -28 -11t-28.5 -9t-29 -6.5t-29 -4.5t-29.5 -3t-30 -1zM511.5 747q-90.5 0 -173 -35.5t-142.5 -95.5t-95.5 -142.5t-35.5 -173.5t35.5 -173.5t95.5 -142.5t142.5 -95t173 -35t173.5 35t142.5 95t95 142.5
+t35.5 173.5t-35.5 173.5t-95 142.5t-142.5 95.5t-173.5 35.5zM451 99l-38 39l-180 180l39 38l179 -180l318 318l39 -38zM414 138l37 -37l355 355l-37 37l-318 -318l-179 180l-38 -37z" />
+    <glyph glyph-name="uniE620" unicode="&#xe620;" 
+d="M958 662q0 30 -21 51.5t-51 21.5h-749q-30 0 -51 -21.5t-21 -51.5v-748q0 -30 21 -51t51 -21h749q30 0 51 21t21 51v748zM778 358l-267 -267q-14 -14 -34 -14q-9 0 -18 3.5t-16 10.5l-168 168q-14 14 -14 34t14 34q9 10 21.5 13t25 0t21.5 -13l134 -133l233 232
+q9 10 21.5 13t25 0t21.5 -13q14 -14 14 -34t-14 -34z" />
+    <glyph glyph-name="uniE621" unicode="&#xe621;" 
+d="M384 556v-513l321 257z" />
+    <glyph glyph-name="uniE622" unicode="&#xe622;" horiz-adv-x="1000" 
+d="M662 566v-499l-299 250zM662 566z" />
+    <glyph glyph-name="uniE623" unicode="&#xe623;" horiz-adv-x="1000" 
+d="M744 502h-488q-25 0 -46 -12t-33 -33t-12 -46v-290q0 -38 26.5 -64.5t64.5 -26.5h227l200 -138v138h61q38 0 64.5 26.5t26.5 64.5v290q0 15 -4.5 29t-13 25t-19.5 19.5t-25 13t-29 4.5zM744 262z" />
+    <glyph glyph-name="uniE624" unicode="&#xe624;" horiz-adv-x="1025" 
+d="M1024 396v338q0 32 -23 55t-55 23h-331h-14q-55 0 -76 -21l-506 -506q-19 -19 -19 -46t19 -45l387 -387q18 -19 45 -19t46 19l506 506q10 10 15 25.5t5.5 26.5t0.5 31zM764 465q-36 0 -61.5 25.5t-25.5 61.5q0 17 7 33t18.5 28t27.5 18.5t34 6.5q36 0 61 -25t25 -61
+t-25 -61.5t-61 -25.5z" />
+    <glyph glyph-name="uniE625" unicode="&#xe625;" 
+d="M511 748q-91 0 -173.5 -35.5t-142 -95t-95 -142t-35.5 -173.5q0 -61 16 -118.5t45 -106.5t70 -90t90 -70t106.5 -45t118.5 -16q91 0 173.5 35.5t142.5 95t95 142t35 173.5q0 185 -130.5 315.5t-315.5 130.5zM734 253h-237q-7 0 -14 3q-22 9 -22 33v237q0 10 5 18.5
+t13 13.5t18 5q8 0 14.5 -3t11.5 -8t8 -11.5t3 -14.5v-200h200q10 0 18.5 -5t13.5 -13.5t5 -18.5t-5 -18t-13.5 -13t-18.5 -5zM734 253z" />
+    <glyph glyph-name="uniE626" unicode="&#xe626;" horiz-adv-x="1025" 
+d="M994 79q-18 9 -16 30.5t27 46.5q24 27 17.5 54.5t-33.5 40.5q-17 8 -24.5 17.5t-2 20t26.5 19.5q20 7 27 30.5t-1 52.5t-28 53q-17 19 -92 24.5t-142 1.5l-67 -4q3 2 3 145q0 69 -14 109t-37.5 53.5t-60.5 12.5q-18 0 -28.5 -5t-17 -13t-11 -26.5t-7.5 -38t-10 -56.5
+t-16 -74q-12 -47 -38 -94t-54 -80t-55.5 -59t-44 -39t-17.5 -13v-386q8 -12 20 -21t25.5 -15.5t25 -11t23.5 -8.5t16 -6q9 -4 65 -10.5t105.5 -11t51.5 -4.5q4 0 11 0.5t30 2.5t45 4.5t52 6.5t56.5 8t53.5 9.5t47 11t33.5 13t15.5 14.5q5 17 4 30.5t-3.5 23t2.5 17.5t21 15
+q14 5 23 14.5t12 20.5t3 23t-3.5 22t-8.5 18t-10 11zM0 295v-380q0 -28 20 -48.5t49 -20.5h137v518h-137q-29 0 -49 -20.5t-20 -48.5zM0 295z" />
+    <glyph glyph-name="uniE627" unicode="&#xe627;" horiz-adv-x="1025" 
+d="M512 623q-167 0 -304.5 -89.5t-205.5 -236.5q-4 -9 0 -18q45 -96 121 -169.5t177 -115t212 -41.5q167 0 304.5 89.5t205.5 236.5q1 3 1.5 6t0 6t-1.5 6q-68 147 -205.5 236.5t-304.5 89.5zM512 57q-96 0 -163.5 67.5t-67.5 163.5t67.5 163.5t163.5 67.5t163.5 -67.5
+t67.5 -163.5q0 -47 -18.5 -89.5t-49.5 -73.5t-73.5 -49.5t-89.5 -18.5zM364 288q0 -61 43.5 -104.5t104.5 -43.5t104.5 43.5t43.5 104.5t-43.5 104.5t-104.5 43.5t-104.5 -43.5t-43.5 -104.5z" />
   </font>
   </font>
 </defs></svg>
 </defs></svg>

+/*var $ = require('yoho.jquery');
+
+module.exports = function(options) {
+    var openUrl = '';
+    var defOption = {
+        title: '',
+        url: window.location.href,
+        weixinUrl: '',
+        image: '',
+        desc: '',
+        channel: ''
+    };
+    var shareChannels = ['weibo', 'tqq', 'qzone', 'renren', 'qq', 'douban','weixin'];
+    var sharebox;
+    var shareCon = '<em><i></i></em>';
+
+    defOption = $.extend(defOption, options);
+    this.weibo = function() {
+        openUrl = 'http://service.weibo.com/share/share.php?url=' +
+                defOption.url + '&title=' + defOption.title +
+                '&appkey=3739328910&searchPic=true&pic=' + defOption.image;
+    };
+    this.tqq = function() {
+        openUrl = 'http://share.v.t.qq.com/index.php?c=share&a=index&url=' +
+        defOption.url + '&title=' + defOption.title +
+        '&appkey=c0af9c29e0900813028c2ccb42021792&pic=' + defOption.image;
+    };
+    this.qzone = function() {
+        openUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' +
+        defOption.url + '&title=' + defOption.title +
+        '&desc=&summary=' + defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
+    };
+    this.renren = function() {
+        openUrl = 'http://widget.renren.com/dialog/share?resourceUrl=' +
+        defOption.url + '&srcUrl=' + defOption.url + '&desc=' + defOption.desc +
+        '&title=' + defOption.title + '&description=' +
+        defOption.desc + '&pic=' + defOption.image;
+    };
+    this.qq = function() {
+        openUrl = 'http://connect.qq.com/widget/shareqq/index.html?url=' +
+        defOption.url + '&desc=' + defOption.desc + '&title=' +
+        defOption.title.replace('%', '') + '&desc=&summary=' + defOption.desc +
+        '&site=YOHO!有货&pics=' + defOption.image;
+    };
+    this.weixin = function() {
+        openUrl = 'http://s.jiathis.com/qrcode.php?url=' +
+        defOption.weixinUrl + '&desc=' + defOption.desc + '&title=' + defOption.title +
+        '&description=' + defOption.desc + '&pic=' + defOption.image;
+    };
+    this.douban = function() {
+        openUrl = 'http://www.douban.com/share/service?href=' +
+        defOption.url + '&text=' + defOption.desc + '&image=' + defOption.image +
+        '&title=' + defOption.title + '&comment=';
+    };
+    if ($.inArray(defOption.channel, shareChannels) === -1) {
+        alert('不存在的分享平台!');
+        return false;
+    }
+    eval(defOption.channel + '();');
+    if (defOption.channel === 'weixin') {
+        if (defOption.self && defOption.self.closest('.share-to').find('.shareWeixin')) {
+            sharebox = defOption.self.closest('.share-to').find('.shareWeixin');
+            shareCon += '<div class="con"><h2>分享到微信朋友圈</h2><p class="pic">' +
+            '<img src="' + openUrl + '" /></p><p class="w">打开微信，点击底部得“发现”，使用<br/>“扫一扫“即可将网页分享到我的朋友圈。</p>' +
+            '<a href="javascript:void(0)" class="close">x</a></div>';
+            sharebox.find('div').length > 0 ? sharebox.show() : sharebox.html(shareCon).show();
+
+            sharebox.find('.close').click(function() {
+                $(this).closest('.shareWeixin').hide();
+            });
+        }
+    } else {
+        window.open(encodeURI(openUrl));
+    }
+};*/

@@ -26,10 +26,27 @@ var $ = require('yoho.jquery'),
             } else {
             } else {
                 this._createPage();
                 this._createPage();
             }
             }
+
+            if (this.options.orient) {
+                this._createOrient();
+            }
             this._slideShow();
             this._slideShow();
             this._bindEvent();
             this._bindEvent();
             this._autoplay();
             this._autoplay();
         },
         },
+        _createOrient: function() {
+
+            var orientHtml = '<div class="slide-switch">' +
+                    '<a class="prev" href="javascript:;"><span class="iconfont">&#xe60c;</span></a>' +
+                    '<a class="next" href="javascript:;"><span class="iconfont">&#xe60b;</span></a>' +
+                '</div>';
+
+            if (this.$element.find('.slide-switch').length > 0) {
+                return;
+            }
+
+            this.$element.append(orientHtml);
+        },
         _createPage: function() {
         _createPage: function() {
             var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
             var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
                             '<div class="slide-shade"></div><div class="slide-pagination-last">',
                             '<div class="slide-shade"></div><div class="slide-pagination-last">',
@@ -69,6 +86,12 @@ var $ = require('yoho.jquery'),
             }).on('mouseleave', function() {
             }).on('mouseleave', function() {
                 that._autoplay();
                 that._autoplay();
             });
             });
+
+            this.$element.on('mouseenter', function() {
+                $(this).find('.slide-switch').addClass('show');
+            }).on('mouseleave', function() {
+                $(this).find('.slide-switch').removeClass('show');
+            });
         },
         },
         _nextSlide: function() {
         _nextSlide: function() {
             if (this.index === this.len - 1) {
             if (this.index === this.len - 1) {
@@ -89,12 +112,14 @@ var $ = require('yoho.jquery'),
         _slideShow: function() {
         _slideShow: function() {
             var $img = this.bigItem.eq(this.index).find('img.lazy');
             var $img = this.bigItem.eq(this.index).find('img.lazy');
 
 
+            //未加载图片的及时显示
             if ($img.attr('src') !== $img.data('original')) {
             if ($img.attr('src') !== $img.data('original')) {
-                lazyLoad($img.trigger('appear'));
-            }
-            if (this.len > 1) {
-                this.$element.find('.slide-switch').addClass('show');
+                lazyLoad($img, {
+                    event: 'sporty'
+                });
+                $img.trigger('sporty');
             }
             }
+
             this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
             this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
             this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
             this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
         },
         },
@@ -124,6 +149,7 @@ var $ = require('yoho.jquery'),
     $.fn.slider.Constructor = Slider;
     $.fn.slider.Constructor = Slider;
     $.fn.slider.defaults = {
     $.fn.slider.defaults = {
         time: 5000,
         time: 5000,
+        orient: true, //左右切换箭头的显示
         pagination: null
         pagination: null
     };
     };
 })($);
 })($);

+/**
+ * 逛详情页
+ * @author: liuyue<yue.liu@yoho.cn>
+ * @date: 2015/12/16
+ */
+
+var $ = require('yoho.jquery'),
+    lazyLoad = require('yoho.lazyload'),
+    $commentArea = $('#comment-area'),
+    articleId = $('#detail-container').data('id'),
+    yoShare = require('../common/share');
+
+var $commentList = $commentArea.find('.comments-wrap'),
+    $commentNum = $('#article-comment > .comment-num'),
+    commenting = false, //评论请求尚未返回变量
+    locating = false, //评论页面正在跳转
+    $commentBtn = $('#comment-btn'),
+    MAX_COMMENTS_WORDS = 100,
+    $wordCountTip = $('#word-count-tip');
+
+require('./right-side');
+require('./img-blink');
+
+//Pjax
+require('yoho.pjax');
+
+lazyLoad({
+    failure_limit: 50
+});
+
+//点击评论滑到评论区
+$('#article-comment').click(function() {
+    $('html, body').animate({
+        scrollTop: $commentArea.offset().top
+    }, 800);
+});
+
+//文章点赞与取消点赞
+$('#prise-btn').click(function() {
+    var prising = false,
+        url,
+        $this = $(this);
+
+    if (prising) {
+        return;
+    }
+    $this.toggleClass('liked');
+    if ($this.hasClass('liked')) {
+
+        //点赞
+        url = '/msg/prise';
+    } else {
+
+        //取消点赞
+        url = '/msg/cancelprise';
+    }
+    prising = true;
+    $.ajax({
+        type: 'GET',
+        url: url,
+        data: {
+            id: articleId
+        }
+    }).then(function(data) {
+        if (data.code === 200) {
+            $this.find('.like-num').html(data.data);
+        }
+        prising = false;
+    });
+}).bind('mouseenter mouseleave', function() {
+    $(this).toggleClass('hover');
+});
+
+//文章收藏与取消收藏
+$('#collect-btn').click(function() {
+    var collecting = false,
+        url,
+        col,
+        $this = $(this);
+
+    if (collecting) {
+        return;
+    }
+    if ($this.hasClass('collected')) {
+
+        //取消点赞
+        url = '/msg/cancelcollect';
+        col = 0;
+    } else {
+
+        //点赞
+        url = '/msg/collect';
+        col = 1;
+    }
+    collecting = true;
+    $.ajax({
+        type: 'GET',
+        url: url,
+        data: {
+            id: articleId
+        }
+    }).then(function(data) {
+        var hrefUrl;
+
+        switch (data.code) {
+            case 401:
+
+                //防止从已有col的页面再次进行跳转后出错的情况
+                if (/\?col=(1|0)/.test(location.href)) {
+                    hrefUrl = location.href.replace(/\?col=(1|0)/, '?col=' + col);
+                } else {
+                    hrefUrl = location.href + '?col=' + col;
+                }
+                location.href = 'http://www.yohobuy.com/signin.html?refer=' + encodeURI(hrefUrl);
+                break;
+            case 400:
+                alert(data.message);
+                break;
+            case 200:
+                if (/\?col=(1|0)/.test(location.href)) {
+
+                    //如果页面url中含有col，为了防止页面刷新时收藏或者取消收藏会根据col来的问题，进行页面跳转拿掉参数
+                    location.href = location.href.replace(/\?col=(1|0)/, '');
+                } else {
+                    $this.toggleClass('collected');
+                }
+                break;
+        }
+        collecting = false;
+    });
+}).bind('mouseenter mouseleave', function() {
+    $(this).toggleClass('hover');
+});
+
+//Share
+function share(channel, self) {
+    var title = $('#share-title').val();
+    var desc = document.title.replace(/(^\s*)|(\s*$)/g, '');
+    var image = $('#share-img').val();
+    var weixinUrl = $('#weixin-url').val();
+
+    if (channel === 'weibo' || channel === 'tqq') {
+        yoShare({
+            channel: channel,
+            title: title,
+            image: image
+        });
+    } else {
+        yoShare({
+            channel: channel,
+            title: '【YOHO!有货】最快、最全、最权威的潮流品牌型录发布平台',
+            desc: desc,
+            image: image,
+            self: self,
+            weixinUrl: weixinUrl
+        });
+    }
+}
+
+$('.article-share').delegate('.share-a', 'click', function(e) {
+    var $el = $(this),
+        type = $el.data('type');
+
+    e.preventDefault();
+    if (type === 'weixin') {
+        share(type, $el);
+    } else {
+        share(type);
+    }
+});
+
+//评论
+function comment(id) {
+    var commentInfo = $('#comment-info').val();
+
+    if (commentInfo === '') {
+        alert('评论不能为空');
+        return false;
+    }
+    commenting = true;
+    $.ajax({
+        url: '/msg/comment',
+        data: {
+            article_id: id,
+            comment: commentInfo
+        },
+        type: 'post',
+        success: function(data) {
+            switch (data.code) {
+                case 401:
+                    locating = true;
+                    location.href = 'http://www.yohobuy.com/signin.html?refer=' +
+                                    window.escape(location.href + '#comment-info');
+                    break;
+                case 400:
+                    alert(data.message);
+                    break;
+                case 200:
+                    if (data.data) {
+                        $commentList.html(data.data.content);
+                        $commentNum.html(data.data.count);
+
+                        //clear comment-text
+                        $('#comment-info').val('').keyup();
+                    }
+                    break;
+            }
+            commenting = false;
+        }
+    });
+}
+
+
+
+$commentBtn.click(function(e) {
+
+    //页面正在跳转或者正在AJAX请求时评论无效
+    if (locating || commenting) {
+        return false;
+    }
+
+    //字数不符合要求
+    if ($('#comment-info').val().length - MAX_COMMENTS_WORDS > 0) {
+        return;
+    }
+    e.preventDefault();
+    comment($('#detail-container').data('id'));
+});
+
+//comment pager pjax
+$(document).pjax('.comment-pager a', '#pjax-container', {
+    timeout: 5000
+});
+
+//分页后移动到评论框的位置
+$(document).on('pjax:end', function() {
+    $('html,body').scrollTop($('#comment-info').offset().top);
+});
+
+$(document).ready(function() {
+    var commonlist = $('.comments-list').find('li').length;
+
+    if (commonlist === 0) {
+        $('.commnets-resultwrapper').hide();
+        $('.comments-empty').show();
+    } else {
+        $('.commnets-resultwrapper').show();
+        $('.comments-empty').hide();
+    }
+});
+
+$('#comment-info').keyup(function() {
+    var len = $(this).val().length,
+        showTxt;
+
+    if (len === 0) {
+        $wordCountTip.html('');
+        $commentBtn.addClass('disable');
+    } else {
+        if (len - MAX_COMMENTS_WORDS <= 0) {
+            showTxt = '还可以输入' + (MAX_COMMENTS_WORDS - len) + '字';
+            $commentBtn.removeClass('disable');
+        } else {
+            showTxt = '已超过<span class="exceed-count">' + (len - MAX_COMMENTS_WORDS) + '</span>字';
+            $commentBtn.addClass('disable');
+        }
+    }
+    $wordCountTip.html(showTxt);
+});
+
+//init
+$('#comment-info').trigger('keyup');

+/**
+ * 图片移入闪动效果JS
+ * @auhor: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/7/29
+ */
+
+var $ = require('yoho.jquery');
+
+$('.guang-page').on('mouseover', 'a img, a .bg-img', function(e) {
+    var $el = $(e.target);
+
+    //slider中的图片不做此效果
+    if ($el.closest('.slider').length > 0) {
+        return;
+    }
+
+    $el.addClass('blink');
+
+    setTimeout(function() {
+        $el.removeClass('blink');
+    }, 100);
+});

+/**
+ * 逛首页
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/12/15
+ */
+
+var $ = require('yoho.jquery');
+
+var msg = require('./msg');
+
+require('yoho.pjax');
+require('../common/slider');
+
+require('./img-blink');
+
+require('./right-side');
+
+$('#slider').slider(); //初始化slider
+
+$(document).pjax('.pjax-link, .msg-pager a', '#pjax-container', {
+    timeout: 2000
+});
+
+$(document).on('pjax:end', function() {
+    msg.dotLazy();
+});

+/**
+ * 逛编辑页、列表页
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/12/15
+ */
+
+require('./msg');
+require('./img-blink');
+require('./right-side');

+var $ = require('yoho.jquery'),
+    lazyLoad = require('yoho.lazyload');
+
+var prising;
+
+require('yoho.dotdotdot');
+
+//资讯文字截取和lazyload
+function dotLazy() {
+
+    //文字截取
+    $('.msg-title, .msg-content .content').dotdotdot({
+        wrap: 'letter'
+    });
+
+    //Lazyload
+    lazyLoad($('#msg-list img.lazy'));
+}
+
+//资讯点赞
+$('.guang-page').on('click', '.like-icon', function() {
+    var $this = $(this),
+        msgId = $this.closest('.msg-content').data('id'),
+        url;
+
+    //同一资讯多次点击归一处理
+    if (prising === msgId) {
+        return;
+    }
+
+    prising = msgId;
+
+    $this.toggleClass('liked');
+
+    //点赞或取消点赞
+    if ($this.hasClass('liked')) {
+        url = '/msg/prise';
+    } else {
+        url = '/msg/cancelprise';
+    }
+    $.ajax({
+        type: 'GET',
+        url: url,
+        data: {
+            id: msgId,
+            time: new Date().getTime()
+        }
+    }).then(function(data) {
+        if (data.code === 200) {
+            if (data.data * 1 === 0) {
+                $this.next('span').addClass('num-0').children('.num').html('0'); //隐藏数字显示
+            } else {
+                $this.next('span').removeClass('num-0').children('.num').html(data.data);
+            }
+        }
+        prising = false;
+    });
+}).on('mouseenter mouseleave', '.like-icon', function() {
+    $(this).closest('.like').toggleClass('hover');
+});
+
+dotLazy();
+
+exports.dotLazy = dotLazy;

+/**
+ * 右侧栏文字截取js
+ */
+var $ = require('yoho.jquery'),
+    lazyLoad = require('yoho.lazyload');
+
+require('yoho.dotdotdot');
+
+$('.ex-reco-context').dotdotdot({
+    wrap: 'letter'
+});
+
+lazyLoad($('.ads img.lazy'));

@@ -16,7 +16,9 @@
       "yoho.lazyload": "1.0.0",
       "yoho.lazyload": "1.0.0",
       "yoho.handlebars": "3.0.3",
       "yoho.handlebars": "3.0.3",
       "yoho.jquery": "1.8.3",
       "yoho.jquery": "1.8.3",
-      "json2": "1.0.0"
+      "json2": "1.0.0",
+      "yoho.pjax": "1.0.0",
+      "yoho.dotdotdot": "1.0.0"
     },
     },
     "devDependencies": {
     "devDependencies": {
       "expect.js": "0.3.1"
       "expect.js": "0.3.1"

+.guang-detail-page {
+    width: 1150px;
+    margin: 0 auto 95px;
+    
+    b {
+        font-weight: bold;
+    }
+
+    i {
+        font-style: italic; 
+    }
+
+    .block {
+        margin: 15px 0;
+    }
+    
+    .excellent-recommendation-title { 
+        margin-top: 4px;
+    }
+    
+    .block-header {
+        position: relative;
+        border-bottom: 1px solid #c1c1c1;
+        font-size: 18px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        margin-bottom: 24px;
+        color: #333;
+        .more-reco {
+            position: absolute;
+            right: 0;
+            color: #000;
+            font-size: 14px;
+            text-decoration: none;
+        }
+    }
+    
+    // 830+22:兼容IE8不认识:nth-child导致brand换行的问题
+    .related-brand .brands {
+        width:852px;
+    }
+    
+    .related-reco .recos {
+        width: 850px;
+    }
+}
+
+.detail-title {
+    font-size: 28px;
+    line-height: 64px;
+    border-bottom: 1px dotted #c1c1c1;
+    word-wrap:break-word;
+}
+
+.article-author {
+    float: left;
+    line-height: 64px;
+    .author-avatar {
+        clear: both;
+        width: 38px;
+        height: 64px;
+        img {
+            width: 38px;
+            height: 38px; 
+            border-radius: 50%;
+            vertical-align: middle;
+        }
+    }
+}
+.author-info {
+    float: left;
+    margin-left: 10px;
+    font-size: 14px;
+    max-width: 447px;
+    .author-name {
+        display: block;
+        height: 64px;
+        line-height: 64px;
+        cursor: pointer;
+        color: #000;
+
+        &:hover {
+            color: #cc3300;
+        }
+    }
+    .author-introduce {
+        color: #999;
+    }
+}
+
+.article-status {
+    float: right;
+    height: 64px;
+    line-height: 64px;
+    color: #999;
+    font-size: 13px; 
+    .article-click {
+        margin: 0 25px;
+    }
+    .article-comment {
+        color: #cc3300;
+        cursor: pointer;
+    }
+}
+
+.article-main {
+    img {
+        display: block;
+        max-width: 100%;
+        margin:0 auto;
+    }
+    .article-text {
+        margin: 2px 0 20px;
+        line-height: 28px;
+        font-size: 14px;
+    }
+    .article-small-pic {
+        text-align: center;
+        font-size: 0;
+        img {
+            display: inline-block;
+            *display: inline;
+            *zoom: 1;
+            max-width: 412px;
+            &:first-child {
+                margin: 0 6px 0 0;
+            }
+        }
+    }
+    
+    .block:first-child {
+        margin-top: 10px; 
+    }
+}
+
+/*user handle*/
+.user-handle {
+    margin: 30px 0 0 0;
+    text-align: center;
+    ul {
+        display: inline-block;
+        li {
+            float: left;
+            margin: 0 15px;
+            cursor: pointer; 
+            a {
+                position: relative;
+                display: block;
+                padding: 0 10px;
+                height: 36px;
+                line-height: 36px;
+                color: #535353;
+                font-size: 0;
+                background: #efefef;
+                text-align: left;
+                i, span{
+                    @include inline-block;
+                    font-style: normal;
+                    font-size: 14px;
+                }
+                i {
+                    margin: 0 5px 0 0;
+                    @include opacity(0.5);
+                    font-size: 18px;
+                }
+                .cancel-collect {
+                    display: none;
+                }
+            }
+        }
+        .like-status.liked i,
+        .like-status.hover i{
+            @include opacity(1);
+        }
+        .like-statis.hover .like-num {
+            color: #000;
+        }
+        .sort-collect a {
+            i {
+                width: 21px;
+                
+            }
+        }
+        .sort-collect.collected a {
+            i {
+                @include opacity(1);
+            }
+            span {
+                display: none;
+            }
+            .cancel-collect {
+                display: inline;
+            }
+        }
+        .sort-collect.hover i {
+            @include opacity(1);
+        }
+        .sort-collect.hover span {
+            color: #000;
+        }
+    }
+}
+
+.article-bottom-info {
+    margin: 44px 0 0 0;
+    padding: 0 0 10px;
+    border-bottom: 1px dotted #c1c1c1;
+}
+
+.article-tag {
+    float: left;
+    width: 588px;  
+    .tag-icon {
+        float: left;
+        margin: 0 12px 0 0;
+        font-size: 20px;
+        font-style: normal;
+    }
+    ul {
+        float: left;
+        max-width: 555px;
+        li {
+            float: left;
+            margin: 0 10px 10px 0;
+            a {
+                display: block;
+                padding: 0 15px;
+                height: 20px;
+                line-height: 20px;
+                font-size: 12px;
+                color: #fff;
+                font-weight: bold;
+                background: #c1c1c1;
+            }
+
+            &:hover a {
+                background:#333;
+            }
+        }
+        li:first-child {
+            margin-left: 0;
+        }
+    }
+}
+
+
+.article-share {
+    float: right;
+
+    .share-to {
+        position: relative;
+        font-size: 12px;
+    }
+}
+
+.detail-related-posts {
+    margin: 14px 0 0 0;
+    li {
+        float: left;
+        width: 264px;
+        margin-left: 19px;
+        a {
+            display: block;
+        }
+        .bg-img {
+            display: block;
+            width: 100%;
+            height: 173px;
+            line-height: 173px;
+            text-align: center;
+            font-size: 0;
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+                vertical-align: middle;
+            }
+        }
+        .post-title {
+            margin: 8px 0 0 0;
+            h2 {
+                line-height: 16px;
+                font-size: 14px;
+                color: #000;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+        .post-title:hover h2 {
+            color: #cc3300 !important;
+        }
+    }
+    li:first-child {
+        margin-left: 0;
+    }
+}
+
+.comment-area {
+    margin: 58px 0 0 0;
+
+    .comment-publish {
+        height: 48px;
+    }
+}
+
+.comment-textarea {
+    textarea {
+        display: block;
+        width: 812px;
+        height: 86px;
+        padding: 12px 12px;
+        resize: none;
+        outline: none;
+        font-size: 14px;
+        line-height: 18px;
+        color: #535353;
+        font-family: "arial","helvetica","微软雅黑";
+        border: 1px solid #e7e7e7;
+    }
+}
+
+.word-count-tip {
+    display: inline-block;
+    height: 48px;
+    line-height: 48px;
+
+    font-size: 12px;
+    color: #c8c8c8;
+
+    .exceed-count {
+        color: #f00;
+    }
+}
+
+.publish-btn {
+    margin: 10px 0 0 0;
+    float: right;
+    width: 90px;
+    height: 33px;
+    line-height: 33px;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+    background: #cb3a3e;
+    cursor: pointer;
+
+    &:hover {
+        background: #c03234;
+    }
+
+    &.disable {
+        background-color: #e79c9e;
+    }
+}
+
+.comments-wrap{
+    h4{
+        position: relative;
+        line-height: 32px;
+        border-bottom: 1px solid #e7e7e7; 
+        .comment-num{
+            margin-right: 5px;
+            color: #c11e00;
+        }
+        i{
+            position: absolute;
+            width: 13px;
+            height: 7px;
+            left: 30px;
+            bottom: -7px;
+            background: image-url('guang/detail/comment-icon.png') no-repeat;
+        }
+    }
+    
+    .comment-pager {
+        float: right;
+        margin: 20px 0;
+    }
+}
+.comments-empty {
+    display: none;
+    color: #ccc;
+    margin: 20px 0;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
+}
+
+.commnets-resultwrapper {
+    display: none;
+}
+
+.comments-list{
+    li{
+        margin: 14px 0 0;
+        padding: 0 0 15px;
+        border-bottom: 1px dotted #e7e7e7;
+        .avatar{
+            float: left;
+            width: 40px;
+            height: 40px;
+            overflow: hidden;
+            img{
+                display: block;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+            }
+        }
+        .comment-info{
+            float: left;
+            width: 774px;
+            margin: 0 0 0 16px;
+            .comment-user-name{
+                color: #c11e00;
+                font-size: 15px;
+                line-height: 15px;
+            }
+            .comment-content{
+                margin-top: 10px;
+                line-height: 16px;
+                font-size: 12px;
+                word-wrap:break-word;
+            }
+            .comment-time{
+                margin: 10px 0 0 0;
+                color: #c8c8c8;
+                font-size: 12px;
+                line-height: 12px;
+                clear: both;
+            }
+        }
+
+    }
+}
+
+
+.brand {
+    margin-right: 22px;
+    margin-bottom: 20px;
+    float: left;
+    
+    .thumb {
+        display: table-cell;
+        border: 1px solid #f5f5f5;
+        height: 120px;
+        width: 120px;
+        box-sizing: border-box;
+        text-align: center;
+        vertical-align: middle;
+        
+        img {
+            display: block;
+            max-width: 120px;
+            max-height: 120px;
+            margin: 0 auto;
+        }
+        
+    }
+    
+    .brand-name {
+        width: 120px;
+        font-size: 13px;
+        line-height: 20px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-align: center;
+        color: #333;
+    }
+}
+
+$commodityWidth: 192px;
+
+.good-info {
+    width: $commodityWidth;
+    height: 325px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+}
+
+.share-to .share-a {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 2px 0 3px;
+    cursor: pointer;
+}
+
+.share-to .share-sina {
+    background: image-url('guang/detail/icon-share.png') no-repeat 0 0;
+}
+
+.share-to .share-weixin {
+    background: image-url('guang/detail/icon-share.png') no-repeat 0 -96px;
+}
+
+.share-to .share-tencent {
+    background: image-url('guang/detail/icon-share.png') no-repeat 0 -16px;
+}
+
+.share-to .share-renren {
+    background: image-url('guang/detail/icon-share.png') no-repeat 0 -32px;
+}
+
+.share-to .share-qzone {
+    background: image-url('guang/detail/icon-share.png') no-repeat 0 -48px;
+}
+
+.share-to .share-qq {
+    background: image-url('guang/detail/icon-share.png') no-repeat 0 -64px;
+}
+
+.share-to .share-douban {
+    background: image-url('guang/detail/icon-share.png') no-repeat 0 -80px;
+}
+
+/* weixin share start */
+.shareWeixin{width:282px;height:302px;position:absolute;padding-top:9px;text-align: center;font-family: Microsoft Yahei, Arial, Verdana;top: 22px;right: -3px;display:none;z-index:2;}
+.shareWeixin em, .shareWeixin em i{width: 0;height: 0;font-size: 0;position: absolute;border-width:0 10px 9px;border-style:dashed dashed solid;}
+.shareWeixin em{border-color:transparent transparent #d6d6d6;top: 0px;left: 50%;margin-left: -10px;}
+.shareWeixin em i{border-color:transparent transparent #e8e8e8;overflow:hidden;top: 1px;left: -10px;}
+.shareWeixin .con{width:280px;height:300px;overflow:hidden;background-color: #FFFFFF;border:1px solid #d6d6d6;box-shadow: 0px 2px 4px #d1d1d1;position:relative;}
+.shareWeixin h2{height:46px;line-height: 46px;background-color: #e8e8e8;color:#000000;font-size: 18px;display: block;}
+.shareWeixin p.pic, .shareWeixin p.pic img{width:168px;height:168px;}
+.shareWeixin p.pic{overflow:hidden;margin:16px auto;}
+.shareWeixin p.w{font-size: 13px;color:#9f9f9f;line-height: 20px;}
+.shareWeixin a.close{width:45px;height:45px;line-height:45px;overflow:hidden;position: absolute;top: 9px;right: 0;font-size: 16px;color: #999999;}
+/* weixin share end */

+.guang-index-page {
+    .msg-nav {
+        border-bottom: 1px solid #000;
+        margin-top: 24px;
+        height: 30px;
+        li {
+            float: left;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            font-size: 18px;
+            padding: 0 28px; 
+
+            a {
+                display: block;
+                height: 100%;
+                width: 100%;
+                color: #333;
+            }
+
+            &.actived {
+                background-color: #111;
+
+                a {
+                    color: #fff;
+                }
+            }
+        }
+    }
+
+    .msg-pager {
+        float: right;
+        margin: 20px 0;
+    }
+}

+.guang-page {
+    width: 1150px;
+    margin: 0 auto;
+
+    .left-side {
+        float: left;
+        width: 830px;
+    }
+
+    .right-side {
+        float: left;
+        width: 290px;
+        margin-left: 30px;
+    }
+
+    img.blink,
+    .bg-img.blink {
+        opacity: 0.8;
+        filter: alpha(opacity=80);
+    }
+
+    /*精彩推荐*/
+    .ex-reco-title {
+        color: #333;
+        line-height: 24px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #ccc;
+        font-size: 20px;
+        font-weight: bold;
+    }
+    .ex-reco-list {
+        margin-top: 14px;
+    }
+    .ex-reco-item {
+        box-sizing: border-box;
+        height: 60px;
+        margin-bottom: 14px;
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+    .ex-reco-img {
+        display: block;
+        float: left;
+        width: 90px;
+        height: 60px;
+        span {
+            display: block;
+            height: 100%;
+            width: 100%;
+            -webkit-background-size:cover;
+            -moz-background-size:cover;
+            background-size:cover;
+            background-position: center;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        margin-right: 5px;
+    }
+    .ex-reco-context {
+        float: left;
+        max-width: 195px;
+        height: 40px;
+        line-height: 20px;
+        font-size: 13px;
+        color: #666;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+            color: #cc3300;
+        }
+    }
+
+    /*热门标签*/
+    .hot {
+        margin-top: 40px;
+        
+        .hot-title {
+            color: #333;
+            line-height: 24px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #ccc;
+            font-weight: bold;
+            font-size: 20px;
+        }
+        
+        .hot-tag-list {
+            margin-top: 14px;
+            max-height: 150px;
+            overflow: hidden;
+        }
+        
+        .hot-tag {
+            display: inline-block;
+            float: left;
+            padding: 5px;
+            font-size: 12px;
+            background-color: #ccc;
+            border: none;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            color: white;
+            font-weight: bold;
+            &:hover {
+                background-color: #333;
+            }
+        }
+    }
+
+    /*广告位*/
+    .ads {
+        margin-top: 30px;
+
+        .ad {
+            display: block;
+            box-sizing: border-box;
+            margin-bottom: 24px;
+            width: 290px;
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+
+    /*资讯*/
+    .msg-content {
+        padding: 24px 0;
+        border-bottom: 1px solid #ccc;
+        position: relative;
+
+        .content {
+            height: 80px;
+            line-height: 24px;
+        }
+
+        .iconfont {
+            color: #ccc;
+        }
+
+        .msg-img {
+            position: relative;
+            float: left;
+            margin-right: 26px;
+
+            img {
+                display: block;
+                width: 360px;
+                height: 240px;
+            }
+            img.square {
+                height: 360px;
+            }
+        }
+
+        .classification {
+            position: absolute;
+            background-color: #000;
+            color: #fff;
+            text-align: center;
+            width: 80px;
+            height: 32px;
+            line-height: 32px;
+            font-size: 13px;
+            opacity: 0.9;
+            filter: Alpha(opacity=90);
+            z-index: 99;
+        }
+
+        .reco {
+            position: absolute;
+            top: 0;
+            left: 66px;
+            height: 32px;
+            width: 32px;
+            background: image-url("guang/msg-reco.png");
+            background-size: 100% 100%;
+            z-index: 100;
+        }
+
+        .msg-info {
+            float: left;
+            width: 440px;
+        }
+
+        .msg-title {
+            display: block;
+            font-size: 22px;
+            color: #333;
+            line-height: 30px;
+            max-height: 64px;
+
+            &:hover {
+                color: #CC3300;
+            }
+        }
+
+        .content {
+            font-size: 14px;
+            color: #666;
+        }
+
+        .msg-app {
+            line-height: 34px;
+            color: #999;
+            font-size: 13px;
+        }
+
+        .author {
+            display: block;
+            float: left;
+            color: #333;
+            margin-right: 22px;
+            max-width: 180px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &:hover {
+                color: #CC3300;
+            }
+        }
+
+        .publish-time, .page-view {
+            color: #999;
+        }
+
+        .tags, .like-comment {
+            position: absolute;
+            bottom: 24px;
+            font-size: 12px;
+            &.tags {
+                left: 386px;
+                max-width: 350px;
+                height: 20px;
+                overflow: hidden;
+            }
+            &.like-comment {
+                right: 0;
+                color: #999;
+            }
+            .like {
+                margin-right: 10px;
+                &:hover * {
+                    color: #000;
+                }
+            }
+            .like-icon {
+                cursor: pointer;
+            }
+        }
+
+        .msg-tag {
+            display: inline-block;
+            text-align: center;
+            height: 20px;
+            line-height: 20px;
+            padding: 0 10px;
+            margin-right: 10px;
+            background-color: #ccc;
+            color: #fff;
+            &:last-child {
+                margin-right: 0;
+            }
+            &:hover {
+                background-color: #333;
+            }
+        }
+    }
+
+    .pager {
+        font-size: 12px;
+        
+        a {
+            height: 24px;
+            padding: 0 9px;
+            line-height: 24px;
+            display: inline-block;
+            text-align: center;
+            margin-right: 8px;
+            color: #222;
+            
+            &.cur {
+                background-color: #222;
+                color: #fff;
+            }
+        }
+    }
+}
+
+@import "home", "detail", "list";

+.guang-editor-page,
+.guang-list-page {
+    .tag-header {
+        height: 45px;
+        line-height: 45px;
+        color: #333;
+        font-size: 14px;
+        font-weight: bold;
+        border-bottom: 1px solid #ccc;
+
+        > span {
+            font-size: 20px;
+        }
+    }
+
+    .msg-pager {
+        float: right;
+        margin: 20px 0;
+    }
+}
+
+.guang-editor-page .right-side {
+    margin-top: 20px;
+}
+
+.guang-list-page .right-side {
+    margin-top: 11px;
+}
+
+.guang-editor-page .editor-info {
+    padding: 10px 10px;
+    background: #fafafa;
+    .author-avatar {
+        float: left;
+        width: 80px;
+        height: 100%;
+        img {
+            width: 80px;
+            height: 80px;
+            vertical-align: middle;
+            border-radius: 50%;
+        }
+    }
+    .author-info {
+        float: left;
+        margin: 0 0 0 10px;
+        max-width: 1060px;
+    }
+
+    .author-name {
+        margin-top: 11px;
+        font-size: 20px;
+        height: 30px !important;
+        line-height: 30px !important;
+    }
+    .author-introduce {
+        line-height: 24px;
+        font-size: 14px;
+        color: #999;
+        
+    }
+    .intro-content {
+        margin: 15px 0 0 0;
+        line-height: 18px;
+        font-size: 14px;
+        color: #999;
+    }
+}

@@ -13,9 +13,9 @@
 	}
 	}
     
     
     /*大banner大图*/
     /*大banner大图*/
-	.slide-wrapper {
+	.slide-wrapper { 
 		position: relative;
 		position: relative;
-		height: 387px;
+		height: 387px; 
 		overflow: hidden;
 		overflow: hidden;
 
 
 		ul {
 		ul {

@@ -4,7 +4,8 @@
         "compass/reset",
         "compass/reset",
         "header",
         "header",
         "footer",
         "footer",
-        "path-nav";
+        "path-nav",
+        "plugin/slider";
 
 
 body {
 body {
     font-family: arial,"Microsoft YaHei"; 
     font-family: arial,"Microsoft YaHei"; 
@@ -79,4 +80,4 @@ a:focus {
         width: 990px;
         width: 990px;
     }
     }
 }
 }
-@import "home/index", "product/index";
+@import "home/index", "product/index", "guang/index";

+.slider {
+    position: relative;
+    height: 327px;
+    width: 100%;
+    overflow: hidden;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+
+.slide-pagination {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 12px;
+    text-align: center;
+}
+
+.slide-pagination-inner {
+    display: inline-block;
+    position: relative;
+    padding: 7px;
+    vertical-align: middle;
+}
+
+.slide-shade {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0.3;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
+    @include border-radius(13px);
+}
+
+.slide-pagination-last span {
+    display: block;
+    float: left;
+    position: relative;
+    margin: 0 7px;
+    width: 12px;
+    height: 12px;
+    background: #fff;
+    cursor: pointer;
+    @include opacity(0.6);
+    @include border-radius(6px);
+    z-index: 2;
+
+    &.focus {
+        @include opacity(1);
+    }
+}
+
+.slide-switch {
+    display: none;
+
+    &.show {
+        display: block;
+    }
+
+    a {
+        display: block;
+        position: absolute;
+        top: 50%;
+        margin: -30px 0 0;
+        width: 60px;
+        height: 60px;
+        line-height: 56px;
+        text-align: center;
+        z-index: 2;
+        background: #fff;
+        @include opacity(0.55);
+
+        &:hover{
+            @include opacity(0.9);
+        }
+        
+        .iconfont {
+            font-size: 32px;
+            color: #59585a;
+        }
+    }
+
+    .prev {
+        left: 0;
+    }
+
+    .next {
+        right: 0;
+    }
+}

@@ -35,7 +35,7 @@
     .good-detail-text {
     .good-detail-text {
         color: #222;
         color: #222;
         font-size: 12px;
         font-size: 12px;
-        text-align: center;
+        text-align: left;
 
 
         > a {
         > a {
             margin-top: 16px;
             margin-top: 16px;
@@ -86,6 +86,10 @@
             &.limit-tag {
             &.limit-tag {
                 color: #4e4e4e;
                 color: #4e4e4e;
                 border: 1px solid #4e4e4e;
                 border: 1px solid #4e4e4e;
+                height: 22px;
+                box-sizing: border-box;
+                -moz-box-sizing:border-box;
+                -webkit-box-sizing:border-box;
             }
             }
         }
         }
     }
     }

+<?php
+use Action\AbstractAction;
+
+/**
+ * 逛
+ */
+class GuangController extends AbstractAction
+{
+    /**
+     * 逛首页
+     */
+    public function indexAction()
+    {
+        $data = array(
+            'guangIndexPage' => true,
+            'guang' => array(
+                'slider' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
+                    ),
+                    array(
+                        'url' => '',
+                        'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
+                    )
+                ),
+                'msgTypes' => array(
+                    array(
+                        'typeId' => 1,
+                        'type' => '最新',
+                        'navUrl' => '/'
+                    ),
+                    array(
+                        'typeId' => 2,
+                        'type' => '话题',
+                        'isActive' => true,
+                        'navUrl' => '/'
+                    ),
+                    array(
+                        'typeId' => 3,
+                        'type' => '搭配',
+                        'navUrl' => '/'
+                    ),
+                    array(
+                        'typeId' => 4,
+                        'type' => '潮人',
+                        'navUrl' => '/'
+                    ),
+                    array(
+                        'typeId' => 5,
+                        'type' => '潮物',
+                        'navUrl' => '/'
+                    ),
+                    array(
+                        'typeId' => 6,
+                        'type' => '小贴士',
+                        'navUrl' => '/'
+                    )
+                ),
+                'msgs' => array(
+                    array(
+                        'id' => 1,
+                        'classification' => '话题',
+                        'isReco' => true,
+                        'url' => '',
+                        'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
+                        'isSquareImg' => true,
+                        'title' => '破旧除新！Publish完美释出2015最新春季[TheResistance]系列看看你很长的时候会不会分页啊，奇怪的人类',
+                        'author' => '大家玩看看作者名字 过长的情况显示是不是有问题呵呵哒哒哒',
+                        'editorUrl' => '',
+                        'pTime' => '2015-03-08 15:33',
+                        'pView' => '225',
+                        'content' => '该类型 应用于多图形式。虽说洛杉矶街头品牌Publish是凭着设计一炮而红,跃升为近年人气品牌,但是该设计团队却打算你妹啊鬼知道你后面说什么但是要测试文字截取能不能成功，所以必须要把你写很长很长很长很长很长',
+                        'tags' => array(
+                            array(
+                                'url' => '',
+                                'tag' => 'adidas OriginalsQ'
+                            )
+                        ),
+                        'like' => 0, //如果为0，不传
+                        // 'liked' => false,
+                        'comment' => 20
+                    )
+                ),
+                'exRecos' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
+                        'title' => '皇家蓝再现，New Balance 999 Elite文字描述长一点查看文字截取的功能'
+                    )
+                ),
+                'hotTags' => array(
+                    array(
+                        'tagName' => 'LEE',
+                        'url' => ''
+                    )
+                ),
+                'ads' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
+                    )
+                ),
+                'msgPager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>'
+            )
+        );
+        $this->_view->display('index', $data);
+    }
+
+    /**
+     * 逛详情页
+     */
+    public function detailAction()
+    {
+        $data = array(
+            'guangDetailPage' => true,
+            'guang' => array(
+                'id' => '1',
+                'header' => array(
+                    'title' => '潮款马甲内搭学院风领结衬衣！休闲学院风走起',
+                    'avatar' => 'http://rescdn.yohoboys.com/res/new/boys/images/writer-head-icon.png',
+                    'name' => '潮流主编',
+                    'authorUrl' => '',
+                    'intro' => '日本设计界宗师',
+                    'time' => '2015-03-09 08:26',
+                    'click' => '1128',
+                    'commentNum' => '4'
+                ),
+                'content' => array(
+                    array(
+                        'pic' => 'http://img01.yohoboys.com/contentimg/2015/06/04/14/01245c8a33b89ea1efef161f7de82a8b53.jpg'
+                    ),
+                    array(
+                        'text' => 'LV的大秀想必是最不容错过的，这个全世界最有实力的品牌，当之无愧的时尚之王，今年会带来什么样的惊喜呢？作为设计总监的Kim Jones，从2011年就负责LV的男装设计，每一季都会有突破性的表现，这一季度，依然带来具有Kim Jones风格的春夏系列。本季的主题融入了旅行风格，打造出一系列轻松舒适的服饰。从T恤到棒球夹克再到西装，都充满了轻松随意感。同时还融入了各式的花纹和图案设计。能够见到有中国特色的仙鹤刺绣等图案，撞色格纹设计也非常亮眼。搭配上剪裁轮廓上的流线感，使整个系列给人感觉非常的轻松自如。虽然Kim Jones一直保持低调的习惯，但是在巴黎这个时装界重要地区，他呈现一季比较有活力的大秀，顶级真的是顶级，这可不是一些标榜独立设计师品牌们能够企及的。'
+                    ),
+                    array(
+                        'smallPic' => array(
+                            'http://img02.static.yohobuy.com/cms/2015/06/26/12/027eb72bc880b4fe1aad361296c871c2ea.jpg',
+                            'http://img02.static.yohobuy.com/cms/2015/06/26/12/027eb72bc880b4fe1aad361296c871c2ea.jpg'
+                        )
+                    ),
+                    array(
+                        'relatedReco' => array(
+                            'recos' => array(
+                                array(
+                                    'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                                    'name' => 'GAWS DIGI 丛林数码印花拼接卫衣',
+                                    'isLike' => false,
+                                    'price' => 1268,
+                                    'salePrice' => 589,
+                                    'tags' => array(
+                                        array(
+                                            'isNew' => true
+                                        ),
+                                        array(
+                                            'isSale' => false
+                                        ),
+                                        array(
+                                            'isLimit' => true
+                                        ),
+                                        array(
+                                            'isYohood' => false
+                                        ),
+                                        array(
+                                            'isReNew' => true
+                                        ),
+                                        array(
+                                            'isYearEndPromotion' => false
+                                        ),
+                                        array(
+                                            'isYearMidPromotion' => false
+                                        )
+                                    ),
+                                    'isFew' => true, //单独的即将售罄标志，不显示不写
+                                    'url' => ''
+                                ),
+                                array(
+                                    'thumb' => 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                                    'name' => 'CLOTtee 撞色连帽外套',
+                                    'isLike' => false,
+                                    'price' => 488,
+                                    'salePrice' => 139,
+                                    'tags' => array(
+                                        array(
+                                            'isNew' => true
+                                        ),
+                                        array(
+                                            'isSale' => false
+                                        ),
+                                        array(
+                                            'isLimit' => true
+                                        ),
+                                        array(
+                                            'isYohood' => true
+                                        )
+                                    ),
+                                    'url' => ''
+                                ),
+                                array(
+                                    'thumb' => 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                                    'name' => 'CLOTtee 撞色连帽外套',
+                                    'isLike' => false,
+                                    'price' => 488,
+                                    'salePrice' => 139,
+                                    'tags' => array(
+                                        array(
+                                            'isNew' => true
+                                        ),
+                                        array(
+                                            'isSale' => false
+                                        ),
+                                        array(
+                                            'isLimit' => true
+                                        ),
+                                        array(
+                                            'isYohood' => true
+                                        )
+                                    ),
+                                    'url' => ''
+                                ),
+                                array(
+                                    'thumb' => 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                                    'name' => 'CLOTtee 撞色连帽外套',
+                                    'isLike' => false,
+                                    'price' => 488,
+                                    'salePrice' => 139,
+                                    'tags' => array(
+                                        array(
+                                            'isNew' => true
+                                        ),
+                                        array(
+                                            'isSale' => false
+                                        ),
+                                        array(
+                                            'isLimit' => true
+                                        ),
+                                        array(
+                                            'isYohood' => true
+                                        )
+                                    ),
+                                    'url' => ''
+                                )
+                            ),
+                            'moreReco' => '11'
+                        )
+                    )
+                ),
+                'brands' => array(
+                    array(
+                        'thumb' => 'http://img10.static.yhbimg.com/brandLogo/2011/06/26/19/016f21d6a39d5071e1864943253dcdefde.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
+                        'name' => '004',
+                        'url' => ''
+                    ),
+                    array(
+                        'thumb' => 'http://img12.static.yhbimg.com/brandLogo/2011/06/26/14/02ef4f656cbf6c1ec349b30f07e3347840.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
+                        'name' => 'MELISSA',
+                        'url' => ''
+                    ),
+                    array(
+                        'thumb' => 'http://img10.static.yhbimg.com/brandLogo/2012/08/02/15/01e4740f9f77d0142902face2f3d151109.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
+                        'name' => '2%',
+                        'url' => ''
+                    ),
+                    array(
+                        'thumb' => 'http://img12.static.yhbimg.com/brandLogo/2014/08/28/13/028aa6e10aad8235c0f283e0b26f495a9b.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
+                        'name' => 'migo',
+                        'url' => ''
+                    )
+                ),
+                'userInfo' => array(
+                    'isLike' => true,
+                    'likeNum' => 84,
+                    'isCollected' => true,
+                ),
+                'tag' => array(
+                    array(
+                        'name' => 'LEE',
+                        'url' => 'www.baidu.com'
+                    ),
+                    array(
+                        'name' => 'Style',
+                        'url' => ''
+                    ),
+                    array(
+                        'name' => '卫衣',
+                        'url' => 'www.baidu.com'
+                    ),
+                    array(
+                        'name' => '春季新品',
+                        'url' => 'www.baidu.com'
+                    ),
+                    array(
+                        'name' => 'LEE',
+                        'url' => 'www.baidu.com'
+                    ),
+                    array(
+                        'name' => 'Style',
+                        'url' => ''
+                    ),
+                    array(
+                        'name' => '卫衣',
+                        'url' => 'www.baidu.com'
+                    ),
+                    array(
+                        'name' => '春季新品',
+                        'url' => 'www.baidu.com'
+                    )
+                ),
+                'relatedPost' => array(
+                    array(
+                        'url' => 'www.baidu.com',
+                        'thumb' => 'http://img11.static.yhbimg.com/yhb-img01/2015/07/27/17/015d433e79035f8e04aeb4f1329418f0e7.jpg?imageView/2/w/250/h/200',
+                        'title' => 'Playboy Special'
+                    ),
+                    array(
+                        'url' => '',
+                        'imgUrl' => 'http://img02.yohoboys.com/contentimg/2015/06/03/09/02f9e8208e295f6624ba9eea5f1cdac0fa.jpg',
+                        'title' => 'Playboy Special'
+                    ),
+                    array(
+                        'url' => 'www.baidu.com',
+                        'imgUrl' => 'http://img02.yohoboys.com/contentimg/2015/02/27/10/02b3967610350cff3068dada3435cbff38.jpg',
+                        'title' => 'Playboy Special'
+                    )
+                ),
+                'commentInfo' => '初始内容，用于登陆页跳转回来后的内容不丢失',
+                'comment' => array(
+                    'commentNum' => 4,  //如果没有评论，数字为0，list和commentPager可以不传
+                    'list' => array(
+                        array(
+                            'avatar' => 'http://rescdn.yohoboys.com/res/new/boys/images/writer-head-icon.png',
+                            'name' => 'Nikil',
+                            'content' => '睡一觉再更',
+                            'time' => '7小时前'
+                        )
+                    )
+                ),
+                'exRecos' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
+                        'title' => '皇家蓝再现，New Balance 999 Elite文字描述长一点查看文字截取的功能'
+                    )
+                ),
+                'hotTags' => array(
+                    array(
+                        'tagName' => 'LEE',
+                        'url' => ''
+                    )
+                ),
+                'ads' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
+                    )
+                ),
+                'msgPager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>'
+            )
+        );
+        $this->_view->display('detail', $data);
+    }
+
+    /**
+     * 编辑页
+     */
+    public function editorAction()
+    {
+        $data = array(
+            'guangListPage' => true,
+            'guang' => array(
+                'editor' => array(
+                    'avatar' => 'http://rescdn.yohoboys.com/res/new/boys/images/writer-head-icon.png',
+                    'name' => '潮流主编',
+                    'intro' => '日本设计界宗师',
+                    'info' => '设计理念:时尚，线条流畅',
+                ),
+                'msgs' => array(
+                    array(
+                        'id' => 1,
+                        'classification' => '话题',
+                        'isReco' => true,
+                        'url' => '',
+                        'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
+                        'isSquareImg' => true,
+                        'title' => '破旧除新！Publish完美释出2015最新春季[TheResistance]系列看看你很长的时候会不会分页啊，奇怪的人类',
+                        'author' => '大家玩看看作者名字 过长的情况显示是不是有问题呵呵哒哒哒',
+                        'editorUrl' => '',
+                        'pTime' => '2015-03-08 15:33',
+                        'pView' => '225',
+                        'content' => '该类型 应用于多图形式。虽说洛杉矶街头品牌Publish是凭着设计一炮而红,跃升为近年人气品牌,但是该设计团队却打算你妹啊鬼知道你后面说什么但是要测试文字截取能不能成功，所以必须要把你写很长很长很长很长很长',
+                        'tags' => array(
+                            array(
+                                'url' => '',
+                                'tag' => 'adidas OriginalsQ'
+                            )
+                        ),
+                        'like' => 0, //如果为0，不传
+                        // 'liked' => false,
+                        'comment' => 20
+                    )
+                ),
+                'exRecos' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
+                        'title' => '皇家蓝再现，New Balance 999 Elite文字描述长一点查看文字截取的功能'
+                    )
+                ),
+                'hotTags' => array(
+                    array(
+                        'tagName' => 'LEE',
+                        'url' => ''
+                    )
+                ),
+                'ads' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
+                    )
+                ),
+                'msgPager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>'
+            )
+        );
+        $this->_view->display('editor', $data);
+    }
+
+     /**
+     * 列表
+     */
+    public function listAction()
+    {
+        $data = array(
+            'guangListPage' => true,
+            'guang' => array(
+                'tag' => '户外',
+                'msgs' => array(
+                    array(
+                        'id' => 1,
+                        'classification' => '话题',
+                        'isReco' => true,
+                        'url' => '',
+                        'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
+                        'isSquareImg' => true,
+                        'title' => '破旧除新！Publish完美释出2015最新春季[TheResistance]系列看看你很长的时候会不会分页啊，奇怪的人类',
+                        'author' => '大家玩看看作者名字 过长的情况显示是不是有问题呵呵哒哒哒',
+                        'editorUrl' => '',
+                        'pTime' => '2015-03-08 15:33',
+                        'pView' => '225',
+                        'content' => '该类型 应用于多图形式。虽说洛杉矶街头品牌Publish是凭着设计一炮而红,跃升为近年人气品牌,但是该设计团队却打算你妹啊鬼知道你后面说什么但是要测试文字截取能不能成功，所以必须要把你写很长很长很长很长很长',
+                        'tags' => array(
+                            array(
+                                'url' => '',
+                                'tag' => 'adidas OriginalsQ'
+                            )
+                        ),
+                        'like' => 0, //如果为0，不传
+                        // 'liked' => false,
+                        'comment' => 20
+                    )
+                ),
+                'exRecos' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
+                        'title' => '皇家蓝再现，New Balance 999 Elite文字描述长一点查看文字截取的功能'
+                    )
+                ),
+                'hotTags' => array(
+                    array(
+                        'tagName' => 'LEE',
+                        'url' => ''
+                    )
+                ),
+                'ads' => array(
+                    array(
+                        'url' => '',
+                        'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
+                    )
+                ),
+                'msgPager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>'
+            )
+        );
+        $this->_view->display('list', $data);
+    }
+}