wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 梁志锋
Commit 893fd831046d15e56f27ca7138ab53d2c08c24c6 1 parent 02f651aa

update

Inline Side-by-side
Showing 12 changed files with 171 additions and 91 deletions
... ... @@ -11,6 +11,7 @@ var $ = require('yoho.zepto'),
var swiper;
var filter = require('../../plugin/filter');
var loading = require('../../plugin/loading');
var $goodsContainer = $('#goods-container'),
$ngc = $($goodsContainer.children().get(0)),
... ... @@ -165,6 +166,7 @@ function search(opt) {
});
searching = true;
loading.showLoadingMask();
$.ajax({
type: 'GET',
... ... @@ -206,6 +208,7 @@ function search(opt) {
nav.page = page;
searching = false;
loading.hideLoadingMask();
}
});
... ... @@ -214,6 +217,7 @@ function search(opt) {
lazyLoad($('.lazy'));
filter.registerCbFn(search);
loading.initLoadingMask();
//导航栏点击逻辑说明：
//1.点击非active项时切换active状态
... ...
... ... @@ -11,6 +11,7 @@ var $ = require('yoho.zepto'),
var swiper;
var filter = require('../../plugin/filter');
var loading = require('../../plugin/loading');
var $goodsContainer = $('#goods-container'),
$ngc = $($goodsContainer.children().get(0)),
... ... @@ -192,6 +193,7 @@ function search(opt) {
});
searching = true;
loading.showLoadingMask();
$.ajax({
type: 'GET',
... ... @@ -233,6 +235,7 @@ function search(opt) {
nav.page = page;
searching = false;
loading.hideLoadingMask();
}
});
... ... @@ -241,13 +244,14 @@ function search(opt) {
lazyLoad($('.lazy'));
filter.registerCbFn(search);
loading.initLoadingMask();
//导航栏点击逻辑说明：
//1.点击非active项时切换active状态
//2.价格和折扣active状态时继续点击切换排序
//3.筛选无active时点击展开筛选面板
//4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
//5.当前active为筛选并且点击其他项时，隐藏筛选面板
//5.当前active为筛选并且点击其他项时，隐藏筛选面板
$listNav.delegate('li', 'tap', function() {
var $this = $(this),
nav,
... ...
... ... @@ -27,13 +27,17 @@
}
.banner-swiper {
position: relative;
height: 309rem / $pxConvertRem;
overflow: hidden;
ul {
position: relative;
height: 100%;
height: 309rem / $pxConvertRem;
li {
float: left;
width: 100%;
height: 100%;
img {
width: 100%;
... ...
... ... @@ -3,10 +3,11 @@
.banner {
display: block;
height: 400rem / $pxConvertRem;
overflow: hidden;
img {
width: 100%;
height: 404rem / $pxConvertRem;
height: 100%;
}
}
... ... @@ -19,17 +20,13 @@
}
.classify-logo {
display: table-cell;;
width: 212rem / $pxConvertRem;
height: 140rem/ $pxConvertRem;
vertical-align: middle;
height: 192rem / $pxConvertRem;
img {
display: block;
max-width: 212rem / $pxConvertRem;
max-height: 140rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
width: 100%;
height: 100%;
}
}
... ...
... ... @@ -13,6 +13,7 @@
height: 174rem / $pxConvertRem;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
overflow: hidden;
.brand-logo {
display: table-cell;
... ... @@ -37,6 +38,9 @@
text-decoration: none;
border-bottom: none;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
}
... ... @@ -44,4 +48,17 @@
.brand:nth-child(4n) {
border-right: none;
}
.more {
.brand-logo {
display: block;
text-align: center;
line-height: 150rem / $pxConvertRem;
.iconfont {
font-size: 48rem / $pxConvertRem;
color: #333;
}
}
}
}
\ No newline at end of file
... ...
.floor-header{
margin: 29rem / $pxConvertRem 30rem / $pxConvertRem 0;
.floor-header {
margin: (29rem / $pxConvertRem) (30rem / $pxConvertRem) 0;
background: #fff;
border: 1px solid #e0e0e0;
border-bottom: none;
... ... @@ -10,22 +10,23 @@
color: #b1b1b1;
}
.floor-header-more{
.floor-header-more {
position: relative;
height: 99rem / $pxConvertRem;
line-height: 99rem / $pxConvertRem;
margin: 29rem / $pxConvertRem 0 0;
margin: (29rem / $pxConvertRem) 0 0;
background: #fff;
border-top:1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
text-align: center;
font-size: 32rem / $pxConvertRem;
color: #444;
.more-btn{
.more-btn {
position: absolute;
right: 0.75rem;
right: 30rem / $pxConvertRem;
top: 0;
bottom: 0;
color: #b0b0b0;
font-size: 1.25rem;
font-size: 50rem / $pxConvertRem;
}
}
\ No newline at end of file
... ...
.category-swiper {
position: relative;
height: 403rem / $pxConvertRem;
height: 400rem / $pxConvertRem;
overflow: hidden;
ul {
li {
... ... @@ -37,17 +37,20 @@
}
}
.goods-category {
background: #fff;
}
.goods-category .category-list {
background: #f5f7f6;
height: 383rem / $pxConvertRem;
height: 382rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
overflow: hidden;
li {
float: left;
width: 191rem / $pxConvertRem;
height: 191rem / $pxConvertRem;
border-left: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.first-show {
display: none;
}
... ... @@ -72,5 +75,17 @@
width: 253rem / $pxConvertRem;
height: 382rem / $pxConvertRem;
border-left: none;
.img-box {
height: 100%;
line-height: 100%;
}
.category-name {
line-height: 40rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
}
}
li:nth-child(4), li:nth-child(5) {
border-top: 1px solid #e0e0e0;
}
}
\ No newline at end of file
... ...
.hot-brands {
background: #fff;
border-bottom: 1px solid #e0e0e0;
a {
... ... @@ -17,15 +16,14 @@
overflow: hidden;
.brand-logo {
display: table-cell;
width: 3.95rem;
width: 100%;
height: 128rem / $pxConvertRem;
line-height: 128rem / $pxConvertRem;
text-align: center;
font-size: 0;
vertical-align: middle;
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
... ... @@ -69,29 +67,28 @@
.brands-swiper {
background: #fff;
width: 100%;
height: 180rem / $pxConvertRem;
height: 140rem / $pxConvertRem;
margin-bottom: 28rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
overflow: hidden;
.brands-list {
position: relative;
height: 180rem / $pxConvertRem;
height: 140rem / $pxConvertRem;
li {
float: left;
padding-left: 5%;
width: 21.875%;
height: 140rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
a {
position: relative;
display: table-cell;
display: block;
width: 100%;
height: 140rem / $pxConvertRem;
height: 100%;
line-height: 140rem / $pxConvertRem;
font-size: 0;
vertical-align: middle;
}
img {
... ... @@ -104,8 +101,7 @@
position: absolute;
left: 8rem / $pxConvertRem;
right: 8rem / $pxConvertRem;
bottom: -32rem / $pxConvertRem;
width: 100%;
bottom: 8rem / $pxConvertRem;
height: 28rem / $pxConvertRem;
line-height: 28rem / $pxConvertRem;
text-align: center;
... ...
.hot-category {
margin: (30rem / $pxConvertRem) 0 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.category-banner {
height: 198rem / $pxConvertRem;
img {
... ... @@ -11,26 +12,36 @@
}
.category-list {
background: #fff;
border-top: 1px solid #e0e0e0;
li {
float: left;
width: 158rem / $pxConvertRem;
height: 174rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
overflow: hidden;
.img-box {
width: 100%;
height: 100%;
line-height: 138rem / $pxConvertRem;
line-height: 174rem / $pxConvertRem;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-size: 0;
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.category-title {
line-height: 22rem / $pxConvertRem;
color: #aaa;
font-size: 18rem / $pxConvertRem;
text-align: center;
}
}
}
}
\ No newline at end of file
... ...
.icons-wrapper {
box-sizing: border-box;
padding: 30rem / $pxConvertRem 0 16rem / $pxConvertRem;
background: #fff;
border-bottom: 1px solid #e0e0e0;
box-sizing: border-box;
padding: (30rem / $pxConvertRem) 0 (16rem / $pxConvertRem);
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.icons-item {
float: left;
margin-bottom: 10rem / $pxConvertRem;
width:25%;
height: 146rem / $pxConvertRem;
text-align:center;
}
float: left;
margin-bottom: 10rem / $pxConvertRem;
width: 25%;
height: 146rem / $pxConvertRem;
text-align: center;
}
.imagebar {
margin:0 auto;
display: flex;
display: -webkit-flex;
width: 98rem / $pxConvertRem;
height: 98rem / $pxConvertRem;
overflow: hidden;
align-items:center;
justify-content: center;
img {
max-width: 100%;
max-height: 100%;
}
display: block;
margin: 0 auto;
text-align: center;
width: 98rem / $pxConvertRem;
height: 98rem / $pxConvertRem;
line-height: 98rem / $pxConvertRem;
box-sizing: border-box;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.linkbar {
display: block;
line-height:44rem / $pxConvertRem;
font-size:24rem / $pxConvertRem;
color: #444;
display: block;
line-height: 44rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #444;
&:visited, &:link, &:active, &:hover {
color: #444;
}
}
\ No newline at end of file
... ...
... ... @@ -6,15 +6,18 @@
position: relative;
width: 100%;
border-bottom: 1px solid #e0e0e0;
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 22rem / $pxConvertRem;
text-align: center;
.pagination-inner {
display: inline-block;
}
span {
float: left;
width: 16rem / $pxConvertRem;
... ... @@ -23,7 +26,8 @@
background: #efefef;
border-radius: 50%;
}
span.swiper-active-switch {
span.swiper-pagination-bullet-active {
background: #b0b0b0;
}
}
... ... @@ -32,35 +36,47 @@
.trend-topic-swiper {
height: 534rem / $pxConvertRem;
overflow: hidden;
ul {
position: relative;
li {
float: left;
height: 534rem / $pxConvertRem;
.img-box {
display: flex;
display: -webkit-flex;
margin: 0 auto;
width: 580rem / $pxConvertRem;
height: 360rem / $pxConvertRem;
margin: 0 (30rem / $pxConvertRem);
align-items: center;
justify-content: center;
line-height: 360rem / $pxConvertRem;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
width: 100%;
height: 100%;
}
}
.item-content {
margin: (20rem / $pxConvertRem) (30rem / $pxConvertRem) 0;
.title {
line-height: 52rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin: (16rem / $pxConvertRem) 0 0;
line-height: 24rem / $pxConvertRem;
color: #afafaf;
font-size: 18rem / $pxConvertRem;
.time-icon {
margin-right: 8rem / $pxConvertRem;
font-size: 14rem / $pxConvertRem;
... ...
... ... @@ -7,6 +7,7 @@
.trend-coll-header {
position: relative;
widows: 100%;
.trend-coll-title {
width: 100%;
height: 100rem / $pxConvertRem;
... ... @@ -15,6 +16,7 @@
font-size: 34rem / $pxConvertRem;
color: #747474;
}
.more {
position: absolute;
right: 24rem / $pxConvertRem;
... ... @@ -23,13 +25,15 @@
}
.trend-coll-content {
padding: 0 (15rem / $pxConvertRem);
padding: 0 0 0 (15rem / $pxConvertRem);
.lspan {
float: left;
margin: 0 (15rem / $pxConvertRem);
}
.rspan {
float: right;
float: left;
margin: 0 (15rem / $pxConvertRem);
}
}
... ... @@ -71,20 +75,23 @@
.recommend-list {
position: relative;
.recommend-item {
float: left;
padding-left: 30rem / $pxConvertRem;
width: 140rem / $pxConvertRem;
height: 140rem / $pxConvertRem;
a {
display: block;
height: 100%;
}
.recommend-list .recommend-item {
float: left;
padding-left: 5%;
width: 21.875%;
height: 140rem / $pxConvertRem;
a {
display: block;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
}
}
\ No newline at end of file
... ...