master
lujian 6 years ago
parent 560bf07c69
commit e2a5e95b8f

@ -223,31 +223,31 @@
</li>
<li>
<label class="industry-name text-right left">数码电器</label>
<label style="width: 2%;" class="blue-to-green"></label>
<label id="shumadianqi" style="width: 0%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">鞋包服饰</label>
<label style="width: 8%;" class="blue-to-green"></label>
<label id="xiebaofushi" style="width: 0%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">母婴化妆</label>
<label style="width: 10%;" class="blue-to-green"></label>
<label id="muyinghuazhuang" style="width: 0%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">教育办公</label>
<label style="width: 12%;" class="blue-to-green"></label>
<label id="jiaoyubangong" style="width: 0%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">酒店航空</label>
<label style="width: 14%;" class="blue-to-green"></label>
<label id="jiudianhangkong" style="width: 0%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">医疗食品</label>
<label style="width: 32%;" class="blue-to-green"></label>
<label id="yiliaoshipin" style="width: 0%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">零售百货</label>
<label style="width: 45%;" class="blue-to-green"></label>
<label id="lingshoubaihuo" style="width: 0%;" class="blue-to-green width-transition"></label>
</li>
</ul>
@ -266,39 +266,39 @@
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 30%" class="yellow-to-orange"></label>
<label style="width: 0%" class="yellow-to-orange" id="ruanjianfuwu"></label>
</label>
<label style="" class="industry-name">软件服务</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 60%" class="yellow-to-orange"></label>
<label style="width: 0%" class="yellow-to-orange" id="kuajingmaoyi"></label>
</label>
<label style="" class="industry-name">跨境贸易</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 90%" class="yellow-to-orange"></label>
<label style="width: 0%" class="yellow-to-orange" id="xinxingfuwu"></label>
</label>
<label style="" class="industry-name">新兴服务</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 50%" class="yellow-to-orange"></label>
<label style="width: 0%" class="yellow-to-orange" id="kuajingwuliu"></label>
</label>
<label style="" class="industry-name">跨境物流</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 30%" class="yellow-to-orange"></label>
<label style="width: 0%" class="yellow-to-orange" id="guojizuche"></label>
</label>
<label style="" class="industry-name">国际租车</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 30%" class="yellow-to-orange"></label>
<label style="width: 0%" class="yellow-to-orange" id="wangluojiaoyu"></label>
</label>
<label style="" class="industry-name">网络教育</label>
</li>
@ -452,61 +452,77 @@
<div class="gateway-bar">
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 1rem; "></div>
<div class="gateway-item-rate" style="bottom: 1rem;">1%</div>
<div id="rpqrcode" class="gateway-bar-item-data gateway-online-item" style="height: 0rem; "></div>
<div id="rpqrcodevalue" class="gateway-item-rate" style="bottom: 0rem;">
<span id="rpqrcodevaluereal">1</span>%
</div>
<div class="gateway-name">
<img src="static/images/annualBill/RP QrCode Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 5rem; "></div>
<div class="gateway-item-rate" style="bottom: 5rem;">12%</div>
<div id="rpjsapi" class="gateway-bar-item-data gateway-online-item" style="height: 0rem;"></div>
<div id="rpjsapivalue" class="gateway-item-rate" style="bottom: 0rem;">
<span id="rpjsapivaluereal">12</span>%
</div>
<div class="gateway-name">
<img src="static/images/annualBill/RP JSAPI Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 1rem; "></div>
<div class="gateway-item-rate" style="bottom: 1rem;">1%</div>
<div id="h5" class="gateway-bar-item-data gateway-online-item" style="height: 0rem; "></div>
<div id="h5value" class="gateway-item-rate" style="bottom: 0rem;">
<span id="h5valuereal">1</span>%
</div>
<div class="gateway-name">
<img src="static/images/annualBill/H5 Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 1rem; "></div>
<div class="gateway-item-rate" style="bottom: 1rem">1%</div>
<div id="app" class="gateway-bar-item-data gateway-online-item" style="height: 0rem; "></div>
<div id="appvalue" class="gateway-item-rate" style="bottom: 0rem">
<span id="appvaluereal">1</span>%
</div>
<div class="gateway-name">
<img src="static/images/annualBill/APP Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 1rem; "></div>
<div class="gateway-item-rate" style="bottom: 1rem">1%</div>
<div id="thirdparty" class="gateway-bar-item-data gateway-online-item" style="height: 0rem; "></div>
<div id="thirdpartyvalue" class="gateway-item-rate" style="bottom: 0rem">
<span id="thirdpartyvaluereal">1</span>%
</div>
<div class="gateway-name">
<img src="static/images/annualBill/3rd Party Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-offline-item" style="height: 9rem; "></div>
<div class="gateway-item-rate" style="bottom: 9rem;">72%</div>
<div id="rpmerchant" class="gateway-bar-item-data gateway-offline-item" style="height: 0rem; "></div>
<div id="rpmerchantvalue" class="gateway-item-rate" style="bottom: 0rem;">
<span id="rpmerchantvaluereal">72</span>%
</div>
<div class="gateway-name">
<img src="static/images/annualBill/RP Merchant QrCode.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-offline-item" style="height: 3rem; "></div>
<div class="gateway-item-rate" style="bottom: 3rem">8%</div>
<div id="rppos" class="gateway-bar-item-data gateway-offline-item" style="height: 0rem; "></div>
<div id="rpposvalue" class="gateway-item-rate" style="bottom: 0rem">
<span id="rpposvaluereal">8</span>%
</div>
<div class="gateway-name">
<img src="static/images/annualBill/RP POS.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-offline-item" style="height: 2rem; "></div>
<div class="gateway-item-rate" style="bottom: 2rem">4%</div>
<div id="retailapi" class="gateway-bar-item-data gateway-offline-item" style="height: 0rem; "></div>
<div id="retailapivalue" class="gateway-item-rate" style="bottom: 0rem">
<span id="retailvaluereal">4</span>%
</div>
<div class="gateway-name">
<img src="static/images/annualBill/Retail API.png">
</div>
@ -600,7 +616,7 @@
</div>
<!-- 第十三屏 -->
<div class="swiper-slide slide2">
<div class="swiper-slide slide2 slide13">
<div class="slide2-title">
<label>半边天慈善活动</label><br>
<label>排行榜</label>
@ -613,8 +629,83 @@
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="padding: 30px; margin-top: 30px;">
<img src="static/images/annualBill/paihang.png">
<!--<div style="padding: 30px; margin-top: 30px;">-->
<!--<img src="static/images/annualBill/paihang.png">-->
<!--</div>-->
<div class="paihangbang">
<ul>
<li>
<label class="industry-name text-right">51GO</label>
<label id="top1" class="blue-to-green" style="width: 0%;"></label>
<label class="top-value">
<span id="top1value">117605</span>
</label>
</li>
<li>
<label class="industry-name text-right left">代购之家</label>
<label id="top2" style="width: 0%;" class="blue-to-green"></label>
<label class="top-value">
<span id="top2value">70977</span>
</label>
</li>
<li>
<label class="industry-name text-right left">HOMETOWN SUPERMARKET</label>
<label id="top3" style="width: 0%;" class="blue-to-green"></label>
<label class="top-value">
<span id="top3value">64384</span>
</label>
</li>
<li>
<label class="industry-name text-right left">BUY@HOME</label>
<label id="top4" style="width: 0%;" class="blue-to-green"></label>
<label class="top-value">
<span id="top4value">55873</span>
</label>
</li>
<li>
<label class="industry-name text-right left">HM SYD</label>
<label id="top5" style="width: 0%;" class="blue-to-green"></label>
<label class="top-value">
<span id="top5value">47897</span>
</label>
</li>
<li>
<label class="industry-name text-right left">FUMAO</label>
<label id="top6" style="width: 0%;" class="blue-to-green"></label>
<label class="top-value">
<span id="top6value">46678</span>
</label>
</li>
<li>
<label class="industry-name text-right left">BNE GIFT<br> STATION</label>
<label id="top7" style="width: 0%;" class="blue-to-green width-transition"></label>
<label class="top-value">
<span id="top7value">43596</span>
</label>
</li>
<li>
<label class="industry-name text-right left">OZ 团团</label>
<label id="top8" style="width: 0%;" class="blue-to-green"></label>
<label class="top-value">
<span id="top8value">42848</span>
</label>
</li>
<li>
<label class="industry-name text-right left">DAILY MARKET<br> 美天超市</label>
<label id="top9" style="width: 0%;" class="blue-to-green"></label>
<label class="top-value">
<span id="top9value">40646</span>
</label>
</li>
<li>
<label class="industry-name text-right left">OWELEE<br> HEALTH STORE</label>
<label id="top10" style="width: 0%;" class="blue-to-green width-transition"></label>
<label class="top-value">
<span id="top10value">38557</span>
</label>
</li>
</ul>
</div>
<!-- <div class="bottom">
@ -874,7 +965,7 @@
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
initialSlide: 5,
initialSlide: 0,
on: {
slideChangeTransitionEnd: function(event) {
var bottomText = document.getElementById('bottom-text');
@ -937,12 +1028,103 @@
var transactionsNumAnim = new CountUp('transactionAmount', 0, transactionAmount, 0, numAnimTime);
transactionsNumAnim.start()
}
var industryObject = {
shumadianqi: '2%',
xiebaofushi: '8%',
muyinghuazhuang: '10%',
jiaoyubangong: '12%',
jiudianhangkong: '14%',
yiliaoshipin: '32%',
lingshoubaihuo: '45%',
ruanjianfuwu: '30%',
kuajingmaoyi: '60%',
xinxingfuwu: '90%',
kuajingwuliu: '50%',
guojizuche: '30%',
wangluojiaoyu: '30%'
};
if (this.activeIndex == 5) {
for (var key in industryObject) {
document.getElementById(key).classList.add("width-transition")
document.getElementById(key).style.width = industryObject[key];
}
} else {
for (var key in industryObject) {
document.getElementById(key).style.width = '0%'
}
}
if (this.activeIndex == 7) {
for(var key in payCountAnimObject) {
var payCountAnim = new CountUp(key, 0, payCountAnimObject[key], 0, numAnimTime)
payCountAnim.start();
}
}
var gatewayArray = [
{ rpqrcode: 1, rpqrcodevalue: 1 },
{ rpjsapi: 5,rpjsapivalue: 12 },
{ h5: 1, h5value: 1 },
{ app: 1, appvalue: 1 },
{ thirdparty: 1, thirdpartyvalue: 1 },
{ rpmerchant: 9, rpmerchantvalue: 72 },
{ rppos: 3, rpposvalue: 8 },
{ retailapi: 2, retailapivalue: 4 }
];
if (this.activeIndex == 8) {
gatewayArray.forEach(function (item) {
var element = document.getElementById(Object.keys(item)[0]);
element.classList.add("height-transition");
element.style.height = item[Object.keys(item)[0]] + 'rem';
var nextElement = document.getElementById(Object.keys(item)[1]);
nextElement.classList.add("bottom-transition");
nextElement.style.bottom = item[Object.keys(item)[0]] + 'rem';
var numAnim = new CountUp(Object.keys(item)[1] + 'real', 0, item[Object.keys(item)[1]], 0, numAnimTime);
numAnim.start();
})
} else {
for (var item in gatewayArray) {
gatewayArray.forEach(function (item) {
var element = document.getElementById(Object.keys(item)[0]);
element.style.height = 0 + 'rem';
var nextElement = document.getElementById(Object.keys(item)[1]);
nextElement.style.bottom = 0 + 'rem';
})
}
}
// var paihangbangArray = [
// 117605, 70977, 64384, 55873, 47897, 46678, 43596, 42848, 40646, 38557
// ];
var paihangbangObject = {
top1: 117605,
top2: 70977,
top3: 64384,
top4: 55873,
top5: 47897,
top6: 46678,
top7: 43596,
top8: 42848,
top9: 40646,
top10: 38557
};
var total = 569061;
if (this.activeIndex == 12) {
for (var key in paihangbangObject) {
document.getElementById(key).classList.add("width-transition");
document.getElementById(key).style.width = paihangbangObject[key]/total*200 + '%';
var topAnim = new CountUp(key + 'value', 0, paihangbangObject[key], 0, numAnimTime)
topAnim.start();
}
} else {
for (var key in paihangbangObject) {
document.getElementById(key).style.width = 0 + '%';
}
}
}
},

@ -63,7 +63,7 @@ img{
.slide1 {
background-repeat:no-repeat;
background-image: url('../../images/annualbill/star@2x.png');
background-image: url('../../images/annualBill/star@2x.png');
}
.logo {
@ -196,15 +196,15 @@ img{
display: inline-block;
vertical-align: middle
}
.slide6 .industry ul li .industry-title {
.industry-title {
font-family: SourceHanSansCN-Medium;
font-size: 14px;
color: #07DFC8;
letter-spacing: 0.34px;
}
.slide6 .industry ul li .industry-name {
.industry-name {
font-family: SourceHanSansCN-Medium;
font-size: 8px;
font-size: 0.4rem;
color: #686868;
letter-spacing: 0.19px;
}
@ -249,7 +249,7 @@ img{
color: #686868;
letter-spacing: 0.24px;
}
.slide7 .top-value {
.top-value {
font-family: SourceHanSansCN-Medium;
font-size: 10px;
color: #07DFC8;
@ -352,6 +352,66 @@ img{
padding-top: 5px;
}
.width-transition {
-webkit-transition: width 1s;
-moz-transition: width 1s;
-ms-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
.height-transition {
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;
}
.bottom-transition {
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
-ms-transition: bottom 1s;
-o-transition: bottom 1s;
transition: bottom 1s;
}
.slide13 .paihangbang {
padding: 2rem 0.5rem 0 0;
}
.slide13 .paihangbang ul {
list-style: none;
}
.slide13 .paihangbang ul li {
height: 25px;
}
.slide13 .paihangbang ul li label:nth-child(1) {
/*border: 1px solid red;*/
display: inline-block;
width: 30%;
vertical-align: middle;
padding-right: 5px;
}
.slide13 .paihangbang ul li label:nth-child(2) {
/*border: 1px solid red;*/
display: inline-block;
vertical-align: middle;
}
.slide13 .paihangbang ul li label:nth-child(3) {
/*border: 1px solid red;*/
display: inline-block;
vertical-align: middle;
float: right;
height: 100%;
line-height: 1.5rem;
padding-right: 0.5rem;
}
@keyframes move {
0% {

Before

Width:  |  Height:  |  Size: 663 B

After

Width:  |  Height:  |  Size: 663 B

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Before

Width:  |  Height:  |  Size: 707 B

After

Width:  |  Height:  |  Size: 707 B

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Loading…
Cancel
Save