fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit ca65c9115d884d0173dd155ee1fb783ef9e907be 1 parent 78f30eb8

guang editor & list

Inline Side-by-side
Showing 11 changed files with 272 additions and 21 deletions
  1 +{{> layout/header}}
  2 +<div class="guang-editor-page guang-page yoho-page clearfix">
  3 + {{# guang}}
  4 + {{# editor}}
  5 + <div class="editor-info clearfix">
  6 + <div class="author-avatar">
  7 + <img src="{{avatar}}" alt="">
  8 + </div>
  9 + <div class="author-info">
  10 + <p class="author-name">{{name}}</p>
  11 + <p class="author-introduce">{{intro}}</p>
  12 + </div>
  13 + </div>
  14 + {{/ editor}}
  15 + <div class="left-side">
  16 + <div id="msg-list" class="msg-list">
  17 + {{# msgs}}
  18 + {{> guang/msg}}
  19 + {{/ msgs}}
  20 + </div>
  21 + <div class="msg-pager pager">
  22 + {{{msgPager}}}
  23 + </div>
  24 + </div>
  25 + <div class="right-side">
  26 + {{> guang/right-side}}
  27 + </div>
  28 + {{/ guang}}
  29 +</div>
  30 +{{> layout/footer}}
@@ -36,9 +36,7 @@ @@ -36,9 +36,7 @@
36 </div> 36 </div>
37 </div> 37 </div>
38 <div class="right-side"> 38 <div class="right-side">
39 - {{> guang/ex-reco}}  
40 - {{> guang/hot-tag}}  
41 - {{> guang/ad}} 39 + {{> guang/right-side}}
42 </div> 40 </div>
43 {{/ guang}} 41 {{/ guang}}
44 </div> 42 </div>
  1 +{{> layout/header}}
  2 +<div class="guang-list-page guang-page yoho-page clearfix">
  3 + {{# guang}}
  4 + <div class="left-side">
  5 + <div class="tag-header">
  6 + <span>{{tag}}</span>
  7 + 关联的文章
  8 + </div>
  9 + <div id="msg-list" class="msg-list">
  10 + {{# msgs}}
  11 + {{> guang/msg}}
  12 + {{/ msgs}}
  13 + </div>
  14 + <div class="msg-pager pager">
  15 + {{{msgPager}}}
  16 + </div>
  17 + </div>
  18 + <div class="right-side">
  19 + {{> guang/right-side}}
  20 + </div>
  21 + {{/ guang}}
  22 +</div>
  23 +{{> layout/footer}}
1 -<div class="ads">  
2 - {{# ads}}  
3 - <a class="ad" href="{{url}}">  
4 - <img class="lazy" data-original="{{img}}">  
5 - </a>  
6 - {{/ ads}}  
7 -</div>  
1 -<div class="hot">  
2 - <h1 class="hot-title">热门标签</h1>  
3 - <div class="hot-tag-list">  
4 - {{#hotTags}}  
5 - <a class="hot-tag" href="{{url}}">  
6 - {{tagname}}  
7 - </a>  
8 - {{/hotTags}}  
9 - </div>  
10 -</div>  
@@ -13,3 +13,22 @@ @@ -13,3 +13,22 @@
13 {{/ exRecos}} 13 {{/ exRecos}}
14 </div> 14 </div>
15 </div> 15 </div>
  16 +
  17 +<div class="hot">
  18 + <h1 class="hot-title">热门标签</h1>
  19 + <div class="hot-tag-list">
  20 + {{#hotTags}}
  21 + <a class="hot-tag" href="{{url}}">
  22 + {{tagname}}
  23 + </a>
  24 + {{/hotTags}}
  25 + </div>
  26 +</div>
  27 +
  28 +<div class="ads">
  29 + {{# ads}}
  30 + <a class="ad" href="{{url}}">
  31 + <img class="lazy" data-original="{{img}}">
  32 + </a>
  33 + {{/ ads}}
  34 +</div>
@@ -32,3 +32,9 @@ @@ -32,3 +32,9 @@
32 seajs.use('js/guang/index'); 32 seajs.use('js/guang/index');
33 </script> 33 </script>
34 {{/if}} 34 {{/if}}
  35 +
  36 +{{#if guangListPage}}
  37 + <script>
  38 + seajs.use('js/guang/list');
  39 + </script>
  40 +{{/if}}
  1 +/**
  2 + * 逛编辑页、列表页
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/12/15
  5 + */
  6 +
  7 +require('./msg');
  8 +require('./img-blink');
  9 +require('./right-side');
@@ -292,4 +292,4 @@ @@ -292,4 +292,4 @@
292 } 292 }
293 } 293 }
294 294
295 -@import "home";  
  295 +@import "home", "list";
  1 +.guang-editor-page,
  2 +.guang-list-page {
  3 + .tag-header {
  4 + height: 45px;
  5 + line-height: 45px;
  6 + color: #333;
  7 + font-size: 14px;
  8 + font-weight: bold;
  9 + border-bottom: 1px solid #ccc;
  10 +
  11 + > span {
  12 + font-size: 20px;
  13 + }
  14 + }
  15 +
  16 + .msg-pager {
  17 + float: right;
  18 + margin: 20px 0;
  19 + }
  20 +}
  21 +
  22 +.guang-editor-page .right-side {
  23 + margin-top: 20px;
  24 +}
  25 +
  26 +.guang-list-page .right-side {
  27 + margin-top: 11px;
  28 +}
  29 +
  30 +.guang-editor-page .editor-info {
  31 + padding: 10px 10px;
  32 + background: #fafafa;
  33 + .author-avatar {
  34 + float: left;
  35 + width: 80px;
  36 + height: 100%;
  37 + img {
  38 + width: 80px;
  39 + height: 80px;
  40 + vertical-align: middle;
  41 + border-radius: 50%;
  42 + }
  43 + }
  44 + .author-info {
  45 + float: left;
  46 + margin: 0 0 0 10px;
  47 + max-width: 1060px;
  48 + }
  49 +
  50 + .author-name {
  51 + margin-top: 11px;
  52 + font-size: 20px;
  53 + height: 30px !important;
  54 + line-height: 30px !important;
  55 + }
  56 + .author-introduce {
  57 + line-height: 24px;
  58 + font-size: 14px;
  59 + color: #999;
  60 +
  61 + }
  62 + .intro-content {
  63 + margin: 15px 0 0 0;
  64 + line-height: 18px;
  65 + font-size: 14px;
  66 + color: #999;
  67 + }
  68 +}
@@ -120,6 +120,121 @@ class GuangController extends AbstractAction @@ -120,6 +120,121 @@ class GuangController extends AbstractAction
120 */ 120 */
121 public function editorAction() 121 public function editorAction()
122 { 122 {
  123 + $data = array(
  124 + 'guangListPage' => true,
  125 + 'guang' => array(
  126 + 'editor' => array(
  127 + 'avatar' => 'http://rescdn.yohoboys.com/res/new/boys/images/writer-head-icon.png',
  128 + 'name' => '潮流主编',
  129 + 'intro' => '日本设计界宗师',
  130 + 'info' => '设计理念:时尚，线条流畅',
  131 + ),
  132 + 'msgs' => array(
  133 + array(
  134 + 'id' => 1,
  135 + 'classification' => '话题',
  136 + 'isReco' => true,
  137 + 'href' => '',
  138 + 'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
  139 + 'isSquareImg' => true,
  140 + 'title' => '破旧除新！Publish完美释出2015最新春季[TheResistance]系列看看你很长的时候会不会分页啊，奇怪的人类',
  141 + 'author' => '大家玩看看作者名字 过长的情况显示是不是有问题呵呵哒哒哒',
  142 + 'editorHref' => '',
  143 + 'pTime' => '2015-03-08 15:33',
  144 + 'pView' => '225',
  145 + 'content' => '该类型 应用于多图形式。虽说洛杉矶街头品牌Publish是凭着设计一炮而红,跃升为近年人气品牌,但是该设计团队却打算你妹啊鬼知道你后面说什么但是要测试文字截取能不能成功，所以必须要把你写很长很长很长很长很长',
  146 + 'tags' => array(
  147 + array(
  148 + 'href' => '',
  149 + 'tag' => 'adidas OriginalsQ'
  150 + )
  151 + ),
  152 + 'like' => 0, //如果为0，不传
  153 + // 'liked' => false,
  154 + 'comment' => 20
  155 + )
  156 + ),
  157 + 'exRecos' => array(
  158 + array(
  159 + 'url' => '',
  160 + 'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
  161 + 'title' => '皇家蓝再现，New Balance 999 Elite文字描述长一点查看文字截取的功能'
  162 + )
  163 + ),
  164 + 'hotTags' => array(
  165 + array(
  166 + 'tagname' => 'LEE',
  167 + 'url' => ''
  168 + )
  169 + ),
  170 + 'ads' => array(
  171 + array(
  172 + 'url' => '',
  173 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
  174 + )
  175 + ),
  176 + 'msgPager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>'
  177 + )
  178 + );
  179 + $this->_view->display('editor', $data);
  180 + }
123 181
  182 + /**
  183 + * 列表
  184 + */
  185 + public function listAction()
  186 + {
  187 + $data = array(
  188 + 'guangListPage' => true,
  189 + 'guang' => array(
  190 + 'tag' => '户外',
  191 + 'msgs' => array(
  192 + array(
  193 + 'id' => 1,
  194 + 'classification' => '话题',
  195 + 'isReco' => true,
  196 + 'href' => '',
  197 + 'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
  198 + 'isSquareImg' => true,
  199 + 'title' => '破旧除新！Publish完美释出2015最新春季[TheResistance]系列看看你很长的时候会不会分页啊，奇怪的人类',
  200 + 'author' => '大家玩看看作者名字 过长的情况显示是不是有问题呵呵哒哒哒',
  201 + 'editorHref' => '',
  202 + 'pTime' => '2015-03-08 15:33',
  203 + 'pView' => '225',
  204 + 'content' => '该类型 应用于多图形式。虽说洛杉矶街头品牌Publish是凭着设计一炮而红,跃升为近年人气品牌,但是该设计团队却打算你妹啊鬼知道你后面说什么但是要测试文字截取能不能成功，所以必须要把你写很长很长很长很长很长',
  205 + 'tags' => array(
  206 + array(
  207 + 'href' => '',
  208 + 'tag' => 'adidas OriginalsQ'
  209 + )
  210 + ),
  211 + 'like' => 0, //如果为0，不传
  212 + // 'liked' => false,
  213 + 'comment' => 20
  214 + )
  215 + ),
  216 + 'exRecos' => array(
  217 + array(
  218 + 'url' => '',
  219 + 'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/12/17/01437323c88bc61f26721a2ad91a2ba61a.png?imageView/2/w/640/h/640',
  220 + 'title' => '皇家蓝再现，New Balance 999 Elite文字描述长一点查看文字截取的功能'
  221 + )
  222 + ),
  223 + 'hotTags' => array(
  224 + array(
  225 + 'tagname' => 'LEE',
  226 + 'url' => ''
  227 + )
  228 + ),
  229 + 'ads' => array(
  230 + array(
  231 + 'url' => '',
  232 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
  233 + )
  234 + ),
  235 + 'msgPager' => '<a href="" class="cur"><span>1</span></a><a href=""><span>2</span></a><a href="" title="下一页">下一页<span class="ifont10">&gt;</span></a>'
  236 + )
  237 + );
  238 + $this->_view->display('list', $data);
124 } 239 }
125 } 240 }