fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 14b8d292804cdeac1d61635118b278c35e885770 1 parent 4ff40b57

年度账单

Inline Side-by-side
Showing 26 changed files with 406 additions and 0 deletions
/**
* 2016年度账单
* @author: wsl<shuiling.wang@yoho.cn>
* @date: 2017/01/17
*/
'use strict';
const index = (req, res, next) => {
res.render('annual-account/index', {
module: 'activity',
page: 'annual-account',
localCss: true
});
};
module.exports = {
index
};
... ...
... ... @@ -31,6 +31,7 @@ const studentMarket = require(`${cRoot}/student-market`);
const individuation = require(`${cRoot}/individuation`);
const redbag = require(`${cRoot}/redbag`);
const annualAccount = require(`${cRoot}/annual-account`);
// routers
... ... @@ -136,4 +137,7 @@ router.get('/redbag/2017', redbag.index);
// 获取活动页面个性化推荐商品数据
router.get('/individuation', individuation.productLst);
// 2016 年度账单
router.get('/annual-account', annualAccount.index);
module.exports = router;
... ...
<div class="annual-account-page ch">
<div class="annual-bg ch"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide nav-1 stop-swiping">
<div class="start-btn"></div>
</div>
<div class="swiper-slide stop-swiping">
<div class="nav-2">
<div class="nav2-img ch"></div>
</div>
<div class="purdah-area ch">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="purdah-left"></div>
<div class="purdah-right"></div>
<div class="purdah1">
<div class="font-img"></div>
<div class="hand"></div>
</div>
<div class="purdah2">
<div class="month-4"></div>
<div class="month-list">
<ul>
<li class="month-5"></li>
<li class="month-8"></li>
<li class="month-10"></li>
<li class="month-12"></li>
</ul>
</div>
</div>
<div class="purdah3"></div>
<div class="purdah4">
</div>
</div>
</div>
</div>
</div>
</div>
... ...
/**
* 2016年度账单
* @author: wsl<shuiling.wang@yoho.cn>
* @date: 2017/01/17
*/
require('activity/annual-account.page.css');
var Swiper = require('yoho-swiper');
var $ = require('yoho-jquery');
var $annualPage = $('.annual-account-page'),
$commonH = $('.ch'),
$nav2Img = $('.nav2-img');
$(function() {
$commonH.css({height: $(window).height()});
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
noSwiping : true,
noSwipingClass : 'stop-swiping',
onSlideChangeEnd: function(swiper){
if (swiper.activeIndex === 1) {
setTimeout(function() {
$nav2Img.addClass('n2-img-animation');
$('.purdah-area').addClass('p-area-animation');
}, 500);
}
}
});
// 开启2016潮流轨迹按钮
$('.start-btn').on('click', function() {
mySwiper.slideTo(1, 1000, true);
});
$('.purdah1').on('touchstart', function() {
if (parseFloat($nav2Img.css('opacity')) > 0.2) {
return false;
}
$('.purdah-left').addClass('purdah-l-animation');
$('.purdah-right').addClass('purdah-r-animation');
$('.font-img').addClass('font-img-animation');
$('.hand').addClass('hand-animation');
$('.purdah-area').addClass('black-bg');
$(this).fadeOut(800);
$('.purdah2').fadeIn(500);
});
$('.purdah2').on('touchstart', function() {
$(this).fadeOut(800);
$('.purdah3').fadeIn(500);
});
$('.purdah3').on('touchstart', function() {
$('.purdah4').css({
transition: 'all 1s',
top: 0,
opacity: 1,
zIndex: 6,
display: 'block'
});
});
});
... ...
@import "../layout/_swiper.css";
@import "annual-account/index";
... ...
.annual-account-page {
width: 640px;
overflow: hidden;
.annual-bg {
width: 100%;
background-image: resolve("activity/annual-account/bg.gif");
background-size: cover;
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
.nav-1 {
width: 100%;
background: resolve("activity/annual-account/account-bg.png") no-repeat;
background-size: 100% 100%;
}
.start-btn {
width: 447px;
height: 109px;
background: resolve("activity/annual-account/start-btn.png") no-repeat;
background-size: contain;
position: absolute;
bottom: 44px;
left: 93px;
}
.nav-2 {
width: 583px;
margin: 0 auto;
background: resolve("activity/annual-account/nav-2-bg.png") no-repeat;
background-size: 100% 100%;
.nav2-img {
width: 583px;
margin: 0 auto;
background: resolve("activity/annual-account/nav-2-bg2.png") no-repeat;
background-size: 100%;
}
.n2-img-animation {
transition: all 1.5s;
transform: scale(1.5);
opacity: 0
}
}
.purdah-area {
width: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
opacity: 0;
&.p-area-animation {
transition: all 1.5s;
opacity: 1;
}
&.black-bg {
background: #202020;
}
.lamp {
width: 100%;
height: 74px;
background: resolve("activity/annual-account/lamp.png") no-repeat;
background-size: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.purdah-left {
width: 326px;
height: 806px;
background: resolve("activity/annual-account/left.png") no-repeat;
background-size: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.purdah-right {
width: 344px;
height: 812px;
background: resolve("activity/annual-account/right.png") no-repeat;
background-size: 100%;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.purdah-l-animation {
transition: all 1.5s;
transform: translate(-80%, 0);
}
.purdah-r-animation {
transition: all 1.5s;
transform: translate(80%, 0);
}
.font-img {
width: 527px;
height: 419px;
background: resolve("activity/annual-account/font.png") no-repeat;
background-size: contain;
position: absolute;
top: 185px;
left: 55px;
z-index: 5;
}
.font-img-animation {
transition: all 1s;
transform: translate(0, -120%);
opacity: 0;
}
.hand {
width: 100%;
height: 379px;
background: resolve("activity/annual-account/hand.png") no-repeat;
background-size: contain;
position: absolute;
bottom: 0;
left: 0;
z-index: 5;
}
.hand-animation {
transition: all 1s;
opacity: 0;
}
.stage {
width: 100%;
height: 448px;
background: resolve("activity/annual-account/stage.png") no-repeat;
background-size: contain;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.purdah2 {
display: none;
.month-4 {
width: 526px;
height: 613px;
background: resolve("activity/annual-account/4month.png") no-repeat;
background-size: contain;
margin: 0 auto;
}
&.purdah2-animation {
transition: all 1.5s;
transform: translate(0, -200%);
opacity: 0;
}
}
@keyframes arrow-action {
0% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, 0);
}
}
.arrow {
width: 94px;
height: 37px;
background: resolve("activity/annual-account/arrow.png") no-repeat;
background-size: contain;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -47px;
z-index: 6;
animation: arrow-action 2s ;
}
.month-list {
position: absolute;
left: 50px;
top: 520px;
z-index: 1;
width: 570px;
height: 287px;
overflow: hidden;
ul {
white-space: nowrap;
overflow-x: scroll;
width: 570px;
height: 320px;
padding-right: 20px;
}
li {
display: inline-block;
height: 287px;
}
.month-5 {
width: 262px;
background: resolve("activity/annual-account/5month.png") no-repeat;
background-size: contain;
}
.month-8 {
width: 210px;
background: resolve("activity/annual-account/8month.png") no-repeat;
background-size: contain;
}
.month-10 {
width: 233px;
background: resolve("activity/annual-account/10month.png") no-repeat;
background-size: contain;
}
.month-12 {
width: 187px;
background: resolve("activity/annual-account/12month.png") no-repeat;
background-size: contain;
margin-right: 20px;
}
}
.purdah3 {
width: 524px;
height: 683px;
background: resolve("activity/annual-account/run-men.png") no-repeat;
background-size: contain;
z-index: 5;
position: absolute;
left: 60px;
top: 80px;
display: none;
}
.purdah4 {
width: 526px;
height: 779px;
background: resolve("activity/annual-account/video.png") no-repeat;
background-size: contain;
transition: all 1s;
opacity: 0;
display: none;
position: absolute;
z-index: -1;
top: -779px;
left: 50px;
}
}
}
... ...