fe / YOHOBUYWAP · Commits

Go to a project

Authored by 杨延青
Commit aa5b4ed74d66fdffe92317af525db9f04ce87103 2 parents 638d62d7 56ca314c

Merge branch 'feature/mBrandShop' of http://git.dev.yoho.cn/web/yohobuywap into feature/mBrandShop

Inline Side-by-side
Showing 7 changed files with 77 additions and 479 deletions
... ... @@ -406,7 +406,6 @@ $.jqtab = function(nav, posNav, main) {
$(nav + ' li, ' + posNav + ' li').on('touchstart', function() {
var index = $(this).index(),
activeTab = $(this).attr('tab');
console.log(activeTab)
tabChange($(nav + ' li'), index);
tabChange($(posNav + ' li'), index);
... ... @@ -501,10 +500,6 @@ $(function(){
});
}, 1000)
// console.log(lazyLoad)
// console.log($('#scroller').height())
document.addEventListener('touchmove', function(e) {
e.preventDefault();
... ... @@ -527,3 +522,14 @@ window.onload = function() {
scH = $('#scroller').outerHeight();
};
//底部点击
function fotterClick(group) {
$(group + ' li').on('touchstart', function() {
$('.sub-group').addClass('hide');
if ($(this).find('.sub-group').length > 0){
$(this).find('.sub-group').removeClass('hide');
}
});
};
fotterClick('.shop-foot-wrapper');
... ...
... ... @@ -4,12 +4,11 @@
.allproduct {
position: relative;
padding: 15px 0;
height: 89px;
line-height: 89px;
background: #fff;
border-top: 15px;
border-bottom: 15px;
padding-left: 32px;
border-top: 1px solid #e6e6e6;
margin-left: 30px;
}
.margin-under-allproduct{
... ... @@ -23,9 +22,9 @@
}
.arrow-icon {
position: absolute;
font-size: 16px;
top: 15px;
right: 20px;
font-size: 30px;
top: 0px;
right: 33px;
color: #e1e1e1;
}
... ...
... ... @@ -143,13 +143,13 @@
.multi-browse {
margin-top: 50px;
@extend .swiper-container
@extend .swiper-container;
}
.brand-img {
margin-left: 30px;
width: 30%;
height: 55%;
height: 150px;
overflow: hidden;
padding-bottom: 20px;
float: left;
... ... @@ -159,6 +159,10 @@
color: #b1b1b1;
padding-top: 10px;
}
img {
height: 70%;
}
}
.spring {
... ... @@ -328,6 +332,7 @@
.search-area {
@extend .search-page;
margin-top: 85px;
}
.hide {
... ...
.shop-index {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
.branner-top {
width: 100%;
height: 200rem / $pxConvertRem;
position: relative;
overflow: hidden;
}
.logo {
position: absolute;
overflow: hidden;
left: 30rem / $pxConvertRem;
bottom: 30rem / $pxConvertRem;
width: 100rem / $pxConvertRem;
height: 100rem / $pxConvertRem;
}
.store-name {
color: #fff;
font-size: 28rem / $pxConvertRem;
position: absolute;
overflow: hidden;
left: 148rem / $pxConvertRem;
bottom: 20rem / $pxConvertRem;
}
.collect {
width: 128rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
position: absolute;
bottom: 30rem / $pxConvertRem;
right: 30rem / $pxConvertRem;
border-radius: 10rem / $pxConvertRem;
text-align: center;
background: image-url('product/collect.png') no-repeat;
background-size: contain;
}
.nav {
width: 100%;
height: 88rem / $pxConvertRem;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
list-style: none;
font-size: 0.7rem;
background: #fff;
overflow: hidden;
border-sizing: border-box;
border-bottom: 2rem / $pxConvertRem solid #e1e1e1;
li{
color: #b1b1b1;
display: block;
height: 28rem /$pxConvertRem;
float: left;
line-height: 28rem /$pxConvertRem;
width: 24%;
text-align: center;
border-left: 1rem / $pxConvertRem solid #e1e1e1;
margin-top: 30rem / $pxConvertRem;
border-sizing: border-box;
color: #b1b1b1;
&:first-child {
border-left: none;
}
a {
color: #b1b1b1;
}
}
.color {
color: #000;
}
}
.main {
background: #f0f0f0;
padding-bottom: 1rem;
overflow: hidden;
}
.banner-area {
@extend .banner-top;
.banner-swiper ul {
height: 6.5rem;
}
.swiper-pagination {
bottom: 1.5rem;
}
}
.hide {
display: hidden;
}
.coupon {
width: 100%;
padding: 30rem / $pxConvertRem 0;
overflow: hidden;
img {
width: 245rem / $pxConvertRem;
height: 120rem / $pxConvertRem;
vertical-align: top;
margin-left: 30rem / $pxConvertRem;
float: left;
}
}
.multi-brands {
width: 100%;
height: 270rem / $pxConvertRem;
background: #fff;
border: 1px solid #e1e1e1;
border-top: none;
font-size: 20px;
text-align: center;
padding-top: 25rem / $pxConvertRem;
margin-bottom: 30rem / $pxConvertRem;
overflow: hidden;
h2 {
font-size: 28rem / $pxConvertRem;
}
}
.multi-browse {
margin-top: 50rem / $pxConvertRem;
@extend .swiper-container
}
.brand-img {
margin-left: 30rem / $pxConvertRem;
width: 30%;
height: 55%;
overflow: hidden;
padding-bottom: 20rem / $pxConvertRem;
float: left;
p {
font-size: 25rem / $pxConvertRem;
color: #b1b1b1;
padding-top: 10rem / $pxConvertRem;
}
}
.spring {
margin: 0;
overflow: hidden;
li {
width: 50%;
float: left;
text-align: center;
list-style: none;
display: list-item;
img {
width: 90%;
border-radius: 10rem / $pxConvertRem;
vertical-align: top;
}
}
}
.popularity-title {
background: #fff;
border-bottom: 1px solid #e8e8e8;
text-align: center;
line-height: 98rem / $pxConvertRem;
font-size: 0.8rem;
margin-top: 1rem;
position: relative;
}
.more {
position: absolute;
right: .75rem;
top: 0;
bottom: 0;
color: #b0b0b0;
font-size: 1.25rem;
font-family: "iconfont" !important;
font-style: normal;
text-decoration: none;
}
.product-list {
margin: 0;
padding: 0 0 30rem / $pxConvertRem 30rem / $pxConvertRem;
overflow: hidden;
background: #fff;
border-bottom: 30rem / $pxConvertRem solid #f0f0f0;
li {
width: 275rem / $pxConvertRem;
height: 368rem / $pxConvertRem;
margin-top: 50rem / $pxConvertRem;
margin-right: 30rem / $pxConvertRem;
float: left;
text-align: center;
list-style: none;
img {
width: 100%;
vertical-align: top;
}
}
}
.list-price {
height: 60rem / $pxConvertRem;
background: #ABACAC;
color: #FFFFFF;
font-size: 22rem / $pxConvertRem;
margin-top: -60rem / $pxConvertRem;
position: relative;
opacity: 0.7;
padding-left: 15rem / $pxConvertRem;
p {
margin: 0;
line-height: 32rem / $pxConvertRem;
text-align: left;
}
}
.red {
color: red;
}
.icon {
position: relative;
i {
position: absolute;
}
.up {
top: -5rem / $pxConvertRem;
left: 8rem / $pxConvertRem;
}
.down {
top: 8rem / $pxConvertRem;
left: 8rem / $pxConvertRem;
}
}
.iconfont {
color: #b1b1b1;
}
.active .cur {
color: #000;
}
.goods-container {
position: relative;
min-height: 440rem / $pxConvertRem;
padding-left: 0.375rem;
padding-top: 20rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
}
.discount-area {
@extend .discount-page;
.list-nav li {
display: block;
height: 28rem / $pxConvertRem;
float: left;
line-height: 28rem / $pxConvertRem;
width: 24%;
text-align: center;
border-left: 1px solid #e1e1e1;
margin-top: 30rem / $pxConvertRem;
margin-bottom: 30rem / $pxConvertRem;
border-sizing: border-box;
span {
font-size: 0.7rem;
}
&:first-child {
border-left: none;
}
}
.list-nav .icon .up {
top: -6rem / $pxConvertRem;
}
.list-nav .icon .down {
top: 8rem / $pxConvertRem;
}
.goods-container {
padding-top: 30rem / $pxConvertRem;
padding-bottom: 100rem / $pxConvertRem;
}
.active a{
color: #b1b1b1;
}
}
.search-area {
@extend .search-page;
}
.hide {
display: none;
}
.nav-title {
position: absolute;
margin-left: 200rem / $pxConvertRem;
height: 100%;
font-size: 36rem / $pxConvertRem;
color: #fff;
font-weight: bold;
top: 0;
right: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.shop-foot-wrapper {
position: absolute;
bottom: 0;
display: table;
width: 100%;
height: 2.2rem;
line-height: 2.2rem;
font-size: 0.7rem;
background: #fff;
border-top: 1px solid #eaeaea;
ul {
display: table-row;
}
li {
display: table-cell;
text-align: center;
.wall {
width: 0;
height: 0.8rem;
margin-top: 0.7rem;
float: right;
border-right: 1px solid #eaeaea;
display: inline-block;
}
}
.sub-group {
position: absolute;
background: #fff;
border-right: 1px solid #eaeaea;
border-radius: 5px;
bottom: 2.6rem;
width: 30%;
dl {
width: 80%;
margin: 0 auto;
}
dd {
line-height: 2rem;
text-align: center;
border-top: 1px solid #eaeaea;
}
dd:first-child {
border-top: 0;
}
}
.sharp {
position: absolute;
width: 100%;
height: 8px;
background: image-url("/img/product/sharp.png") no-repeat center center;
}
}
.bytouch{
background:#eee;
}
}
\ No newline at end of file
... ... @@ -2,16 +2,16 @@
<div class="product-category yoho-page">
<div id="allproduct" class="allproduct">
<div class="allproduct">
<a href={{allproduct}}>
<p class="allproductParagaraph">全部商品</p>
全部商品
<i class="arrow-icon iconfont">&#xe614;</i>
</a>
</div>
<div class="margin-under-allproduct">
</div>
<div class="category-container clearfix">
<div class="content">
{{# content}}
... ...
... ... @@ -30,29 +30,29 @@
<li tab="new-arrival">上新</li>
<li tab="popularity">人气</li>
<li>
<a href="#" target="_blank">全部商品</a>
<a href="{{allGoods}}" target="_blank">全部商品</a>
</li>
</ul>
<div id="home-page" class="main">
<div id="nav-main" >
{{#unless brands}}
{{#if brandList}}
<div class="multi-brands">
<p>品牌一览</p>
<div class="multi-browse">
<ul class="swiper-wrapper">
{{#each multiList}}
<li class="swiper-slide brand-img">
<a href="{{url}}">
<img src="{{img}}">
</a>
<p>{{brandName}}</p>
</li>
{{#each brandList.list}}
<li class="swiper-slide brand-img">
<a href="{{url}}">
<img src="{{img}}">
</a>
<p>{{brandName}}</p>
</li>
{{/each}}
</ul>
</div>
</div>
{{/unless}}
{{/if}}
<div class="banner-area">
{{# bannerTop}}
... ...
... ... @@ -494,45 +494,48 @@ class IndexController extends AbstractAction
'branerImg' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026e96d1b403d28407650c7228bb4ca405.jpg?imageView2/2/w/640/h/200',
'logoImg' => '',
'storeName' => 'Vans专营店',
'allGoods' => '',
'goodList' => 'http://www.baidu.com',
'brands' => false,
'multiList' => array(
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re34456556900'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re34456556900'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re344565'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re34456556900'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re34456556900'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re344565'
'brandList' => array(
'list' => array(
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re34456556900'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re34456556900'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re344565'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re34456556900'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re34456556900'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re344565'
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re344565'
)
),
array(
'url' => '',
'img' => 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/026b9aee5b7d2ec33e8db877c3d87b3386.jpg?imageView2/2/w/640/h/403',
'brandName' => '123re344565'
)
),
'url' => ''
),
'bannerTop' => array(
'list' => array(
array(
... ...