Home Verkennen Help
Registreren Inloggen
xiuli.gao
/
youhuiquan
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Commits 899 Publicaties 0 Wiki

Geen omschrijving

Aftakking: master
Aftakkingen Labels
youhuiquan
/
pullNew
/
earnings.html

earnings.html 9.3KB
Permalink Geschiedenis Ruwe

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <meta charset="UTF-8">
    4. 

  4. <meta content="yes" name="apple-mobile-web-app-capable">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    6. 

  6. <title>我的收益</title>
    7. 

  7. <link rel="stylesheet" type="text/css" href="../public/public_css.css"/>
    8. 

  8. <style type="text/css">
    9. 

  9. 	body{min-height:100vh;height:100vh;box-sizing:border-box;-webkit-overflow-scrolling:touch;background: #F4F4F4;}
    10. 

  10. 	em{font-style: normal;}
    11. 

  11. 	.top{width: 100%;height: 2.06rem;background: url(images/bg.png);background-size: 100%;position: fixed;top: 0;left: 0rem;}
    12. 

  12. 	.header{height:0.5rem;font-size:0.18rem;color:#FFFFFF;line-height:0.5rem;    text-align: center;}
    13. 

  13. 	.top p{padding-top: 0.8rem;padding-left: 0.15rem;color: #FFFFFF;font-size: 0.13rem;}
    14. 

  14. 	.top #earnings{font-size: 0.18rem;letter-spacing:0.005rem;vertical-align: middle;}
    15. 

  15. 	.tab{width:3.45rem;height:4.85rem;margin: auto;background:#FFFFFF;border-radius:0.12rem;position: fixed;top: 1.8rem;left: 0.15rem;    overflow: hidden;overflow-y: scroll;}
    16. 

  16. 	.tab .tab_top{width: 3.45rem; position: fixed;background:#ffffff;}
    17. 

  17. 	.tab_menu {height: 0.45rem;}
    18. 

  18. 	.tab_menu div:nth-child(1){left: 0;}
    19. 

  19. 	.tab_menu div:nth-child(2){left: 50%;}
    20. 

  20. 	.tab_menu div{position: fixed;float:left;width: 50%;height: 0.47rem;line-height: 0.47rem;text-align: center;background: #FFF;font-size: 0.15rem;}
    21. 

  21. 	.tab .des{color: #333333;font-size: 0.12rem;text-align: center;padding-bottom: 0.13rem;border-bottom:0.005rem solid #DADADA ;margin: 0 0.2rem;}
    22. 

  22. 	.selected,.hover{color: #EF3B3B;}
    23. 

  23. 	.tab_con{width: 100%;height: 4.86rem;background: #F4F4F4;    padding-top: 0.6rem;}
    24. 

  24. 	.item{width: 100%;height: 4.86rem;padding:0 0.09rem;padding-top: 0.15rem;background: #FFF;overflow-y: scroll;}
    25. 

  25. 	.item li{height: 0.5rem;border-bottom: 0.005rem solid #DADADA;box-sizing: border-box;color: #333333;}
    26. 

  26. 	.item li .left {width: 70%;float: left;}
    27. 

  27. 	.item li .name{font-size: 0.12rem;    padding-top: 0.1rem;padding-bottom: 0.06rem;}
    28. 

  28. 	.item li .userName{ display: inline-block;padding-left: 0.16rem;padding-right: 0.1rem;width: 1.17rem;white-space: nowrap;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;}
    29. 

  29. 	.item li .userName,.item li .userState{font-size: 0.13rem;}
    30. 

  30. 	.item li .create{font-size: 0.1rem;color: #666666;}
    31. 

  31. 	.item li .bonus{display:block;float:right;font-size: 0.13rem;margin-top: 0.13rem;}
    32. 

  32. 	.item li .money{font-size: 0.15rem; color: #EF3B3B ;}
    33. 

  33. </style>
    34. 

  34. <script type="text/javascript">
    35. 

  35. 		document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
    36. 

  36. 	window.onresize = function(){
    37. 

  37. 		document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
    38. 

  38. 	}
    39. 

  39. </script>
    40. 

  40. </head>
    41. 

  41. <body>
    42. 

  42. 	<div class="top">
    43. 

  43. 		<div class="header">拉新拿奖</div>
    44. 

  44. 		<p>我的收益:￥<span id="earnings">1666</span></p>
    45. 

  45. 	</div>
    46. 

  46. 	<div class="tab">
    47. 

  47. 		<div class="tab_top">
    48. 

  48. 			<div class="tab_menu">
    49. 

  49. 		        <div class="selected">淘宝收益</div>
    50. 

  50. 		        <div>支付宝收益</div>
    51. 

  51. 		    </div>
    52. 

  52. 		    <p class="des">6月份收益8月25号发放</p>
    53. 

  53. 		</div>
    54. 

  54. 		    
    55. 

  55. 		    <div class="tab_con">
    56. 

  56. 		      <div class="tab_tb">
    57. 

  57. 		      	<ul class="item">
    58. 

  58. 		      		<li><div class="left"><p class="name">会员名<span class="userName">小AAAAA</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    59. 

  59. 		      		<li><div class="left"><p class="name">会员名<span class="userName">小AABBBB</span><span class="userState">完成绑卡</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    60. 

  60. 		      		<li><div class="left"><p class="name">会员名<span class="userName">嗯嗯</span><span class="userState">完成复购</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    61. 

  61. 		      		<li><div class="left"><p class="name">会员名<span class="userName">大哥请留步再走啊</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    62. 

  62. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要做个早日暴富的人</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    63. 

  63. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    64. 

  64. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    65. 

  65. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    66. 

  66. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    67. 

  67. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    68. 

  68. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    69. 

  69. 

  70. 		      	</ul>
    71. 

  71. 		      </div>
    72. 

  72. 		      <div class="tab_zfb hide" style="display: none;">
    73. 

  73. 		      	<ul class="item">
    74. 

  74. 		      		<li><div class="left"><p class="name">会员名<span class="userName">小AAAAA</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    75. 

  75. 		      		<li><div class="left"><p class="name">会员名<span class="userName">小AABBBB</span><span class="userState">完成绑卡</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    76. 

  76. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">完成复购</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    77. 

  77. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    78. 

  78. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    79. 

  79. 		      		<li><div class="left"><p class="name">会员名<span class="userName">我要早日暴富</span><span class="userState">首购下单</span></p><p class="create">创建时间 <span class="time">2018.07.20-14:00</span></p></div><p class="bonus">奖金<span class="money">24</span>元</p></li>
    80. 

  80. 		      		
    81. 

  81. 				</ul>
    82. 

  82. 		      </div>
    83. 

  83. 		    </div>
    84. 

  84. 		</div>
    85. 

  85. 

  86. </body>
    87. 

  87. </html>
    88. 

  88. <script type="text/javascript" src="../public/jquery-2.1.0.js"></script>
    89. 

  89. <script type="text/javascript">
    90. 

  90. 	
    91. 

  91. 	$().ready(function(){
    92. 

  92. 		$('.item').scroll(function(){
    93. 

  93. 			var scrollT = $(this)[0].scrollTop;
    94. 

  94. 			var scrollH = $(this)[0].scrollHeight;
    95. 

  95. 			var viewH =$(this).height();
    96. 

  96. //			console.log(scrollT,scrollH,viewH);
    97. 

  97. 			if(scrollT + viewH >= scrollH -18){
    98. 

  98. 				console.log(scrollT+viewH,scrollH);
    99. 

  99. 				alert('到底啦')
    100. 

  100. 			}
    101. 

  101. 		})
    102. 

  102. 	})
    103. 

  103. 		
    104. 

  104. 	
    105. 

  105. 	$(function () {
    106. 

  106.       var $div_list = $("div.tab_menu div");
    107. 

  107.       $div_list.click(function () {       //定义了tan_menu对应的单击事件，也就是类别的单击事件。
    108. 

  108.         $(this).addClass("selected")
    109. 

  109.         .siblings().removeClass("selected");
    110. 

  110.         var index = $div_list.index(this);
    111. 

  111.         $("div.tab_con>div").eq(index).show()
    112. 

  112.         .siblings().hide();
    113. 

  113.       }).hover(function () {         //定义了鼠标滑过特效
    114. 

  114.         $(this).addClass("hover");
    115. 

  115.       }, function () {
    116. 

  116.         $(this).removeClass("hover");
    117. 

  117.       });
    118. 

  118.     });
    119. 

  119. 	
    120. 

  120. 	
    121. 

  121. </script>
    122.