Nav apraksta

list.html 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <title>限量抢</title>
  8. <link rel="stylesheet" type="text/css" href="../common/reset.css"/>
  9. <script type="text/javascript" src="../common/jquery-2.1.0.js"></script>
  10. <script type="text/javascript">
  11. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  12. window.onresize = function(){
  13. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  14. }
  15. </script>
  16. <style type="text/css">
  17. body{background: #181619;}
  18. .container{width: 100%;min-height: 100vh;background: url(img/bg_img.png) no-repeat;background-size:100% ;}
  19. ul{width: 3.25rem;margin: auto;}
  20. ul li{height: 1.59rem;background: linear-gradient(90deg,#6E35FF,#E271C1); border-radius: 0.05rem;margin-top: 0.07rem;position: relative;}
  21. li:nth-of-type(0){margin-top: 0;}
  22. ul:last-of-type{padding-bottom: 0.08rem;}
  23. .yesList li{height: 1.59rem;display: flex;align-items: center;padding:0 0.15rem ;}
  24. .yesList li img,.noList li .commodity img{width: 1.38rem;height: 1.38rem;}
  25. .yesList{padding-top: 3.76rem;}
  26. .noList li .commodity{height:100%;display: flex;align-items: center;padding:0 0.15rem ;}
  27. .yesList li .con,.noList li .commodity .con{margin-left: 0.12rem;width: 1.45rem;}
  28. .yesList li .con h3,.noList li .commodity .con h3{color: #FFFFFF;font-size: 0.14rem;line-height: 0.2rem;
  29. overflow : hidden;
  30. text-overflow: ellipsis;
  31. display: -webkit-box;
  32. -webkit-line-clamp: 3;
  33. -webkit-box-orient: vertical;}
  34. .yesList li .con .daoshoujia,.noList li .commodity .con .daoshoujia{color: #FFFFFF;font-size: 0.15rem;line-height: 0.21rem;margin-top: 0.2rem;display: flex;align-items: center;justify-content: space-between;}
  35. .yesList li .con .daoshoujia span,.noList li .commodity .con .daoshoujia span{color:
  36. #DDDDDD;text-decoration: line-through;font-size: 0.14rem;}
  37. .yesList li .con .daoshoujia em,.noList li .commodity .con .daoshoujia em{color: #FDF402;}
  38. .yesList li .con .yhq_price,.noList li .commodity .con .yhq_price{width: 1.45rem;height: 0.28rem;background: url(img/bg_yhq.png?v=1) no-repeat;background-size:100% ;margin-top: 0.08rem;font-size: 0.14rem;line-height: 0.28rem;color:#FFFFFF;}
  39. .yesList li .con .yhq_price span,.noList li .commodity .con .yhq_price span{
  40. display: inline-block;width: 0.725rem;text-align: center;
  41. }
  42. .yesList li .con .yhq_price span:nth-of-type(1),.noList li .commodity .con .yhq_price span:nth-of-type(1){
  43. color: #FFFFFF;font-size: 0.1rem;
  44. }
  45. .yesList li .con .yhq_price span:nth-of-type(2),.noList li .commodity .con .yhq_price span:nth-of-type(2){
  46. color: #ffffff;font-size: 0.14rem;
  47. }
  48. .yesList li .con .yhq_price span:nth-of-type(1) em,.noList li .commodity .con .yhq_price span:nth-of-type(1) em{
  49. font-size: 0.14rem;
  50. }
  51. .noList li .jingqingqidai{width:100%;height:100%;border-radius:0.05rem;display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;}
  52. .noList li .jingqingqidai .con{display: inline-block;}
  53. .noList li .jingqingqidai img{width: 0.38rem;height: 0.47rem;display: inline-block;vertical-align: middle;}
  54. .noList li .jingqingqidai span{color: #FFFFFF;line-height: 0.3rem;font-size: 0.22rem;padding-left: 0.3rem;vertical-align: middle;}
  55. </style>
  56. </head>
  57. <body>
  58. <div class="container">
  59. <ul class="yesList"></ul>
  60. <ul class="noList"></ul>
  61. </div>
  62. </body>
  63. </html>
  64. <script type="text/javascript">
  65. $().ready(function() {
  66. yesList();
  67. })
  68. function yesList () {
  69. $.ajax({
  70. type:"post",
  71. url:"/api/v2/goods/ActivityJingdong",
  72. data:{
  73. page:1
  74. },
  75. pageType:'json',
  76. success:function (res) {
  77. var html_yes = '';
  78. var html_no = '';
  79. if(res && res.errno == 0){
  80. res.rst.data.forEach(function (item,index){
  81. if(item.is_click == 1){//可以点击
  82. html_yes += `<li data_url=${item.item_url} data_id=${item.id}>
  83. <img src="${item.img}" />
  84. <div class="con">
  85. <h3>${item.title}</h3>
  86. <div class="daoshoujia">
  87. <em>到手价:¥${item.discount_price}</em><span>¥${item.price}</span>
  88. </div>
  89. <div class="yhq_price"><span><em>${item.coupon_price}</em>元优惠券</span><span>立即领券</span></div>
  90. </div>
  91. </li>`
  92. }else{
  93. html_no += `<li>
  94. <div class="commodity">
  95. <img src="${item.img}" />
  96. <div class="con">
  97. <h3>${item.title}</h3>
  98. <div class="daoshoujia">
  99. <em>到手价:¥${item.discount_price}</em><span>¥${item.price}</span>
  100. </div>
  101. <div class="yhq_price"><span><em>${item.coupon_price}</em>元优惠券</span><span>立即领券</span></div>
  102. </div>
  103. </div>
  104. <div class="jingqingqidai">
  105. <div class="con">
  106. <img src="img/jingqingqidai.png" />
  107. <span>敬请期待</span>
  108. </div>
  109. </div>
  110. </li>`
  111. }
  112. })
  113. $(".yesList").html(html_yes)
  114. $(".noList").html(html_no)
  115. $(".yesList li").click(function () {
  116. if($(this).attr('data_url')){
  117. if($(this).attr('data_id')){
  118. storeAdvJDPV($(this).attr('data_id'))
  119. }
  120. window.location.href = $(this).attr('data_url');
  121. }
  122. })
  123. }
  124. }
  125. });
  126. }
  127. //统计接口
  128. function storeAdvJDPV (id) {
  129. $.ajax({
  130. type:"post",
  131. url:"/api/v2/goods/storeAdvJDPV",
  132. dataType:"json",
  133. data:{
  134. id:id
  135. },
  136. success:function (res){
  137. }
  138. });
  139. }
  140. </script>