fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit 0addd0f95b7a1120d3dcfb024dbde17f8af60551 2 parents f0b0dc70 16d45d47

Merge branch 'release/5.4' into 'grey' 

Release/5.4



See merge request !203
Inline Side-by-side
Showing 86 changed files with 1303 additions and 4 deletions
  1 +/**
  2 + * 2016年度账单
  3 + * @author: wsl<shuiling.wang@yoho.cn>
  4 + * @date: 2017/01/17
  5 + */
  6 +'use strict';
  7 +const helpers = global.yoho.helpers;
  8 +const annualAccountModel = require('../models/annual-account');
  9 +const title = 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>';
  10 +
  11 +const index = (req, res, next) => {
  12 + let isApp = req.query.app_version || req.query.appVersion ? true : false;
  13 + let shareUrl = false;
  14 + let uid = +req.query.uid || +req.user.uid;
  15 + let curUrl = 'http://m.yohobuy.com/activity/annual-account';
  16 +
  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
  23 +
  24 + if (isApp) {
  25 + shareUrl = helpers.appUrlFormat(curUrl, 'go.share', {
  26 + pic: 'https://feature.yoho.cn/300x300.png',
  27 + title: title,
  28 + url: sUrl,
  29 + content: 'YOHO!BUY有货2016潮流轨迹'
  30 + });
  31 + }
  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);
  44 +};
  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 +
  92 +const share = (req, res) => {
  93 + let q = req.query;
  94 +
  95 + res.render('annual-account/share', {
  96 + module: 'activity',
  97 + page: 'annual-account',
  98 + title: title,
  99 + localCss: true,
  100 + data: Object.assign({
  101 + sUrl: req.originalUrl
  102 + }, q)
  103 + });
  104 +};
  105 +
  106 +module.exports = {
  107 + index,
  108 + share
  109 +};
  1 +/**
  2 + * 2016年度账单
  3 + * @author: wsl<shuiling.wang@yoho.cn>
  4 + * @date: 2017/01/18
  5 + */
  6 +'use strict';
  7 +const serviceAPI = global.yoho.ServiceAPI;
  8 +
  9 +const getAccountData = (params) => {
  10 + return serviceAPI.get('/activity/YearMemberBillController/getBillByUid', params, {code: 200});
  11 +};
  12 +
  13 +module.exports = {
  14 + getAccountData
  15 +};
@@ -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`);
@@ -37,8 +37,7 @@ const individuation = require(`${cRoot}/individuation`); @@ -37,8 +37,7 @@ const individuation = require(`${cRoot}/individuation`);
37 const appDownloads = require(`${cRoot}/app-downloads`); 37 const appDownloads = require(`${cRoot}/app-downloads`);
38 38
39 const redbag = require(`${cRoot}/redbag`); 39 const redbag = require(`${cRoot}/redbag`);
40 -  
41 -const auth = require('../../doraemon/middleware/auth'); 40 +const annualAccount = require(`${cRoot}/annual-account`);
42 41
43 // routers 42 // routers
44 43
@@ -162,6 +161,9 @@ router.get('/redbag/2017', redbag.index); @@ -162,6 +161,9 @@ router.get('/redbag/2017', redbag.index);
162 // 获取活动页面个性化推荐商品数据 161 // 获取活动页面个性化推荐商品数据
163 router.get('/individuation', individuation.productLst); 162 router.get('/individuation', individuation.productLst);
164 163
  164 +// 2016 年度账单
  165 +router.get('/annual-account', auth, annualAccount.index);
  166 +router.get('/annual-account/share', annualAccount.share);
165 router.get('/app-downloads', appDownloads.index); 167 router.get('/app-downloads', appDownloads.index);
166 168
167 module.exports = router; 169 module.exports = router;
  1 +{{#data}}
  2 +<div class="annual-account-page ch" data-login="{{loginUrl}}" data-is-app="{{isApp}}">
  3 + <div class="annual-bg ch"></div>
  4 + <input type="hidden" value="{{sUrl}}" id="s-url">
  5 + <div class="audio-btn"></div>
  6 + <audio preload="auto" loop="loop" id="audio">
  7 + <source src="http://feature.yoho.cn/20160118171021/170119.mp3" type="audio/mp3">
  8 + Your browser does not support the audio element.
  9 + </audio>
  10 + <div class="swiper-container ch">
  11 + <div class="swiper-wrapper">
  12 + <div class="swiper-slide nav-1">
  13 + <div class="start-btn"></div>
  14 + </div>
  15 + <div class="swiper-slide">
  16 + <div class="nav-2">
  17 + <div class="nav2-img ch"></div>
  18 + </div>
  19 +
  20 + <div class="purdah1 ch">
  21 + <div class="arrow"></div>
  22 + </div>
  23 + </div>
  24 + <div class="swiper-slide">
  25 + <div class="purdah-area ch black-bg">
  26 + <div class="arrow"></div>
  27 + <div class="lamp"></div>
  28 + <div class="stage"></div>
  29 + <div class="purdah-left"></div>
  30 + <div class="purdah-right"></div>
  31 + <div class="purdah2">
  32 + <div class="month-4"></div>
  33 + <div class="month-list">
  34 + <ul></ul>
  35 + </div>
  36 + </div>
  37 + </div>
  38 + </div>
  39 + <div class="swiper-slide">
  40 + <div class="purdah-area ch black-bg purdah3">
  41 + <div class="arrow"></div>
  42 + <div class="lamp"></div>
  43 + <div class="stage"></div>
  44 + <div class="purdah-open-left"></div>
  45 + <div class="purdah-open-right"></div>
  46 + <div class="run-men"></div>
  47 + </div>
  48 + </div>
  49 +
  50 + <div class="swiper-slide">
  51 + <div class="purdah-area ch black-bg purdah4">
  52 + <div class="arrow"></div>
  53 + <div class="lamp"></div>
  54 + <div class="stage"></div>
  55 + <div class="purdah-open-left"></div>
  56 + <div class="purdah-open-right"></div>
  57 + <div class="video">
  58 + <video id="video" preload="auto" webkit-playsinline playsinline controls="controls">
  59 + <source src="https://feature.yoho.cn/20160118171021/yohood_170118.mp4" type="video/mp4">
  60 + 您的浏览器不支持 video 标签。
  61 + </video>
  62 + </div>
  63 + </div>
  64 + </div>
  65 +
  66 + <div class="swiper-slide">
  67 + <div class="purdah-area ch black-bg purdah5">
  68 + <div class="arrow"></div>
  69 + <div class="lamp"></div>
  70 + <div class="stage"></div>
  71 + <div class="hand"></div>
  72 + <div class="purdah-open-left"></div>
  73 + <div class="purdah-open-right"></div>
  74 + <div class="date"></div>
  75 + <div class="spokesman"></div>
  76 + <div class="txt-black"></div>
  77 + <div class="txt-white"></div>
  78 + </div>
  79 + </div>
  80 +
  81 + <div class="swiper-slide account-bg">
  82 + <div class="account-1"></div>
  83 + <div class="arrow"></div>
  84 + </div>
  85 +
  86 + <div class="swiper-slide account-bg2">
  87 + {{#if hasBill}}
  88 + <div class="account-2-consume">
  89 + <div class="chop-hand"></div>
  90 + <div class="text-center consume-text">
  91 + 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>只为您的潮流之旅
  92 + </div>
  93 + </div>
  94 + {{else}}
  95 + <div class="account-2-not"></div>
  96 + {{/if}}
  97 + <div class="arrow"></div>
  98 + </div>
  99 +
  100 + <div class="swiper-slide">
  101 + <div class="account-bg3">
  102 + {{#if hasBill}}
  103 + <div class="score2">
  104 + <p>综合这一年的潮流之旅</p>
  105 + <p>你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}} %</span>的潮人<br>获得</p>
  106 + </div>
  107 + {{else}}
  108 + <div class="score">2016年你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得</div>
  109 + {{/if}}
  110 + <div class="portrait-{{title}}"></div>
  111 + <div class="score-txt">称号</div>
  112 + </div>
  113 + {{#shareUrl}}
  114 + <a href="{{.}}" class="share-btn"></a>
  115 + {{/shareUrl}}
  116 + </div>
  117 + </div>
  118 + </div>
  119 +</div>
  120 +{{/data}}
  1 +{{# data}}
  2 +<div class="annual-account-page ch account-share-page">
  3 + <input type="hidden" value="{{sUrl}}" id="s-url">
  4 + <div class="account-bg3">
  5 + <div class="share-txt">
  6 + <span class="name">{{name}}</span><br>的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得
  7 + </div>
  8 + <div class="portrait-{{n}}"></div>
  9 + <div class="share-txt">称号</div>
  10 + <a class="create-btn" href="/activity/annual-account"></a>
  11 + </div>
  12 +</div>
  13 +{{/ data}}
1 { 1 {
2 "name": "m-yohobuy-node", 2 "name": "m-yohobuy-node",
3 - "version": "5.4.0", 3 + "version": "5.4.1",
4 "private": true, 4 "private": true,
5 "description": "A New Yohobuy Project With Express", 5 "description": "A New Yohobuy Project With Express",
6 "repository": { 6 "repository": {
  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}}
  1 +/**
  2 + * 2016年度账单
  3 + * @author: wsl<shuiling.wang@yoho.cn>
  4 + * @date: 2017/01/17
  5 + */
  6 +require('activity/annual-account.page.css');
  7 +
  8 +var Swiper = require('yoho-swiper');
  9 +var share = require('../common/share');
  10 +var $ = require('yoho-jquery');
  11 +var $audio = $('#audio');
  12 +var $video = $('#video');
  13 +var audioStatus = true;
  14 +var mySwiper;
  15 +
  16 +// 音频时间
  17 +function audioAction() {
  18 + document.addEventListener('WeixinJSBridgeReady', function() {
  19 + $audio[0].play();
  20 + }, false);
  21 +
  22 + setTimeout(function() {
  23 + $audio[0].play();
  24 + }, 1000);
  25 +
  26 + $('.audio-btn').on('click', function() {
  27 + if ($audio[0].paused) {
  28 + $(this).removeClass('audio-f');
  29 + $audio[0].play();
  30 + audioStatus = true;
  31 + } else {
  32 + $(this).addClass('audio-f');
  33 + $audio[0].pause();
  34 + audioStatus = false;
  35 + }
  36 + });
  37 +}
  38 +
  39 +// 监听视频
  40 +function listenVideo() {
  41 + $video[0].addEventListener('playing', function() {
  42 + $audio[0].pause();
  43 + });
  44 +
  45 + $video[0].addEventListener('pause', function() {
  46 + if (audioStatus) {
  47 + $audio[0].play();
  48 + }
  49 + });
  50 +
  51 + $video[0].addEventListener('ended', function() {
  52 + if (audioStatus) {
  53 + $audio[0].play();
  54 + }
  55 + });
  56 +}
  57 +
  58 +$(function() {
  59 + var $purdah1 = $('.purdah1'),
  60 + $nav2Img = $('.nav2-img'),
  61 + $purdahLeft = $('.purdah-left'),
  62 + $purdahRight = $('.purdah-right'),
  63 + $runMen = $('.run-men'),
  64 + $videoBox = $('.video'),
  65 + $spokesman = $('.spokesman'),
  66 + $tB = $('.txt-black'),
  67 + $tW = $('.txt-white'),
  68 + $hand = $('.hand'),
  69 + $commonH = $('.ch'),
  70 + $monthList = $('.month-list');
  71 + var tbTime, handTime, twTime;
  72 +
  73 + $commonH.css({height: $(window).height()});
  74 +
  75 + audioAction();
  76 + listenVideo();
  77 +
  78 + share({
  79 + imgUrl: 'https://feature.yoho.cn/300x300.png',
  80 + title: 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>',
  81 + link: $('#s-url').val(),
  82 + desc: 'YOHO!BUY有货2016潮流轨迹'
  83 + });
  84 +
  85 + mySwiper = new Swiper('.swiper-container', {
  86 + direction: 'vertical',
  87 + onTransitionEnd: function(swiper) {
  88 + var aIndex = swiper.activeIndex;
  89 + var i = 1;
  90 +
  91 + if (aIndex === 1) {
  92 + setTimeout(function() {
  93 + $nav2Img.addClass('n2-img-animation');
  94 + $purdah1.addClass('purdah1-animation');
  95 + }, 300);
  96 + }
  97 +
  98 + if (aIndex === 2) {
  99 + $purdahLeft.addClass('purdah-l-animation');
  100 + $purdahRight.addClass('purdah-r-animation');
  101 + if ($monthList.find('li').length === 0) {
  102 + for (i; i <= 32; i++) {
  103 + if (i === 7) {
  104 + $monthList.find('ul').append('<li class="goods-' + i + '"><div class="goods-gif-' + i + '"></div></li>');
  105 + } else {
  106 + $monthList.find('ul').append('<li class="goods-' + i + '"></li>');
  107 + }
  108 + }
  109 + }
  110 + $monthList.fadeIn();
  111 + }
  112 +
  113 + if (aIndex === 3) {
  114 + $runMen.fadeIn();
  115 + }
  116 +
  117 + if (aIndex !== 4) {
  118 + $video[0].pause();
  119 + if (audioStatus) {
  120 + $audio[0].play();
  121 + }
  122 + }
  123 +
  124 + if (aIndex === 4) {
  125 + $videoBox.addClass('video-animation');
  126 + setTimeout(function() {
  127 + $('#video').show();
  128 + }, 600);
  129 + }
  130 +
  131 + if (aIndex === 5) {
  132 + $spokesman.addClass('spokesman-animation');
  133 + tbTime = setTimeout(function() {
  134 + $tB.addClass('txt-animation');
  135 + }, 500);
  136 + handTime = setTimeout(function() {
  137 + $hand.addClass('hand-animation');
  138 + }, 1000);
  139 + twTime = setTimeout(function() {
  140 + $tW.addClass('txt-animation');
  141 + }, 1500);
  142 + }
  143 + },
  144 + onSlideChangeStart: function(swiper) {
  145 + var aIndex = swiper.activeIndex;
  146 +
  147 + if (aIndex === 1 || aIndex === 3) {
  148 + $purdahLeft.removeClass('purdah-l-animation');
  149 + $purdahRight.removeClass('purdah-r-animation');
  150 + $monthList.fadeOut();
  151 + $monthList.find('ul').scrollLeft(0);
  152 + }
  153 +
  154 + if (aIndex === 0 || aIndex === 2) {
  155 + $nav2Img.removeClass('n2-img-animation');
  156 + $purdah1.removeClass('purdah1-animation');
  157 + }
  158 +
  159 + if (aIndex === 2 || aIndex === 4) {
  160 + $runMen.hide();
  161 + }
  162 +
  163 + if (aIndex === 3 || aIndex === 5) {
  164 + $videoBox.removeClass('video-animation');
  165 + $('#video').hide();
  166 + }
  167 +
  168 + if (aIndex === 4 || aIndex === 6) {
  169 + clearTimeout(tbTime);
  170 + clearTimeout(twTime);
  171 + clearTimeout(handTime);
  172 + $spokesman.removeClass('spokesman-animation');
  173 + $tB.removeClass('txt-animation');
  174 + $hand.removeClass('hand-animation');
  175 + $tW.removeClass('txt-animation');
  176 + }
  177 + }
  178 + });
  179 +
  180 + // 开启2016潮流轨迹按钮
  181 + $('.start-btn').on('click', function() {
  182 + mySwiper.slideTo(1, 1000, true);
  183 + });
  184 +});
  1 +@import "../layout/_swiper.css";
  2 +@import "annual-account/index";
  1 +.annual-account-page {
  2 + width: 640px;
  3 + overflow: hidden;
  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 +
  21 + .annual-bg {
  22 + width: 100%;
  23 + background-image: resolve("activity/annual-account/bg.gif");
  24 + background-size: cover;
  25 + position: fixed;
  26 + left: 0;
  27 + top: 0;
  28 + z-index: -1;
  29 + }
  30 +
  31 + .nav-1 {
  32 + width: 100%;
  33 + background: resolve("activity/annual-account/account-bg.png") no-repeat;
  34 + background-size: 100% 100%;
  35 + }
  36 +
  37 + .start-btn {
  38 + width: 447px;
  39 + height: 109px;
  40 + background: resolve("activity/annual-account/start-btn.png") no-repeat;
  41 + background-size: contain;
  42 + position: absolute;
  43 + bottom: 44px;
  44 + left: 93px;
  45 + }
  46 +
  47 + .nav-2 {
  48 + width: 583px;
  49 + margin: 0 auto;
  50 + background: resolve("activity/annual-account/nav-2-bg.png") no-repeat;
  51 + background-size: 100% 100%;
  52 +
  53 + .nav2-img {
  54 + width: 583px;
  55 + margin: 0 auto;
  56 + background: resolve("activity/annual-account/nav-2-bg2.png") no-repeat;
  57 + background-size: 100% 100%;
  58 + }
  59 +
  60 + .n2-img-animation {
  61 + transition: all 1.2s;
  62 + transform: scale(1.5);
  63 + opacity: 0;
  64 + }
  65 + }
  66 +
  67 + .purdah1 {
  68 + background: resolve("activity/annual-account/nav-2-big.jpg") no-repeat;
  69 + width: 100%;
  70 + background-size: 100% 100%;
  71 + position: absolute;
  72 + left: 0;
  73 + top: 0;
  74 + opacity: 0;
  75 +
  76 + &.purdah1-animation {
  77 + transition: all 1.2s;
  78 + opacity: 1;
  79 + }
  80 + }
  81 +
  82 + .arrow {
  83 + width: 94px;
  84 + height: 37px;
  85 + background: resolve("activity/annual-account/arrow.png") no-repeat;
  86 + background-size: contain;
  87 + position: absolute;
  88 + bottom: 20px;
  89 + left: 50%;
  90 + margin-left: -47px;
  91 + z-index: 6;
  92 + }
  93 +
  94 + .purdah-area {
  95 + width: 100%;
  96 + background: #fff;
  97 + position: absolute;
  98 + top: 0;
  99 + left: 0;
  100 +
  101 + &.p-area-animation {
  102 + transition: all 1.5s;
  103 + opacity: 1;
  104 + }
  105 +
  106 + &.black-bg {
  107 + background: #202020;
  108 + }
  109 +
  110 + .lamp {
  111 + width: 100%;
  112 + height: 74px;
  113 + background: resolve("activity/annual-account/lamp.png") no-repeat;
  114 + background-size: contain;
  115 + position: absolute;
  116 + top: 0;
  117 + left: 0;
  118 + z-index: 4;
  119 + }
  120 +
  121 + .purdah-left {
  122 + width: 326px;
  123 + height: 806px;
  124 + background: resolve("activity/annual-account/left.png") no-repeat;
  125 + background-size: 100%;
  126 + position: absolute;
  127 + top: 0;
  128 + left: 0;
  129 + z-index: 3;
  130 + }
  131 +
  132 + .purdah-right {
  133 + width: 344px;
  134 + height: 812px;
  135 + background: resolve("activity/annual-account/right.png") no-repeat;
  136 + background-size: 100%;
  137 + position: absolute;
  138 + right: 0;
  139 + top: 0;
  140 + z-index: 2;
  141 + }
  142 +
  143 + .purdah-open-left {
  144 + width: 48px;
  145 + height: 806px;
  146 + background: resolve("activity/annual-account/open-l.png") no-repeat;
  147 + background-size: contain;
  148 + position: absolute;
  149 + top: 0;
  150 + left: 0;
  151 + z-index: 2;
  152 + }
  153 +
  154 + .purdah-open-right {
  155 + width: 48px;
  156 + height: 812px;
  157 + background: resolve("activity/annual-account/open-r.png") no-repeat;
  158 + background-size: contain;
  159 + position: absolute;
  160 + top: 0;
  161 + right: 0;
  162 + z-index: 2;
  163 + }
  164 +
  165 + .purdah-l-animation {
  166 + transition: all 1.2s;
  167 + transform: translate(-85%, 0);
  168 + }
  169 +
  170 + .purdah-r-animation {
  171 + transition: all 1.2s;
  172 + transform: translate(85%, 0);
  173 + }
  174 +
  175 + .font-img {
  176 + width: 527px;
  177 + height: 419px;
  178 + background: resolve("activity/annual-account/font.png") no-repeat;
  179 + background-size: contain;
  180 + position: absolute;
  181 + top: 185px;
  182 + left: 55px;
  183 + z-index: 5;
  184 + }
  185 +
  186 + .font-img-animation {
  187 + transition: all 1s;
  188 + transform: translate(0, -120%);
  189 + opacity: 0;
  190 + }
  191 +
  192 + .hand {
  193 + width: 100%;
  194 + height: 320px;
  195 + background: resolve("activity/annual-account/hand.png") no-repeat;
  196 + background-size: contain;
  197 + position: absolute;
  198 + bottom: -320px;
  199 + left: 0;
  200 + z-index: -3;
  201 + opacity: 0;
  202 + }
  203 +
  204 + .hand-animation {
  205 + transition: all 0.4s;
  206 + bottom: 0;
  207 + opacity: 1;
  208 + z-index: 3;
  209 + }
  210 +
  211 + .stage {
  212 + width: 100%;
  213 + height: 448px;
  214 + background: resolve("activity/annual-account/stage.png") no-repeat;
  215 + background-size: contain;
  216 + position: absolute;
  217 + bottom: 0;
  218 + left: 0;
  219 + z-index: 1;
  220 + }
  221 +
  222 + .purdah2 {
  223 + .month-4 {
  224 + width: 526px;
  225 + height: 613px;
  226 + background: resolve("activity/annual-account/4month.png") no-repeat;
  227 + background-size: contain;
  228 + margin: 0 auto;
  229 + position: relative;
  230 + z-index: 1;
  231 + }
  232 +
  233 + &.purdah2-animation {
  234 + transition: all 1s;
  235 + transform: translate(0, -200%);
  236 + opacity: 0;
  237 + }
  238 + }
  239 +
  240 + .month-list {
  241 + position: absolute;
  242 + left: 40px;
  243 + top: 535px;
  244 + z-index: 1;
  245 + width: 550px;
  246 + height: 370px;
  247 + overflow: hidden;
  248 + display: none;
  249 +
  250 + ul {
  251 + white-space: nowrap;
  252 + overflow-x: scroll;
  253 + width: 570px;
  254 + height: 390px;
  255 + padding-right: 20px;
  256 + }
  257 +
  258 + li {
  259 + display: inline-block;
  260 + height: 370px;
  261 + }
  262 +
  263 + .goods-1 {
  264 + width: 222px;
  265 + background: resolve("activity/annual-account/annual-goods-1.png") no-repeat;
  266 + background-size: contain;
  267 + margin-left: 35px;
  268 + }
  269 +
  270 + .goods-2 {
  271 + width: 250px;
  272 + background: resolve("activity/annual-account/annual-goods-2.png") no-repeat;
  273 + background-size: contain;
  274 + }
  275 +
  276 + .goods-3 {
  277 + width: 259px;
  278 + background: resolve("activity/annual-account/annual-goods-3.png") no-repeat;
  279 + background-size: contain;
  280 + }
  281 +
  282 + .goods-4 {
  283 + width: 267px;
  284 + background: resolve("activity/annual-account/annual-goods-4.png") no-repeat;
  285 + background-size: contain;
  286 + }
  287 +
  288 + .goods-5 {
  289 + width: 261px;
  290 + background: resolve("activity/annual-account/annual-goods-5.png") no-repeat;
  291 + background-size: contain;
  292 + }
  293 +
  294 + .goods-6 {
  295 + width: 262px;
  296 + background: resolve("activity/annual-account/annual-goods-6.png") no-repeat;
  297 + background-size: contain;
  298 + }
  299 +
  300 + .goods-7 {
  301 + width: 315px;
  302 + background: resolve("activity/annual-account/annual-goods-7.png") no-repeat;
  303 + background-size: contain;
  304 + }
  305 +
  306 + .goods-gif-7 {
  307 + width: 251px;
  308 + height: 182px;
  309 + background-image: resolve("activity/annual-account/annual-goods-7.gif");
  310 + background-size: contain;
  311 + margin: 108px auto 0;
  312 + }
  313 +
  314 + .goods-8 {
  315 + width: 266px;
  316 + background: resolve("activity/annual-account/annual-goods-8.png") no-repeat;
  317 + background-size: contain;
  318 + }
  319 +
  320 + .goods-9 {
  321 + width: 283px;
  322 + background: resolve("activity/annual-account/annual-goods-9.png") no-repeat;
  323 + background-size: contain;
  324 + }
  325 +
  326 + .goods-10 {
  327 + width: 299px;
  328 + background: resolve("activity/annual-account/annual-goods-10.png") no-repeat;
  329 + background-size: contain;
  330 + }
  331 +
  332 + .goods-11 {
  333 + width: 292px;
  334 + background: resolve("activity/annual-account/annual-goods-11.png") no-repeat;
  335 + background-size: contain;
  336 + }
  337 +
  338 + .goods-12 {
  339 + width: 232px;
  340 + background: resolve("activity/annual-account/annual-goods-12.png") no-repeat;
  341 + background-size: contain;
  342 + }
  343 +
  344 + .goods-13 {
  345 + width: 293px;
  346 + background: resolve("activity/annual-account/annual-goods-13.png") no-repeat;
  347 + background-size: contain;
  348 + }
  349 +
  350 + .goods-14 {
  351 + width: 297px;
  352 + background: resolve("activity/annual-account/annual-goods-14.png") no-repeat;
  353 + background-size: contain;
  354 + }
  355 +
  356 + .goods-15 {
  357 + width: 291px;
  358 + background: resolve("activity/annual-account/annual-goods-15.png") no-repeat;
  359 + background-size: contain;
  360 + }
  361 +
  362 + .goods-16 {
  363 + width: 303px;
  364 + background: resolve("activity/annual-account/annual-goods-16.png") no-repeat;
  365 + background-size: contain;
  366 + }
  367 +
  368 + .goods-17 {
  369 + width: 274px;
  370 + background: resolve("activity/annual-account/annual-goods-17.png") no-repeat;
  371 + background-size: contain;
  372 + }
  373 +
  374 + .goods-18 {
  375 + width: 336px;
  376 + background: resolve("activity/annual-account/annual-goods-18.png") no-repeat;
  377 + background-size: contain;
  378 + }
  379 +
  380 + .goods-19 {
  381 + width: 346px;
  382 + background: resolve("activity/annual-account/annual-goods-19.png") no-repeat;
  383 + background-size: contain;
  384 + }
  385 +
  386 + .goods-20 {
  387 + width: 336px;
  388 + background: resolve("activity/annual-account/annual-goods-20.png") no-repeat;
  389 + background-size: contain;
  390 + }
  391 +
  392 + .goods-21 {
  393 + width: 274px;
  394 + background: resolve("activity/annual-account/annual-goods-21.png") no-repeat;
  395 + background-size: contain;
  396 + }
  397 +
  398 + .goods-22 {
  399 + width: 303px;
  400 + background: resolve("activity/annual-account/annual-goods-22.png") no-repeat;
  401 + background-size: contain;
  402 + }
  403 +
  404 + .goods-23 {
  405 + width: 319px;
  406 + background: resolve("activity/annual-account/annual-goods-23.png") no-repeat;
  407 + background-size: contain;
  408 + }
  409 +
  410 + .goods-24 {
  411 + width: 297px;
  412 + background: resolve("activity/annual-account/annual-goods-24.png") no-repeat;
  413 + background-size: contain;
  414 + }
  415 +
  416 + .goods-25 {
  417 + width: 332px;
  418 + background: resolve("activity/annual-account/annual-goods-25.png") no-repeat;
  419 + background-size: contain;
  420 + }
  421 +
  422 + .goods-26 {
  423 + width: 301px;
  424 + background: resolve("activity/annual-account/annual-goods-26.png") no-repeat;
  425 + background-size: contain;
  426 + }
  427 +
  428 + .goods-27 {
  429 + width: 276px;
  430 + background: resolve("activity/annual-account/annual-goods-27.png") no-repeat;
  431 + background-size: contain;
  432 + }
  433 +
  434 + .goods-28 {
  435 + width: 313px;
  436 + background: resolve("activity/annual-account/annual-goods-28.png") no-repeat;
  437 + background-size: contain;
  438 + }
  439 +
  440 + .goods-29 {
  441 + width: 320px;
  442 + background: resolve("activity/annual-account/annual-goods-29.png") no-repeat;
  443 + background-size: contain;
  444 + }
  445 +
  446 + .goods-30 {
  447 + width: 331px;
  448 + background: resolve("activity/annual-account/annual-goods-30.png") no-repeat;
  449 + background-size: contain;
  450 + }
  451 +
  452 + .goods-31 {
  453 + width: 316px;
  454 + background: resolve("activity/annual-account/annual-goods-31.png") no-repeat;
  455 + background-size: contain;
  456 + }
  457 +
  458 + .goods-32 {
  459 + width: 304px;
  460 + background: resolve("activity/annual-account/annual-goods-32.png") no-repeat;
  461 + background-size: contain;
  462 + }
  463 + }
  464 +
  465 + .run-men {
  466 + width: 524px;
  467 + height: 683px;
  468 + background: resolve("activity/annual-account/run-men.png") no-repeat;
  469 + background-size: contain;
  470 + z-index: 5;
  471 + position: absolute;
  472 + left: 60px;
  473 + top: 80px;
  474 + display: none;
  475 + }
  476 +
  477 + .video {
  478 + width: 526px;
  479 + height: 775px;
  480 + background: resolve("activity/annual-account/video.png") no-repeat;
  481 + background-size: contain;
  482 + position: absolute;
  483 + z-index: -6;
  484 + top: -775px;
  485 + left: 60px;
  486 + opacity: 0;
  487 +
  488 + #video {
  489 + width: 472px;
  490 + height: 244px;
  491 + position: absolute;
  492 + top: 483px;
  493 + left: 25px;
  494 + display: none;
  495 + }
  496 + }
  497 +
  498 + .video-animation {
  499 + transition: all 0.6s;
  500 + top: 0;
  501 + opacity: 1;
  502 + z-index: 6;
  503 + }
  504 +
  505 + &.purdah5 {
  506 + .date {
  507 + width: 242px;
  508 + height: 54px;
  509 + background: resolve("activity/annual-account/date.png") no-repeat;
  510 + background-size: contain;
  511 + margin: 90px auto 0;
  512 + }
  513 +
  514 + .spokesman {
  515 + width: 0;
  516 + height: 0;
  517 + background: resolve("activity/annual-account/men.png") no-repeat;
  518 + background-size: contain;
  519 + position: absolute;
  520 + left: 117px;
  521 + top: 122px;
  522 + z-index: 1;
  523 + }
  524 +
  525 + .spokesman-animation {
  526 + transition: all 0.4s;
  527 + width: 404px;
  528 + height: 592px;
  529 + transform: rotate(360deg) scale(1);
  530 + }
  531 +
  532 + .txt-black {
  533 + width: 499px;
  534 + height: 238px;
  535 + background: resolve("activity/annual-account/text-b.png") no-repeat;
  536 + background-size: contain;
  537 + position: absolute;
  538 + top: 498px;
  539 + left: 70px;
  540 + z-index: 3;
  541 + opacity: 0;
  542 + }
  543 +
  544 + .txt-white {
  545 + width: 482px;
  546 + height: 105px;
  547 + background: resolve("activity/annual-account/text-w.png") no-repeat;
  548 + background-size: contain;
  549 + position: absolute;
  550 + left: 72px;
  551 + top: 704px;
  552 + z-index: 4;
  553 + opacity: 0;
  554 + }
  555 +
  556 + .txt-animation {
  557 + transition: all 0.8s;
  558 + opacity: 1;
  559 + }
  560 + }
  561 + }
  562 +
  563 + .account-bg {
  564 + width: 583px;
  565 + background: resolve("activity/annual-account/nav-2-bg-2.png") no-repeat;
  566 + background-size: 100% 100%;
  567 + margin-left: 32px;
  568 + }
  569 +
  570 + .account-bg2 {
  571 + width: 583px;
  572 + background: resolve("activity/annual-account/nav-2-bg-3.png") no-repeat;
  573 + background-size: 100% 100%;
  574 + margin-left: 31px;
  575 + }
  576 +
  577 + .account-1 {
  578 + width: 427px;
  579 + height: 874px;
  580 + background: resolve("activity/annual-account/account-1.png") no-repeat;
  581 + background-size: contain;
  582 + position: absolute;
  583 + left: 70px;
  584 + top: 48px;
  585 + }
  586 +
  587 + .account-2-not {
  588 + width: 506px;
  589 + height: 880px;
  590 + background: resolve("activity/annual-account/not-consume.png") no-repeat;
  591 + background-size: contain;
  592 + position: absolute;
  593 + left: 33px;
  594 + top: 75px;
  595 + }
  596 +
  597 + .account-2-consume {
  598 + position: absolute;
  599 + left: 70px;
  600 + top: 100px;
  601 +
  602 + .chop-hand {
  603 + width: 349px;
  604 + height: 319px;
  605 + background: resolve("activity/annual-account/chop-hand.png") no-repeat;
  606 + background-size: contain;
  607 + margin: 0 auto;
  608 + }
  609 +
  610 + .consume-text {
  611 + font-size: 40px;
  612 + line-height: 60px;
  613 + font-weight: bold;
  614 + margin-top: 80px;
  615 + }
  616 + }
  617 +
  618 + .account-bg3 {
  619 + width: 578px;
  620 + height: 876px;
  621 + background: resolve("activity/annual-account/account-bg3.png") no-repeat;
  622 + background-size: contain;
  623 + position: absolute;
  624 + left: 32px;
  625 + top: 0;
  626 + z-index: 1;
  627 +
  628 + .score,
  629 + .score2 {
  630 + font-size: 40px;
  631 + line-height: 60px;
  632 + font-weight: bold;
  633 + margin-top: 85px;
  634 + text-align: center;
  635 + }
  636 +
  637 + .score2 {
  638 + margin-top: 65px;
  639 + font-size: 35px;
  640 + }
  641 +
  642 + .portrait-1 {
  643 + width: 500px;
  644 + height: 440px;
  645 + background: resolve("activity/annual-account/image-1.png") no-repeat;
  646 + background-size: contain;
  647 + margin: 0 auto;
  648 + }
  649 +
  650 + .portrait-2 {
  651 + width: 500px;
  652 + height: 432px;
  653 + background: resolve("activity/annual-account/image-2.png") no-repeat;
  654 + background-size: contain;
  655 + margin: 0 auto;
  656 + }
  657 +
  658 + .portrait-3 {
  659 + width: 500px;
  660 + height: 423px;
  661 + background: resolve("activity/annual-account/image-3.png") no-repeat;
  662 + background-size: contain;
  663 + margin: 0 auto;
  664 + }
  665 +
  666 + .portrait-4 {
  667 + width: 500px;
  668 + height: 422px;
  669 + background: resolve("activity/annual-account/image-4.png") no-repeat;
  670 + background-size: contain;
  671 + margin: 0 auto;
  672 + }
  673 +
  674 + .portrait-5 {
  675 + width: 500px;
  676 + height: 392px;
  677 + background: resolve("activity/annual-account/image-5.png") no-repeat;
  678 + background-size: contain;
  679 + margin: 0 auto;
  680 + }
  681 +
  682 + .score-txt {
  683 + font-size: 40px;
  684 + line-height: 60px;
  685 + font-weight: bold;
  686 + text-align: center;
  687 + }
  688 + }
  689 +
  690 + .red-color {
  691 + font-size: 50px;
  692 + color: #c90202;
  693 + }
  694 +
  695 + .share-btn {
  696 + width: 500px;
  697 + height: 109px;
  698 + background: resolve("activity/annual-account/share-btn.png") no-repeat;
  699 + background-size: contain;
  700 + position: absolute;
  701 + top: 848px;
  702 + left: 70px;
  703 + z-index: 2;
  704 + }
  705 +
  706 + &.account-share-page {
  707 + background: #c90302;
  708 +
  709 + .share-txt {
  710 + font-size: 35px;
  711 + line-height: 60px;
  712 + font-weight: bold;
  713 + text-align: center;
  714 + }
  715 +
  716 + .name {
  717 + font-size: 50px;
  718 + margin-top: 50px;
  719 + display: inline-block;
  720 + }
  721 +
  722 + .create-btn {
  723 + width: 500px;
  724 + height: 109px;
  725 + background: resolve("activity/annual-account/create-btn.png") no-repeat;
  726 + background-size: contain;
  727 + position: absolute;
  728 + top: 850px;
  729 + left: 40px;
  730 + z-index: 2;
  731 + }
  732 + }
  733 +}