[fix]

src/main/ui/annual_bill.html

@@ -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 id="rpqrcode" class="gateway-bar-item-data gateway-online-item" style="height: 0rem; "></div>
-                    <div class="gateway-item-rate" style="bottom: 1rem;">1%</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 id="rpjsapi" class="gateway-bar-item-data gateway-online-item" style="height: 0rem;"></div>
-                    <div class="gateway-item-rate" style="bottom: 5rem;">12%</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 id="h5" class="gateway-bar-item-data gateway-online-item" style="height: 0rem; "></div>
-                    <div class="gateway-item-rate" style="bottom: 1rem;">1%</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 id="app" class="gateway-bar-item-data gateway-online-item" style="height: 0rem; "></div>
-                    <div class="gateway-item-rate" style="bottom: 1rem">1%</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 id="thirdparty" class="gateway-bar-item-data gateway-online-item" style="height: 0rem; "></div>
-                    <div class="gateway-item-rate" style="bottom: 1rem">1%</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 id="rpmerchant" class="gateway-bar-item-data gateway-offline-item" style="height: 0rem; "></div>
-                    <div class="gateway-item-rate" style="bottom: 9rem;">72%</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 id="rppos" class="gateway-bar-item-data gateway-offline-item" style="height: 0rem; "></div>
-                    <div class="gateway-item-rate" style="bottom: 3rem">8%</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 id="retailapi" class="gateway-bar-item-data gateway-offline-item" style="height: 0rem; "></div>
-                    <div class="gateway-item-rate" style="bottom: 2rem">4%</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;">
+            <!--<div style="padding: 30px; margin-top: 30px;">-->
-                <img src="static/images/annualBill/paihang.png">
+                <!--<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 + '%';
+                    }
                 }
             }
         },

src/main/ui/static/css/annualBill/annual_bill.css

@@ -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% {