fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit 2b2df5d0be30e619913258db59f4278de4695231 2 parents 2156582d 9d11986f

Merge branch 'feature/annual-account' into 'master' 

Feature/annual account

年度账单

See merge request !201
Inline Side-by-side
Showing 85 changed files with 1302 additions and 1 deletions
/**
* 2016年度账单
* @author: wsl<shuiling.wang@yoho.cn>
* @date: 2017/01/17
*/
'use strict';
const helpers = global.yoho.helpers;
const annualAccountModel = require('../models/annual-account');
const title = 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>';
const index = (req, res, next) => {
let isApp = req.query.app_version || req.query.appVersion ? true : false;
let shareUrl = false;
let uid = +req.query.uid || +req.user.uid;
let curUrl = 'http://m.yohobuy.com/activity/annual-account';
annualAccountModel.getAccountData({
uid: uid,
year: '2016'
}).then(result => {
let data = result.data || {};
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
if (isApp) {
shareUrl = helpers.appUrlFormat(curUrl, 'go.share', {
pic: 'https://feature.yoho.cn/300x300.png',
title: title,
url: sUrl,
content: 'YOHO!BUY有货2016潮流轨迹'
});
}
res.render('annual-account/index', {
module: 'activity',
page: 'annual-account',
localCss: true,
title: title,
data: Object.assign({
shareUrl: shareUrl,
sUrl: sUrl
}, data)
});
}).catch(next);
};
// const getData = (req, res, next) => {
// let isApp = req.query.app_version || req.query.appVersion ? true : false;
// let shareUrl = false;
// let uid = req.query.uid || req.user.uid;
// let curUrl = 'http://m.yohobuy.com/activity/annual-account';
// let loginUrl = helpers.urlFormat('/signin.html', {
// refer: '//m.yohobuy.com/activity/annual-account'
// });
//
// if (isApp) {
// loginUrl = helpers.appUrlFormat(curUrl, 'go.weblogin', {
// jumpurl: {
// url: curUrl
// }
// });
// }
//
// if (parseInt(uid, 10)) {
// annualAccountModel.getAccountData({
// uid: uid,
// year: '2016'
// }).then(result => {
// let data = result.data || {};
// 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
//
// if (isApp) {
// shareUrl = helpers.appUrlFormat(curUrl, 'go.share', {
// pic: 'https://feature.yoho.cn/300x300.png',
// title: title,
// url: sUrl,
// content: 'YOHO!2016潮流轨迹'
// });
// }
//
// res.json(Object.assign({
// shareUrl: shareUrl,
// sUrl: sUrl
// }, data));
// }).catch(next);
// } else {
// res.json({
// loginUrl: loginUrl
// });
// }
// };
const share = (req, res) => {
let q = req.query;
res.render('annual-account/share', {
module: 'activity',
page: 'annual-account',
title: title,
localCss: true,
data: Object.assign({
sUrl: req.originalUrl
}, q)
});
};
module.exports = {
index,
share
};
... ...
/**
* 2016年度账单
* @author: wsl<shuiling.wang@yoho.cn>
* @date: 2017/01/18
*/
'use strict';
const serviceAPI = global.yoho.ServiceAPI;
const getAccountData = (params) => {
return serviceAPI.get('/activity/YearMemberBillController/getBillByUid', params, {code: 200});
};
module.exports = {
getAccountData
};
... ...
... ... @@ -8,7 +8,7 @@
const router = require('express').Router(); // eslint-disable-line
const cRoot = './controllers';
const auth = require('../../doraemon/middleware/auth');
const demo = require(`${cRoot}/demo`);
const coupon = require(`${cRoot}/coupon`);
const wechat = require(`${cRoot}/wechat`);
... ... @@ -31,6 +31,7 @@ const studentMarket = require(`${cRoot}/student-market`);
const individuation = require(`${cRoot}/individuation`);
const appDownloads = require(`${cRoot}/app-downloads`);
const redbag = require(`${cRoot}/redbag`);
const annualAccount = require(`${cRoot}/annual-account`);
// routers
... ... @@ -136,6 +137,9 @@ router.get('/redbag/2017', redbag.index);
// 获取活动页面个性化推荐商品数据
router.get('/individuation', individuation.productLst);
// 2016 年度账单
router.get('/annual-account', auth, annualAccount.index);
router.get('/annual-account/share', annualAccount.share);
router.get('/app-downloads', appDownloads.index);
module.exports = router;
... ...
{{#data}}
<div class="annual-account-page ch" data-login="{{loginUrl}}" data-is-app="{{isApp}}">
<div class="annual-bg ch"></div>
<input type="hidden" value="{{sUrl}}" id="s-url">
<div class="audio-btn"></div>
<audio preload="auto" loop="loop" id="audio">
<source src="http://feature.yoho.cn/20160118171021/170119.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div class="swiper-container ch">
<div class="swiper-wrapper">
<div class="swiper-slide nav-1">
<div class="start-btn"></div>
</div>
<div class="swiper-slide">
<div class="nav-2">
<div class="nav2-img ch"></div>
</div>
<div class="purdah1 ch">
<div class="arrow"></div>
</div>
</div>
<div class="swiper-slide">
<div class="purdah-area ch black-bg">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="purdah-left"></div>
<div class="purdah-right"></div>
<div class="purdah2">
<div class="month-4"></div>
<div class="month-list">
<ul></ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="purdah-area ch black-bg purdah3">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="purdah-open-left"></div>
<div class="purdah-open-right"></div>
<div class="run-men"></div>
</div>
</div>
<div class="swiper-slide">
<div class="purdah-area ch black-bg purdah4">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="purdah-open-left"></div>
<div class="purdah-open-right"></div>
<div class="video">
<video id="video" preload="auto" webkit-playsinline playsinline controls="controls">
<source src="https://feature.yoho.cn/20160118171021/yohood_170118.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="purdah-area ch black-bg purdah5">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="hand"></div>
<div class="purdah-open-left"></div>
<div class="purdah-open-right"></div>
<div class="date"></div>
<div class="spokesman"></div>
<div class="txt-black"></div>
<div class="txt-white"></div>
</div>
</div>
<div class="swiper-slide account-bg">
<div class="account-1"></div>
<div class="arrow"></div>
</div>
<div class="swiper-slide account-bg2">
{{#if hasBill}}
<div class="account-2-consume">
<div class="chop-hand"></div>
<div class="text-center consume-text">
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>只为您的潮流之旅
</div>
</div>
{{else}}
<div class="account-2-not"></div>
{{/if}}
<div class="arrow"></div>
</div>
<div class="swiper-slide">
<div class="account-bg3">
{{#if hasBill}}
<div class="score2">
<p>综合这一年的潮流之旅</p>
<p>你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}} %</span>的潮人<br>获得</p>
</div>
{{else}}
<div class="score">2016年你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得</div>
{{/if}}
<div class="portrait-{{title}}"></div>
<div class="score-txt">称号</div>
</div>
{{#shareUrl}}
<a href="{{.}}" class="share-btn"></a>
{{/shareUrl}}
</div>
</div>
</div>
</div>
{{/data}}
... ...
{{# data}}
<div class="annual-account-page ch account-share-page">
<input type="hidden" value="{{sUrl}}" id="s-url">
<div class="account-bg3">
<div class="share-txt">
<span class="name">{{name}}</span><br>的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得
</div>
<div class="portrait-{{n}}"></div>
<div class="share-txt">称号</div>
<a class="create-btn" href="/activity/annual-account"></a>
</div>
</div>
{{/ data}}
... ...
{{#data}}
<div class="annual-bg ch"></div>
<input type="hidden" value="{{sUrl}}" id="s-url">
<div class="audio-btn"></div>
<audio loop="loop" autoplay="autoplay" src="http://feature.yoho.cn/20160118171021/170119.mp3" id="audio">
Your browser does not support the audio element.
</audio>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide nav-1">
<div class="start-btn"></div>
</div>
<div class="swiper-slide">
<div class="nav-2">
<div class="nav2-img ch"></div>
</div>
<div class="purdah1 ch">
<div class="arrow"></div>
</div>
</div>
<div class="swiper-slide">
<div class="purdah-area ch black-bg">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="purdah-left"></div>
<div class="purdah-right"></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>
</div>
<div class="swiper-slide">
<div class="purdah-area ch black-bg purdah3">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="purdah-open-left"></div>
<div class="purdah-open-right"></div>
<div class="run-men"></div>
</div>
</div>
<div class="swiper-slide">
<div class="purdah-area ch black-bg purdah4">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="purdah-open-left"></div>
<div class="purdah-open-right"></div>
<div class="video">
<video src="https://feature.yoho.cn/20160118171021/yohood_170118.mp4" id="video" preload="auto" webkit-playsinline playsinline controls="controls">
您的浏览器不支持 video 标签。
</video>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="purdah-area ch black-bg purdah5">
<div class="arrow"></div>
<div class="lamp"></div>
<div class="stage"></div>
<div class="hand"></div>
<div class="purdah-open-left"></div>
<div class="purdah-open-right"></div>
<div class="date"></div>
<div class="spokesman"></div>
<div class="txt-black"></div>
<div class="txt-white"></div>
</div>
</div>
<div class="swiper-slide account-bg">
<div class="account-1"></div>
<div class="arrow"></div>
</div>
<div class="swiper-slide account-bg2">
{{#if hasBill}}
<div class="account-2-consume">
<div class="chop-hand"></div>
<div class="text-center consume-text">
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>只为您的潮流之旅
</div>
</div>
{{else}}
<div class="account-2-not"></div>
{{/if}}
<div class="arrow"></div>
</div>
<div class="swiper-slide">
<div class="account-bg3">
{{#if hasBill}}
<div class="score2">
<p>综合这一年的潮流之旅</p>
<p>你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}} %</span>的潮人<br>获得</p>
</div>
{{else}}
<div class="score">2016年你的潮流分为<span class="red-color">{{score}}</span><br>击败了<span class="red-color">{{beat}}%</span>的潮人<br>获得</div>
{{/if}}
<div class="portrait-{{title}}"></div>
<div class="score-txt">称号</div>
</div>
{{#shareUrl}}
<a href="{{.}}" class="share-btn"></a>
{{/shareUrl}}
</div>
</div>
</div>
{{/data}}
... ...
/**
* 2016年度账单
* @author: wsl<shuiling.wang@yoho.cn>
* @date: 2017/01/17
*/
require('activity/annual-account.page.css');
var Swiper = require('yoho-swiper');
var share = require('../common/share');
var $ = require('yoho-jquery');
var $audio = $('#audio');
var $video = $('#video');
var audioStatus = true;
var mySwiper;
// 音频时间
function audioAction() {
document.addEventListener('WeixinJSBridgeReady', function() {
$audio[0].play();
}, false);
setTimeout(function() {
$audio[0].play();
}, 1000);
$('.audio-btn').on('click', function() {
if ($audio[0].paused) {
$(this).removeClass('audio-f');
$audio[0].play();
audioStatus = true;
} else {
$(this).addClass('audio-f');
$audio[0].pause();
audioStatus = false;
}
});
}
// 监听视频
function listenVideo() {
$video[0].addEventListener('playing', function() {
$audio[0].pause();
});
$video[0].addEventListener('pause', function() {
if (audioStatus) {
$audio[0].play();
}
});
$video[0].addEventListener('ended', function() {
if (audioStatus) {
$audio[0].play();
}
});
}
$(function() {
var $purdah1 = $('.purdah1'),
$nav2Img = $('.nav2-img'),
$purdahLeft = $('.purdah-left'),
$purdahRight = $('.purdah-right'),
$runMen = $('.run-men'),
$videoBox = $('.video'),
$spokesman = $('.spokesman'),
$tB = $('.txt-black'),
$tW = $('.txt-white'),
$hand = $('.hand'),
$commonH = $('.ch'),
$monthList = $('.month-list');
var tbTime, handTime, twTime;
$commonH.css({height: $(window).height()});
audioAction();
listenVideo();
share({
imgUrl: 'https://feature.yoho.cn/300x300.png',
title: 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>',
link: $('#s-url').val(),
desc: 'YOHO!BUY有货2016潮流轨迹'
});
mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
onTransitionEnd: function(swiper) {
var aIndex = swiper.activeIndex;
var i = 1;
if (aIndex === 1) {
setTimeout(function() {
$nav2Img.addClass('n2-img-animation');
$purdah1.addClass('purdah1-animation');
}, 300);
}
if (aIndex === 2) {
$purdahLeft.addClass('purdah-l-animation');
$purdahRight.addClass('purdah-r-animation');
if ($monthList.find('li').length === 0) {
for (i; i <= 32; i++) {
if (i === 7) {
$monthList.find('ul').append('<li class="goods-' + i + '"><div class="goods-gif-' + i + '"></div></li>');
} else {
$monthList.find('ul').append('<li class="goods-' + i + '"></li>');
}
}
}
$monthList.fadeIn();
}
if (aIndex === 3) {
$runMen.fadeIn();
}
if (aIndex !== 4) {
$video[0].pause();
if (audioStatus) {
$audio[0].play();
}
}
if (aIndex === 4) {
$videoBox.addClass('video-animation');
setTimeout(function() {
$('#video').show();
}, 600);
}
if (aIndex === 5) {
$spokesman.addClass('spokesman-animation');
tbTime = setTimeout(function() {
$tB.addClass('txt-animation');
}, 500);
handTime = setTimeout(function() {
$hand.addClass('hand-animation');
}, 1000);
twTime = setTimeout(function() {
$tW.addClass('txt-animation');
}, 1500);
}
},
onSlideChangeStart: function(swiper) {
var aIndex = swiper.activeIndex;
if (aIndex === 1 || aIndex === 3) {
$purdahLeft.removeClass('purdah-l-animation');
$purdahRight.removeClass('purdah-r-animation');
$monthList.fadeOut();
$monthList.find('ul').scrollLeft(0);
}
if (aIndex === 0 || aIndex === 2) {
$nav2Img.removeClass('n2-img-animation');
$purdah1.removeClass('purdah1-animation');
}
if (aIndex === 2 || aIndex === 4) {
$runMen.hide();
}
if (aIndex === 3 || aIndex === 5) {
$videoBox.removeClass('video-animation');
$('#video').hide();
}
if (aIndex === 4 || aIndex === 6) {
clearTimeout(tbTime);
clearTimeout(twTime);
clearTimeout(handTime);
$spokesman.removeClass('spokesman-animation');
$tB.removeClass('txt-animation');
$hand.removeClass('hand-animation');
$tW.removeClass('txt-animation');
}
}
});
// 开启2016潮流轨迹按钮
$('.start-btn').on('click', function() {
mySwiper.slideTo(1, 1000, true);
});
});
... ...
@import "../layout/_swiper.css";
@import "annual-account/index";
... ...
.annual-account-page {
width: 640px;
overflow: hidden;
.audio-btn {
width: 49px;
height: 49px;
background: resolve("activity/annual-account/audio-o.png") no-repeat;
background-size: contain;
position: fixed;
top: 30px;
right: 30px;
z-index: 99;
}
.audio-f {
background: resolve("activity/annual-account/audio-f.png") no-repeat;
background-size: contain;
}
.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% 100%;
}
.n2-img-animation {
transition: all 1.2s;
transform: scale(1.5);
opacity: 0;
}
}
.purdah1 {
background: resolve("activity/annual-account/nav-2-big.jpg") no-repeat;
width: 100%;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
&.purdah1-animation {
transition: all 1.2s;
opacity: 1;
}
}
.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;
}
.purdah-area {
width: 100%;
background: #fff;
position: absolute;
top: 0;
left: 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: contain;
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-open-left {
width: 48px;
height: 806px;
background: resolve("activity/annual-account/open-l.png") no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.purdah-open-right {
width: 48px;
height: 812px;
background: resolve("activity/annual-account/open-r.png") no-repeat;
background-size: contain;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.purdah-l-animation {
transition: all 1.2s;
transform: translate(-85%, 0);
}
.purdah-r-animation {
transition: all 1.2s;
transform: translate(85%, 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: 320px;
background: resolve("activity/annual-account/hand.png") no-repeat;
background-size: contain;
position: absolute;
bottom: -320px;
left: 0;
z-index: -3;
opacity: 0;
}
.hand-animation {
transition: all 0.4s;
bottom: 0;
opacity: 1;
z-index: 3;
}
.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 {
.month-4 {
width: 526px;
height: 613px;
background: resolve("activity/annual-account/4month.png") no-repeat;
background-size: contain;
margin: 0 auto;
position: relative;
z-index: 1;
}
&.purdah2-animation {
transition: all 1s;
transform: translate(0, -200%);
opacity: 0;
}
}
.month-list {
position: absolute;
left: 40px;
top: 535px;
z-index: 1;
width: 550px;
height: 370px;
overflow: hidden;
display: none;
ul {
white-space: nowrap;
overflow-x: scroll;
width: 570px;
height: 390px;
padding-right: 20px;
}
li {
display: inline-block;
height: 370px;
}
.goods-1 {
width: 222px;
background: resolve("activity/annual-account/annual-goods-1.png") no-repeat;
background-size: contain;
margin-left: 35px;
}
.goods-2 {
width: 250px;
background: resolve("activity/annual-account/annual-goods-2.png") no-repeat;
background-size: contain;
}
.goods-3 {
width: 259px;
background: resolve("activity/annual-account/annual-goods-3.png") no-repeat;
background-size: contain;
}
.goods-4 {
width: 267px;
background: resolve("activity/annual-account/annual-goods-4.png") no-repeat;
background-size: contain;
}
.goods-5 {
width: 261px;
background: resolve("activity/annual-account/annual-goods-5.png") no-repeat;
background-size: contain;
}
.goods-6 {
width: 262px;
background: resolve("activity/annual-account/annual-goods-6.png") no-repeat;
background-size: contain;
}
.goods-7 {
width: 315px;
background: resolve("activity/annual-account/annual-goods-7.png") no-repeat;
background-size: contain;
}
.goods-gif-7 {
width: 251px;
height: 182px;
background-image: resolve("activity/annual-account/annual-goods-7.gif");
background-size: contain;
margin: 108px auto 0;
}
.goods-8 {
width: 266px;
background: resolve("activity/annual-account/annual-goods-8.png") no-repeat;
background-size: contain;
}
.goods-9 {
width: 283px;
background: resolve("activity/annual-account/annual-goods-9.png") no-repeat;
background-size: contain;
}
.goods-10 {
width: 299px;
background: resolve("activity/annual-account/annual-goods-10.png") no-repeat;
background-size: contain;
}
.goods-11 {
width: 292px;
background: resolve("activity/annual-account/annual-goods-11.png") no-repeat;
background-size: contain;
}
.goods-12 {
width: 232px;
background: resolve("activity/annual-account/annual-goods-12.png") no-repeat;
background-size: contain;
}
.goods-13 {
width: 293px;
background: resolve("activity/annual-account/annual-goods-13.png") no-repeat;
background-size: contain;
}
.goods-14 {
width: 297px;
background: resolve("activity/annual-account/annual-goods-14.png") no-repeat;
background-size: contain;
}
.goods-15 {
width: 291px;
background: resolve("activity/annual-account/annual-goods-15.png") no-repeat;
background-size: contain;
}
.goods-16 {
width: 303px;
background: resolve("activity/annual-account/annual-goods-16.png") no-repeat;
background-size: contain;
}
.goods-17 {
width: 274px;
background: resolve("activity/annual-account/annual-goods-17.png") no-repeat;
background-size: contain;
}
.goods-18 {
width: 336px;
background: resolve("activity/annual-account/annual-goods-18.png") no-repeat;
background-size: contain;
}
.goods-19 {
width: 346px;
background: resolve("activity/annual-account/annual-goods-19.png") no-repeat;
background-size: contain;
}
.goods-20 {
width: 336px;
background: resolve("activity/annual-account/annual-goods-20.png") no-repeat;
background-size: contain;
}
.goods-21 {
width: 274px;
background: resolve("activity/annual-account/annual-goods-21.png") no-repeat;
background-size: contain;
}
.goods-22 {
width: 303px;
background: resolve("activity/annual-account/annual-goods-22.png") no-repeat;
background-size: contain;
}
.goods-23 {
width: 319px;
background: resolve("activity/annual-account/annual-goods-23.png") no-repeat;
background-size: contain;
}
.goods-24 {
width: 297px;
background: resolve("activity/annual-account/annual-goods-24.png") no-repeat;
background-size: contain;
}
.goods-25 {
width: 332px;
background: resolve("activity/annual-account/annual-goods-25.png") no-repeat;
background-size: contain;
}
.goods-26 {
width: 301px;
background: resolve("activity/annual-account/annual-goods-26.png") no-repeat;
background-size: contain;
}
.goods-27 {
width: 276px;
background: resolve("activity/annual-account/annual-goods-27.png") no-repeat;
background-size: contain;
}
.goods-28 {
width: 313px;
background: resolve("activity/annual-account/annual-goods-28.png") no-repeat;
background-size: contain;
}
.goods-29 {
width: 320px;
background: resolve("activity/annual-account/annual-goods-29.png") no-repeat;
background-size: contain;
}
.goods-30 {
width: 331px;
background: resolve("activity/annual-account/annual-goods-30.png") no-repeat;
background-size: contain;
}
.goods-31 {
width: 316px;
background: resolve("activity/annual-account/annual-goods-31.png") no-repeat;
background-size: contain;
}
.goods-32 {
width: 304px;
background: resolve("activity/annual-account/annual-goods-32.png") no-repeat;
background-size: contain;
}
}
.run-men {
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;
}
.video {
width: 526px;
height: 775px;
background: resolve("activity/annual-account/video.png") no-repeat;
background-size: contain;
position: absolute;
z-index: -6;
top: -775px;
left: 60px;
opacity: 0;
#video {
width: 472px;
height: 244px;
position: absolute;
top: 483px;
left: 25px;
display: none;
}
}
.video-animation {
transition: all 0.6s;
top: 0;
opacity: 1;
z-index: 6;
}
&.purdah5 {
.date {
width: 242px;
height: 54px;
background: resolve("activity/annual-account/date.png") no-repeat;
background-size: contain;
margin: 90px auto 0;
}
.spokesman {
width: 0;
height: 0;
background: resolve("activity/annual-account/men.png") no-repeat;
background-size: contain;
position: absolute;
left: 117px;
top: 122px;
z-index: 1;
}
.spokesman-animation {
transition: all 0.4s;
width: 404px;
height: 592px;
transform: rotate(360deg) scale(1);
}
.txt-black {
width: 499px;
height: 238px;
background: resolve("activity/annual-account/text-b.png") no-repeat;
background-size: contain;
position: absolute;
top: 498px;
left: 70px;
z-index: 3;
opacity: 0;
}
.txt-white {
width: 482px;
height: 105px;
background: resolve("activity/annual-account/text-w.png") no-repeat;
background-size: contain;
position: absolute;
left: 72px;
top: 704px;
z-index: 4;
opacity: 0;
}
.txt-animation {
transition: all 0.8s;
opacity: 1;
}
}
}
.account-bg {
width: 583px;
background: resolve("activity/annual-account/nav-2-bg-2.png") no-repeat;
background-size: 100% 100%;
margin-left: 32px;
}
.account-bg2 {
width: 583px;
background: resolve("activity/annual-account/nav-2-bg-3.png") no-repeat;
background-size: 100% 100%;
margin-left: 31px;
}
.account-1 {
width: 427px;
height: 874px;
background: resolve("activity/annual-account/account-1.png") no-repeat;
background-size: contain;
position: absolute;
left: 70px;
top: 48px;
}
.account-2-not {
width: 506px;
height: 880px;
background: resolve("activity/annual-account/not-consume.png") no-repeat;
background-size: contain;
position: absolute;
left: 33px;
top: 75px;
}
.account-2-consume {
position: absolute;
left: 70px;
top: 100px;
.chop-hand {
width: 349px;
height: 319px;
background: resolve("activity/annual-account/chop-hand.png") no-repeat;
background-size: contain;
margin: 0 auto;
}
.consume-text {
font-size: 40px;
line-height: 60px;
font-weight: bold;
margin-top: 80px;
}
}
.account-bg3 {
width: 578px;
height: 876px;
background: resolve("activity/annual-account/account-bg3.png") no-repeat;
background-size: contain;
position: absolute;
left: 32px;
top: 0;
z-index: 1;
.score,
.score2 {
font-size: 40px;
line-height: 60px;
font-weight: bold;
margin-top: 85px;
text-align: center;
}
.score2 {
margin-top: 65px;
font-size: 35px;
}
.portrait-1 {
width: 500px;
height: 440px;
background: resolve("activity/annual-account/image-1.png") no-repeat;
background-size: contain;
margin: 0 auto;
}
.portrait-2 {
width: 500px;
height: 432px;
background: resolve("activity/annual-account/image-2.png") no-repeat;
background-size: contain;
margin: 0 auto;
}
.portrait-3 {
width: 500px;
height: 423px;
background: resolve("activity/annual-account/image-3.png") no-repeat;
background-size: contain;
margin: 0 auto;
}
.portrait-4 {
width: 500px;
height: 422px;
background: resolve("activity/annual-account/image-4.png") no-repeat;
background-size: contain;
margin: 0 auto;
}
.portrait-5 {
width: 500px;
height: 392px;
background: resolve("activity/annual-account/image-5.png") no-repeat;
background-size: contain;
margin: 0 auto;
}
.score-txt {
font-size: 40px;
line-height: 60px;
font-weight: bold;
text-align: center;
}
}
.red-color {
font-size: 50px;
color: #c90202;
}
.share-btn {
width: 500px;
height: 109px;
background: resolve("activity/annual-account/share-btn.png") no-repeat;
background-size: contain;
position: absolute;
top: 848px;
left: 70px;
z-index: 2;
}
&.account-share-page {
background: #c90302;
.share-txt {
font-size: 35px;
line-height: 60px;
font-weight: bold;
text-align: center;
}
.name {
font-size: 50px;
margin-top: 50px;
display: inline-block;
}
.create-btn {
width: 500px;
height: 109px;
background: resolve("activity/annual-account/create-btn.png") no-repeat;
background-size: contain;
position: absolute;
top: 850px;
left: 40px;
z-index: 2;
}
}
}
... ...