guang detail css js html

+{{> 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}}
\ No newline at end of file

@@ -3,14 +3,18 @@
     {{# guang}}
         <div class="left-side">
             <div id="slider" class="slider">
-                <ul>
-                    {{# slider}}
+                <ul class="slide-wrapper">
+                    {{#each slider}}
                         <li>
                             <a href="{{href}}">
-                                <img class="lazy" data-original="{{img}}">
+                                {{#if @first}}
+                                    <img src="{{img}}">
+                                {{^}}
+                                    <img class="lazy" data-original="{{img}}">
+                                {{/if}}
                             </a>
                         </li>
-                    {{/ slider}}
+                    {{/each}}
                 </ul>
             </div>
             <div id="pjax-container" class="msg">
@@ -32,9 +36,7 @@
             </div> 
         </div>
         <div class="right-side">
-            {{> guang/ex-reco}}
-            {{> guang/hot-tag}}
-            {{> guang/ad}}
+            {{> guang/right-side}}
         </div>
     {{/ guang}}
 </div>

+{{> 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}}
\ No newline at end of file

-<div class="ads">
-    {{# ads}}
-        <a class="ad" href="{{url}}">
-            <img class="lazy" data-original="{{img}}">
-        </a>
-    {{/ ads}}
-</div>
\ No newline at end of file

-<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>
\ No newline at end of file

@@ -35,7 +35,7 @@
             <div class="like-comment">
                 <span class="like">
                     <i class="iconfont like-icon{{#if liked}} liked{{/if}}">&#xe626;</i>
-                    <b class="like-num num-{{like}}">(<em class="num">{{like}}</em>)</b>
+                    {{#if like}}<b class="like-num">(<em class="num">{{like}}</em>)</b>{{/if}}
                 </span>
                 <span class="comment">
                     <i class="iconfont">&#xe623;</i>

@@ -12,4 +12,23 @@
             </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>
\ No newline at end of file

@@ -38,4 +38,8 @@
     <script>
         seajs.use('js/guang/detail');
     </script>
-{{/if}}
\ No newline at end of file
+    
+{{#if guangListPage}}
+    <script>
+        seajs.use('js/guang/list');
+    </script>
\ No newline at end of file

@@ -26,10 +26,27 @@ var $ = require('yoho.jquery'),
             } else {
                 this._createPage();
             }
+
+            if (this.options.orient) {
+                this._createOrient();
+            }
             this._slideShow();
             this._bindEvent();
             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() {
             var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
                             '<div class="slide-shade"></div><div class="slide-pagination-last">',
@@ -69,6 +86,12 @@ var $ = require('yoho.jquery'),
             }).on('mouseleave', function() {
                 that._autoplay();
             });
+
+            this.$element.on('mouseenter', function() {
+                $(this).find('.slide-switch').addClass('show');
+            }).on('mouseleave', function() {
+                $(this).find('.slide-switch').removeClass('show');
+            });
         },
         _nextSlide: function() {
             if (this.index === this.len - 1) {
@@ -89,12 +112,14 @@ var $ = require('yoho.jquery'),
         _slideShow: function() {
             var $img = this.bigItem.eq(this.index).find('img.lazy');
 
+            //未加载图片的及时显示
             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.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
         },
@@ -124,6 +149,7 @@ var $ = require('yoho.jquery'),
     $.fn.slider.Constructor = Slider;
     $.fn.slider.defaults = {
         time: 5000,
+        orient: true, //左右切换箭头的显示
         pagination: null
     };
 })($);
\ No newline at end of file

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

@@ -4,22 +4,18 @@
  * @date: 2015/12/15
  */
 
-var $ = require('yoho.jquery'),
-    lazyLoad = require('yoho.lazyload');
+var $ = require('yoho.jquery');
 
 var msg = require('./msg');
 
 require('yoho.pjax');
+require('../common/slider');
 
 require('./img-blink');
 
 require('./right-side');
 
-lazyLoad({
-    failure_limit: 50
-});
-
-msg.dotLazy();
+$('#slider').slider(); //初始化slider
 
 $(document).pjax('.pjax-link, .msg-pager a', '#pjax-container', {
     timeout: 2000

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

@@ -59,4 +59,6 @@ $('.guang-page').on('click', '.like-icon', function() {
     $(this).closest('.like').toggleClass('hover');
 });
 
+dotLazy();
+
 exports.dotLazy = dotLazy;
\ No newline at end of file

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

 .guang-index-page {
-    .slider {
-        height: 327px;
-        width: 100%;
-        overflow: hidden;
-    }
-
     .msg-nav {
         border-bottom: 1px solid #000;
         margin-top: 24px;
@@ -33,6 +27,7 @@
             }
         }
     }
+
     .msg-pager {
         float: right;
         margin: 20px 0;

@@ -28,7 +28,7 @@
         font-size: 20px;
         font-weight: bold;
     }
-    .ex-recos-list {
+    .ex-reco-list {
         margin-top: 14px;
     }
     .ex-reco-item {
@@ -137,6 +137,11 @@
             height: 80px;
             line-height: 24px;
         }
+
+        .iconfont {
+            color: #ccc;
+        }
+
         .msg-img {
             position: relative;
             float: left;
@@ -240,11 +245,7 @@
             }
             .like {
                 margin-right: 10px;
-                .num-0 {
-                    display: none;
-                }
-
-                &.hover .num {
+                &:hover * {
                     color: #000;
                 }
             }
@@ -271,6 +272,24 @@
         }
     }
 
+    .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";
\ No newline at end of file
+@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;
+    }
+}
\ No newline at end of file

@@ -4,7 +4,8 @@
         "compass/reset",
         "header",
         "footer",
-        "path-nav";
+        "path-nav",
+        "plugin/slider";
 
 body {
     font-family: arial,"Microsoft YaHei"; 

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

@@ -77,9 +77,9 @@ class GuangController extends AbstractAction
                                 'tag' => 'adidas OriginalsQ'
                             )
                         ),
-                        'like' => 0,
-                        'liked' => false,
-                        'comment' => false
+                        'like' => 0, //如果为0，不传
+                        // 'liked' => false,
+                        'comment' => 20
                     )
                 ),
                 'exRecos' => array(
@@ -307,6 +307,121 @@ class GuangController extends AbstractAction
      */
     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,
+                        'href' => '',
+                        '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' => '大家玩看看作者名字 过长的情况显示是不是有问题呵呵哒哒哒',
+                        'editorHref' => '',
+                        'pTime' => '2015-03-08 15:33',
+                        'pView' => '225',
+                        'content' => '该类型 应用于多图形式。虽说洛杉矶街头品牌Publish是凭着设计一炮而红,跃升为近年人气品牌,但是该设计团队却打算你妹啊鬼知道你后面说什么但是要测试文字截取能不能成功，所以必须要把你写很长很长很长很长很长',
+                        'tags' => array(
+                            array(
+                                'href' => '',
+                                '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,
+                        'href' => '',
+                        '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' => '大家玩看看作者名字 过长的情况显示是不是有问题呵呵哒哒哒',
+                        'editorHref' => '',
+                        'pTime' => '2015-03-08 15:33',
+                        'pView' => '225',
+                        'content' => '该类型 应用于多图形式。虽说洛杉矶街头品牌Publish是凭着设计一炮而红,跃升为近年人气品牌,但是该设计团队却打算你妹啊鬼知道你后面说什么但是要测试文字截取能不能成功，所以必须要把你写很长很长很长很长很长',
+                        'tags' => array(
+                            array(
+                                'href' => '',
+                                '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);
     }
 }
\ No newline at end of file