fe / YOHOBUYPC · Commits

Go to a project

Authored by weiqingting
Commit fda935ba9aa807bb07be38af357146e3cd6b619a 1 parent 40e8c074

男装重构首页

Inline Side-by-side
Showing 6 changed files with 349 additions and 2 deletions
1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="home-page yoho-page"> 2 <div class="home-page yoho-page">
3 - I am boys page 3 +
  4 + {{!潮流上装}}
  5 + {{# jacket}}
  6 + {{> index/recommend}}
  7 + {{/ jacket}}
  8 +
  9 + {{!经典裤装}}
  10 + {{# pants}}
  11 + {{> index/recommend}}
  12 + {{/ pants}}
  13 +
  14 + {{!时尚鞋履}}
  15 + {{# shoes}}
  16 + {{> index/recommend}}
  17 + {{/ shoes}}
  18 +
  19 + {{!潮人配饰}}
  20 + {{# ornament}}
  21 + {{> index/recommend}}
  22 + {{/ ornament}}
  23 +
  24 + {{! 新品上架}}
  25 + {{# newArrivls}}
  26 + {{> index/commodity}}
  27 + {{/ newArrivls}}
  28 +
4 </div> 29 </div>
5 {{> layout/footer}} 30 {{> layout/footer}}
  1 +<div class="commodity">
  2 + <ul class="clearfix">
  3 + {{#each commodity}}
  4 + <li>
  5 + {{# state}}
  6 + <i class="commodity-tag{{.}}"></i>
  7 + {{/ state}}
  8 + <a href="{{url}}"><div class="commodity-img"><img class="lazy" data-original="{{img}}"/></div>
  9 + <p class="commodity-name">{{name}}</p>
  10 + <p class="commodity-price"><span>¥{{price}}</span></p>
  11 + </a>
  12 + </li>
  13 + {{/each}}
  14 + </ul>
  15 + <div class="loading">
  16 + <p>Loading...</p>
  17 + </div>
  18 +</div>
  1 +{{# tplrecommend}}
  2 +<div class="tpl-recommend clearfix">
  3 + <div class="tpl-body clearfix">
  4 + <div class="tpl-nav">
  5 + <div class="tpl-keywords">
  6 + {{#each keyword}}
  7 + <a class="keywords{{@index}}" title="{{name}}" href="{{url}}"><img class="lazy" data-original="{{img}}"/></a>
  8 + {{/ keyword}}
  9 + </div>
  10 + <div class="tpl-category clearfix">
  11 + {{#each category}}
  12 + <a href="{{url}}">{{name}}</a>
  13 + {{/ category}}
  14 + </div>
  15 + </div>
  16 + <div class="tpl-brands clearfix">
  17 + <ul>
  18 + {{#each brands}}
  19 + <li><a title="{{name}}" href="{{url}}"><img class="lazy" data-original="{{img}}"/></a></li>
  20 + {{/each}}
  21 + </ul>
  22 + </div>
  23 + <div class="tpl-types clearfix">
  24 + <ul>
  25 + {{#each types}}
  26 + <li><a title="{{name}}" href="{{url}}"><img class="lazy" data-original="{{img}}"/></a></li>
  27 + {{/each}}
  28 + </ul>
  29 + </div>
  30 + </div>
  31 + <div class="tpl-products clearfix">
  32 + <ul>
  33 + {{#each products}}
  34 + <li><a href="{{url}}" title="{{name}}"><img class="lazy" data-original="{{img}}"/></a></li>
  35 + {{/each}}
  36 + </ul>
  37 + </div>
  38 +</div>
  39 +{{/ tplrecommend}}
  40 +
  41 +
  1 +dist
  2 +_site
  3 +sea-modules
  4 +spm_modules
  5 +node_modules
  6 +.git
  7 +tests
  8 +examples
  9 +test
  10 +coverage
  1 +.home-page{
  2 + width: 1150px;
  3 + margin: 0 auto;
  4 + .tpl-recommend{
  5 + a{
  6 + display: block;
  7 + background-color: #f8f8f8;
  8 + img{display: block;width: 100%;}
  9 + }
  10 + .tpl-nav{
  11 + float: left;
  12 + width: 185px;
  13 + height: 512px;
  14 + .tpl-keywords{
  15 + .keywords0{
  16 + img{
  17 + height: 152px;
  18 + }
  19 + margin-bottom: 10px;
  20 + }
  21 + .keywords1{
  22 + img{
  23 + height: 86px;
  24 + }
  25 + margin-bottom: 8px;
  26 + }
  27 + }
  28 + .tpl-category{
  29 + padding: 10px 0;
  30 + background-color: #f8f8f8;
  31 + a{
  32 + float: left;
  33 + width: 50%;
  34 + height: 38px;
  35 + line-height: 38px;
  36 + text-align: center;
  37 + color: #000;
  38 + font-size: 14px;
  39 + overflow: hidden;
  40 + }
  41 + }
  42 + }
  43 + .tpl-brands{
  44 + float: left;
  45 + margin-left: 8px;
  46 + width: 378px;
  47 + height: 512px;
  48 + li{
  49 + margin-bottom: 8px;
  50 + img{
  51 + height: 248px;
  52 + width: 100%;
  53 + }
  54 + }
  55 +
  56 + }
  57 + .tpl-types{
  58 + float: left;
  59 + width: 579px;
  60 + height: 512px;
  61 + li{
  62 + float: left;
  63 + margin-left: 8px;
  64 + margin-bottom: 8px;
  65 + img{
  66 + width: 185px;
  67 + height:248px;
  68 + }
  69 + }
  70 + }
  71 + .tpl-products{
  72 + ul{margin-left:-10px;
  73 + li{
  74 + float: left;
  75 + margin-left:10px;
  76 + img{
  77 + width: 222px;
  78 + height: 298px;
  79 + }
  80 + }
  81 + }
  82 + }
  83 + }
  84 + .commodity{
  85 + margin-left: -10px;
  86 + position: relative;
  87 + li{
  88 + float: left;
  89 + margin-left: 10px;
  90 + margin-bottom:28px;
  91 + padding-top:20px;
  92 + position: relative;
  93 + i{
  94 + position: absolute;
  95 + top: 0px;
  96 + display: block;
  97 + width: 64px;
  98 + height: 20px;
  99 + }
  100 + a{
  101 + display: block;
  102 + height: 360px;
  103 + width: 222px;
  104 + .commodity-img{
  105 + img{
  106 + display: block;
  107 + height: 298px;
  108 + width: 222px;
  109 + }
  110 + }
  111 + p.commodity-name{
  112 + font-size: 12px;
  113 + color: #000;
  114 + line-height: 40px;
  115 + text-align: center;
  116 + }
  117 + p.commodity-price{
  118 + font-size: 12px;
  119 + text-align: center;
  120 + }
  121 + }
  122 + }
  123 + .loading{
  124 + position: absolute;
  125 + bottom: 0;
  126 + width: 100%;
  127 + p{
  128 + text-align: center;
  129 + font-size: 20px;
  130 + }
  131 + }
  132 + }
  133 +
  134 +}
@@ -9,6 +9,125 @@ class BoysController extends AbstractAction @@ -9,6 +9,125 @@ class BoysController extends AbstractAction
9 public function indexAction() 9 public function indexAction()
10 { 10 {
11 $this->setTitle('男生首页'); 11 $this->setTitle('男生首页');
12 - $this->_view->display('index'); 12 +
  13 + $tpldata=array(
  14 + 'name'=>'潮人配饰 ORNAMENT',
  15 + 'navs' => array(
  16 + 'list'=>array(
  17 + array(
  18 + 'url' =>'',
  19 + 'name' =>'MORE>'
  20 + )
  21 + )
  22 + ),
  23 + 'tplrecommend'=>array(
  24 + 'keyword'=>array(array('name'=>'工装短裤','img'=>'','url'=>''),array('name'=>'英伦风','img'=>'','url'=>'')),
  25 + 'category'=>array(array('name'=>'衣服','url'=>''),array('name'=>'裤子','url'=>''),array('name'=>'衣服','url'=>''),array('name'=>'裤子','url'=>''),array('name'=>'衣服','url'=>''),array('name'=>'裤子','url'=>''),array('name'=>'衣服','url'=>''),array('name'=>'裤子','url'=>''),array('name'=>'衣服','url'=>''),array('name'=>'裤子','url'=>''),array('name'=>'衣服','url'=>''),array('name'=>'裤子','url'=>'')),
  26 + 'brands'=>array(array('name'=>'工装短裤','img'=>'','url'=>''),array('name'=>'英伦风','img'=>'','url'=>'')),
  27 + 'types'=>array(array('name'=>'工装短裤','img'=>'','url'=>''),array('name'=>'英伦风','img'=>'','url'=>''),array('name'=>'工装短裤','img'=>'','url'=>''),array('name'=>'英伦风','img'=>'','url'=>''),array('name'=>'工装短裤','img'=>'','url'=>''),array('name'=>'英伦风','img'=>'','url'=>'')),
  28 + 'products'=>array(
  29 + array(
  30 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  31 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  32 + 'name'=> '优显led触控台灯',
  33 + 'price'=> 168
  34 + ),
  35 + array(
  36 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  37 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  38 + 'name'=> '优显led触控台灯',
  39 + 'price'=> 168
  40 + ),
  41 + array(
  42 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  43 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  44 + 'name'=> '优显led触控台灯',
  45 + 'price'=> 168
  46 + ),
  47 + array(
  48 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  49 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  50 + 'name'=> '优显led触控台灯',
  51 + 'price'=> 168
  52 + ),
  53 + array(
  54 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  55 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  56 + 'name'=> '优显led触控台灯',
  57 + 'price'=> 168
  58 + )
  59 + )
  60 + )
  61 + );
  62 +
  63 + $data = array(
  64 + 'jacket'=>$tpldata,
  65 + 'pants'=>$tpldata,
  66 + 'shoes'=>$tpldata,
  67 + 'ornament'=>$tpldata,
  68 + 'newArrivls' => array(
  69 + 'name' => '最新上架 NEW ARRIVALS',
  70 + 'navs' => array(
  71 + 'list'=>array(
  72 + array(
  73 + 'url' =>'',
  74 + 'name' =>'MORE>'
  75 + )
  76 + )
  77 + ),
  78 + 'commodity'=>array(
  79 + array(
  80 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  81 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  82 + 'name'=> '优显led触控台灯',
  83 + 'price'=> 168,
  84 + 'state'=> 1 //状态
  85 + ),
  86 + array(
  87 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  88 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  89 + 'name'=> '优显led触控台灯',
  90 + 'price'=> 168,
  91 + 'state'=> 1 //状态
  92 + ),
  93 + array(
  94 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  95 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  96 + 'name'=> '优显led触控台灯',
  97 + 'price'=> 168,
  98 + 'state'=> 1 //状态
  99 + ),
  100 + array(
  101 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  102 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  103 + 'name'=> '优显led触控台灯',
  104 + 'price'=> 168,
  105 + 'state'=> 1 //状态
  106 + ),
  107 + array(
  108 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  109 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  110 + 'name'=> '优显led触控台灯',
  111 + 'price'=> 168,
  112 + 'state'=> 1 //状态
  113 + ),
  114 + array(
  115 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  116 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  117 + 'name'=> '优显led触控台灯',
  118 + 'price'=> 168,
  119 + 'state'=> 1 //状态
  120 + ),
  121 + array(
  122 + 'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
  123 + 'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
  124 + 'name'=> '优显led触控台灯',
  125 + 'price'=> 168,
  126 + 'state'=> 1 //状态
  127 + )
  128 + )
  129 + )
  130 + );
  131 + $this->_view->display('index',$data);
13 } 132 }
14 } 133 }