guang detail css js html

+{{> layout/header}}
+
+{{# detail}}
+<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}}
+                    <div class="commodity-info">
+                        {{#withInfo}}
+                            <div class="tag-container clearfix">
+                                {{# tags}}
+                                    {{# isNew}}
+                                        <p class="good-tag new-tag">NEW</p>
+                                    {{/ isNew}}
+                                    {{# isReNew}}
+                                        <p class="good-tag renew-tag">再到着</p>
+                                    {{/ isReNew}}
+                                    {{# isSale}}
+                                        <p class="good-tag sale-tag">SALE</p>
+                                    {{/ isSale}}
+                                    {{# isYohood}}
+                                        <div class="good-tag yohood-tag"></div>
+                                    {{/ isYohood}}
+                                    {{# isLimit}}
+                                        <p class="good-tag limit-tag">限量商品</p>
+                                    {{/ isLimit}}
+                                    {{# isYearEndPromotion}}
+                                        <p class="good-tag yep-tag">年终大促</p>
+                                    {{/ isYearEndPromotion}}
+                                    {{# isYearMidPromotion}}
+                                        <p class="good-tag ymp-tag">年中热促</p>
+                                    {{/ isYearMidPromotion}}
+                                {{/ tags}}
+                            </div>
+                            <div class="info-img">
+                                <a class="thumb" href="{{url}}">
+                                    <img class="lazy" data-original="{{thumb}}">
+                                </a>
+                                {{# isFew}}
+                                    <p class="few-tag">即将售罄</p>
+                                {{/ isFew}}
+                            </div>
+                            <a class="name" href="{{url}}">{{name}}</a>
+                            <p class="price">
+                                {{# price}}
+                                    <span class="market-price">￥{{.}}</span> 
+                                {{/ price}}
+                                <span class="sale-price">￥{{salePrice}}</span>
+                            </p>
+                        {{/ withInfo}}
+                    </div>
+                    {{/ 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></i>
+                        <span class="like-num">{{likeNum}}</span>
+                    </a>
+                </li>
+                <li id="collect-btn" class="sort-collect{{#isCollected}} collected{{/isCollected}}">
+                    <a href="javascript:;">
+                        <i></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">
+                    <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" style="background-image:url({{imgUrl}})"></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>
+{{/ detail}}
+
+{{> layout/footer}} 
\ No newline at end of file

@@ -31,4 +31,11 @@
     <script>
         seajs.use('js/guang/index');
     </script>
+{{/if}}
+
+{{!-- 逛详情页 --}}
+{{#if guangDetailPage}}
+    <script>
+        seajs.use('js/guang/detail');
+    </script>
 {{/if}}
\ No newline at end of file

+/*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));
+    }
+};*/
\ No newline at end of file

+/**
+ * 逛详情页
+ * @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('../common/right-side');
+require('../common/blink-img');
+
+//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');
\ No newline at end of file

+$icons: sprite-map("guang/detail/icons/*.png", $spacing: 5px);
+
+/**/
+.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 {
+        border-bottom: 1px solid #c1c1c1;
+        font-size: 18px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        margin-bottom: 24px;
+        color: #333;
+        .more-reco {
+            float: right;
+            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;
+        img {
+            display: inline-block;
+            max-width: 412px;
+        }
+    }
+    
+    .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: 14px;
+                background: #efefef;
+                text-align: left;
+                i {
+                    position: absolute;
+                    top: 50%;
+                    left: 8px;
+                    width: 20px;
+                    height: 20px;
+                    margin-top: -10px;
+                }
+                span {
+                    margin-left: 30px;
+                }
+                .cancel-collect {
+                    display: none;
+                }
+            }
+        }
+        .like-status a {
+            i {
+                background: sprite($icons, like);
+            }
+        }
+        .like-status.liked i,
+        .like-status.hover i{
+            background: sprite($icons, like-click);
+        }
+        .like-statis.hover .like-num {
+            color: #000;
+        }
+        .sort-collect a {
+            i {
+                width: 21px;
+                background: sprite($icons, collect);
+            }
+        }
+        .sort-collect.collected a {
+            i {
+                background: sprite($icons, collect-click);
+            }
+            span {
+                display: none;
+            }
+            .cancel-collect {
+                display: inline;
+            }
+        }
+        .sort-collect.hover i {
+            background: sprite($icons, collect-click);
+        }
+        .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;
+    background: sprite($icons, tag);
+    background-repeat: no-repeat;
+    padding-left: 32px;
+    max-width: 555px;
+    ul {
+        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;
+            background-size: cover;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            background-position: center;
+        }
+        .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('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;
+
+.commodity-info {
+    width: $commodityWidth;
+    height: 325px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    float: left;
+    font-size: 12px;
+
+    * {
+        box-sizing: border-box;
+    }
+    .info-img {
+        position: relative;
+    }
+    .thumb {
+        display: block;
+        img {
+            width: $commodityWidth;
+        }
+    }
+
+    .few-tag {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 20px;
+        background: #ffac5b;
+        color: #fff;
+        line-height: 20px;
+        text-align: center;
+        font-size: 12px;
+    }
+
+    .tag-container {
+        height: 20px;
+        width: 100%;
+        overflow: hidden;
+        .good-tag {
+            display: block;
+            float: left;
+            height: 20px;
+            font-size: 12px;
+            text-align: center;
+            line-height: 20px;
+            box-sizing: border-box;
+            margin-right: 4px;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+        .new-tag {
+            width: 43px;
+            background-color: #78dc7e;
+            color: #fff;
+        }
+        .renew-tag {
+            width: 53px;
+            background-color: #78dc7e;
+            color: #fff;
+        }
+        .sale-tag {
+            width: 43px;
+            background-color: #ff575c;
+            color: #fff;
+        }
+        .yohood-tag {
+            width: 64px;
+            background: image-url('yohood.png') no-repeat;
+            background-size: 100% 100%;
+        }
+        .limit-tag {
+            width: 60px;
+            line-height: 18px;
+            border: 1px solid #000;
+            color: #000;
+        }
+        .yep-tag, .ymp-tag {
+            width: 64px;
+            background-color: #ff575c;
+            color: #fff;
+        }
+    }
+    .name {
+        display: block;
+        color: #222;
+        text-decoration: none;
+        max-width: $commodityWidth;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 36px;
+    }
+    .price {
+        font-weight: bold;
+        .market-price {
+            margin-right: 5px;
+            color: #999;
+            text-decoration: line-through;
+        }
+        .sale-price {
+            color: #000;
+        }
+    }
+}
+
+.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: url(http://static.yohobuy.com/images/v3/icon/icon-share.png) no-repeat 0 0;
+}
+
+.share-to .share-weixin {
+    background: url(http://static.yohobuy.com/images/v3/icon/icon-share.png) no-repeat 0 -96px;
+}
+
+.share-to .share-tencent {
+    background: url(http://static.yohobuy.com/images/v3/icon/icon-share.png) no-repeat 0 -16px;
+}
+
+.share-to .share-renren {
+    background: url(http://static.yohobuy.com/images/v3/icon/icon-share.png) no-repeat 0 -32px;
+}
+
+.share-to .share-qzone {
+    background: url(http://static.yohobuy.com/images/v3/icon/icon-share.png) no-repeat 0 -48px;
+}
+
+.share-to .share-qq {
+    background: url(http://static.yohobuy.com/images/v3/icon/icon-share.png) no-repeat 0 -64px;
+}
+
+.share-to .share-douban {
+    background: url(http://static.yohobuy.com/images/v3/icon/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 */
\ No newline at end of file

@@ -15,7 +15,7 @@
             line-height: 30px;
             text-align: center;
             font-size: 18px;
-            padding: 0 28px;
+            padding: 0 28px; 
 
             a {
                 display: block;

@@ -273,4 +273,4 @@
 
 }
 
-@import "home";
\ No newline at end of file
+@import "home", "detail";
\ No newline at end of file

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

@@ -112,7 +112,194 @@ class GuangController extends AbstractAction
      */
     public function detailAction()
     {
-
+        $data = array(
+            'guangDetailPage' => true,
+            'detail' => 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',
+                    'isLike' => false,
+                    'likeNum' => 84,
+                    'isCollected' => true,
+                ),
+                '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(
+                                    'withInfo' => 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' => false
+                                            ),
+                                            array(
+                                                'isYearEndPromotion' => true
+                                            ),
+                                            array(
+                                                'isYearMidPromotion' => false
+                                            )
+                                        ),
+                                        'isFew' => true, //单独的即将售罄标志，不显示不写
+                                        'url' => ''
+                                    )
+                                ),
+                                array(
+                                    'withInfo' => 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' => ''*/
+                        )
+                    )
+                ),
+                '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(
+                    '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',
+                        'imgUrl' => '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小时前'
+                        )
+                    )
+                )
+            )
+        );
+        $this->_view->display('detail', $data);
     }
 
     /**