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
{{> layout/header}}
<div class="home-page yoho-page">
I am boys page
{{!潮流上装}}
{{# jacket}}
{{> index/recommend}}
{{/ jacket}}
{{!经典裤装}}
{{# pants}}
{{> index/recommend}}
{{/ pants}}
{{!时尚鞋履}}
{{# shoes}}
{{> index/recommend}}
{{/ shoes}}
{{!潮人配饰}}
{{# ornament}}
{{> index/recommend}}
{{/ ornament}}
{{! 新品上架}}
{{# newArrivls}}
{{> index/commodity}}
{{/ newArrivls}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
<div class="commodity">
<ul class="clearfix">
{{#each commodity}}
<li>
{{# state}}
<i class="commodity-tag{{.}}"></i>
{{/ state}}
<a href="{{url}}"><div class="commodity-img"><img class="lazy" data-original="{{img}}"/></div>
<p class="commodity-name">{{name}}</p>
<p class="commodity-price"><span>¥{{price}}</span></p>
</a>
</li>
{{/each}}
</ul>
<div class="loading">
<p>Loading...</p>
</div>
</div>
\ No newline at end of file
... ...
{{# tplrecommend}}
<div class="tpl-recommend clearfix">
<div class="tpl-body clearfix">
<div class="tpl-nav">
<div class="tpl-keywords">
{{#each keyword}}
<a class="keywords{{@index}}" title="{{name}}" href="{{url}}"><img class="lazy" data-original="{{img}}"/></a>
{{/ keyword}}
</div>
<div class="tpl-category clearfix">
{{#each category}}
<a href="{{url}}">{{name}}</a>
{{/ category}}
</div>
</div>
<div class="tpl-brands clearfix">
<ul>
{{#each brands}}
<li><a title="{{name}}" href="{{url}}"><img class="lazy" data-original="{{img}}"/></a></li>
{{/each}}
</ul>
</div>
<div class="tpl-types clearfix">
<ul>
{{#each types}}
<li><a title="{{name}}" href="{{url}}"><img class="lazy" data-original="{{img}}"/></a></li>
{{/each}}
</ul>
</div>
</div>
<div class="tpl-products clearfix">
<ul>
{{#each products}}
<li><a href="{{url}}" title="{{name}}"><img class="lazy" data-original="{{img}}"/></a></li>
{{/each}}
</ul>
</div>
</div>
{{/ tplrecommend}}
... ...
dist
_site
sea-modules
spm_modules
node_modules
.git
tests
examples
test
coverage
... ...
.home-page{
width: 1150px;
margin: 0 auto;
.tpl-recommend{
a{
display: block;
background-color: #f8f8f8;
img{display: block;width: 100%;}
}
.tpl-nav{
float: left;
width: 185px;
height: 512px;
.tpl-keywords{
.keywords0{
img{
height: 152px;
}
margin-bottom: 10px;
}
.keywords1{
img{
height: 86px;
}
margin-bottom: 8px;
}
}
.tpl-category{
padding: 10px 0;
background-color: #f8f8f8;
a{
float: left;
width: 50%;
height: 38px;
line-height: 38px;
text-align: center;
color: #000;
font-size: 14px;
overflow: hidden;
}
}
}
.tpl-brands{
float: left;
margin-left: 8px;
width: 378px;
height: 512px;
li{
margin-bottom: 8px;
img{
height: 248px;
width: 100%;
}
}
}
.tpl-types{
float: left;
width: 579px;
height: 512px;
li{
float: left;
margin-left: 8px;
margin-bottom: 8px;
img{
width: 185px;
height:248px;
}
}
}
.tpl-products{
ul{margin-left:-10px;
li{
float: left;
margin-left:10px;
img{
width: 222px;
height: 298px;
}
}
}
}
}
.commodity{
margin-left: -10px;
position: relative;
li{
float: left;
margin-left: 10px;
margin-bottom:28px;
padding-top:20px;
position: relative;
i{
position: absolute;
top: 0px;
display: block;
width: 64px;
height: 20px;
}
a{
display: block;
height: 360px;
width: 222px;
.commodity-img{
img{
display: block;
height: 298px;
width: 222px;
}
}
p.commodity-name{
font-size: 12px;
color: #000;
line-height: 40px;
text-align: center;
}
p.commodity-price{
font-size: 12px;
text-align: center;
}
}
}
.loading{
position: absolute;
bottom: 0;
width: 100%;
p{
text-align: center;
font-size: 20px;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -9,6 +9,125 @@ class BoysController extends AbstractAction
public function indexAction()
{
$this->setTitle('男生首页');
$this->_view->display('index');
$tpldata=array(
'name'=>'潮人配饰 ORNAMENT',
'navs' => array(
'list'=>array(
array(
'url' =>'',
'name' =>'MORE>'
)
)
),
'tplrecommend'=>array(
'keyword'=>array(array('name'=>'工装短裤','img'=>'','url'=>''),array('name'=>'英伦风','img'=>'','url'=>'')),
'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'=>'')),
'brands'=>array(array('name'=>'工装短裤','img'=>'','url'=>''),array('name'=>'英伦风','img'=>'','url'=>'')),
'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'=>'')),
'products'=>array(
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168
)
)
)
);
$data = array(
'jacket'=>$tpldata,
'pants'=>$tpldata,
'shoes'=>$tpldata,
'ornament'=>$tpldata,
'newArrivls' => array(
'name' => '最新上架 NEW ARRIVALS',
'navs' => array(
'list'=>array(
array(
'url' =>'',
'name' =>'MORE>'
)
)
),
'commodity'=>array(
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
)
)
)
);
$this->_view->display('index',$data);
}
}
\ No newline at end of file
... ...