fe / YOHOBUYWAP · Commits

Go to a project

Authored by 梁志锋
Commit 8058ae6149bad0d74960489f6409ae240dbd277d 1 parent 165ef30e

update files

Inline Side-by-side
Showing 17 changed files with 695 additions and 179 deletions
/**
* kids,lifestyle商品模块JS
* @author: liuyue(yue.liu@yoho.cn)
* @date: 2015/9/23
*/
/*
var $ = require('yoho.zepto'),
Mustache = require('yoho.mustache'),
lazyLoad = require('yoho.lazyload');
var tpl,
res,
$firstColumnNav = $('.column-nav').find('li').eq(0),
$goodList = $('.two-column-goods').find('.goods-list');
if ($('.two-column-goods').size() <= 0) {
return;
}
//read good-info template
$.get('/common/goodinfo', function (data) {
tpl = '{{# goods}}' + data + '{{/ goods}}';
Mustache.parse(tpl);
});
function goodsAjax(url) {
$.ajax({
type: 'GET',
url: url
}).then(function (data) {
if (data.code === 200) {
res = data.data;
$goodList.html(Mustache.render(tpl, {
goods: res.goods
}));
//lazyLoad
lazyLoad($goodList.children('.good-info').find('img.lazy'));
}
});
}
$firstColumnNav.addClass('current');
goodsAjax($('.column-nav').find('.current').data('url'));
$('.column-nav').on('click', 'li', function () {
$(this).addClass('current').siblings().removeClass('current');
goodsAjax($(this).data('url'));
});*/
\ No newline at end of file
* @author: liangzhifeng<zhifeng.liang@yoho.cn>
* @date: 2015/10/12
*/
\ No newline at end of file
... ...
... ... @@ -4,10 +4,9 @@
* @date: 2015/10/12
*/
var $ = require('yoho.zepto'),
// Swiper = require('yoho.iswiper'),
Swiper = require('yoho.iswiper'),
lazyLoad = require('yoho.lazyload'),
bannerSwiper,
hotBrandsSwiper,
recommendSwiper,
trendTopicSwiper,
goodsSwiper;
... ... @@ -22,10 +21,10 @@ var requestFrame,
supportCss3,
$logotrans = $('.home-header .logo'),
isen = true;
//lazyload
lazyLoad($('img.lazy'));
/*$('img:in-viewport').trigger('appear');
//$('img:in-viewport').trigger('appear');
//点击首页汉堡menu图标，滑出侧栏导航
... ... @@ -154,15 +153,19 @@ $('.header-download').on('click', '.close-btn', function () {
//logo动画
requestFrame = (function () {
prefixList = ['webkit', 'moz', 'ms'];
for (i = 0; i < prefixList.length; i++) {
thisFunc = prefixList[i] + 'RequestAnimationFrame';
if (window[thisFunc]) {
supportCss3 = true;
return function (callback) {
window[thisFunc](callback);
};
}
}
if (supportCss3) {
return function (callback) {
window[thisFunc](callback);
};
}
return function (callback) {
window.setTimeout(callback, 67);
};
... ... @@ -171,7 +174,7 @@ requestFrame = (function () {
function tsAnimate() {
start = start + 10;
$logotrans.css({
'transform': 'rotateX(' + start + 'deg)',
transform: 'rotateX(' + start + 'deg)',
'-webkit-transform': 'rotateX(' + start + 'deg)',
'-moz-transform': 'rotateX(' + start + 'deg)'
});
... ... @@ -199,4 +202,3 @@ function tsAnimate() {
tsAnimate();
*/
\ No newline at end of file
... ...
... ... @@ -3,6 +3,5 @@
* @author: liangzhifeng<zhifeng.liang@yoho.cn>
* @date: 2015/10/12
*/
require('./home');
//require('./maybe-like');
//require('./column-goods');
\ No newline at end of file
require('./home');
\ No newline at end of file
... ...
/**
* “你可能喜欢”模块JS
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/7/15
*/
/*var $ = require('yoho.jquery'),
Mustache = require('yoho.mustache'),
lazyLoad = require('yoho.lazyload');
var $maybeLike = $('.maybe-like:last');
var winH = $(window).height(),
loading = false,
end = false,
page = 1,
tpl,
num,
res,
type = '';
var $goodList = $maybeLike.children('.goods-list'),
mblTop; //页面内容固定，可以预先求出高度
var isLogin = 'Y'; //是否登录，后台提供，区分走Ajax还是页面跳转
if ($('.maybe-like').size() <= 0) {
return;
}
mblTop = $maybeLike.offset().top;
// 无可能喜欢模块时直接返回
if ($maybeLike.length === 0) {
return;
}
//read good-info template
$.get('/common/goodinfo', function (data) {
tpl = '{{# goods}}' + data + '{{/ goods}}';
Mustache.parse(tpl);
});
type = $('.mobile-wrap').hasClass('boys-wrap') ? 'index' : 'girl';
//商品收藏
$('.goods-list').delegate('.good-islike', 'touchstart', function (e) {
var $cur, $good, id, url;
if (isLogin === 'Y') {
e.preventDefault(); // 阻止链接跳转改AJAX
$cur = $(e.currentTarget);
$good = $cur.closest('.good-info');
id = $good.data('id');
if ($cur.hasClass('good-like')) {
url = '/' + type + '/cancelprise';
} else {
url = '/' + type + '/prise';
}
$.ajax({
type: 'GET',
url: url,
data: {
id: id
}
}).then(function (data) {
if (data.code === 200) {
$cur.toggleClass('good-like');
}
});
}
});
//srcoll to load more
$(window).scroll(function () {
if (end || loading) {
return;
}
if ($(window).scrollTop() + winH < mblTop + $maybeLike.height()) {
return;
}
loading = true;
num = $goodList.children('.good-info').length;
$.ajax({
type: 'GET',
url: '/' + type + '/getmore',
data: {
page: page + 1
}
}).then(function (data) {
if (data.code === 200) {
res = data.data;
if (res.end) {
end = res.end;
}
$goodList.append(Mustache.render(tpl, {
goods: res.goods
}));
//lazyLoad
lazyLoad($goodList.children('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
loading = false;
page++;
}
});
});*/
\ No newline at end of file
* @author: liangzhifeng<zhifeng.liang@yoho.cn>
* @date: 2015/10/12
*/
\ No newline at end of file
... ...
.discount-section {
li {
margin-bottom: 30rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
line-height: 76rem / $pxConvertRem;
background: #fff;
a {
color: #000;
}
img {
text-align: center;
width: 640rem / $pxConvertRem;
height: 250rem / $pxConvertRem;
vertical-align: middle;
}
}
.title {
float: left;
padding-left: 20rem / $pxConvertRem;
}
.time {
float: right;
padding-right: 20rem / $pxConvertRem;
&.rush {
color: #d0021b;
}
}
}
\ No newline at end of file
... ...
.floor-header{
margin: 29rem / $pxConvertRem 30rem / $pxConvertRem 0;
background: #fff;
border: 1px solid #e0e0e0;
border-bottom: none;
height: 70rem / $pxConvertRem;
line-height: 70rem / $pxConvertRem;
text-align: center;
font-size: 30rem / $pxConvertRem;
color: #b1b1b1;
}
\ No newline at end of file
... ...
.good-info {
float: left;
width: 276rem / $pxConvertRem;
height: 486rem / $pxConvertRem;
margin: 0 (15rem / $pxConvertRem);
.tag-container {
height: 28rem / $pxConvertRem;
width: 100%;
overflow: hidden;
.good-tag {
display: block;
float: left;
height: 28rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
text-align: center;
line-height: 28rem / $pxConvertRem;
box-sizing: border-box;
margin-right: 4rem / $pxConvertRem;
&:last-child {
margin-right: 0;
}
}
.new-tag {
width: 60rem / $pxConvertRem;
background-color: #78dc7e;
color: #fff;
}
.renew-tag {
width: 90rem / $pxConvertRem;
background-color: #78dc7e;
color: #fff;
}
.sale-tag {
width: 60rem / $pxConvertRem;
background-color: #ff575c;
color: #fff;
}
.yohood-tag {
width: 90rem / $pxConvertRem;
background: image-url("yohood.png") no-repeat;
background-size: 100% 100%;
}
.limit-tag {
width: 90rem / $pxConvertRem;
border: 1px solid #000;
color: #000;
}
}
}
.good-detail-img {
position: relative;
.good-islike {
position: absolute;
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
top: 0rem / $pxConvertRem;
right: 0rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
text-align: center;
color: #b0b0b0;
text-decoration: none;
}
.good-like {
color: #d72928;
}
img {
display: block;
width: 100%;
height: 366rem / $pxConvertRem;
}
.few-tag {
position: absolute;
bottom: 0;
width: 100%;
height: 28rem / $pxConvertRem;
background: #ffac5b;
font-size: 18rem / $pxConvertRem;
color: #fff;
line-height: 28rem / $pxConvertRem;
text-align: center;
}
}
.good-detail-text {
.name a {
display: block;
line-height: 56rem / $pxConvertRem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
font-size: 22rem / $pxConvertRem;
color: #444;
}
.price {
line-height: 22rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
.sale-price {
color: #d62927;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin: 0 0 0 (5rem / $pxConvertRem);
color: #b0b0b0;
text-decoration: line-through;
}
}
.vip-tag {
display: none;
margin: (5rem / $pxConvertRem) 0 0;
padding: 0 0 0 (96rem / $pxConvertRem);
height: 32rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
background: image-url("sale-icon/vip.png") no-repeat left center;
background-size: auto 100%;
font-size: 18rem / $pxConvertRem;
}
}
\ No newline at end of file
... ...
@import "./goods-nav","./good-info";
.goods-content{
position: relative;
background: #fff;
padding: 0 0 0 15rem / $pxConvertRem;
}
.screen-mask, .screen-content {
position: absolute;
left: 0;
right: 0;
top: 0;
}
.screen-mark {
height: 100%;
background-color: #000;
opacity: 0.1;
filter: Alpha(opacity=10);
}
.screen-content{
.classify{
float: left;
width: 320rem / $pxConvertRem;
background: #f8f8f8;
li{
padding-left: 28rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
h1{
display: inline-block;
color: #a0a0a0;
}
}
li.active{
background: #fff;
h1{
color: #000;
}
}
}
.sub-classify-container{
float: left;
width: 320rem / $pxConvertRem;
background: #fff;
height: 100%;
overflow-y:auto;
li{
position: relative;
margin: 0 0 0 20rem / $pxConvertRem;
padding: 0 0 0 14rem / $pxConvertRem;
height: 78rem / $pxConvertRem;
line-height: 78rem / $pxConvertRem;
border-bottom: 2rem / $pxConvertRem solid #e0e0e0;
font-size: 28rem / $pxConvertRem;
color: #000;
.chosed-icon{
display: none;
position: absolute;
top: 0;
right: 28rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
}
}
li.chosed{
.chosed-icon{
display: block;
}
}
}
}
... ...
.goods-group {
ul {
padding: (15rem / $pxConvertRem) 0 (15rem / $pxConvertRem) (15rem / $pxConvertRem);
background: #fff;
}
}
\ No newline at end of file
... ...
.goods-item {
float: left;
margin: 15rem/$pxConvertRem;
background: #fff;
color: #444;
a {
font-size: 22rem/$pxConvertRem;
line-height: 36rem/$pxConvertRem;
color: #222;
}
img {
width: 276rem/$pxConvertRem;
height: 368rem/$pxConvertRem;
}
.goods-title {
max-width: 276rem/$pxConvertRem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.price {
font-size: 22rem/$pxConvertRem;
line-height: 32rem/$pxConvertRem;
}
.sale-price {
color: #d0021b;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin: 0 0 0 (5rem / $pxConvertRem);
color: #b6b6b6;
text-decoration: line-through;
}
.vip-cheap {
font-size: 18rem/$pxConvertRem;
line-height: 32rem/$pxConvertRem;
}
%vip-icon {
float: left;
margin-right: 12rem/$pxConvertRem;
background-size: 100%;
background-repeat: no-repeat;
}
.vip-icon {
@extend %vip-icon;
width: 88rem/$pxConvertRem;
height: 32rem/$pxConvertRem;
background-image: url(../img/sale-icon/vip.png);
}
.vip-card-gold {
@extend %vip-icon;
width: 52rem/$pxConvertRem;
height: 32rem/$pxConvertRem;
background-image: url(../img/sale-icon/vip-card-gold.png);
}
}
... ...
.goods-nav {
position: relative;
width: 100%;
height: 67rem / $pxConvertRem;
background: #fff;
text-align: center;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #e6e6e6;
}
.swiper-wrapper {
white-space: nowrap;
}
li {
display: inline-block;
width: auto;
margin: 0 0 0 (34.4rem / $pxConvertRem);
font-size: 28rem / $pxConvertRem;
padding: 0 (6rem / $pxConvertRem);
height: 67rem / $pxConvertRem;
line-height: 67rem / $pxConvertRem;
color: #999;
// border-bottom: (4rem / $pxConvertRem) solid transparent;
span {
display: inline-block;
}
.sort {
width: 24rem / $pxConvertRem;
vertical-align: middle;
}
.iconfont {
display: block;
font-size: 26rem / $pxConvertRem;
height: 30rem / $pxConvertRem;
line-height: 40rem / $pxConvertRem;
&.down {
line-height: 30rem / $pxConvertRem;
}
&.up + .down {
line-height: 20rem / $pxConvertRem;
}
}
}
li.focus {
color: #000;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: (4rem / $pxConvertRem) solid #000;
z-index: 1;
}
.sort {
.iconfont {
color: #c0c0c0;
&.cur {
color: #000;
}
}
}
}
.screen-nav {
.iconfont {
line-height: 30rem / $pxConvertRem;
transition: transform .1s ease-in;
transform: scale(0.83);
}
&.focus {
.iconfont {
transform: scale(0.83) rotate(-180deg);
-webkit-transform: scale(0.83) rotate(-180deg);
color: #000 !important;
}
}
}
}
.s-goods-nav {
li {
float: left;
display: inline;
}
}
.size-nav {
height: 49rem / $pxConvertRem;
line-height: 49rem / $pxConvertRem;
background: #f0f0f0;
border-bottom: (2rem / $pxConvertRem) solid #e6e6e6;
overflow: hidden;
li {
float: left;
width: auto;
padding: 0 (25rem / $pxConvertRem);
font-size: 28rem / $pxConvertRem;
color: #999;
}
li.focus {
color: #000;
}
}
\ No newline at end of file
... ...
.header-banner {
position: relative;
width: 100%;
height: 200rem / $pxConvertRem;
overflow: hidden;
.swiper-wrapper{
position: relative;
width: 100%;
height: 100%;
}
.swiper-slide{
float: left;
width: 100%;
height: 100%;
}
img {
display: block;
width: 100%;
height: 100%;
}
.desc {
box-sizing: border-box;
position:absolute;
left: 0;
bottom: 0;
padding-right: 30rem/$pxConvertRem;
width: 100%;
font-size: 22rem/$pxConvertRem;
line-height: 50rem/$pxConvertRem;
color: #fff;
background: rgba(120,120,120,.5);
text-align: right;
}
}
\ No newline at end of file
... ...
.header{
height: 88rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
text-align: center;
background: #222;
color: #fff;
font-size: 34rem / $pxConvertRem;
.icon-back{
float: left;
margin-left: 33rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
color: #fff;
}
.icon-home{
float: right;
margin-right: 26px;
font-size: 32rem / $pxConvertRem;
color: #fff;
}
}
\ No newline at end of file
... ...
.rank-main {
padding: (14rem / $pxConvertRem) 0 0 (30rem / $pxConvertRem);
background: #fff;
li {
.item-img {
float: left;
width: 150rem / $pxConvertRem;
height: 200rem / $pxConvertRem;
padding: (12rem / $pxConvertRem) 0;
line-height: 200rem / $pxConvertRem;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.item-content {
float: left;
width: 407rem / $pxConvertRem;
height: 213rem / $pxConvertRem;
margin: 0 0 0 (13rem / $pxConvertRem);
padding: (12rem / $pxConvertRem) 0 0 (30rem / $pxConvertRem);
border-top: 1px solid #e0e0e0;
.rank-icon {
display: block;
height: 50rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
line-height: 58rem / $pxConvertRem;
text-align: center;
font-size: 22rem / $pxConvertRem;
color: #fff;
background: image-url("sale-icon/rank.png") no-repeat;
background-size: 100%;
&.top {
background: image-url("sale-icon/rank-t.png") no-repeat;
background-size: 100%;
}
}
h2 {
width: 9.5rem;
line-height: 1.285;
color: #444;
font-size: 28rem / $pxConvertRem;
}
p {
width: 9.5rem;
line-height: 1.5;
font-size: 24rem / $pxConvertRem;
color: #d0021b;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
span {
text-decoration: line-through;
color: #b0b0b0;
margin-left: 10rem / $pxConvertRem;
}
}
}
}
li:first-child {
.item-content {
border: none;
}
}
}
\ No newline at end of file
... ...
.goods-nav {
border-bottom: (2rem / $pxConvertRem) solid #e6e6e6;
height: 67rem / $pxConvertRem;
overflow: hidden;
li {
float: left;
width: auto;
height: 67rem / $pxConvertRem;
line-height: 67rem / $pxConvertRem;
width: 145rem / $pxConvertRem;
text-align: center;
font-size: 28rem / $pxConvertRem;
a {
display: inline-block;
padding: 0 (5rem / $pxConvertRem);
font-size: 28rem / $pxConvertRem;
color: #999;
height: 65rem / $pxConvertRem;
}
}
li:first-child {
margin-left: 30rem / $pxConvertRem;
}
li.focus {
a {
border-bottom: (4rem / $pxConvertRem) solid #000;
color: #000;
}
}
}
.s-goods-nav {
overflow: hidden;
li {
margin: 0 0 0 (50rem / $pxConvertRem);
width: auto;
a {
padding: 0;
}
}
li:first-child {
margin: 0 0 0 (39rem / $pxConvertRem);
}
}
\ No newline at end of file
... ...
.vip-no-login .good-info {
height: 523rem / $pxConvertRem;
}
.vip-no-login .vip-tag {
display: block;
}
.vip-card .good-detail-text .price {
padding-left: 66rem / $pxConvertRem;
height: 32rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
}
.vip-gold .good-detail-text .price {
background: url(../img/sale-icon/vip-card-gold.png) no-repeat;
background-size: auto 100%;
}
.vip-platinum .good-detail-text .price {
background: url(../img/sale-icon/vip-card-platinum.png) no-repeat;
background-size: auto 100%;
}
.vip-silver .good-detail-text .price {
background: url(../img/sale-icon/vip-card-silver.png) no-repeat;
background-size: auto 100%;
}
\ No newline at end of file
... ...
.sale-section {
background: #fff;
ul {
text-align: center;
padding: (15rem / $pxConvertRem) 0 (15rem / $pxConvertRem) (15rem / $pxConvertRem);
}
li {
float: left;
margin: (15rem / $pxConvertRem) (15rem / $pxConvertRem);
width: 275rem / $pxConvertRem;
height: 130rem / $pxConvertRem;
img {
width: 100%;
height: 100%;
}
}
}
\ No newline at end of file
... ...