fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 2b4c8d69e1ca247566dfef5bc5558e12d0aef979 1 parent b8714956

年度账单

Inline Side-by-side
Showing 18 changed files with 465 additions and 132 deletions
@@ -6,68 +6,100 @@ @@ -6,68 +6,100 @@
6 'use strict'; 6 'use strict';
7 const helpers = global.yoho.helpers; 7 const helpers = global.yoho.helpers;
8 const annualAccountModel = require('../models/annual-account'); 8 const annualAccountModel = require('../models/annual-account');
  9 +const title = 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>';
9 10
10 const index = (req, res, next) => { 11 const index = (req, res, next) => {
11 - let uid = 2;  
12 let isApp = req.query.app_version || req.query.appVersion ? true : false; 12 let isApp = req.query.app_version || req.query.appVersion ? true : false;
13 - let url = '';  
14 - let curUrl = 'http://m.yohobuy.com/activity/annual-account';  
15 let shareUrl = false; 13 let shareUrl = false;
  14 + let uid = +req.query.uid || +req.user.uid || 35;
  15 + let curUrl = 'http://m.yohobuy.com/activity/annual-account';
16 16
17 - if (parseInt(uid, 10)) {  
18 - annualAccountModel.getAccountData({  
19 - uid: uid,  
20 - year: '2016'  
21 - }).then(result => {  
22 - let data = result.data;  
23 -  
24 - if (isApp) {  
25 - let sUrl = 'http://m.yohobuy.com/activity/annual-account/share?name=' + data.nickname+ '&score=' + data.score + '&beat=' + data.beat + '&n=' + data.title; //eslint-disable-line  
26 -  
27 - shareUrl = helpers.appUrlFormat(sUrl, 'go.share', {  
28 - pic: 'https://feature.yoho.cn/300x300.png',  
29 - title: 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>',  
30 - url: sUrl,  
31 - content: 'YOHO!2016潮流轨迹'  
32 - });  
33 - } 17 + annualAccountModel.getAccountData({
  18 + uid: uid,
  19 + year: '2016'
  20 + }).then(result => {
  21 + let data = result.data || {};
  22 + let sUrl = 'http://m.yohobuy.com/activity/annual-account/share?name=' + data.nickname+ '&score=' + data.score + '&beat=' + data.beat + '&n=' + data.title; //eslint-disable-line
34 23
35 - res.render('annual-account/index', {  
36 - module: 'activity',  
37 - page: 'annual-account',  
38 - localCss: true,  
39 - title: 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>',  
40 - accountData: Object.assign({  
41 - shareUrl: shareUrl  
42 - }, data)  
43 - });  
44 - }).catch(next);  
45 - } else {  
46 if (isApp) { 24 if (isApp) {
47 - url = helpers.appUrlFormat(curUrl, 'go.weblogin', {  
48 - jumpurl: {  
49 - url: curUrl,  
50 - antarget: 1  
51 - }  
52 - });  
53 - } else {  
54 - url = helpers.urlFormat('/signin.html', {  
55 - refer: '//m.yohobuy.com/activity/annual-account' 25 + shareUrl = helpers.appUrlFormat(curUrl, 'go.share', {
  26 + pic: 'https://feature.yoho.cn/300x300.png',
  27 + title: title,
  28 + url: sUrl,
  29 + content: 'YOHO!2016潮流轨迹'
56 }); 30 });
57 } 31 }
58 - res.redirect(url);  
59 - } 32 +
  33 + res.render('annual-account/index', {
  34 + module: 'activity',
  35 + page: 'annual-account',
  36 + localCss: true,
  37 + title: title,
  38 + data: Object.assign({
  39 + shareUrl: shareUrl,
  40 + sUrl: sUrl
  41 + }, data)
  42 + });
  43 + }).catch(next);
60 }; 44 };
61 45
  46 +// const getData = (req, res, next) => {
  47 +// let isApp = req.query.app_version || req.query.appVersion ? true : false;
  48 +// let shareUrl = false;
  49 +// let uid = req.query.uid || req.user.uid;
  50 +// let curUrl = 'http://m.yohobuy.com/activity/annual-account';
  51 +// let loginUrl = helpers.urlFormat('/signin.html', {
  52 +// refer: '//m.yohobuy.com/activity/annual-account'
  53 +// });
  54 +//
  55 +// if (isApp) {
  56 +// loginUrl = helpers.appUrlFormat(curUrl, 'go.weblogin', {
  57 +// jumpurl: {
  58 +// url: curUrl
  59 +// }
  60 +// });
  61 +// }
  62 +//
  63 +// if (parseInt(uid, 10)) {
  64 +// annualAccountModel.getAccountData({
  65 +// uid: uid,
  66 +// year: '2016'
  67 +// }).then(result => {
  68 +// let data = result.data || {};
  69 +// let sUrl = 'http://m.yohobuy.com/activity/annual-account/share?name=' + data.nickname+ '&score=' + data.score + '&beat=' + data.beat + '&n=' + data.title; //eslint-disable-line
  70 +//
  71 +// if (isApp) {
  72 +// shareUrl = helpers.appUrlFormat(curUrl, 'go.share', {
  73 +// pic: 'https://feature.yoho.cn/300x300.png',
  74 +// title: title,
  75 +// url: sUrl,
  76 +// content: 'YOHO!2016潮流轨迹'
  77 +// });
  78 +// }
  79 +//
  80 +// res.json(Object.assign({
  81 +// shareUrl: shareUrl,
  82 +// sUrl: sUrl
  83 +// }, data));
  84 +// }).catch(next);
  85 +// } else {
  86 +// res.json({
  87 +// loginUrl: loginUrl
  88 +// });
  89 +// }
  90 +// };
  91 +
62 const share = (req, res) => { 92 const share = (req, res) => {
63 let q = req.query; 93 let q = req.query;
64 94
65 res.render('annual-account/share', { 95 res.render('annual-account/share', {
66 module: 'activity', 96 module: 'activity',
67 page: 'annual-account', 97 page: 'annual-account',
68 - title: 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>', 98 + title: title,
69 localCss: true, 99 localCss: true,
70 - data: q 100 + data: Object.assign({
  101 + sUrl: req.originalUrl
  102 + }, q)
71 }); 103 });
72 }; 104 };
73 105
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 8
9 const router = require('express').Router(); // eslint-disable-line 9 const router = require('express').Router(); // eslint-disable-line
10 const cRoot = './controllers'; 10 const cRoot = './controllers';
11 - 11 +const auth = require('../../doraemon/middleware/auth');
12 const demo = require(`${cRoot}/demo`); 12 const demo = require(`${cRoot}/demo`);
13 const coupon = require(`${cRoot}/coupon`); 13 const coupon = require(`${cRoot}/coupon`);
14 const wechat = require(`${cRoot}/wechat`); 14 const wechat = require(`${cRoot}/wechat`);
@@ -138,7 +138,7 @@ router.get('/redbag/2017', redbag.index); @@ -138,7 +138,7 @@ router.get('/redbag/2017', redbag.index);
138 router.get('/individuation', individuation.productLst); 138 router.get('/individuation', individuation.productLst);
139 139
140 // 2016 年度账单 140 // 2016 年度账单
141 -router.get('/annual-account', annualAccount.index); 141 +router.get('/annual-account', auth, annualAccount.index);
142 router.get('/annual-account/share', annualAccount.share); 142 router.get('/annual-account/share', annualAccount.share);
143 143
144 module.exports = router; 144 module.exports = router;
1 -{{# accountData}}  
2 -<div class="annual-account-page ch"> 1 +{{#data}}
  2 +<div class="annual-account-page ch" data-login="{{loginUrl}}" data-is-app="{{isApp}}">
3 <div class="annual-bg ch"></div> 3 <div class="annual-bg ch"></div>
4 - <audio src="https://feature.yoho.cn/20160118171021/yohood_170118.mp3" id="audio">  
5 - 您的浏览器不支持 audio 标签。  
6 - </audio>  
7 - <audio loop="loop" autoplay="autoplay" src="https://feature.yoho.cn/20160118171021/yohood_170118.mp3"> 4 + <input type="hidden" value="{{sUrl}}" id="s-url">
  5 + <div class="audio-btn"></div>
  6 + <audio loop="loop" autoplay="autoplay" src="http://feature.yoho.cn/20160118171021/170119.mp3" id="audio">
8 Your browser does not support the audio element. 7 Your browser does not support the audio element.
9 </audio> 8 </audio>
10 - <div class="swiper-container"> 9 + <div class="swiper-container ch">
11 <div class="swiper-wrapper"> 10 <div class="swiper-wrapper">
12 <div class="swiper-slide nav-1"> 11 <div class="swiper-slide nav-1">
13 <div class="start-btn"></div> 12 <div class="start-btn"></div>
@@ -46,8 +45,8 @@ @@ -46,8 +45,8 @@
46 <div class="arrow"></div> 45 <div class="arrow"></div>
47 <div class="lamp"></div> 46 <div class="lamp"></div>
48 <div class="stage"></div> 47 <div class="stage"></div>
49 - <div class="purdah-left"></div>  
50 - <div class="purdah-right"></div> 48 + <div class="purdah-open-left"></div>
  49 + <div class="purdah-open-right"></div>
51 <div class="run-men"></div> 50 <div class="run-men"></div>
52 </div> 51 </div>
53 </div> 52 </div>
@@ -57,10 +56,10 @@ @@ -57,10 +56,10 @@
57 <div class="arrow"></div> 56 <div class="arrow"></div>
58 <div class="lamp"></div> 57 <div class="lamp"></div>
59 <div class="stage"></div> 58 <div class="stage"></div>
60 - <div class="purdah-left"></div>  
61 - <div class="purdah-right"></div> 59 + <div class="purdah-open-left"></div>
  60 + <div class="purdah-open-right"></div>
62 <div class="video"> 61 <div class="video">
63 - <video src="https://feature.yoho.cn/20160118171021/yohood_170118.mp4"> 62 + <video src="https://feature.yoho.cn/20160118171021/yohood_170118.mp4" id="video" preload="auto" webkit-playsinline playsinline controls="controls">
64 您的浏览器不支持 video 标签。 63 您的浏览器不支持 video 标签。
65 </video> 64 </video>
66 </div> 65 </div>
@@ -72,9 +71,13 @@ @@ -72,9 +71,13 @@
72 <div class="arrow"></div> 71 <div class="arrow"></div>
73 <div class="lamp"></div> 72 <div class="lamp"></div>
74 <div class="stage"></div> 73 <div class="stage"></div>
75 - <div class="purdah-left"></div>  
76 - <div class="purdah-right"></div> 74 + <div class="hand"></div>
  75 + <div class="purdah-open-left"></div>
  76 + <div class="purdah-open-right"></div>
  77 + <div class="date"></div>
77 <div class="spokesman"></div> 78 <div class="spokesman"></div>
  79 + <div class="txt-black"></div>
  80 + <div class="txt-white"></div>
78 </div> 81 </div>
79 </div> 82 </div>
80 83
@@ -102,13 +105,13 @@ @@ -102,13 +105,13 @@
102 {{#if hasBill}} 105 {{#if hasBill}}
103 <div class="score2"> 106 <div class="score2">
104 <p>综合这一年的潮流之旅</p> 107 <p>综合这一年的潮流之旅</p>
105 - <p>你的潮流分为<span class="red-color">XX</span><br>击败了<span class="red-color">XX %</span>的潮人<br>获得</p> 108 + <p>你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}} %</span>的潮人<br>获得</p>
106 </div> 109 </div>
107 {{else}} 110 {{else}}
108 <div class="score">2016年你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得</div> 111 <div class="score">2016年你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得</div>
109 {{/if}} 112 {{/if}}
110 <div class="portrait-{{title}}"></div> 113 <div class="portrait-{{title}}"></div>
111 - <div class="score-txt">的称号</div> 114 + <div class="score-txt">称号</div>
112 </div> 115 </div>
113 {{#shareUrl}} 116 {{#shareUrl}}
114 <a href="{{.}}" class="share-btn"></a> 117 <a href="{{.}}" class="share-btn"></a>
@@ -117,4 +120,4 @@ @@ -117,4 +120,4 @@
117 </div> 120 </div>
118 </div> 121 </div>
119 </div> 122 </div>
120 -{{/ accountData}} 123 +{{/data}}
1 {{# data}} 1 {{# data}}
2 <div class="annual-account-page ch account-share-page"> 2 <div class="annual-account-page ch account-share-page">
  3 + <input type="hidden" value="{{sUrl}}" id="s-url">
3 <div class="account-bg3"> 4 <div class="account-bg3">
4 <div class="share-txt"> 5 <div class="share-txt">
5 <span class="name">{{name}}</span><br>的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得 6 <span class="name">{{name}}</span><br>的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得
6 </div> 7 </div>
7 <div class="portrait-{{n}}"></div> 8 <div class="portrait-{{n}}"></div>
8 - <div class="share-txt">的称号</div> 9 + <div class="share-txt">称号</div>
9 <a class="create-btn" href="/activity/annual-account"></a> 10 <a class="create-btn" href="/activity/annual-account"></a>
10 </div> 11 </div>
11 </div> 12 </div>
  1 +{{#data}}
  2 +<div class="annual-bg ch"></div>
  3 +<input type="hidden" value="{{sUrl}}" id="s-url">
  4 +<div class="audio-btn"></div>
  5 +<audio loop="loop" autoplay="autoplay" src="http://feature.yoho.cn/20160118171021/170119.mp3" id="audio">
  6 + Your browser does not support the audio element.
  7 +</audio>
  8 +<div class="swiper-container">
  9 + <div class="swiper-wrapper">
  10 + <div class="swiper-slide nav-1">
  11 + <div class="start-btn"></div>
  12 + </div>
  13 + <div class="swiper-slide">
  14 + <div class="nav-2">
  15 + <div class="nav2-img ch"></div>
  16 + </div>
  17 +
  18 + <div class="purdah1 ch">
  19 + <div class="arrow"></div>
  20 + </div>
  21 + </div>
  22 + <div class="swiper-slide">
  23 + <div class="purdah-area ch black-bg">
  24 + <div class="arrow"></div>
  25 + <div class="lamp"></div>
  26 + <div class="stage"></div>
  27 + <div class="purdah-left"></div>
  28 + <div class="purdah-right"></div>
  29 + <div class="purdah2">
  30 + <div class="month-4"></div>
  31 + <div class="month-list">
  32 + <ul>
  33 + <li class="month-5"></li>
  34 + <li class="month-8"></li>
  35 + <li class="month-10"></li>
  36 + <li class="month-12"></li>
  37 + </ul>
  38 + </div>
  39 + </div>
  40 + </div>
  41 + </div>
  42 + <div class="swiper-slide">
  43 + <div class="purdah-area ch black-bg purdah3">
  44 + <div class="arrow"></div>
  45 + <div class="lamp"></div>
  46 + <div class="stage"></div>
  47 + <div class="purdah-open-left"></div>
  48 + <div class="purdah-open-right"></div>
  49 + <div class="run-men"></div>
  50 + </div>
  51 + </div>
  52 +
  53 + <div class="swiper-slide">
  54 + <div class="purdah-area ch black-bg purdah4">
  55 + <div class="arrow"></div>
  56 + <div class="lamp"></div>
  57 + <div class="stage"></div>
  58 + <div class="purdah-open-left"></div>
  59 + <div class="purdah-open-right"></div>
  60 + <div class="video">
  61 + <video src="https://feature.yoho.cn/20160118171021/yohood_170118.mp4" id="video" preload="auto" webkit-playsinline playsinline controls="controls">
  62 + 您的浏览器不支持 video 标签。
  63 + </video>
  64 + </div>
  65 + </div>
  66 + </div>
  67 +
  68 + <div class="swiper-slide">
  69 + <div class="purdah-area ch black-bg purdah5">
  70 + <div class="arrow"></div>
  71 + <div class="lamp"></div>
  72 + <div class="stage"></div>
  73 + <div class="hand"></div>
  74 + <div class="purdah-open-left"></div>
  75 + <div class="purdah-open-right"></div>
  76 + <div class="date"></div>
  77 + <div class="spokesman"></div>
  78 + <div class="txt-black"></div>
  79 + <div class="txt-white"></div>
  80 + </div>
  81 + </div>
  82 +
  83 + <div class="swiper-slide account-bg">
  84 + <div class="account-1"></div>
  85 + <div class="arrow"></div>
  86 + </div>
  87 +
  88 + <div class="swiper-slide account-bg2">
  89 + {{#if hasBill}}
  90 + <div class="account-2-consume">
  91 + <div class="chop-hand"></div>
  92 + <div class="text-center consume-text">
  93 + 2016年<br>剁手<span class="red-color">{{orderNum}}</span>次<br>带走<span class="red-color">{{buyNum}}</span>件潮流单品<br>累积消费<span class="red-color">{{orderAmount}}</span>元<br>有货跋山涉水<span class="red-color">{{kilo}}</span>公里<br>只为您的潮流之旅
  94 + </div>
  95 + </div>
  96 + {{else}}
  97 + <div class="account-2-not"></div>
  98 + {{/if}}
  99 + <div class="arrow"></div>
  100 + </div>
  101 +
  102 + <div class="swiper-slide">
  103 + <div class="account-bg3">
  104 + {{#if hasBill}}
  105 + <div class="score2">
  106 + <p>综合这一年的潮流之旅</p>
  107 + <p>你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}} %</span>的潮人<br>获得</p>
  108 + </div>
  109 + {{else}}
  110 + <div class="score">2016年你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得</div>
  111 + {{/if}}
  112 + <div class="portrait-{{title}}"></div>
  113 + <div class="score-txt">称号</div>
  114 + </div>
  115 + {{#shareUrl}}
  116 + <a href="{{.}}" class="share-btn"></a>
  117 + {{/shareUrl}}
  118 + </div>
  119 + </div>
  120 +</div>
  121 +{{/data}}

141 KB | W: | H:

126 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

315 KB | W: | H:

307 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -3,44 +3,157 @@ @@ -3,44 +3,157 @@
3 * @author: wsl<shuiling.wang@yoho.cn> 3 * @author: wsl<shuiling.wang@yoho.cn>
4 * @date: 2017/01/17 4 * @date: 2017/01/17
5 */ 5 */
6 -  
7 require('activity/annual-account.page.css'); 6 require('activity/annual-account.page.css');
8 7
9 var Swiper = require('yoho-swiper'); 8 var Swiper = require('yoho-swiper');
10 - 9 +var share = require('../common/share');
11 var $ = require('yoho-jquery'); 10 var $ = require('yoho-jquery');
12 -var $commonH = $('.ch'),  
13 - $nav2Img = $('.nav2-img'),  
14 - $audio = $('#audio');  
15 - 11 +var $audio = $('#audio');
  12 +var $video = $('#video');
  13 +var audioStatus = true;
16 var mySwiper; 14 var mySwiper;
17 15
18 -$(function() {  
19 - $commonH.css({height: $(window).height()}); 16 +// 音频时间
  17 +function audioAction() {
20 document.addEventListener('WeixinJSBridgeReady', function() { 18 document.addEventListener('WeixinJSBridgeReady', function() {
21 $audio[0].play(); 19 $audio[0].play();
22 }, false); 20 }, false);
23 21
  22 + $('.audio-btn').on('click', function() {
  23 + if ($(this).hasClass('audio-f')) {
  24 + $(this).removeClass('audio-f');
  25 + $audio[0].play();
  26 + audioStatus = true;
  27 + } else {
  28 + $(this).addClass('audio-f');
  29 + $audio[0].pause();
  30 + audioStatus = false;
  31 + }
  32 + });
  33 +}
  34 +
  35 +// 监听视频
  36 +function listenVideo() {
  37 + $video[0].addEventListener('playing', function() {
  38 + $audio[0].pause();
  39 + });
  40 +
  41 + $video[0].addEventListener('pause', function() {
  42 + if (audioStatus) {
  43 + $audio[0].play();
  44 + }
  45 + });
  46 +
  47 + $video[0].addEventListener('ended', function() {
  48 + if (audioStatus) {
  49 + $audio[0].play();
  50 + }
  51 + });
  52 +}
  53 +
  54 +$(function() {
  55 + var $purdah1 = $('.purdah1'),
  56 + $nav2Img = $('.nav2-img'),
  57 + $purdahLeft = $('.purdah-left'),
  58 + $purdahRight = $('.purdah-right'),
  59 + $runMen = $('.run-men'),
  60 + $videoBox = $('.video'),
  61 + $spokesman = $('.spokesman'),
  62 + $tB = $('.txt-black'),
  63 + $tW = $('.txt-white'),
  64 + $hand = $('.hand'),
  65 + $commonH = $('.ch');
  66 +
  67 + $commonH.css({height: $(window).height()});
  68 +
  69 + audioAction();
  70 + listenVideo();
  71 +
  72 + share({
  73 + imgUrl: 'https://feature.yoho.cn/300x300.png',
  74 + title: 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>',
  75 + link: $('#s-url').val(),
  76 + desc: 'YOHO!2016潮流轨迹'
  77 + });
  78 +
24 mySwiper = new Swiper('.swiper-container', { 79 mySwiper = new Swiper('.swiper-container', {
25 direction: 'vertical', 80 direction: 'vertical',
26 noSwiping: true, 81 noSwiping: true,
27 noSwipingClass: 'stop-swiping', 82 noSwipingClass: 'stop-swiping',
28 onSlideChangeEnd: function(swiper) { 83 onSlideChangeEnd: function(swiper) {
29 - if (swiper.activeIndex === 1) { 84 + var aIndex = swiper.activeIndex;
  85 +
  86 + if (aIndex === 1) {
30 setTimeout(function() { 87 setTimeout(function() {
31 $nav2Img.addClass('n2-img-animation'); 88 $nav2Img.addClass('n2-img-animation');
32 - $('.purdah1').addClass('purdah1-animation'); 89 + $purdah1.addClass('purdah1-animation');
  90 + }, 300);
  91 + }
  92 +
  93 + if (aIndex === 2) {
  94 + $purdahLeft.addClass('purdah-l-animation');
  95 + $purdahRight.addClass('purdah-r-animation');
  96 + }
  97 +
  98 + if (aIndex === 3) {
  99 + $runMen.fadeIn(1000);
  100 + }
  101 +
  102 + if (aIndex !== 4) {
  103 + $video[0].pause();
  104 +
  105 + if (audioStatus) {
  106 + $audio[0].play();
  107 + }
  108 + }
  109 +
  110 + if (aIndex === 4) {
  111 + $videoBox.css({
  112 + opacity: 1
  113 + }).addClass('video-animation');
  114 + }
  115 +
  116 + if (aIndex === 5) {
  117 + $spokesman.addClass('spokesman-animation');
  118 + setTimeout(function() {
  119 + $tB.addClass('txt-animation');
33 }, 500); 120 }, 500);
  121 + setTimeout(function() {
  122 + $hand.addClass('hand-animation');
  123 + }, 1000);
  124 + setTimeout(function() {
  125 + $tW.addClass('txt-animation');
  126 + }, 1500);
34 } 127 }
35 }, 128 },
36 onSlideChangeStart: function(swiper) { 129 onSlideChangeStart: function(swiper) {
37 - if (swiper.activeIndex === 2 || swiper.previousIndex === 2) {  
38 - $('.purdah-left').addClass('purdah-l-animation');  
39 - $('.purdah-right').addClass('purdah-r-animation'); 130 + var aIndex = swiper.activeIndex;
  131 +
  132 + if (aIndex === 1 || aIndex === 3) {
  133 + $purdahLeft.removeClass('purdah-l-animation');
  134 + $purdahRight.removeClass('purdah-r-animation');
  135 + }
  136 +
  137 + if (aIndex === 0 || aIndex === 2) {
  138 + $nav2Img.removeClass('n2-img-animation');
  139 + $purdah1.removeClass('purdah1-animation');
40 } 140 }
41 141
42 - if (swiper.activeIndex === 3) {  
43 - $('.run-men').fadeIn(1000); 142 + if (aIndex === 2 || aIndex === 4) {
  143 + $runMen.hide();
  144 + }
  145 +
  146 + if (aIndex === 3 || aIndex === 5) {
  147 + $videoBox.css({
  148 + opacity: 0
  149 + }).removeClass('video-animation');
  150 + }
  151 +
  152 + if (aIndex === 4 || aIndex === 6) {
  153 + $spokesman.removeClass('spokesman-animation');
  154 + $tB.removeClass('txt-animation');
  155 + $hand.removeClass('hand-animation');
  156 + $tW.removeClass('txt-animation');
44 } 157 }
45 } 158 }
46 }); 159 });
@@ -49,34 +162,4 @@ $(function() { @@ -49,34 +162,4 @@ $(function() {
49 $('.start-btn').on('click', function() { 162 $('.start-btn').on('click', function() {
50 mySwiper.slideTo(1, 1000, true); 163 mySwiper.slideTo(1, 1000, true);
51 }); 164 });
52 -  
53 - // $('.purdah1').on('touchstart', function() {  
54 - // if (parseFloat($nav2Img.css('opacity')) > 0.2) {  
55 - // return false;  
56 - // }  
57 - //  
58 - // $('.purdah-left').addClass('purdah-l-animation');  
59 - // $('.purdah-right').addClass('purdah-r-animation');  
60 - // $('.font-img').addClass('font-img-animation');  
61 - // $('.hand').addClass('hand-animation');  
62 - // $('.purdah-area').addClass('black-bg');  
63 - // $(this).fadeOut(800);  
64 - //  
65 - // $('.purdah2').fadeIn(500);  
66 - // });  
67 - //  
68 - // $('.purdah2').on('touchstart', function() {  
69 - // $(this).fadeOut(800);  
70 - // $('.purdah3').fadeIn(500);  
71 - // });  
72 - //  
73 - // $('.purdah3').on('touchstart', function() {  
74 - // $('.purdah4').css({  
75 - // transition: 'all 1s',  
76 - // top: 0,  
77 - // opacity: 1,  
78 - // zIndex: 6,  
79 - // display: 'block'  
80 - // });  
81 - // });  
82 }); 165 });
@@ -2,6 +2,22 @@ @@ -2,6 +2,22 @@
2 width: 640px; 2 width: 640px;
3 overflow: hidden; 3 overflow: hidden;
4 4
  5 + .audio-btn {
  6 + width: 49px;
  7 + height: 49px;
  8 + background: resolve("activity/annual-account/audio-o.png") no-repeat;
  9 + background-size: contain;
  10 + position: fixed;
  11 + top: 30px;
  12 + right: 30px;
  13 + z-index: 99;
  14 + }
  15 +
  16 + .audio-f {
  17 + background: resolve("activity/annual-account/audio-f.png") no-repeat;
  18 + background-size: contain;
  19 + }
  20 +
5 .annual-bg { 21 .annual-bg {
6 width: 100%; 22 width: 100%;
7 background-image: resolve("activity/annual-account/bg.gif"); 23 background-image: resolve("activity/annual-account/bg.gif");
@@ -125,6 +141,28 @@ @@ -125,6 +141,28 @@
125 z-index: 2; 141 z-index: 2;
126 } 142 }
127 143
  144 + .purdah-open-left {
  145 + width: 48px;
  146 + height: 806px;
  147 + background: resolve("activity/annual-account/open-l.png") no-repeat;
  148 + background-size: contain;
  149 + position: absolute;
  150 + top: 0;
  151 + left: 0;
  152 + z-index: 2;
  153 + }
  154 +
  155 + .purdah-open-right {
  156 + width: 48px;
  157 + height: 812px;
  158 + background: resolve("activity/annual-account/open-r.png") no-repeat;
  159 + background-size: contain;
  160 + position: absolute;
  161 + top: 0;
  162 + right: 0;
  163 + z-index: 2;
  164 + }
  165 +
128 .purdah-l-animation { 166 .purdah-l-animation {
129 transition: all 1.5s; 167 transition: all 1.5s;
130 transform: translate(-85%, 0); 168 transform: translate(-85%, 0);
@@ -154,18 +192,21 @@ @@ -154,18 +192,21 @@
154 192
155 .hand { 193 .hand {
156 width: 100%; 194 width: 100%;
157 - height: 379px; 195 + height: 320px;
158 background: resolve("activity/annual-account/hand.png") no-repeat; 196 background: resolve("activity/annual-account/hand.png") no-repeat;
159 background-size: contain; 197 background-size: contain;
160 position: absolute; 198 position: absolute;
161 - bottom: 0; 199 + bottom: -320px;
162 left: 0; 200 left: 0;
163 - z-index: 5; 201 + z-index: -3;
  202 + opacity: 0;
164 } 203 }
165 204
166 .hand-animation { 205 .hand-animation {
167 - transition: all 1s;  
168 - opacity: 0; 206 + transition: all 0.5s;
  207 + bottom: 0;
  208 + opacity: 1;
  209 + z-index: 3;
169 } 210 }
170 211
171 .stage { 212 .stage {
@@ -189,7 +230,7 @@ @@ -189,7 +230,7 @@
189 } 230 }
190 231
191 &.purdah2-animation { 232 &.purdah2-animation {
192 - transition: all 1.5s; 233 + transition: all 1s;
193 transform: translate(0, -200%); 234 transform: translate(0, -200%);
194 opacity: 0; 235 opacity: 0;
195 } 236 }
@@ -267,33 +308,85 @@ @@ -267,33 +308,85 @@
267 308
268 .video { 309 .video {
269 width: 526px; 310 width: 526px;
270 - height: 779px; 311 + height: 775px;
271 background: resolve("activity/annual-account/video.png") no-repeat; 312 background: resolve("activity/annual-account/video.png") no-repeat;
272 background-size: contain; 313 background-size: contain;
273 - transition: all 1s;  
274 position: absolute; 314 position: absolute;
275 - z-index: 6;  
276 - top: 0;  
277 - left: 50px; 315 + z-index: -6;
  316 + top: -775px;
  317 + left: 60px;
  318 + opacity: 0;
278 319
279 - video { 320 + #video {
280 width: 472px; 321 width: 472px;
281 - height: 254px; 322 + height: 244px;
282 position: absolute; 323 position: absolute;
283 top: 483px; 324 top: 483px;
284 left: 25px; 325 left: 25px;
285 } 326 }
286 } 327 }
287 328
288 - .spokesman {  
289 - width: 499px;  
290 - height: 715px;  
291 - background: resolve("activity/annual-account/spokesman.png") no-repeat;  
292 - background-size: contain;  
293 - position: absolute; 329 + .video-animation {
  330 + transition: all 1s;
  331 + top: 0;
294 z-index: 6; 332 z-index: 6;
295 - top: 90px;  
296 - left: 70px; 333 + }
  334 +
  335 + &.purdah5 {
  336 + .date {
  337 + width: 242px;
  338 + height: 54px;
  339 + background: resolve("activity/annual-account/date.png") no-repeat;
  340 + background-size: contain;
  341 + margin: 90px auto 0;
  342 + }
  343 +
  344 + .spokesman {
  345 + width: 0;
  346 + height: 0;
  347 + background: resolve("activity/annual-account/men.png") no-repeat;
  348 + background-size: contain;
  349 + position: absolute;
  350 + left: 117px;
  351 + top: 122px;
  352 + z-index: 1;
  353 + }
  354 +
  355 + .spokesman-animation {
  356 + transition: all 0.5s;
  357 + width: 404px;
  358 + height: 592px;
  359 + transform: rotate(360deg) scale(1);
  360 + }
  361 +
  362 + .txt-black {
  363 + width: 499px;
  364 + height: 238px;
  365 + background: resolve("activity/annual-account/text-b.png") no-repeat;
  366 + background-size: contain;
  367 + position: absolute;
  368 + top: 498px;
  369 + left: 70px;
  370 + z-index: 3;
  371 + opacity: 0;
  372 + }
  373 +
  374 + .txt-white {
  375 + width: 482px;
  376 + height: 105px;
  377 + background: resolve("activity/annual-account/text-w.png") no-repeat;
  378 + background-size: contain;
  379 + position: absolute;
  380 + left: 72px;
  381 + top: 704px;
  382 + z-index: 4;
  383 + opacity: 0;
  384 + }
  385 +
  386 + .txt-animation {
  387 + transition: all 0.8s;
  388 + opacity: 1;
  389 + }
297 } 390 }
298 } 391 }
299 392
@@ -317,7 +410,7 @@ @@ -317,7 +410,7 @@
317 background: resolve("activity/annual-account/account-1.png") no-repeat; 410 background: resolve("activity/annual-account/account-1.png") no-repeat;
318 background-size: contain; 411 background-size: contain;
319 position: absolute; 412 position: absolute;
320 - left: 100px; 413 + left: 70px;
321 top: 48px; 414 top: 48px;
322 } 415 }
323 416
@@ -333,7 +426,7 @@ @@ -333,7 +426,7 @@
333 426
334 .account-2-consume { 427 .account-2-consume {
335 position: absolute; 428 position: absolute;
336 - left: 120px; 429 + left: 70px;
337 top: 100px; 430 top: 100px;
338 431
339 .chop-hand { 432 .chop-hand {