Authored by unknown

首页相关更改

... ... @@ -6,6 +6,7 @@
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no" name="format-detection">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<link rel="stylesheet" href="../css/index.css">
<script type="text/javascript">
... ...
... ... @@ -12,11 +12,11 @@
"spm": {
"main": "index.js",
"dependencies": {
"jquery": "1.8.3",
"lazyload": "1.9.6",
"mustache": "2.0.0",
"yoho-idangerous.swiper": "0.0.3",
"yoho.jquery": "1.8.3"
"yoho.lazyload": "1.0.0",
"yoho.mustache": "2.1.3",
"yoho.iswiper": "3.0.6",
"yoho.jquery": "1.8.3",
"import-style": "1.0.0"
},
"devDependencies": {
"expect.js": "0.3.1"
... ...
... ... @@ -4,9 +4,9 @@
* @date: 2015/7/15
*/
var $ = require('jquery'),
Mustache = require('mustache'),
lazyLoad = require('./lazyload');
var $ = require('yoho.jquery'),
Mustache = require('yoho.mustache'),
lazyLoad = require('yoho.lazyload');
var $maybeLike = $('.maybe-like:last');
... ...
... ... @@ -63,6 +63,12 @@ module.exports = {
list: [{
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
}, {
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
}, {
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
}]
}
}, {
... ...
... ... @@ -4,9 +4,9 @@
* @date: 2015/7/15
*/
var $ = require('jquery'),
swiper = require('yoho-idangerous.swiper'),
lazyLoad = require('./common/lazyload'),
var $ = require('yoho.jquery'),
swiper = require('yoho.iswiper'),
lazyLoad = require('yoho.lazyload'),
bannerSwiper,
hotBrandsSwiper,
recommendSwiper,
... ... @@ -23,6 +23,7 @@ $('.nav-btn').on('click', function(event) {
if (!$(this).hasClass('menu-open')) {
$('.mobile-wrap').addClass('menu-open');
$('.overlay').addClass('show');
$('.side-nav').addClass('on');
//设置boy高宽,页面不能上下滑动
$('body').css({
height: $(window).height(),
... ... @@ -39,6 +40,7 @@ $('.mobile-wrap').on('click', function() {
$('.mobile-wrap').removeClass('menu-open');
$('.overlay').removeClass('show');
$('.sub-nav').removeClass('show');
$('.side-nav').removeClass('on');
$('body').css({
height: 'auto',
overflow: 'auto'
... ... @@ -70,10 +72,7 @@ if ($('.banner-swiper').find('li').size() > 1) {
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner',
onSlideChangeStart: function() {
lazyLoad($('.banner-swiper .swiper-slide').eq(bannerSwiper.activeIndex).find('img'));
}
pagination: '.banner-top .pagination-inner'
});
};
... ... @@ -101,10 +100,7 @@ if ($('.trend-topic-swiper').find('li').size() > 1) {
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.trend-topic-content .pagination-inner',
onSlideChangeStart: function() {
lazyLoad($('.trend-topic-swiper .swiper-slide').eq(trendTopicSwiper.activeIndex).find('img'));
}
pagination: '.trend-topic-content .pagination-inner'
});
};
... ... @@ -134,4 +130,57 @@ $('.back-to-top').bind('touchstart', function(e) {
//关闭头部下载浮层
$('.header-download').on('click', '.close-btn', function() {
$(this).parent().remove();
});
\ No newline at end of file
});
//logo动画
/*var requestFrame = (function() {
var thisFunc, prefixList = ['webkit', 'moz', 'ms'];
for (var i = 0; i < prefixList.length; i++) {
thisFunc = prefixList[i] + 'RequestAnimationFrame';
if (window[thisFunc]) {
supportCss3 = true;
return function(callback) {
window[thisFunc](callback);
}
}
}
return function(callback) {
window.setTimeout(callback, 67);
}
})();
var start = 0,
logotrans = $('.header .logo');
var isen = true;
function tsAnimate() {
start = start + 10;
logotrans.css({
"transform": 'rotateX(' + start + 'deg)',
"-webkit-transform": 'rotateX(' + start + 'deg)',
"-moz-transform": 'rotateX(' + start + 'deg)'
});
if (start / 90 % 2 == 1) { //
if (isen) {
//logotrans.css("background-image", 'url(http://static.yohobuy.com/newheader/img/logo1.png)');
logotrans.addClass('animate');
isen = false;
} else {
logotrans.removeClass('animate');
//logotrans.css("background-image", 'url(http://static.yohobuy.com/newheader/img/logo_e.png)');
isen = true;
}
}
if (start / 90 % 2 == 0 && start % 360 !== 0) {
window.setTimeout(tsAnimate, 3000);
} else {
if (start % 360 === 0) {
window.setTimeout(tsAnimate, 3 * 60 * 1000);
} else {
requestFrame(function() {
tsAnimate();
})
}
}
}
tsAnimate();*/
\ No newline at end of file
... ...
... ... @@ -17,7 +17,7 @@
margin: 0 (9rem / $pxConvertRem);
border-radius: 50%;
}
span.swiper-active-switch {
span.swiper-pagination-bullet-active {
opacity: 1;
}
}
... ...
... ... @@ -2,12 +2,13 @@
float: left;
width: 276rem / $pxConvertRem;
height: 486rem / $pxConvertRem;
margin: 28rem / $pxConvertRem 15rem / $pxConvertRem 0;
margin: 0 (15rem / $pxConvertRem) (28rem / $pxConvertRem);
.tag-container {
height: 28rem / $pxConvertRem;
width: 100%;
overflow: hidden;
.good-tag {
display: block;
float: left;
... ... @@ -17,30 +18,36 @@
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: image-url("yohood.png") no-repeat;
background-size: 100% 100%;
}
.limit-tag {
width: 90rem / $pxConvertRem;
border: 1px solid #000;
... ... @@ -51,6 +58,7 @@
.good-detail-img {
position: relative;
.good-islike {
position: absolute;
width: 60rem / $pxConvertRem;
... ... @@ -98,15 +106,19 @@
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;
... ...
... ... @@ -30,7 +30,7 @@
margin: 0 (9rem / $pxConvertRem);
border-radius: 50%;
}
span.swiper-active-switch {
span.swiper-pagination-bullet-active {
opacity: 1;
}
}
... ...
@keyframes turn {
1% {
transform: rotateX(90deg);
background: image-url("yohologo01.png") no-repeat center center;
background-size: 100%;
}
2% {
transform: rotateX(180deg);
background: image-url("yohologo01.png") no-repeat center center;
background-size: 100%;
}
50% {
transform: rotateX(180deg);
background: image-url("yohologo01.png") no-repeat center center;
background-size: 100%;
}
51% {
transform: rotateX(90deg);
background: image-url("yohologo02.png") no-repeat center center;
background-size: 100%;
}
52% {
transform: rotateX(0deg);
background: image-url("yohologo02.png") no-repeat center center;
background-size: 100%;
}
100% {
transform: rotateX(0deg);
background: image-url("yohologo02.png") no-repeat center center;
background-size: 100%;
}
}
@-webkit-keyframes turn {
1% {
-webkit-transform: rotateX(90deg);
background: image-url("yohologo01.png") no-repeat center center;
background-size: 100%;
}
2% {
-webkit-transform: rotateX(180deg);
background: image-url("yohologo01.png") no-repeat center center;
background-size: 100%;
}
50% {
-webkit-transform: rotateX(180deg);
background: image-url("yohologo01.png") no-repeat center center;
background-size: 100%;
}
51% {
-webkit-transform: rotateX(90deg);
background: image-url("yohologo02.png") no-repeat center center;
background-size: 100%;
}
52% {
-webkit-transform: rotateX(0deg);
background: image-url("yohologo02.png") no-repeat center center;
background-size: 100%;
}
100% {
-webkit-transform: rotateX(0deg);
background: image-url("yohologo02.png") no-repeat center center;
background-size: 100%;
}
}
.header {
height: 87rem / $pxConvertRem;
line-height: 87rem / $pxConvertRem;
... ... @@ -5,9 +81,11 @@
background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
background-image: gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
position: relative;
.iconfont {
color: #fff;
}
.nav-btn {
position: absolute;
left: 32rem / $pxConvertRem;
... ... @@ -15,15 +93,18 @@
bottom: 0;
z-index: 2;
}
.logo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
font-size: 56rem / $pxConvertRem;
display: block;
margin: 0 auto;
width: 208rem / $pxConvertRem;
height: 100%;
background: image-url("yohologo02.png") no-repeat center center;
background-size: 100%;
animation: 60s turn infinite;
-webkit-animation: 60s turn infinite;
}
.search-btn {
position: absolute;
right: 32rem / $pxConvertRem;
... ... @@ -36,9 +117,9 @@
background: #fd307f;
}
.kids-wrap .logo{
.kids-wrap .logo {
font-style: italic;
font-family: "helvetica","Arial","黑体";
font-family: "helvetica","Arial","榛戜綋";
font-weight: bold;
color: #fff;
}
\ No newline at end of file
... ...
.side-nav {
display: none;
background: #fff;
position: fixed;
top: 0;
... ... @@ -7,6 +7,7 @@
bottom: 0;
left: 0;
z-index: 1;
overflow: hidden;
ul{
background: #f0f0f0;
}
... ... @@ -90,6 +91,10 @@
}
}
.side-nav.on{
display: block;
}
.sub-nav {
position: fixed;
top: 0;
... ... @@ -100,6 +105,8 @@
z-index: 2;
transform: translate3d(100%, 0, 0);
transition: transform .3s ease-out;
-webkit-transform: translate3d(100%, 0, 0);
-webkit-transition: transform .3s ease-out;
li {
height: 109rem / $pxConvertRem;
line-height: 109rem / $pxConvertRem;
... ... @@ -155,6 +162,8 @@
}
.sub-nav.show {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: transform .3s ease-out;
transform: translate3d(0, 0, 0);
transition: transform .3s ease-out;
}
\ No newline at end of file
... ...
... ... @@ -23,7 +23,7 @@
background: #efefef;
border-radius: 50%;
}
span.swiper-active-switch {
span.swiper-pagination-bullet-active {
background: #b0b0b0;
}
}
... ...
... ... @@ -80,13 +80,16 @@ a:focus {
z-index: 2;
background: #f0f0f0;
transform: translate3d(0, 0, 0);
transition: transform .3s ease-out;
transition: transform .3s;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: transform .3s;
}
.mobile-wrap.menu-open {
-webkit-transform: translate3d(540rem / $pxConvertRem, 0, 0);
transform: translate3d(540rem / $pxConvertRem, 0, 0);
transition: transform .3s ease-out;
-webkit-transition: transform .3s;
transition: transform .3s;
}
.overlay {
... ...
... ... @@ -7,7 +7,7 @@
<li class="swiper-slide">
<a href="{{url}}">
<div class="img-box">
<img class="lazy" data-original="{{img}}" src="{{img}}" alt="">
<img class="lazy" src="{{img}}" alt="">
</div>
<div class="item-content">
<p class="title">{{title}}</p>
... ...
<div class="header clearfix">
<span class="nav-btn iconfont">&#xe60b;</span>
<span class="logo iconfont">&#xe60e;</span>
<span class="logo"></span>
{{# searchUrl}}
<a href="{{.}}" class="search-btn iconfont">&#xe60f;</span>
{{/ searchUrl}}
... ...