123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta content="yes" name="apple-mobile-web-app-capable">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
- <title>限量抢</title>
- <link rel="stylesheet" type="text/css" href="../common/reset.css"/>
- <script type="text/javascript" src="../common/jquery-2.1.0.js"></script>
- <script type="text/javascript">
- document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
- window.onresize = function(){
- document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
- }
- </script>
- <style type="text/css">
- body{background: #181619;}
- .container{width: 100%;min-height: 100vh;background: url(img/bg_img.png) no-repeat;background-size:100% ;}
- ul{width: 3.25rem;margin: auto;}
- ul li{height: 1.59rem;background: linear-gradient(90deg,#6E35FF,#E271C1); border-radius: 0.05rem;margin-top: 0.07rem;position: relative;}
- li:nth-of-type(0){margin-top: 0;}
- ul:last-of-type{padding-bottom: 0.08rem;}
- .yesList li{height: 1.59rem;display: flex;align-items: center;padding:0 0.15rem ;}
- .yesList li img,.noList li .commodity img{width: 1.38rem;height: 1.38rem;}
- .yesList{padding-top: 3.76rem;}
- .noList li .commodity{height:100%;display: flex;align-items: center;padding:0 0.15rem ;}
- .yesList li .con,.noList li .commodity .con{margin-left: 0.12rem;width: 1.45rem;}
- .yesList li .con h3,.noList li .commodity .con h3{color: #FFFFFF;font-size: 0.14rem;line-height: 0.2rem;
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;}
- .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;}
- .yesList li .con .daoshoujia span,.noList li .commodity .con .daoshoujia span{color:
- #DDDDDD;text-decoration: line-through;font-size: 0.14rem;}
- .yesList li .con .daoshoujia em,.noList li .commodity .con .daoshoujia em{color: #FDF402;}
- .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;}
- .yesList li .con .yhq_price span,.noList li .commodity .con .yhq_price span{
- display: inline-block;width: 0.725rem;text-align: center;
- }
- .yesList li .con .yhq_price span:nth-of-type(1),.noList li .commodity .con .yhq_price span:nth-of-type(1){
- color: #FFFFFF;font-size: 0.1rem;
- }
- .yesList li .con .yhq_price span:nth-of-type(2),.noList li .commodity .con .yhq_price span:nth-of-type(2){
- color: #ffffff;font-size: 0.14rem;
- }
- .yesList li .con .yhq_price span:nth-of-type(1) em,.noList li .commodity .con .yhq_price span:nth-of-type(1) em{
- font-size: 0.14rem;
- }
- .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;}
- .noList li .jingqingqidai .con{display: inline-block;}
- .noList li .jingqingqidai img{width: 0.38rem;height: 0.47rem;display: inline-block;vertical-align: middle;}
- .noList li .jingqingqidai span{color: #FFFFFF;line-height: 0.3rem;font-size: 0.22rem;padding-left: 0.3rem;vertical-align: middle;}
- </style>
- </head>
- <body>
- <div class="container">
- <ul class="yesList"></ul>
- <ul class="noList"></ul>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- $().ready(function() {
- yesList();
- })
- function yesList () {
- $.ajax({
- type:"post",
- url:"/api/v2/goods/ActivityJingdong",
- data:{
- page:1
- },
- pageType:'json',
- success:function (res) {
- var html_yes = '';
- var html_no = '';
- if(res && res.errno == 0){
- res.rst.data.forEach(function (item,index){
- if(item.is_click == 1){//可以点击
- html_yes += `<li data_url=${item.item_url} data_id=${item.id}>
- <img src="${item.img}" />
- <div class="con">
- <h3>${item.title}</h3>
- <div class="daoshoujia">
- <em>到手价:¥${item.discount_price}</em><span>¥${item.price}</span>
- </div>
- <div class="yhq_price"><span><em>${item.coupon_price}</em>元优惠券</span><span>立即领券</span></div>
- </div>
- </li>`
- }else{
- html_no += `<li>
- <div class="commodity">
- <img src="${item.img}" />
- <div class="con">
- <h3>${item.title}</h3>
- <div class="daoshoujia">
- <em>到手价:¥${item.discount_price}</em><span>¥${item.price}</span>
- </div>
- <div class="yhq_price"><span><em>${item.coupon_price}</em>元优惠券</span><span>立即领券</span></div>
- </div>
- </div>
- <div class="jingqingqidai">
- <div class="con">
- <img src="img/jingqingqidai.png" />
- <span>敬请期待</span>
- </div>
- </div>
- </li>`
- }
- })
- $(".yesList").html(html_yes)
- $(".noList").html(html_no)
- $(".yesList li").click(function () {
- if($(this).attr('data_url')){
- if($(this).attr('data_id')){
- storeAdvJDPV($(this).attr('data_id'))
- }
- window.location.href = $(this).attr('data_url');
- }
- })
- }
- }
- });
- }
- //统计接口
- function storeAdvJDPV (id) {
- $.ajax({
- type:"post",
- url:"/api/v2/goods/storeAdvJDPV",
- dataType:"json",
- data:{
- id:id
- },
- success:function (res){
-
- }
- });
- }
- </script>
|