fe / yohobuy-frontend · Commits

Go to a project

Authored by 2586703@qq.com
Commit 003f298f996c7176b247d00423bfce46e7af4371 2 parents 0e88264a 73e9d1e1

Merge branch 'feature/h5detail' of http://git.dev.yoho.cn/web/yohobuy-frontend into feature/h5detail 

图标调整
Conflicts:
	mobile/public/js/data.js
	mobile/public/sass/_article-type-three.scss
	mobile/views/partials/article-type-five.html
	mobile/views/partials/article-type-three.html
Inline Side-by-side
Showing 17 changed files with 93 additions and 71 deletions
... ... @@ -13,18 +13,26 @@ exports.init = function() {
var container = $('.article-type-three'),
thumbContainer = container.find('.thumb-container'),
prodList = container.find('.prod-list'),
curItem, prevItem;
curItem, //当前focus搭配项
prevItem, //上一次focus的搭配项
curList, //当前focus搭配项对应推荐列表
prevList; //上一次focus的搭配项对应的列表
//点击分类，显示分类下推荐商品列表
thumbContainer.delegate('li', 'click', function() {
var index = $(this).index();
curItem = prodList.find('.prod:eq(' + index + ')').removeClass('hide');
var index;
curItem = $(this).addClass('focus');
index = curItem.index();
if (prevItem) {
prevItem.addClass('hide');
} else {
prevItem = curItem;
prevItem.removeClass('focus');
}
prevItem = curItem;
curList = prodList.find('.prod:eq(' + index + ')').removeClass('hide');
if (prevList) {
prevList.addClass('hide');
}
prevList = curList;
});
//默认选中第一个
... ... @@ -33,9 +41,10 @@ exports.init = function() {
//scroll时控制列表的位置
$(document).scroll(function() {
var sTop = $(this).scrollTop(),
cur, parent;
cur,
parent;
thumbContainer.each(function() {
var pNode = $(this).parent('.article-type-three');
var pNode = $(this).closest('.article-type-three');
if (sTop > pNode.offset().top) {
cur = $(this);
parent = pNode;
... ...
... ... @@ -11,20 +11,20 @@ module.exports = function() {
pageView: 3445,
content: [
{
type1: {
img: 'http://placehold.it/640x640',
bigImage: {
src: 'http://placehold.it/640x640',
alt: '复古风'
}
},
{
type2: {
text: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka Tiger鬼冢' +
text: {
deps: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka Tiger鬼冢' +
'虎也动作频频，于北京时间3.14日在北京发布其与意大利'
}
},
{
type3: {
collocation: [
collocation: {
list: [
{
thumb: 'http://placehold.it/98x134',
type: 'cloth',
... ... @@ -77,7 +77,7 @@ module.exports = function() {
},
{
thumb: 'http://placehold.it/98x134',
type: 'shoe',
type: 'lamp',
products: [
{
thumb: 'http://placehold.it/276x366',
... ... @@ -177,7 +177,7 @@ module.exports = function() {
},
{
thumb: 'http://placehold.it/98x134',
type: 'cloth',
type: 'watch',
products: [
{
thumb: 'http://placehold.it/276x366',
... ... @@ -227,7 +227,7 @@ module.exports = function() {
},
{
thumb: 'http://placehold.it/98x134',
type: 'pants',
type: 'pent',
products: [
{
thumb: 'http://placehold.it/276x366',
... ... @@ -279,22 +279,22 @@ module.exports = function() {
}
},
{
type4: {
img: [
smallImage: {
imgs: [
{
img: 'http://placehold.it/315x420',
src: 'http://placehold.it/315x420',
alt: '复古fashion'
},
{
img: 'http://placehold.it/315x420',
src: 'http://placehold.it/315x420',
alt: '复古fashion'
}
]
}
},
{
type5: {
products: [
recommendation: {
list: [
{
thumb: 'http://placehold.it/276x366',
name: 'GAWS DIGI 丛林数码印花拼接卫衣',
... ... @@ -339,7 +339,8 @@ module.exports = function() {
isNew: true,
url: ''
}
]
],
moreProds: ''
}
}
]
... ...
@import "clothe-type/*.png";
@import "clothes-type/*.png";
$pxConvertRem : 40;
.article-type-three {
padding:0 0 0 15rem / $pxConvertRem;
background: #fff;
/*container脱离文本流时占位用，指定高度为container高度(height+border)以及margin*/
.container-fixed-pos {
height: 136rem / $pxConvertRem;
margin: 0 0 28rem / $pxConvertRem -15rem / $pxConvertRem;
}
.thumb-container {
letter-spaceing: -1px;
font-size: 0;
padding: 0 0 0 30rem / $pxConvertRem;
margin: 0 0 28rem / $pxConvertRem -15rem / $pxConvertRem;
padding-left: 30rem / $pxConvertRem;
background: #fff;
z-index: 10;
... ... @@ -46,34 +50,34 @@ $pxConvertRem : 40;
position: absolute;
right: 6rem / $pxConvertRem;
bottom: 6rem / $pxConvertRem;
background: url('../img/clothe-type-sd8fa28a215.png') no-repeat;
width: 30rem / $pxConvertRem;
height: 30rem / $pxConvertRem;
background: url('../img/clothes-type-s6453a814c2.png') no-repeat;
width: 15px;
height: 15px;
background-size: 100%;
&.bag {
background-position: 0 0;
}
&.cloth {
background-position: 0 -47rem * (30/47) / $pxConvertRem;
background-position: 0 -47px * (15/47);
}
&.dress {
background-position: 0 -94rem * (30/47) / $pxConvertRem;
background-position: 0 -94px * (15/47);
}
&.headset {
background-position: 0 -141rem * (30/47) / $pxConvertRem;
background-position: 0 -141px * (15/47);
}
&.lamp {
background-position: 0 -188rem * (30/47) / $pxConvertRem;
background-position: 0 -188px * (15/47);
}
&.pent {
background-position: 0 -233rem * (30/47) / $pxConvertRem;
background-position: 0 -233px * (15/47);
}
&.shoe {
background-position: 0 -280rem * (30/47) / $pxConvertRem;
background-position: 0 -280px * (15/47);
}
&.watch {
background-position: 0 -327rem * (30/47) / $pxConvertRem;
background-position: 0 -327px * (15/47);
}
}
}
\ No newline at end of file
... ...
{{# type5}}
{{# recommendation}}
<div class="article-type-five clearfix">
<h2>相关推荐</h2>
<div class="good-list clearfix">
{{# products}}
{{# list}}
{{> good_info}}
{{/ products}}
{{/ list}}
</div>
<div class="more-good clearfix">
<a href="{{moreProds}}">
更多商品
<i class="iconfont">&#xe612;</i>
</a>
</div>
<div class="more-good clearfix"><a href="javascript:;">
更多商品
<i class="iconfont">&#xe612;</i>
</a></div>
</div>
{{/ type5}}
\ No newline at end of file
{{/ recommendation}}
... ...
{{# type4}}
<div class="article-type-four clearfix">
{{# img}}
<img src="{{img}}" alt="{{alt}}">
{{/ img}}
{{# smallImage}}
<div class="article-type-four">
{{# imgs}}
<img src="{{src}}" alt="{{alt}}">
{{/ imgs}}
</div>
{{/ type4}}
\ No newline at end of file
{{/ smallImage}}
\ No newline at end of file
... ...
{{# type1}}
{{# bigImage}}
<div class="article-type-one">
<img class="img" src="{{img}}" alt="{{alt}}">
<img class="img" src="{{src}}" alt="{{alt}}">
</div>
{{/ type1}}
\ No newline at end of file
{{/ bigImage}}
\ No newline at end of file
... ...
{{# type3}}
{{# collocation}}
<div class="article-type-three">
<ul class="thumb-container">
{{# collocation}}
<li class="thumb">
<img class="thumb-img" src="{{thumb}}">
<span class="clothe-type {{type}}"></span>
</li>
{{/ collocation}}
</ul>
<div class="container-fixed-pos">
<ul class="thumb-container">
{{# list}}
<li class="thumb">
<img class="thumb-img" src="{{thumb}}">
<span class="clothe-type {{type}}"></span>
</li>
{{/ list}}
</ul>
</div>
<div class="prod-list clearfix">
{{# collocation}}
<div class="arrow">
<em>&#9670;</em>
<span>&#9670;</span>
</div>
{{# list}}
<div class="prod hide">
{{# products}}
{{> good_info}}
{{/ products}}
</div>
{{/ collocation}}
{{/ list}}
</div>
</div>
{{/ type3}}
\ No newline at end of file
{{/ collocation}}
... ...
{{# type2}}
{{# text}}
<div class="article-type-two">
{{text}}
{{deps}}
</div>
{{/ type2}}
\ No newline at end of file
{{/ text}}
\ No newline at end of file
... ...