guang editor & list

+{{> 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

@@ -36,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

@@ -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

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

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

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

+.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

@@ -120,6 +120,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