wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit db4b41dfe444365976046dc1aa62d186a57468dc 1 parent 150f4a72

plus+star list

Inline Side-by-side
Showing 9 changed files with 193 additions and 9 deletions
... ... @@ -397,6 +397,31 @@
### PLUS+STAR
//列表页
{
ps: {
star: [
{
deps: '',
//情况1：一张图
url: '',
img: '',
//情况2：多张图
imgs: [
{
url: '',
img: ''
},
...
]
}
],
plus: [
...
]
}
}
//详情页
{
ps: {
id: 1,
... ...
... ... @@ -4,4 +4,5 @@
* @date: 2015/10/9
*/
require('./plus-star');
\ No newline at end of file
require('./plus-star/list');
require('./plus-star/detail');
\ No newline at end of file
... ...
/**
* PLUS+STAR
* PLUS+STAR详情页
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/10
*/
... ... @@ -12,7 +12,7 @@ var $intro = $('#intro'),
$imt = $('#intro-more-txt'),
$infosContainer = $('#related-infos-container');
var info = require('./info');
var info = require('../info');
var mIntro, aIntro;
... ...
/**
* PLUS+STAR列表页
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/10
*/
var $ = require('yoho.zepto'),
lazyLoad = require('yoho.lazyload'),
Swiper = require('yoho.iswiper');
var $navs = $('#nav-tab > li'),
$contents = $('#ps-content > .content');
var mySwiper;
lazyLoad($('img.lazy'));
mySwiper = new Swiper('.swiper-container', {
lazyLoading: true,
pagination: '.swiper-pagination'
});
$('#nav-tab').delegate('li', 'touchstart', function() {
if ($(this).hasClass('focus')) {
return;
}
$navs.toggleClass('focus');
$contents.toggleClass('hide');
});
\ No newline at end of file
... ...
... ... @@ -19,7 +19,8 @@
"yoho.zepto": "1.1.60",
"yoho.jquery": "1.8.3",
"yoho.lazyload": "1.1.0",
"mlellipsis": "0.0.6"
"mlellipsis": "0.0.6",
"yoho.iswiper": "3.0.1"
},
"devDependencies": {
"expect.js": "0.3.1"
... ...
.ps-list-page {
background-color: #f0f0f0;
.nav-tab, .ps-content {
width: 100%;
}
.nav-tab {
height: 60rem / $pxConvertRem;
padding: 10rem / $pxConvertRem 0;
background-color: #fff;
}
.star-nav, .plus-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: 60rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
font-size: 16px;
text-align: center;
color: #ccc;
&.focus {
color: #000;
}
}
.star-nav {
border-right: 1px solid #ccc;
}
.plus-star-row {
margin-bottom: 10rem / $pxConvertRem;
&:last-child {
margin-bottom: 0;
}
}
.content.hide {
display: none;
}
.swiper-container {
height: 310rem / $pxConvertRem;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.brand-deps {
height: 40rem / $pxConvertRem;
line-height: 40rem / $pxConvertRem;
padding-left: 10rem / $pxConvertRem;
font-size: 14px;
background: #fff;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.ps-detail-page {
background-color: #f0f0f0;
... ...
{{>layout/header}}
This is a test {{test}}
<div class="ps-list-page ps-page yoho-page">
{{# ps}}
<ul id="nav-tab" class="nav-tab clearfix">
<li class="star-nav focus">明星潮品</li>
<li class="plus-nav">原创潮牌</li>
</ul>
<div id="ps-content" class="ps-content">
<ul class="star-content content">
{{# star}}
{{> guang/ps_item}}
{{/ star}}
</ul>
<ul class="plus-content content">
{{# plus}}
{{> guang/ps_item}}
{{/ plus}}
</ul>
</div>
{{/ ps}}
</div>
{{>layout/footer}}
\ No newline at end of file
... ...
<li class="plus-star-row">
{{#if imgs}}
<div class="swiper-container">
<div class="swiper-wrapper">
{{# imgs}}
<div class="swiper-slide">
<a href={{url}}>
<img class="swiper-lazy" data-src={{img}}>
</a>
</div>
{{/ imgs}}
</div>
<div class="swiper-pagination"></div>
</div>
{{^}}
<a href={{url}}>
<img class="lazy" data-original={{img}}>
</a>
{{/if}}
{{# deps}}
<p class="brand-deps">{{.}}</p>
{{/ deps}}
</li>
\ No newline at end of file
... ...
... ... @@ -11,8 +11,31 @@ class PlusstarController extends AbstractAction
*/
public function listAction()
{
$data = array(
'star' => array(
array(
'imgs' => array(
array(
'url' => 'http://stussy.m.yohobuy.com',
'img' => 'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/6KTZ_01.jpg'
),
array(
'url' => 'http://stussy.m.yohobuy.com',
'img' =>'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/5HUF_01.jpg'
)
)
),
array(
'url' => 'http://stussy.m.yohobuy.com',
'img' => 'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/4STAYREAL_02.jpg',
'deps' => '优秀的自助品牌，高瞻远瞩的建设性意见来测试文字溢出后的处理问题'
)
),
'plus' => array(
)
);
$this->_view->assign('title', 'YOHO!有货');
$this->_view->display('list', array('test' => 'hello world'));
$this->_view->display('list', array('modulePath' => 'guang/plus-star/list', 'ps' => $data));
}
/**
... ... @@ -164,7 +187,7 @@ class PlusstarController extends AbstractAction
)
);
$this->_view->assign('title', 'PLUS+STAR 详情页');
$this->_view->display('detail', array('modulePath' => 'guang/plus-star', 'ps' => $data));
$this->_view->display('detail', array('modulePath' => 'guang/plus-star/detail', 'ps' => $data));
}
}
\ No newline at end of file
... ...