Няма описание

earnings.html 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="UTF-8">
  4. <meta content="yes" name="apple-mobile-web-app-capable">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  6. <title>我的收益</title>
  7. <link rel="stylesheet" type="text/css" href="../public/public_css.css"/>
  8. <style type="text/css">
  9. body{min-height:100vh;height:100vh;box-sizing:border-box;-webkit-overflow-scrolling:touch;background: #F4F4F4;}
  10. em{font-style: normal;}
  11. .top{width: 100%;height: 2.06rem;background: url(images/bg.png);background-size: 100%;position: fixed;top: 0;left: 0rem;}
  12. .header{height:0.5rem;font-size:0.18rem;color:#FFFFFF;line-height:0.5rem; text-align: center;}
  13. .top p{padding-top: 0.8rem;padding-left: 0.15rem;color: #FFFFFF;font-size: 0.13rem;}
  14. .top #earnings{font-size: 0.18rem;letter-spacing:0.005rem;vertical-align: middle;}
  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. .tab .tab_top{width: 3.45rem; position: fixed;background:#ffffff;}
  17. .tab_menu {height: 0.45rem;}
  18. .tab_menu div:nth-child(1){left: 0;}
  19. .tab_menu div:nth-child(2){left: 50%;}
  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. .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. .selected,.hover{color: #EF3B3B;}
  23. .tab_con{width: 100%;height: 4.86rem;background: #F4F4F4; padding-top: 0.6rem;}
  24. .item{width: 100%;height: 4.86rem;padding:0 0.09rem;padding-top: 0.15rem;background: #FFF;overflow-y: scroll;}
  25. .item li{height: 0.5rem;border-bottom: 0.005rem solid #DADADA;box-sizing: border-box;color: #333333;}
  26. .item li .left {width: 70%;float: left;}
  27. .item li .name{font-size: 0.12rem; padding-top: 0.1rem;padding-bottom: 0.06rem;}
  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. .item li .userName,.item li .userState{font-size: 0.13rem;}
  30. .item li .create{font-size: 0.1rem;color: #666666;}
  31. .item li .bonus{display:block;float:right;font-size: 0.13rem;margin-top: 0.13rem;}
  32. .item li .money{font-size: 0.15rem; color: #EF3B3B ;}
  33. </style>
  34. <script type="text/javascript">
  35. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  36. window.onresize = function(){
  37. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <div class="top">
  43. <div class="header">拉新拿奖</div>
  44. <p>我的收益:¥<span id="earnings">1666</span></p>
  45. </div>
  46. <div class="tab">
  47. <div class="tab_top">
  48. <div class="tab_menu">
  49. <div class="selected">淘宝收益</div>
  50. <div>支付宝收益</div>
  51. </div>
  52. <p class="des">6月份收益8月25号发放</p>
  53. </div>
  54. <div class="tab_con">
  55. <div class="tab_tb">
  56. <ul class="item">
  57. <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>
  58. <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>
  59. <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>
  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. <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. <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. <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. <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. <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. <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. <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. </ul>
  69. </div>
  70. <div class="tab_zfb hide" style="display: none;">
  71. <ul class="item">
  72. <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>
  73. <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>
  74. <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>
  75. <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>
  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. <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. </ul>
  79. </div>
  80. </div>
  81. </div>
  82. </body>
  83. </html>
  84. <script type="text/javascript" src="../public/jquery-2.1.0.js"></script>
  85. <script type="text/javascript">
  86. $().ready(function(){
  87. $('.item').scroll(function(){
  88. var scrollT = $(this)[0].scrollTop;
  89. var scrollH = $(this)[0].scrollHeight;
  90. var viewH =$(this).height();
  91. // console.log(scrollT,scrollH,viewH);
  92. if(scrollT + viewH >= scrollH -18){
  93. console.log(scrollT+viewH,scrollH);
  94. alert('到底啦')
  95. }
  96. })
  97. })
  98. $(function () {
  99. var $div_list = $("div.tab_menu div");
  100. $div_list.click(function () { //定义了tan_menu对应的单击事件,也就是类别的单击事件。
  101. $(this).addClass("selected")
  102. .siblings().removeClass("selected");
  103. var index = $div_list.index(this);
  104. $("div.tab_con>div").eq(index).show()
  105. .siblings().hide();
  106. }).hover(function () { //定义了鼠标滑过特效
  107. $(this).addClass("hover");
  108. }, function () {
  109. $(this).removeClass("hover");
  110. });
  111. });
  112. </script>