fe / yohobuy-mobile · Commits

Go to a project

Authored by unknown
Commit a7183effece2dea51d38bceac1fc6a90c0c4d63f 1 parent 27a50ef8

首页相关更改

Inline Side-by-side
Showing 16 changed files with 200 additions and 39 deletions
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 <meta content="yes" name="apple-mobile-web-app-capable"> 6 <meta content="yes" name="apple-mobile-web-app-capable">
7 <meta content="yes" name="apple-mobile-web-app-capable"> 7 <meta content="yes" name="apple-mobile-web-app-capable">
8 <meta content="telephone=no" name="format-detection"> 8 <meta content="telephone=no" name="format-detection">
  9 + <meta content="yes" name="apple-touch-fullscreen">
9 <meta content="black" name="apple-mobile-web-app-status-bar-style"> 10 <meta content="black" name="apple-mobile-web-app-status-bar-style">
10 <link rel="stylesheet" href="../css/index.css"> 11 <link rel="stylesheet" href="../css/index.css">
11 <script type="text/javascript"> 12 <script type="text/javascript">
@@ -12,11 +12,11 @@ @@ -12,11 +12,11 @@
12 "spm": { 12 "spm": {
13 "main": "index.js", 13 "main": "index.js",
14 "dependencies": { 14 "dependencies": {
15 - "jquery": "1.8.3",  
16 - "lazyload": "1.9.6",  
17 - "mustache": "2.0.0",  
18 - "yoho-idangerous.swiper": "0.0.3",  
19 - "yoho.jquery": "1.8.3" 15 + "yoho.lazyload": "1.0.0",
  16 + "yoho.mustache": "2.1.3",
  17 + "yoho.iswiper": "3.0.6",
  18 + "yoho.jquery": "1.8.3",
  19 + "import-style": "1.0.0"
20 }, 20 },
21 "devDependencies": { 21 "devDependencies": {
22 "expect.js": "0.3.1" 22 "expect.js": "0.3.1"
@@ -4,9 +4,9 @@ @@ -4,9 +4,9 @@
4 * @date: 2015/7/15 4 * @date: 2015/7/15
5 */ 5 */
6 6
7 -var $ = require('jquery'),  
8 - Mustache = require('mustache'),  
9 - lazyLoad = require('./lazyload'); 7 +var $ = require('yoho.jquery'),
  8 + Mustache = require('yoho.mustache'),
  9 + lazyLoad = require('yoho.lazyload');
10 10
11 var $maybeLike = $('.maybe-like:last'); 11 var $maybeLike = $('.maybe-like:last');
12 12
@@ -63,6 +63,12 @@ module.exports = { @@ -63,6 +63,12 @@ module.exports = {
63 list: [{ 63 list: [{
64 url: '', 64 url: '',
65 img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg' 65 img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
  66 + }, {
  67 + url: '',
  68 + img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
  69 + }, {
  70 + url: '',
  71 + img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
66 }] 72 }]
67 } 73 }
68 }, { 74 }, {
@@ -4,9 +4,9 @@ @@ -4,9 +4,9 @@
4 * @date: 2015/7/15 4 * @date: 2015/7/15
5 */ 5 */
6 6
7 -var $ = require('jquery'),  
8 - swiper = require('yoho-idangerous.swiper'),  
9 - lazyLoad = require('./common/lazyload'), 7 +var $ = require('yoho.jquery'),
  8 + swiper = require('yoho.iswiper'),
  9 + lazyLoad = require('yoho.lazyload'),
10 bannerSwiper, 10 bannerSwiper,
11 hotBrandsSwiper, 11 hotBrandsSwiper,
12 recommendSwiper, 12 recommendSwiper,
@@ -23,6 +23,7 @@ $('.nav-btn').on('click', function(event) { @@ -23,6 +23,7 @@ $('.nav-btn').on('click', function(event) {
23 if (!$(this).hasClass('menu-open')) { 23 if (!$(this).hasClass('menu-open')) {
24 $('.mobile-wrap').addClass('menu-open'); 24 $('.mobile-wrap').addClass('menu-open');
25 $('.overlay').addClass('show'); 25 $('.overlay').addClass('show');
  26 + $('.side-nav').addClass('on');
26 //设置boy高宽，页面不能上下滑动 27 //设置boy高宽，页面不能上下滑动
27 $('body').css({ 28 $('body').css({
28 height: $(window).height(), 29 height: $(window).height(),
@@ -39,6 +40,7 @@ $('.mobile-wrap').on('click', function() { @@ -39,6 +40,7 @@ $('.mobile-wrap').on('click', function() {
39 $('.mobile-wrap').removeClass('menu-open'); 40 $('.mobile-wrap').removeClass('menu-open');
40 $('.overlay').removeClass('show'); 41 $('.overlay').removeClass('show');
41 $('.sub-nav').removeClass('show'); 42 $('.sub-nav').removeClass('show');
  43 + $('.side-nav').removeClass('on');
42 $('body').css({ 44 $('body').css({
43 height: 'auto', 45 height: 'auto',
44 overflow: 'auto' 46 overflow: 'auto'
@@ -70,10 +72,7 @@ if ($('.banner-swiper').find('li').size() > 1) { @@ -70,10 +72,7 @@ if ($('.banner-swiper').find('li').size() > 1) {
70 autoplayDisableOnInteraction: false, 72 autoplayDisableOnInteraction: false,
71 paginationClickable: true, 73 paginationClickable: true,
72 slideElement: 'li', 74 slideElement: 'li',
73 - pagination: '.banner-top .pagination-inner',  
74 - onSlideChangeStart: function() {  
75 - lazyLoad($('.banner-swiper .swiper-slide').eq(bannerSwiper.activeIndex).find('img'));  
76 - } 75 + pagination: '.banner-top .pagination-inner'
77 }); 76 });
78 }; 77 };
79 78
@@ -101,10 +100,7 @@ if ($('.trend-topic-swiper').find('li').size() > 1) { @@ -101,10 +100,7 @@ if ($('.trend-topic-swiper').find('li').size() > 1) {
101 autoplayDisableOnInteraction: false, 100 autoplayDisableOnInteraction: false,
102 paginationClickable: true, 101 paginationClickable: true,
103 slideElement: 'li', 102 slideElement: 'li',
104 - pagination: '.trend-topic-content .pagination-inner',  
105 - onSlideChangeStart: function() {  
106 - lazyLoad($('.trend-topic-swiper .swiper-slide').eq(trendTopicSwiper.activeIndex).find('img'));  
107 - } 103 + pagination: '.trend-topic-content .pagination-inner'
108 }); 104 });
109 }; 105 };
110 106
@@ -134,4 +130,57 @@ $('.back-to-top').bind('touchstart', function(e) { @@ -134,4 +130,57 @@ $('.back-to-top').bind('touchstart', function(e) {
134 //关闭头部下载浮层 130 //关闭头部下载浮层
135 $('.header-download').on('click', '.close-btn', function() { 131 $('.header-download').on('click', '.close-btn', function() {
136 $(this).parent().remove(); 132 $(this).parent().remove();
137 -});  
  133 +});
  134 +
  135 +//logo动画
  136 +/*var requestFrame = (function() {
  137 + var thisFunc, prefixList = ['webkit', 'moz', 'ms'];
  138 + for (var i = 0; i < prefixList.length; i++) {
  139 + thisFunc = prefixList[i] + 'RequestAnimationFrame';
  140 + if (window[thisFunc]) {
  141 + supportCss3 = true;
  142 + return function(callback) {
  143 + window[thisFunc](callback);
  144 + }
  145 + }
  146 + }
  147 + return function(callback) {
  148 + window.setTimeout(callback, 67);
  149 + }
  150 +})();
  151 +var start = 0,
  152 + logotrans = $('.header .logo');
  153 +var isen = true;
  154 +
  155 +function tsAnimate() {
  156 + start = start + 10;
  157 + logotrans.css({
  158 + "transform": 'rotateX(' + start + 'deg)',
  159 + "-webkit-transform": 'rotateX(' + start + 'deg)',
  160 + "-moz-transform": 'rotateX(' + start + 'deg)'
  161 + });
  162 + if (start / 90 % 2 == 1) { //
  163 + if (isen) {
  164 + //logotrans.css("background-image", 'url(http://static.yohobuy.com/newheader/img/logo1.png)');
  165 + logotrans.addClass('animate');
  166 + isen = false;
  167 + } else {
  168 + logotrans.removeClass('animate');
  169 + //logotrans.css("background-image", 'url(http://static.yohobuy.com/newheader/img/logo_e.png)');
  170 + isen = true;
  171 + }
  172 + }
  173 + if (start / 90 % 2 == 0 && start % 360 !== 0) {
  174 + window.setTimeout(tsAnimate, 3000);
  175 + } else {
  176 + if (start % 360 === 0) {
  177 + window.setTimeout(tsAnimate, 3 * 60 * 1000);
  178 + } else {
  179 + requestFrame(function() {
  180 + tsAnimate();
  181 + })
  182 + }
  183 + }
  184 +}
  185 +
  186 +tsAnimate();*/
@@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
17 margin: 0 (9rem / $pxConvertRem); 17 margin: 0 (9rem / $pxConvertRem);
18 border-radius: 50%; 18 border-radius: 50%;
19 } 19 }
20 - span.swiper-active-switch { 20 + span.swiper-pagination-bullet-active {
21 opacity: 1; 21 opacity: 1;
22 } 22 }
23 } 23 }
@@ -2,12 +2,13 @@ @@ -2,12 +2,13 @@
2 float: left; 2 float: left;
3 width: 276rem / $pxConvertRem; 3 width: 276rem / $pxConvertRem;
4 height: 486rem / $pxConvertRem; 4 height: 486rem / $pxConvertRem;
5 - margin: 28rem / $pxConvertRem 15rem / $pxConvertRem 0; 5 + margin: 0 (15rem / $pxConvertRem) (28rem / $pxConvertRem);
6 6
7 .tag-container { 7 .tag-container {
8 height: 28rem / $pxConvertRem; 8 height: 28rem / $pxConvertRem;
9 width: 100%; 9 width: 100%;
10 overflow: hidden; 10 overflow: hidden;
  11 +
11 .good-tag { 12 .good-tag {
12 display: block; 13 display: block;
13 float: left; 14 float: left;
@@ -17,30 +18,36 @@ @@ -17,30 +18,36 @@
17 line-height: 28rem / $pxConvertRem; 18 line-height: 28rem / $pxConvertRem;
18 box-sizing: border-box; 19 box-sizing: border-box;
19 margin-right: 4rem / $pxConvertRem; 20 margin-right: 4rem / $pxConvertRem;
  21 +
20 &:last-child { 22 &:last-child {
21 margin-right: 0; 23 margin-right: 0;
22 } 24 }
23 } 25 }
  26 +
24 .new-tag { 27 .new-tag {
25 width: 60rem / $pxConvertRem; 28 width: 60rem / $pxConvertRem;
26 background-color: #78dc7e; 29 background-color: #78dc7e;
27 color: #fff; 30 color: #fff;
28 } 31 }
  32 +
29 .renew-tag { 33 .renew-tag {
30 width: 90rem / $pxConvertRem; 34 width: 90rem / $pxConvertRem;
31 background-color: #78dc7e; 35 background-color: #78dc7e;
32 color: #fff; 36 color: #fff;
33 } 37 }
  38 +
34 .sale-tag { 39 .sale-tag {
35 width: 60rem / $pxConvertRem; 40 width: 60rem / $pxConvertRem;
36 background-color: #ff575c; 41 background-color: #ff575c;
37 color: #fff; 42 color: #fff;
38 } 43 }
  44 +
39 .yohood-tag { 45 .yohood-tag {
40 width: 90rem / $pxConvertRem; 46 width: 90rem / $pxConvertRem;
41 - background: image-url('yohood.png') no-repeat; 47 + background: image-url("yohood.png") no-repeat;
42 background-size: 100% 100%; 48 background-size: 100% 100%;
43 } 49 }
  50 +
44 .limit-tag { 51 .limit-tag {
45 width: 90rem / $pxConvertRem; 52 width: 90rem / $pxConvertRem;
46 border: 1px solid #000; 53 border: 1px solid #000;
@@ -51,6 +58,7 @@ @@ -51,6 +58,7 @@
51 58
52 .good-detail-img { 59 .good-detail-img {
53 position: relative; 60 position: relative;
  61 +
54 .good-islike { 62 .good-islike {
55 position: absolute; 63 position: absolute;
56 width: 60rem / $pxConvertRem; 64 width: 60rem / $pxConvertRem;
@@ -98,15 +106,19 @@ @@ -98,15 +106,19 @@
98 font-size: 22rem / $pxConvertRem; 106 font-size: 22rem / $pxConvertRem;
99 color: #444; 107 color: #444;
100 } 108 }
  109 +
101 .price { 110 .price {
102 line-height: 22rem / $pxConvertRem; 111 line-height: 22rem / $pxConvertRem;
103 font-size: 22rem / $pxConvertRem; 112 font-size: 22rem / $pxConvertRem;
  113 +
104 .sale-price { 114 .sale-price {
105 color: #d62927; 115 color: #d62927;
106 } 116 }
  117 +
107 .sale-price.no-price { 118 .sale-price.no-price {
108 color: #000; 119 color: #000;
109 } 120 }
  121 +
110 .market-price { 122 .market-price {
111 margin: 0 0 0 (5rem / $pxConvertRem); 123 margin: 0 0 0 (5rem / $pxConvertRem);
112 color: #b0b0b0; 124 color: #b0b0b0;
@@ -30,7 +30,7 @@ @@ -30,7 +30,7 @@
30 margin: 0 (9rem / $pxConvertRem); 30 margin: 0 (9rem / $pxConvertRem);
31 border-radius: 50%; 31 border-radius: 50%;
32 } 32 }
33 - span.swiper-active-switch { 33 + span.swiper-pagination-bullet-active {
34 opacity: 1; 34 opacity: 1;
35 } 35 }
36 } 36 }
  1 +@keyframes turn {
  2 + 1% {
  3 + transform: rotateX(90deg);
  4 + background: image-url("yohologo01.png") no-repeat center center;
  5 + background-size: 100%;
  6 + }
  7 +
  8 + 2% {
  9 + transform: rotateX(180deg);
  10 + background: image-url("yohologo01.png") no-repeat center center;
  11 + background-size: 100%;
  12 + }
  13 +
  14 + 50% {
  15 + transform: rotateX(180deg);
  16 + background: image-url("yohologo01.png") no-repeat center center;
  17 + background-size: 100%;
  18 + }
  19 +
  20 + 51% {
  21 + transform: rotateX(90deg);
  22 + background: image-url("yohologo02.png") no-repeat center center;
  23 + background-size: 100%;
  24 + }
  25 +
  26 + 52% {
  27 + transform: rotateX(0deg);
  28 + background: image-url("yohologo02.png") no-repeat center center;
  29 + background-size: 100%;
  30 + }
  31 +
  32 + 100% {
  33 + transform: rotateX(0deg);
  34 + background: image-url("yohologo02.png") no-repeat center center;
  35 + background-size: 100%;
  36 + }
  37 +}
  38 +
  39 +@-webkit-keyframes turn {
  40 + 1% {
  41 + -webkit-transform: rotateX(90deg);
  42 + background: image-url("yohologo01.png") no-repeat center center;
  43 + background-size: 100%;
  44 + }
  45 +
  46 + 2% {
  47 + -webkit-transform: rotateX(180deg);
  48 + background: image-url("yohologo01.png") no-repeat center center;
  49 + background-size: 100%;
  50 + }
  51 +
  52 + 50% {
  53 + -webkit-transform: rotateX(180deg);
  54 + background: image-url("yohologo01.png") no-repeat center center;
  55 + background-size: 100%;
  56 + }
  57 +
  58 + 51% {
  59 + -webkit-transform: rotateX(90deg);
  60 + background: image-url("yohologo02.png") no-repeat center center;
  61 + background-size: 100%;
  62 + }
  63 +
  64 + 52% {
  65 + -webkit-transform: rotateX(0deg);
  66 + background: image-url("yohologo02.png") no-repeat center center;
  67 + background-size: 100%;
  68 + }
  69 +
  70 + 100% {
  71 + -webkit-transform: rotateX(0deg);
  72 + background: image-url("yohologo02.png") no-repeat center center;
  73 + background-size: 100%;
  74 + }
  75 +}
  76 +
1 .header { 77 .header {
2 height: 87rem / $pxConvertRem; 78 height: 87rem / $pxConvertRem;
3 line-height: 87rem / $pxConvertRem; 79 line-height: 87rem / $pxConvertRem;
@@ -5,9 +81,11 @@ @@ -5,9 +81,11 @@
5 background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141)); 81 background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
6 background-image: gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141)); 82 background-image: gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
7 position: relative; 83 position: relative;
  84 +
8 .iconfont { 85 .iconfont {
9 color: #fff; 86 color: #fff;
10 } 87 }
  88 +
11 .nav-btn { 89 .nav-btn {
12 position: absolute; 90 position: absolute;
13 left: 32rem / $pxConvertRem; 91 left: 32rem / $pxConvertRem;
@@ -15,15 +93,18 @@ @@ -15,15 +93,18 @@
15 bottom: 0; 93 bottom: 0;
16 z-index: 2; 94 z-index: 2;
17 } 95 }
  96 +
18 .logo { 97 .logo {
19 - position: absolute;  
20 - top: 0;  
21 - left: 0;  
22 - right: 0;  
23 - bottom: 0;  
24 - text-align: center;  
25 - font-size: 56rem / $pxConvertRem; 98 + display: block;
  99 + margin: 0 auto;
  100 + width: 208rem / $pxConvertRem;
  101 + height: 100%;
  102 + background: image-url("yohologo02.png") no-repeat center center;
  103 + background-size: 100%;
  104 + animation: 60s turn infinite;
  105 + -webkit-animation: 60s turn infinite;
26 } 106 }
  107 +
27 .search-btn { 108 .search-btn {
28 position: absolute; 109 position: absolute;
29 right: 32rem / $pxConvertRem; 110 right: 32rem / $pxConvertRem;
@@ -36,9 +117,9 @@ @@ -36,9 +117,9 @@
36 background: #fd307f; 117 background: #fd307f;
37 } 118 }
38 119
39 -.kids-wrap .logo{ 120 +.kids-wrap .logo {
40 font-style: italic; 121 font-style: italic;
41 - font-family: "helvetica","Arial","黑体"; 122 + font-family: "helvetica","Arial","榛戜綋";
42 font-weight: bold; 123 font-weight: bold;
43 color: #fff; 124 color: #fff;
44 } 125 }
1 -  
2 .side-nav { 1 .side-nav {
  2 + display: none;
3 background: #fff; 3 background: #fff;
4 position: fixed; 4 position: fixed;
5 top: 0; 5 top: 0;
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 bottom: 0; 7 bottom: 0;
8 left: 0; 8 left: 0;
9 z-index: 1; 9 z-index: 1;
  10 + overflow: hidden;
10 ul{ 11 ul{
11 background: #f0f0f0; 12 background: #f0f0f0;
12 } 13 }
@@ -90,6 +91,10 @@ @@ -90,6 +91,10 @@
90 } 91 }
91 } 92 }
92 93
  94 +.side-nav.on{
  95 + display: block;
  96 +}
  97 +
93 .sub-nav { 98 .sub-nav {
94 position: fixed; 99 position: fixed;
95 top: 0; 100 top: 0;
@@ -100,6 +105,8 @@ @@ -100,6 +105,8 @@
100 z-index: 2; 105 z-index: 2;
101 transform: translate3d(100%, 0, 0); 106 transform: translate3d(100%, 0, 0);
102 transition: transform .3s ease-out; 107 transition: transform .3s ease-out;
  108 + -webkit-transform: translate3d(100%, 0, 0);
  109 + -webkit-transition: transform .3s ease-out;
103 li { 110 li {
104 height: 109rem / $pxConvertRem; 111 height: 109rem / $pxConvertRem;
105 line-height: 109rem / $pxConvertRem; 112 line-height: 109rem / $pxConvertRem;
@@ -155,6 +162,8 @@ @@ -155,6 +162,8 @@
155 } 162 }
156 163
157 .sub-nav.show { 164 .sub-nav.show {
  165 + -webkit-transform: translate3d(0, 0, 0);
  166 + -webkit-transition: transform .3s ease-out;
158 transform: translate3d(0, 0, 0); 167 transform: translate3d(0, 0, 0);
159 transition: transform .3s ease-out; 168 transition: transform .3s ease-out;
160 } 169 }
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 background: #efefef; 23 background: #efefef;
24 border-radius: 50%; 24 border-radius: 50%;
25 } 25 }
26 - span.swiper-active-switch { 26 + span.swiper-pagination-bullet-active {
27 background: #b0b0b0; 27 background: #b0b0b0;
28 } 28 }
29 } 29 }
@@ -80,13 +80,16 @@ a:focus { @@ -80,13 +80,16 @@ a:focus {
80 z-index: 2; 80 z-index: 2;
81 background: #f0f0f0; 81 background: #f0f0f0;
82 transform: translate3d(0, 0, 0); 82 transform: translate3d(0, 0, 0);
83 - transition: transform .3s ease-out; 83 + transition: transform .3s;
  84 + -webkit-transform: translate3d(0, 0, 0);
  85 + -webkit-transition: transform .3s;
84 } 86 }
85 87
86 .mobile-wrap.menu-open { 88 .mobile-wrap.menu-open {
87 -webkit-transform: translate3d(540rem / $pxConvertRem, 0, 0); 89 -webkit-transform: translate3d(540rem / $pxConvertRem, 0, 0);
88 transform: translate3d(540rem / $pxConvertRem, 0, 0); 90 transform: translate3d(540rem / $pxConvertRem, 0, 0);
89 - transition: transform .3s ease-out; 91 + -webkit-transition: transform .3s;
  92 + transition: transform .3s;
90 } 93 }
91 94
92 .overlay { 95 .overlay {
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 <li class="swiper-slide"> 7 <li class="swiper-slide">
8 <a href="{{url}}"> 8 <a href="{{url}}">
9 <div class="img-box"> 9 <div class="img-box">
10 - <img class="lazy" data-original="{{img}}" src="{{img}}" alt=""> 10 + <img class="lazy" src="{{img}}" alt="">
11 </div> 11 </div>
12 <div class="item-content"> 12 <div class="item-content">
13 <p class="title">{{title}}</p> 13 <p class="title">{{title}}</p>
1 <div class="header clearfix"> 1 <div class="header clearfix">
2 <span class="nav-btn iconfont">&#xe60b;</span> 2 <span class="nav-btn iconfont">&#xe60b;</span>
3 - <span class="logo iconfont">&#xe60e;</span> 3 + <span class="logo"></span>
4 {{# searchUrl}} 4 {{# searchUrl}}
5 <a href="{{.}}" class="search-btn iconfont">&#xe60f;</span> 5 <a href="{{.}}" class="search-btn iconfont">&#xe60f;</span>
6 {{/ searchUrl}} 6 {{/ searchUrl}}