master

分支 (1)

管理

管理

master

bife
/
首页.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="鲸鱼">
	<title>首页</title>
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/countUp.min.js"></script>
	<script>
		$(function(){

			//定义数据圆尺寸
			var dn = $('.data-list li').size();
			var dw = $('.data-list li').width()*dn+20*4;
			$('.data-list').width(dw+'px');

			//交易金额数字变化
			setTimeout(function(){
				//控制数字变化
				var options = {
					useEasing: true,
					useGrouping: true,
					separator: ',', //此处控制数字之间是否要逗号
					decimal: '.'
				};
				var kemo1 = new CountUp("k-data1",0, 12345, 0,1.2,options);
				var kemo2 = new CountUp("k-data2",0, 44234, 0,1.2,options);
				var kemo3 = new CountUp("k-data3",0, 1333, 0,1.2,options);
				var kemo4 = new CountUp("k-data4",0, 13423433, 0,1.2,options);
				var kemo5 = new CountUp("k-data5",0, 70798796, 0,1.2,options);
				$(document).ready(function(e) {
					 kemo1.start();
					 kemo2.start();
					 kemo3.start();
					 kemo4.start();
					 kemo5.start();

				});
			},0)

			//排行占比动画
			var total = 100;
			$('.data-rank li:not(.title)').each(function(){
				var w = $(this).find('span:last').width()*0.8;
				var rate = $(this).find('span:last').text();
				var w2 = parseInt((rate/total)*w);
				$(this).find('span:last b').animate({
					'width':w2+'px'
				},1500);
			});
		});
	</script>
</head>
<body>
	<div class="wholeBox">

		<!--数据圆-->
		<div class="data-list">
			<ul>
				<li class="li1">
					<p>昨日新增注册</p>
					<p class="p2"><span id="k-data1">0</span><span>人</span></p>
				</li>
				<li class="li2">
					<p>昨日首次绑卡用户</p>
					<p class="p2"><span id="k-data2">0</span><span>人</span></p>
				</li>
				<li class="li3">
					<p>昨日首投用户</p>
					<p class="p2"><span id="k-data3">0</span><span>人</span></p>
				</li>
				<li class="li4">
					<p>昨日首投金额</p>
					<p class="p2"><span>￥</span><span id="k-data4">0</span></p>
				</li>
				<li class="li5">
					<p>昨日总投资金额</p>
					<p class="p2"><span>￥</span><span id="k-data5">0</span></p>
				</li>
			</ul>
			<div class="whiteBlock"></div>
		</div>

		<!--数据排名-->
		<div class="data-rank">
			<div class="left">
				<ul>
					<li class="title"><span>昨日投资笔数排名</span><span>投资笔数</span></li>
					<li><span><i>1</i>004战区</span><span><b></b>100</span></li>
					<li><span><i>2</i>004战区</span><span><b></b>90</span></li>
					<li><span><i>3</i>004战区</span><span><b></b>80</span></li>
					<li><span><i>4</i>004战区</span><span><b></b>70</span></li>
					<li><span><i>5</i>004战区</span><span><b></b>60</span></li>
					<li><span><i>6</i>004战区</span><span><b></b>50</span></li>
					<li><span><i>7</i>004战区</span><span><b></b>40</span></li>
					<li><span><i>8</i>004战区</span><span><b></b>30</span></li>
					<li><span><i>9</i>004战区</span><span><b></b>20</span></li>
					<li><span><i>10</i>004战区</span><span><b></b>10</span></li>
				</ul>
			</div>
			<div class="left right">
				<ul>
					<li class="title"><span>昨日投资笔数排名</span><span>投资笔数</span></li>
					<li><span><i>1</i>004战区</span><span><b></b>100</span></li>
					<li><span><i>2</i>004战区</span><span><b></b>90</span></li>
					<li><span><i>3</i>004战区</span><span><b></b>80</span></li>
					<li><span><i>4</i>004战区</span><span><b></b>70</span></li>
					<li><span><i>5</i>004战区</span><span><b></b>60</span></li>
					<li><span><i>6</i>004战区</span><span><b></b>50</span></li>
					<li><span><i>7</i>004战区</span><span><b></b>40</span></li>
					<li><span><i>8</i>004战区</span><span><b></b>30</span></li>
					<li><span><i>9</i>004战区</span><span><b></b>20</span></li>
					<li><span><i>10</i>004战区</span><span><b></b>10</span></li>
				</ul>
			</div>
		</div>
	</div>

</body>
</html>