msb_52843
/
dalong_mall
1
0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[fix]

Browse Source
master
lujian 6 years ago
parent 210a8aab48
commit 8e7c57344d
1 changed files with 137 additions and 124 deletions
Show Stats Download Patch File Download Diff File

261
src/main/ui/annual_bill.html
Unescape View File

@ -133,16 +133,26 @@
<div style="height: 2.5rem;"></div> <div style="height: 2.5rem;"></div>
<ul class="slide2-data" style="margin-left: 50px; margin-right: 30px;"> <ul class="slide2-data" style="margin-left: 50px; margin-right: 30px;">
<li>2018年通过RoyalPay完成无卡支付的用户</li> <li>2018年通过RoyalPay完成线上&线下的用户达</li>
<li id="payedUsersNum">819,677</li> <li>
<!--819,677-->
<span id="payedUsersNum">300</span>
<span>万人</span>
</li>
<li>较去年增长</li> <li>较去年增长</li>
<li> <li>
<span id="payedUsersGrowNum">142</span> <!--<span id="payedUsersGrowNum">-->
<!--&lt;!&ndash;142&ndash;&gt;-->
<!--321.53-->
<!--</span>-->
321.53
<span>%</span> <span>%</span>
</li> </li>
<li>平均每天达</li> <li>平均每天超</li>
<li style="position: relative;"> <li style="position: relative;">
<span id="dailyPayedUsersNum">2,245</span> <span id="dailyPayedUsersNum">
8,219
</span>
<span>人</span> <span>人</span>
<div style="position: absolute; width: 9rem; left: 40%; bottom: -2rem"> <div style="position: absolute; width: 9rem; left: 40%; bottom: -2rem">
<img src="static/images/annualBill/shanghuzengz@2x.png"> <img src="static/images/annualBill/shanghuzengz@2x.png">
@ -176,8 +186,11 @@
<ul class="slide2-data" style="padding-left: 45%; padding-right: 30px; padding-top: 3rem; padding-bottom: 4rem; background-image: url('static/images/annualBill/money@2x.png'); background-repeat: no-repeat; background-size: 45%; position: relative;"> <ul class="slide2-data" style="padding-left: 45%; padding-right: 30px; padding-top: 3rem; padding-bottom: 4rem; background-image: url('static/images/annualBill/money@2x.png'); background-repeat: no-repeat; background-size: 45%; position: relative;">
<li>2018年每月流水超</li> <li>2018年每月流水超</li>
<li> <li>
<span>$</span> <span id="transactionAmount">
<span id="transactionAmount">71,588,990</span> <!--71,588,990-->
81,588,990
</span>
<span> AUD</span>
</li> </li>
<li>平均每一分钟就有超过</li> <li>平均每一分钟就有超过</li>
<li> <li>
@ -449,7 +462,7 @@
</div> </div>
<div class="gateway-offline"> <div class="gateway-offline">
<span class="orange-dot"></span> <span class="orange-dot"></span>
<span class="gray-text" style="vertical-align: middle">线上支付渠道</span> <span class="gray-text" style="vertical-align: middle">线下支付渠道</span>
</div> </div>
</div> </div>
@ -619,105 +632,105 @@
</div> </div>
<!-- 第十三屏 --> <!-- 第十三屏 -->
<div class="swiper-slide slide2 slide13"> <!--<div class="swiper-slide slide2 slide13">-->
<div class="slide2-title"> <!--<div class="slide2-title">-->
<label>半边天慈善活动</label><br> <!--<label>半边天慈善活动</label><br>-->
<label>排行榜</label> <!--<label>排行榜</label>-->
</div> <!--</div>-->
<div class="slide2-wish-text">
半边天活动参与商户活动期间交易笔数TOP10
</div>
<div class="slide2-hr"> <!--<div class="slide2-wish-text">-->
<div class="left"></div> <!--半边天活动参与商户活动期间交易笔数TOP10-->
</div>
<!--<div style="padding: 30px; margin-top: 30px;">-->
<!--<img src="static/images/annualBill/paihang.png">-->
<!--</div>--> <!--</div>-->
<div class="paihangbang"> <!--<div class="slide2-hr">-->
<ul> <!--<div class="left"></div>-->
<li> <!--</div>-->
<label class="industry-name text-right">51GO</label> <!--&lt;!&ndash;<div style="padding: 30px; margin-top: 30px;">&ndash;&gt;-->
<label id="top1" class="blue-to-green" style="width: 0%;"></label> <!--&lt;!&ndash;<img src="static/images/annualBill/paihang.png">&ndash;&gt;-->
<label class="top-value"> <!--&lt;!&ndash;</div>&ndash;&gt;-->
<span id="top1value">117605</span>笔
</label> <!--<div class="paihangbang">-->
</li> <!--<ul>-->
<li> <!--<li>-->
<label class="industry-name text-right left">代购之家</label> <!--<label class="industry-name text-right">51GO</label>-->
<label id="top2" style="width: 0%;" class="blue-to-green"></label> <!--<label id="top1" class="blue-to-green" style="width: 0%;"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top2value">70977</span>笔 <!--<span id="top1value">117605</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
<li> <!--<li>-->
<label class="industry-name text-right left">HOMETOWN SUPERMARKET</label> <!--<label class="industry-name text-right left">代购之家</label>-->
<label id="top3" style="width: 0%;" class="blue-to-green"></label> <!--<label id="top2" style="width: 0%;" class="blue-to-green"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top3value">64384</span>笔 <!--<span id="top2value">70977</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
<li> <!--<li>-->
<label class="industry-name text-right left">BUY@HOME</label> <!--<label class="industry-name text-right left">HOMETOWN SUPERMARKET</label>-->
<label id="top4" style="width: 0%;" class="blue-to-green"></label> <!--<label id="top3" style="width: 0%;" class="blue-to-green"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top4value">55873</span>笔 <!--<span id="top3value">64384</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
<li> <!--<li>-->
<label class="industry-name text-right left">HM SYD</label> <!--<label class="industry-name text-right left">BUY@HOME</label>-->
<label id="top5" style="width: 0%;" class="blue-to-green"></label> <!--<label id="top4" style="width: 0%;" class="blue-to-green"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top5value">47897</span>笔 <!--<span id="top4value">55873</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
<li> <!--<li>-->
<label class="industry-name text-right left">FUMAO</label> <!--<label class="industry-name text-right left">HM SYD</label>-->
<label id="top6" style="width: 0%;" class="blue-to-green"></label> <!--<label id="top5" style="width: 0%;" class="blue-to-green"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top6value">46678</span>笔 <!--<span id="top5value">47897</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
<li> <!--<li>-->
<label class="industry-name text-right left">BNE GIFT<br> STATION</label> <!--<label class="industry-name text-right left">FUMAO</label>-->
<label id="top7" style="width: 0%;" class="blue-to-green width-transition"></label> <!--<label id="top6" style="width: 0%;" class="blue-to-green"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top7value">43596</span>笔 <!--<span id="top6value">46678</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
<li> <!--<li>-->
<label class="industry-name text-right left">OZ 团团</label> <!--<label class="industry-name text-right left">BNE GIFT<br> STATION</label>-->
<label id="top8" style="width: 0%;" class="blue-to-green"></label> <!--<label id="top7" style="width: 0%;" class="blue-to-green width-transition"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top8value">42848</span>笔 <!--<span id="top7value">43596</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
<li> <!--<li>-->
<label class="industry-name text-right left">DAILY MARKET<br> 美天超市</label> <!--<label class="industry-name text-right left">OZ 团团</label>-->
<label id="top9" style="width: 0%;" class="blue-to-green"></label> <!--<label id="top8" style="width: 0%;" class="blue-to-green"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top9value">40646</span>笔 <!--<span id="top8value">42848</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
<li> <!--<li>-->
<label class="industry-name text-right left">OWELEE<br> HEALTH STORE</label> <!--<label class="industry-name text-right left">DAILY MARKET<br> 美天超市</label>-->
<label id="top10" style="width: 0%;" class="blue-to-green width-transition"></label> <!--<label id="top9" style="width: 0%;" class="blue-to-green"></label>-->
<label class="top-value"> <!--<label class="top-value">-->
<span id="top10value">38557</span>笔 <!--<span id="top9value">40646</span>笔-->
</label> <!--</label>-->
</li> <!--</li>-->
</ul> <!--<li>-->
</div> <!--<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"> <!--&lt;!&ndash; <div class="bottom">-->
<div class="bottom-text2">滑动查看2019账单</div> <!--<div class="bottom-text2">滑动查看2019账单</div>-->
<div class="bottom-img"> <!--<div class="bottom-img">-->
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()"> <!--<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">-->
</div> <!--</div>-->
</div> --> <!--</div> &ndash;&gt;-->
</div> <!--</div>-->
<!-- 第十四屏 --> <!-- 第十四屏 -->
<div class="swiper-slide"> <div class="swiper-slide">
@ -777,13 +790,13 @@
var merchantNum = 16000; var merchantNum = 16000;
var payedUsersAnimObject = { var payedUsersAnimObject = {
payedUsersNum: 819667, payedUsersNum: 300,
payedUsersGrowNum: 142, payedUsersGrowNum: 321.53,
dailyPayedUsersNum: 2245 dailyPayedUsersNum: 8219
}; };
// var transactionAmount = 37425582; // var transactionAmount = 37425582;
var transactionAmount = 71588990; var transactionAmount = 81588990;
var payCountAnimObject = { var payCountAnimObject = {
onlineMerchant: 696, onlineMerchant: 696,
@ -967,7 +980,7 @@
slideChangeTransitionEnd: function(event) { slideChangeTransitionEnd: function(event) {
var bottomText = document.getElementById('bottom-text'); var bottomText = document.getElementById('bottom-text');
if(this.activeIndex > 0) { if(this.activeIndex > 0) {
bottomText.style.color = "#FFFFFF" bottomText.style.color = "#FFFFFF";
document.getElementById('bottom-img').src = 'static/images/annualBill/up@2x.png' document.getElementById('bottom-img').src = 'static/images/annualBill/up@2x.png'
} else { } else {
bottomText.style.color = '#1C2029'; bottomText.style.color = '#1C2029';
@ -993,7 +1006,7 @@
}); });
} }
} }
if (this.activeIndex == 14) { if (this.activeIndex == 13) {
document.getElementById('bottom').style.display = 'none' document.getElementById('bottom').style.display = 'none'
} else { } else {
document.getElementById('bottom').style.display = 'block' document.getElementById('bottom').style.display = 'block'
@ -1108,21 +1121,21 @@
top9: 40646, top9: 40646,
top10: 38557 top10: 38557
}; };
var total = 569061; // var total = 569061;
if (this.activeIndex == 12) { // if (this.activeIndex == 12) {
//
for (var key in paihangbangObject) { // for (var key in paihangbangObject) {
document.getElementById(key).classList.add("width-transition"); // document.getElementById(key).classList.add("width-transition");
document.getElementById(key).style.width = paihangbangObject[key]/total*200 + '%'; // document.getElementById(key).style.width = paihangbangObject[key]/total*200 + '%';
//
var topAnim = new CountUp(key + 'value', 0, paihangbangObject[key], 0, numAnimTime) // var topAnim = new CountUp(key + 'value', 0, paihangbangObject[key], 0, numAnimTime)
topAnim.start(); // topAnim.start();
} // }
} else { // } else {
for (var key in paihangbangObject) { // for (var key in paihangbangObject) {
document.getElementById(key).style.width = 0 + '%'; // document.getElementById(key).style.width = 0 + '%';
} // }
} // }
} }
}, },
}); });

Write Preview
Loading…
Cancel
Save