dfgApi.git - Gitblit

zhaojs

2023-06-30 5860e50a716726ad17168eaf2598167939f3f836

no message

已添加2个文件

	public/html/bottom_price.html	742 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/html/css/bottomprice.css	1093 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 public/html/bottom_price.html

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,742 @@
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="screen-orientation" content="portrait">
  <meta name="x5-orientation" content="portrait">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="browsermode" content="application">
  <meta name="x5-page-mode" content="app">
  <meta name="msapplication-tap-highlight" content="no">
  <meta content="telephone=no" name="format-detection">
  <title>åå²æ°ä½</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1534407_5zmyvxx3vxs.css">
  <script type="text/javascript" src="https://img.ushopvip.com/js/uni-webview-js.js"></script>
  <script>
  document.write("<link rel=\"stylesheet\" href=\"./css/bottomprice.css?t=" + (Date.now() - Date.now() % (60 * 1000 * 30)) + "\"/>");
  </script>
  <style>
     .box
        {
            position:absolute;
            width: 100%;
            height: 100%;
            background: url(https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5loading.gif) no-repeat fixed top;
            background-size: 70px 70px;
        }
        .list{
            position: relative;
            top: 0;
            width: 100%;
        }
        .category {
        height: 0.88rem;
        line-height: 0.88rem;
        font-size: 0.3rem;
        overflow: hidden;
        padding: 0 0.1rem;
    }

    .items > span.act {
        background: #e7013a;
        color: white;
        padding: 0 0.2rem;
        border-radius:0.4rem;
    }

    .items > span {
        color: #fff;
        font-weight: 500;
        margin: 0 0.1rem;
        display: inline-block;
        line-height: 0.48rem;
        height: 0.48rem;
        font-size: .28rem;
    }

    .items {
        overflow: scroll;
        white-space: nowrap;
    }

  </style>
</head>

<body>
  <div class="box">
    <div class="list">
<div id="app" style="background-color:#e7013a;padding-top:0.5rem" v-cloak>
  <template v-if="isexplain && issource">
    <div class="main">
    </div>
    <div class="list-wrapper">
      <div class="newtop">
        <div class="search" style="width:100%">
          <!---ç±»ç®-->
          <div class="category">
            <div class="items">
                <span :class="active == 0 ? 'act':''" @click="handleSwiperNav(0, $event)">å¨é¨</span>
                <span :class="active == i.cid ? 'act':''" v-for="i in nav" :key="i.cid"
                      @click="handleSwiperNav(i.cid, $event)">
                    {{i.cname}}
                </span>
            </div>
        </div>
        </div>
        <div class="sort">
          <ul class="sort-list">
            <li v-for="item in fristOrderSort" v-bind:class="{'sort-active': item.number == sortNumber}"
                v-on:click="handleSort(item)">
              {{ item.name }}
              <span v-show="item.min !== item.max">
                    <i v-bind:class="{'arrow-active': item.min == sortId}"></i>
                    <i v-bind:class="{'arrow-active': item.max == sortId}"></i>
                  </span>
            </li>
          </ul>
        </div>
      </div>
      
      <ul class="shoplist contscore" v-if="fristOrderItems.length>0">
        <li v-for="(item,index) in fristOrderItems">
          <img class="shop-img" v-lazy="item.itempic" v-if="item.itempic">
          <img class="shop-img" src="http://img.bc.haodanku.com/haodanku-activity/1596092443" v-else>
          <div class="shop-box" v-bind:class="!item.couponurl?'active':''">
            <p class="shop-title">{{item.itemshorttitle}}</p>
            <div class="shop-tips">
              <img src="http://img.bc.haodanku.com/haodanku/1613978202">
              <p>é¢åç¾å°çº¢åå¯åå å æµæ£ï¼</p>
            </div>
            <div class="shop-tips row-2">
              <img src="http://img.bc.haodanku.com/cms/1627703910">
              <p>åºéºï¼{{item.shopname}}</p>
            </div>
            <div>
              <div class="ticket" v-if="item.couponurl"><span class="name" style="height: 0.3rem;">å¸</span><span
                class="value" style="height: 0.3rem;">ï¿¥{{item.couponmoney}}</span></div>
                <div class="ticket" v-if="item.couponurl"><span class="name" style="height: 0.3rem;background:linear-gradient(180deg,#b21db6,#ad25d1)">è¿</span><span
                  class="value" style="border:1px solid #b817ce;color:#b817ce;height: 0.3rem;">ï¿¥{{item.fanli}}</span></div>
            </div>
            
            <div class="shop-b">
              <div class="shop-b-l">
                <p class="shop-b-m"><i>å¸åä»·</i>ï¿¥{{parseFloat(item.itemendprice)}}</p>
                <p class="shop-b-label">ï¿¥{{parseFloat(item.itemprice)}}</p>
              </div>
            </div>
            
            <span class="shop-btn shop-coupon" v-on:click="getTaocode(item,true)" v-if="item.couponurl">ç«å³é¢å¸</span>
            <span class="shop-btn" v-on:click="getTaocode(item)">æç´¢ä¸å</span>
          </div>
        </li>
      </ul>
      <div class="combox">
        <p class="realpic-loading" v-if="loadshow"><i class="vmIconLoad"></i><em>æ°æ®å è½½ä¸...</em></p>
        <p class="realpic-loading" v-else>æ°æ®å·²å è½½å®äº</p>
      </div>
    </div>
 <!--    <div class="free-share" v-bind:class="acFocus?'active':''">
      <img src="http://img.bc.haodanku.com/haodanku/1613981706" v-on:click="copyShare()" class="share-btn">
    </div> -->
    <div>
      <div class="back_top" v-if="scrollShow" v-on:click="arrowTop()"></div>
      <div class="tokenbox tokenbox1">
        <em class="shut" v-on:click="shutBtn"></em>
        <span>{{taoToken}}</span>
        <p>å¤å¶æ·å£ä»¤ï¼æå¼ææºæ·å®é¢å</p>
        <span class="copybtn" v-on:click="copyBtn('.copybtn')">å¤å¶æ·å£ä»¤</span>
      </div>
    </div>
  </template>
  
  <div v-if="!isexplain">
    <img src="http://img.bc.haodanku.com/haodanku-activity/1596022875" class="goback"
         v-on:click="arrowBtn('isexplain')">
    <img src="http://img.bc.haodanku.com/haodanku_activity/1596768292">
  </div>
  
  <div v-if="!issource">
    <img src="http://img.bc.haodanku.com/haodanku-activity/1596022875" class="goback"
         v-on:click="arrowBtn('issource')">
    <img src="http://img.bc.haodanku.com/haodanku-activity/1596032111" alt="">
  </div>
  
  <div class="direct-img" v-show="showDirect" v-on:click="closeDirect">
    <div class="direct-box">
      <div class="box-header">
        ä½¿ç¨æç¨
        <img
          v-on:click="closeDirect"
          class="btn-close"
          src="http://img-haodanku-com.cdn.fudaiapp.com/FsHmpTJUJxhdJ7X8YL36ix1GduZg"
          alt="">
      </div>
      <div class="box-content">
        <img src="http://img.bc.haodanku.com/cms/1627703471?t=1" alt="">
      </div>
    </div>
  </div>
  <transition name="fade">
    <div class="snapped-up" v-show="snappedUp.show">
      <div class="box">
        <div class="box-header">
          <img
            class="btn-close"
            v-on:click="closeSnappedUpDialog"
            src="http://img.bc.haodanku.com/haodanku/1596096751"
            alt="">
        </div>
        <div class="box-content">
          <div class="title">
            å¤å¶ãä¸åé¾æ¥ãæå¼ææ·APPï¼<br>
            æç´¢ç«å³ä¸å ~
          </div>
          <img src="http://img.bc.haodanku.com/cms/1627701410" alt="">
          <button class="btn copy" v-on:click="copyBtn('.copy.btn')">ç¹å»å¤å¶</button>
        </div>
      </div>
    </div>
  </transition>
  <van-overlay :show="titleCopyTipsVisible" @click="titleCopyTipsVisible = false">
    <div
      class="wrapper"
      style="display:flex;align-items:center;justify-content:center;height: 100%;"
    >
      <img style="width: 6rem;" src="http://img-haodanku-com.cdn.fudaiapp.com/FhYQl6NqvQIycYZS1DM9DLBELA72" alt="">
    </div>
  </van-overlay>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-lazyload/1.3.3/vue-lazyload.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
<script type="text/javascript" src="https://public.ffquan.cn/lib/swiper/js/swiper.min.js"></script>
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ScrollToFixed/1.0.8/jquery-scrolltofixed-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/device.js/0.2.7/device.min.js"></script>
<script src="https://img.bc.haodanku.com/cms/SpaUtils.min.js"></script>
<script src="https://cdn.staticfile.org/vant/2.12.5/vant.min.js"></script>
<link href="https://cdn.staticfile.org/vant/2.12.5/index.min.css" rel="stylesheet">
<script src="https://img.bc.haodanku.com/cdn/vant-touch-emulator.js"></script>
<script>
var vmUrlSearchs = null;

function vmRequest(name) {
  if(!vmUrlSearchs) {
    vmUrlSearchs = new vmUrlSearch();
  }
  return vmUrlSearchs[name];
}

function vmUrlSearch() {
  var name, value;
  var str = location.href;
  var num = str.indexOf("?");
  str = str.substr(num + 1);
  var arr = str.split("&");
  for(var i = 0; i < arr.length; i++) {
    if(num = arr[i].indexOf("=") != -1) {
      num = arr[i].indexOf("=");
    } else {
      num = arr[i].indexOf("/");
    }
    if(num > 0) {
      name = arr[i].substring(0, num);
      value = arr[i].substr(num + 1);
      this[name] = value;
    }
  }
}


Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: "http://img.bc.haodanku.com/haodanku/1595237918",
  loading: "http://img.bc.haodanku.com/haodanku-activity/1596092443",
  attempt: 1
});
var app = new Vue({
  el: "#app",
  data: function() {
    return {
        active:0,
        nav:[
        ],
      posturl:"http://dfg.shop.com",
      //posturl:"http://appapitest.ushopvip.com",
      showDirect: false,
      codeId: vmRequest("code"),

      fristOrderSort: [
        {
          name: "ç»¼å",
          bool: true,
          max: "",
          min: "",
          number: 0
        },
        {
          name: "ä»·æ ¼",
          bool: false,
          max: 5,
          min: 6,
          number: 5
        },
        {
          name: "ä½£éæ¯ä¾",
          bool: false,
          max: 2,
          min: 2,
          number: 4
        },
        {
          name: "éé",
          bool: false,
          max: 5,
          min: 5,
          number: 2
        },
        {
          name: "é¢å¸é",
          bool: false,
          max: 5,
          min: 5,
          number: 3
        }
      ],
      sortId: "",
      sortBool: true,
      sortNumber: 0,

      fristOrderItems: [],
      topArr: [],


      page: 1,
      loadmsg: true,
      loadshow: true,

      scrollShow: false,

      taoToken: "",

      isexplain: true,
      issource: true,
      locationUrl: window.location.href,

      keyword: "",

      sigclick: false,

      playState: false,
      vmHttp: window.location.protocol.substring(0, window.location.protocol.length - 1) != "file" ? window.location.protocol.substring(0, window.location.protocol.length - 1) : "https",

      acFocus: false,
      outerHeight: "",

      // ç«å³æ¢è´å¼¹çªç¸å³
      snappedUp: {
        show: false,
        code: ""
      },

      help_info: [],

      sign_info: {},
      titleCopyTipsVisible: false,
    };
  },
  created: function() {
    this.ajaxFristOrderItems(true);
  },
  mounted: function() {
    this.outerHeight = $(".banenr").outerHeight(true) + $(".secret-wrapper").outerHeight(true) + $(".list-wrapper>h6").outerHeight(true) + 2;
    this.taobaoscroll();
    this.getcategory();
    this.touch();
  },
  methods: {
    handleSwiperNav: function (key, event) {
                console.log(key, event.target)
                this.active = key;
                var _this = this;
                $(document).scrollTop(0);
                this.active = key;
                setTimeout(function () {
                    //_this.getGoodsList();
                }, 200)

            },
                // è·ååç±»
            getcategory: function() {
                var _this = this;
                var result = '';
                $.ajax({
                    url: 'https://openapi.dataoke.com/api/category/get-super-category',
                    type: 'get',
                    data: {
                        appKey: '641129ab40767',
                        version: 'v1.3.0',
                    },
                    async: false,
                }).done(function(res) {
                    _this.nav = res.data
                });
            },
    touch:function()
            {
                const box = document.querySelector('.box')
                const list = document.querySelector('.list');
                // æä¸å±å¹çä½ç½®
                let touchStartPosition = 0
            
                // touchstartäºä»¶
                box.addEventListener('touchstart', function (e) {
                    let touch = e.touches[0]
                    touchStartPosition = touch.pageY
                })
                // touchmoveäºä»¶
                box.addEventListener('touchmove', function (e) {
                   
                    let touch = e.touches[0]
                    // åè¡¨çtopå¼çäºåè¡¨ç¸å¯¹äºboxçåç§»é+æ»å¨çè·ç¦»
                    let pySize= list.offsetTop + touch.pageY - touchStartPosition;
                    if(pySize>=110)
                    {
                      return;
                    }
                    if(pySize<0)
                    {
                        return;
                    }
                    var scroll = document.getElementsByClassName('contscore')
                        var srollPos = $('.contscore').scrollTop(); //æ»å¨æ¡è·é¡¶é¨è·ç¦»(é¡µé¢è¶åºçªå£çé«åº¦)
                    if(srollPos>0)
                    {
                        return;
                    }
                    list.style.top =pySize + 'px';
                    // å®ç°å¹³æ»çæ»å¨
                    touchStartPosition = touch.pageY
                })
                // touchendäºä»¶
                box.addEventListener('touchend', function (e) {
                    let top = list.offsetTop
                  
                    if (top > 70) {
                        // å¨æ¤å¤è°ç¨å·æ°åçåè°
                        console.log('å·æ°');
                        location.reload();
                    }
                    
                    if(top<0)
                    {
                        list.style.top=0;
                    }
                    if (top > 0) {
                        // éè¿å®æ¶å¨å¹³æ»çå°listçtop = 0
                        let timer = setInterval(() => {
                            top=top-5;
                        list.style.top = top + 'px'
                        if (top <= 0) {
                            list.style.top=0;
                            clearInterval(timer)
                        }
                        },1)
                    }
                })
            },
    toSignIn: function() {
      if(!this.sign_info.tpwd) {
        return;
      }
      SpaUtils.copy(this.sign_info.tpwd, "å¤å¶å£ä»¤æåï¼è¯·æå¼æ·å®æµè§é¢åç¾å°çº¢å");
    },
    getUrlPar:function(name)
            {
                var reg=new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                 var r=window.location.search.substr(1).match(reg);
                if(r !=null)return unescape(r[2]);
                 return null;
            },
    arrowBtn: function(val) {
      this[val] = !this[val];
      this.arrowTop();
    },
    taobaoscroll: function() {  //æ»å¨å è½½
      var that = this;
      window.addEventListener("scroll", function() {

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

        if(!that.isexplain || !that.issource) return;
        that.scrollShow = scrollTop > 750;
        if(scrollHeight > clientHeight && scrollTop + clientHeight + 20 >= scrollHeight) {
          if(that.loadmsg && !that.sigclick) {
            that.loadmsg = false;
            that.sigclick = false;
            that.ajaxFristOrderItems();
          }
        }
      });
    },
    ajaxFristOrderItems: function(cb) {
      var that = this;
      if(that.sigclick) {
        if(this.fristOrderItems[0]) {
          this.fristOrderItems.forEach(function(item) {
            item.itempic = "";
          });
        }
        document.documentElement.scrollTop = that.outerHeight;
        document.body.scrollTop = that.outerHeight;
      }
      $.ajax({
              headers:{
              "token":that.getUrlPar("token")
              },
              url:that.posturl+'/api/activity/signRed',
              type:"post",
              dataType:"json",
              data:{
                apikey: '0F92EBA7AADA', //å¿å¡«
                min_size: 20,
                sort: that.sortId,
                min_id: that.page,
                keyword: that.keyword,
                pure_tpwd: vmRequest("pure_tpwd") ? 1 : undefined
              }
              }).done(function(res){
                var data=res.data;
                if(res.code == 0) {
                  that.help_info = data.help_info || [];
                  that.sign_info = data.sign_info || {};
                  if(that.sigclick) {
                    that.fristOrderItems = data.data;
                  } else {
                    that.fristOrderItems = that.fristOrderItems.concat(data.data);
                  }
                  that.topArr = data.top_data;
                  if(that.page != data.min_id) {
                    that.loadmsg = true;
                    that.loadshow = true;
                    that.page = data.min_id;
                  } else {
                    that.loadmsg = false;
                    that.loadshow = false;
                  }
                  that.$nextTick(function() {
                    that.sigclick = false;
                    if(cb) {
                      $(".newtop").scrollToFixed();
                    }

                  });
                } else {
                  that.loadmsg = false;
                  that.loadshow = false;
                  that.sigclick = false;
                  layer.msg(data.msg, {
                    time: 2000,
                    shade: 0.1,
                    shadeClose: true
                  });
                }
             })
         },
    handleSort: function(item) {
      if(this.sortNumber == item.number) {
        if(item.min === item.max) {
          return;
        }
        if(item.bool) {
          this.sortId = item.min;
          item.bool = false;
        } else {
          this.sortId = item.max;
          item.bool = true;
        }
      } else {
        item.bool = true;
        this.sortNumber = item.number;
        this.sortId = item.max;
      }
      this.page = 1;
      this.loadmsg = true;
      this.loadshow = true;
      this.sigclick = true;
      this.ajaxFristOrderItems();
    },
    popupFun: function(classname) {
      layer.open({
        type: 1,
        shift: 0,
        title: false,
        closeBtn: 0,
        shade: 0.4,
        shadeClose: true,
        content: $(classname)
      });
    },
    getTaocode: function(item, isCoupon) {
      // if(!isCoupon && vmRequest("pure_tpwd")) {
      //   // ç´æ¥å¤å¶
      //   copy(item.tpwd, "å¤å¶å£ä»¤æå,è¯·æå¼æ·å®ä¸å");
      if(!isCoupon) {
        // ç´æ¥å¤å¶
        SpaUtils.copy(item.itemtitle, false);
        this.titleCopyTipsVisible = true;
        return;
      }
      var that = this;
      var load = layer.load(1, {shade: 0.3});
      $.ajax({
        type: "Post",
        url: that.vmHttp + "://v2.api.haodanku.com/ratesurl",
        data: {
          apikey: '0F92EBA7AADA', //å¿å¡«
          itemid: item.itemid,
          activityid: isCoupon ? item.activityid : undefined,
          title: item.itemshorttitle,
          itemtitle: item.itemtitle,
          pid: 'mm_4091757048_2861600076_114781900494', //å¿å¡«
          tb_name: 'tb108547775155', //å¿å¡«
          get_taoword: 1,
        },
        dataType: "json",
        timeout: 5000,
        success: function(data) {
          layer.close(load);
          if(data.code == "1") {
            if(!isCoupon) {
            }
            that.taoToken = data.data.taoword;
            if(isCoupon) {
              //that.popupFun(".tokenbox1");
              uni.postMessage({
                data: {
                  action: 'totb',
                  tburl:data.data.link
                }
               })
            } else {
              that.openSnappedUpDialog();
            }
          } else {
            that.msgFun(data.msg);
          }

        },
        error: function() {
          layer.close(load);
          that.msgFun("ç½ç»éè¯¯ï¼è¯·æ£æ¥ç½ç»éè¯");
        }
      });
    },
    msgFun: function(val) {
      layer.msg(val, {
        time: 2000,
        shade: 0.1,
        shadeClose: true
      });
    },
    arrowTop: function() {
      $("body,html").stop(true, true).animate({
        scrollTop: 0
      });
    },
    copyBtn: function(dom) { //å¤å¶å¬å±æ¹æ³
      var that = this;
      var clipboard = new ClipboardJS(dom, {
        text: function(target) {
          return that.taoToken;
        }
      });
      clipboard.on("success", function(e) {
        layer.closeAll();
        that.msgFun(that.snappedUp.show ? "ä¸åé¾æ¥å¤å¶æåï¼è¯·æå¼ææ·APPæç´¢ä¸å" : "å¤å¶å£ä»¤æå,è¯·æå¼æ·å®é¢å");
        e.clearSelection();
        clipboard.destroy();
      });
      clipboard.on("error", function(e) {
        layer.msg("å¤å¶å£ä»¤å¤±è´¥,è¯·æå¨å¤å¶", {
          shade: 0.4,
          time: 1000,
          shadeClose: false
        }, function() {
        });

      });
    },
    copyShare: function() { //å¤å¶å¬å±æ¹æ³
      var that = this;

      var txt = that.locationUrl;

      var clipboard = new ClipboardJS(".share-btn", {
        text: function(target) {
          return txt;
        }
      });
      clipboard.on("success", function(e) {
        that.msgFun("å·²å¤å¶åäº«é¾æ¥");
        console.log(txt);
        e.clearSelection();
        clipboard.destroy();
      });
      clipboard.on("error", function(e) {
        layer.msg("å¤å¶åäº«é¾æ¥å¤±è´¥ï¼", {
          shade: 0.4,
          time: 1000,
          shadeClose: false
        }, function() {
        });

      });
    },
    handleSearch: function() {
      this.page = 1;
      this.loadmsg = true;
      this.loadshow = true;
      this.sigclick = true;
      this.ajaxFristOrderItems();
    },
    shutBtn: function() {
      layer.closeAll();
    },
    playBtn: function() {
      this.playState = true;
    },
    myfocus: function() {
      this.acFocus = true;
    },
    myblur: function() {
      this.acFocus = false;
    },
    openDirect: function() {
      this.showDirect = true;
    },
    closeDirect: function() {
      this.showDirect = false;
    },
    openSnappedUpDialog: function() {
      this.snappedUp.show = true;
    },
    closeSnappedUpDialog: function() {
      this.snappedUp.show = false;
    }
  },
  watch: {}
});
</script>
</body>

</html>

 public/html/css/bottomprice.css

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,1093 @@
body,html {
    padding: 0;
    margin: 0
}

template {
    display: none
}

.root-rem-calc,html {
    font-size: 13.33333vw
}

@media only screen and (min-width: 540px) {
    .root-rem-calc,html {
        font-size:72px!important
    }
}

.max-width {
    max-width: 7.5rem;
    margin: auto
}

html {
    -webkit-text-size-adjust: 100%!important;
    text-size-adjust: 100%!important;
    -moz-text-size-adjust: 100%!important
}

.ellipsis-single {
    white-space: nowrap
}

.ellipsis-multiple,.ellipsis-single {
    overflow: hidden;
    text-overflow: ellipsis
}

.ellipsis-multiple {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal
}

[v-cloak] {
    display: none!important
}

.banner-wrapper {
    display: block;
    width: 7.5rem;
    min-height: 3.4rem
}

.banner-wrapper>img {
    width: 100%
}

.page-container {
    min-height: 100vh;
    max-width: 7.5rem;
    background: $bgColor;
    padding-bottom: 1.2rem;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: .32rem;
    box-shadow: 0 0 8px 8px rgba(0,0,0,.1)
}

.layui-layer {
    font-size: 12px
}

::-webkit-scrollbar {
    all: unset;
    width: 0;
    height: 0
}

::-webkit-scrollbar-thumb {
    border-radius: .05rem;
    background-color: #c1c1c1
}

@media screen and (min-width: 750px) {
    ::-webkit-scrollbar {
        width:.05rem;
        height: .05rem
    }
}

.van-toast--html,.van-toast--text {
    font-size: .24rem
}

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio:1.5) {
    .border-1px:after {
        transform:scaleY(.7)
    }

    .border-1px-v:after {
        transform: scaleX(.7)
    }

    .border-1px-all {
        position: relative
    }

    .border-1px-all:after {
        display: block;
        position: absolute;
        width: 150%;
        height: 150%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(.66667);
        content: ""
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2) {
    .border-1px:after {
        transform:scaleY(.5)
    }

    .border-1px-v:after {
        transform: scaleX(.5)
    }

    .border-1px-all {
        position: relative
    }

    .border-1px-all:after {
        display: block;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(.5);
        content: ""
    }
}

img[lazy=loading] {
    -o-object-fit: fill!important;
    object-fit: fill!important
}

.img-box>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.iconfont {
    font-size: inherit
}

.btn:not(.disabled):not(.active) {
    cursor: pointer
}

.flex-c,.flex-c-1,.flex-c-2,.flex-c-c,.flex-c-evenly,.flex-col-c,.flex-col-c-1,.flex-col-c-2,.flex-col-c-c {
    display: flex;
    align-items: center
}

.flex-c-2,.flex-c-c,.flex-c-evenly,.flex-col-c-2,.flex-col-c-c {
    justify-content: center
}

.flex-c-evenly {
    justify-content: space-evenly
}

.flex-col-c,.flex-col-c-1,.flex-col-c-2,.flex-col-c-c {
    flex-direction: column
}

body {
    font-family: Microsoft YaHei,arial;
    max-width: 7.5rem;
    margin: 0 auto!important;
    font-size: .32rem
}

ol,ul {
    list-style: none
}

li {
    list-style-type: none
}

em,i,th {
    font-style: normal
}

.clearfix:after {
    display: block;
    overflow: hidden;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ""
}

input,select,textarea {
    -webkit-appearance: none;
    outline: 0;
    border: none;
    resize: none;
    color: #939599
}

img {
    width: 100%;
    display: block
}

#app {
    position: relative;
    min-height: 100vh;
    background-color: #da2702
}

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box
}

.comHidden {
    white-space: nowrap
}

.comHidden,.comHidden1 {
    overflow: hidden;
    text-overflow: ellipsis
}

.comHidden1 {
    display: -webkit-box;
    -webkit-line-clamp: 2
}

.comHidden1,.main {
    -webkit-box-orient: vertical
}

.main {
    padding-top: 1.82rem;
    width: 100%;
    height: 100%;
    background: #da2702 url(https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/bottomprice_bg.png) no-repeat 0 0;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
}

.step {
    position: relative;
    width: 7.1rem;
    height: 3.1rem;
    margin: auto
}

.step>img {
    display: block;
    width: 100%
}

.step .step-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: .15rem;
    display: flex;
    flex-direction: column;
    padding: .22rem .54rem 0
}

.step .step-content .title {
    font-size: .4rem;
    line-height: 1em;
    font-weight: 700;
    color: #222;
    background: linear-gradient(0deg,#fe3a3f,#faa450);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center
}

.step .step-content ul {
    flex: 1;
    margin-top: .2rem;
    margin-right: -.54rem;
    overflow-y: auto
}

.step .step-content ul li {
    line-height: .27rem
}

.step .step-content ul li .top-num {
    display: inline-block;
    margin-right: .1rem;
    width: .61rem;
    height: .27rem;
    line-height: .27rem;
    text-align: center;
    background: url(https://img.bc.haodanku.com/cms/1629342498) no-repeat;
    background-size: contain
}

.step .step-content ul li .text,.step .step-content ul li .top-num {
    font-size: .24rem;
    font-weight: 400;
    color: #c78348
}

.step .step-content ul li+li {
    margin-top: .14rem
}

.step .step-content .btn-block {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: .2rem
}

.step .step-content .btn-block .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: .56rem;
    border-radius: .28rem;
    font-size: .22rem;
    font-weight: 700
}

.step .step-content .btn-block .btn i {
    margin-left: .02rem
}

.step .step-content .btn-block .btn.to-sign-in {
    background: #ff2e24;
    color: #fff
}

.step .step-content .btn-block .btn.view-direct {
    border: 1px solid #ff2e24;
    background: #ffeceb;
    color: #ff2e24
}

.video_preview {
    width: 100%;
    height: 100%;
    position: relative
}

.video_preview i {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: .64rem;
    height: .64rem;
    background-image: url(http://img.bc.haodanku.com/haodanku/1596246159);
    background-size: 100%
}

.video_preview p {
    width: 100%;
    height: 100%;
    background-image: url(http://img.bc.haodanku.com/haodanku/1613975046);
    background-size: 100%
}

.btn_body {
    height: .8rem;
    text-align: center;
    color: #fff;
    font-size: .28rem;
    line-height: .8rem
}

.btn_body,.btn_help {
    width: 100%
}

.divcss {
    position: absolute;
    bottom: .5rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: .25rem
}

.divcss,.divcss span {
    display: flex;
    align-items: center;
    justify-content: center
}

.divcss span {
    width: 2.38rem;
    height: .64rem;
    background: linear-gradient(90deg,#ff151f,#ff7033);
    border-radius: .07rem;
    color: #fff;
    font-size: .26rem
}

.list-wrapper {
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 1.3rem
}

.list-wrapper>h6 {
    font-size: .36rem;
    font-family: PingFang SC;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: .15rem
}

.newtop {
    background-color: #a51212;
}

.head-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: #fff;
    width: 100%
}

.search {
    /* width:88%; */
    /* background-color:#fff; */
    border-radius: .1rem;
    margin: 0 auto .2rem
}

.search,.search-box {
    height: .72rem;
    display: flex
}

.search-box {
    width: 100%;
    border-radius: .08rem 0 0 .08rem;
    align-items: center
}

.search-box input {
    flex: 1;
    height: 100%;
    padding-right: .1rem;
    font-size: .24rem;
    color: #333
}

.search-icon {
    width: .74rem;
    height: 100%;
    background: url(http://img.bc.haodanku.com/haodanku/1596015010) no-repeat;
    background-size: .35rem .35rem;
    background-position: 50%
}

.search-btn {
    width: 1.23rem;
    height: .65rem;
    background: linear-gradient(90deg,#fe3a3f,#faa450);
    border-radius: .1rem;
    margin-top: .035rem;
    margin-right: .04rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .28rem;
    font-weight: 500;
    color: #fff
}

.shoplist {
    width: 100%;
    margin: 0 auto;
    background: #e7013a
}

.shoplist>li {
    display: flex;
    padding: .2rem .25rem;
    background: #fff;
    width: 94%;
    margin: 0 auto .2rem;
    border-radius: .08rem;
    position: relative
}

.shop-img {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .08rem
}

.shop-box {
    display: flex;
    flex: 1;
    width: 50%;
    padding: 0 0 0 .22rem;
    flex-direction: column
}

.shop-box.active .shop-b {
    margin-top: .05rem
}

.shop-title {
    color: #333;
    font-weight: 500;
    font-size: .28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.shop-money {
    color: #999;
    font-size: .22rem;
    font-weight: 500;
    margin-top: .2rem;
    align-items: center
}

.shop-b,.shop-money {
    display: flex;
    justify-content: space-between
}

.shop-b {
    margin-top: .05rem
}

.shop-b-l,.shop-b-m {
    display: flex;
    align-items: baseline
}

.shop-b-m {
    font-size: .36rem;
    font-weight: 700;
    color: #fd471f
}

.shop-b-m i {
    font-size: .26rem;
    font-weight: 500
}

.shop-b-label {
    color: #666;
    font-size: .2rem;
    text-decoration: line-through
}

.shop-b-label,.shop-btn {
    display: flex;
    align-items: center;
    justify-content: center
}

.shop-btn {
    position: absolute;
    right: 0;
    bottom: .21rem;
    width: 1.3rem;
    height: .55rem;
    background: linear-gradient(90deg,#fe3a3f,#faa450);
    border-radius: .28rem 0 0 .28rem;
    font-weight: 500;
    color: #fff;
    font-size: .24rem
}

.shop-coupon {
    bottom: .93rem;
    border: 1px solid #ff856c;
    border-right: 0;
    background: #fff6f1;
    color: #fd471f;
    font-weight: 800
}

.shop-tips {
    width: 3.5rem;
    height: .38rem;
    background: linear-gradient(90deg,#ffeee7,#fff7f3 50%,#fff);
    border-radius: .19rem;
    display: flex;
    align-items: center;
    font-size: .2rem;
    color: #fc471f;
    font-weight: 500;
    padding-left: .14rem;
    margin-top: .05rem
}

.shop-tips img {
    width: .14rem;
    height: .18rem;
    display: block;
    margin-right: .06rem
}

.shop-tips.row-2 {
    margin-top: .02rem;
    color: #ff2b44;
    background: linear-gradient(90deg,rgba(254,60,64,.1),hsla(0,0%,100%,.1));
    padding-right: .5rem
}

.shop-tips.row-2 img {
    margin-left: -.02rem;
    width: .17rem
}

.shop-tips.row-2 p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.tokenbox {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 5rem;
    height: 4rem;
    border-radius: .2rem;
    margin-left: -2.5rem;
    margin-top: -2rem;
    font-size: .3rem;
    background-color: #fff;
    color: #333;
    overflow: hidden;
    padding-top: .4rem;
    display: none
}

.tokenbox>span {
    display: block;
    text-align: center;
    margin-bottom: .24rem
}

.tokenbox>p {
    color: #333;
    padding: 0 .3rem;
    line-height: 1.2rem;
    min-height: 1.1rem;
    text-align: center
}

.tokenbox>p em {
    color: #ff1c43
}

.tokenbox>.copybtn {
    width: 2.4rem;
    height: .72rem;
    background: linear-gradient(90deg,#ff1944,#ff4e33);
    border-radius: .08rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: .28rem;
    margin: .3rem auto 0
}

.tokenbox1 {
    height: 3.6rem
}

.back_top {
    width: .78rem;
    height: .78rem;
    position: fixed;
    right: .2rem;
    bottom: 1.4rem;
    background: url(http://img.bc.haodanku.com/haodanku/1596017135) no-repeat;
    background-size: 100% 100%
}

.combox {
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding: .2rem 0
}

.realpic-loading {
    color: #ffcda0;
    font-size: .24rem;
    text-align: center
}

.vmIconLoad {
    width: .32rem;
    height: .32rem;
    font-size: 20px;
    color: #4d74ff;
    display: inline-block;
    vertical-align: middle;
    background-image: url(http://img.haodanku.com/Fs3CUOAV8FeUjyhyU-3xOO5DSphI);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-animation: vmspinLoad 2s linear infinite;
    animation: vmspinLoad 1.2s linear infinite
}

.vmIconLoad:before {
    -webkit-font-smoothing: antialiased;
    transform: translate(0)
}

.direct-img {
    position: fixed;
    z-index: 10000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 7.5rem;
    margin: auto;
    padding: .5rem;
    background: rgba(0,0,0,.3);
    overflow: hidden
}

.direct-img .direct-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: .4rem;
    background: #fff;
    border-radius: .15rem;
    overflow: hidden
}

.direct-img .direct-box .box-header {
    position: relative;
    color: #fc6e73;
    font-size: .26rem;
    font-weight: bolder;
    text-align: center;
    line-height: .8rem;
    border-bottom: 1px solid #f0f0f0
}

.direct-img .direct-box .box-header .btn-close {
    position: absolute;
    top: .27rem;
    right: .27rem;
    width: .32rem;
    height: .32rem;
    cursor: pointer
}

.direct-img .direct-box .box-content {
    flex: 1;
    overflow: auto;
    padding: .3rem
}

.direct-img .direct-box .box-content img {
    display: block;
    width: 100%;
    height: auto
}

.fade-enter-active,.fade-leave-active {
    transition: all .3s ease-in
}

.fade-enter,.fade-leave-to {
    opacity: 0
}

.snapped-up {
    z-index: 10000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 7.5rem;
    margin: auto;
    padding: .5rem;
    background: rgba(0,0,0,.3)
}

.snapped-up,.snapped-up .box {
    position: fixed;
    overflow: hidden
}

.snapped-up .box {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    height: 6.8rem;
    width: 5.8rem;
    padding: 0 .42rem .4rem;
    background: #fff;
    border-radius: .15rem
}

.snapped-up .box .box-header {
    color: #fc6e73;
    font-size: .26rem;
    font-weight: bolder;
    text-align: center;
    line-height: .8rem;
    height: .92rem
}

.snapped-up .box .box-header .btn-close {
    position: absolute;
    top: .27rem;
    right: .27rem;
    width: .32rem;
    height: .32rem;
    cursor: pointer
}

.snapped-up .box .box-content {
    flex: 1
}

.snapped-up .box .box-content .title {
    text-align: center;
    font-size: .3rem;
    font-weight: 700;
    color: #d92500;
    line-height: .5rem
}

.snapped-up .box .box-content img {
    display: block;
    margin: .27rem 0 .33rem;
    width: 100%;
    height: auto
}

.snapped-up .box .box-content button {
    width: 100%;
    height: .8rem;
    background: linear-gradient(90deg,#fe3a3f,#faa450);
    border-radius: .4rem;
    text-align: center;
    font-size: .28rem;
    font-weight: 700;
    color: #fff;
    line-height: .8rem;
    border: 0;
    outline: 0
}

.goback {
    position: fixed;
    top: .15rem;
    left: 0;
    width: 1.2rem;
    height: .48rem
}

.nav {
    margin: .2rem 0 .15rem
}

.nav-list {
    display: flex;
    padding-left: .45rem;
    overflow-x: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.nav-list:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.nav-list li {
    font-size: .24rem;
    color: #f17258;
    background: #b92709;
    flex-shrink: 0;
    padding: .08rem .2rem;
    margin-right: .2rem;
    border-radius: .06rem;
    cursor: pointer
}

.nav-list li:last-child {
    margin-right: .4rem
}

.nav-list li.nav-active {
    color: #fd471f;
    background: #fff
}

.sort {
    background-color: #e7013a;
    padding-bottom: .2rem;
    border-radius: .2rem .2rem 0 0
}

.sort-list {
    display: flex;
    border-bottom: .02rem solid #eb3a15;
    color: #ff8f78;
    justify-content: space-between
}

.sort-list>li {
    width: 25%;
    font-size: .26rem;
    font-weight: 500;
    color: #ff8f78;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .24rem 0
}

.sort-list>li.sort-active {
    color: #fff
}

.sort-list>li span {
    position: relative;
    height: .16rem;
    margin-left: .06rem
}

.sort-list>li span i {
    position: absolute;
    width: 0;
    height: 0;
    border-color: #b92709 transparent transparent;
    border-style: solid;
    border-width: .06rem .06rem 0
}

.sort-list>li span i:first-child {
    transform: rotate(180deg)
}

.sort-list>li span i:nth-child(2) {
    bottom: 0
}

.sort-list>li span i.arrow-active {
    border-color: #f2f2f2 transparent transparent
}

.ticket {
    display: inline-flex;
    align-items: center;
    margin-top: .2rem;
    font-size: 0;
    font-family: Microsoft YaHei;
    border-radius: 2px
}

.ticket .name {
    width: .38rem;
    font-weight: 300;
    color: #fff;
    display: inline-flex;
    background: linear-gradient(180deg,#ff753c,#ff4b42);
    border-radius: .04rem 0 0 .04rem
}

.ticket .name,.ticket .value {
    height: .28rem;
    font-size: .2rem;
    align-items: center;
    justify-content: center;
    font-family: Microsoft YaHei
}

.ticket .value {
    display: flex;
    color: #fd471f;
    background: #fff;
    padding: 0 .05rem;
    border: 1px solid #ff8209;
    border-left: none;
    font-weight: 500;
    border-radius: 0 .04rem .04rem 0
}

.free-share {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    width: 7.5rem;
    height: 1.24rem;
    background: linear-gradient(180deg,hsla(0,0%,100%,0),#ff3f17 50%);
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.free-share.active {
    display: none
}

.free-share img {
    width: 6.16rem;
    height: .86rem;
    display: block
}

.shut {
    position: absolute;
    right: .2rem;
    top: .2rem;
    width: .4rem;
    height: .4rem;
    background: url(http://img.bc.haodanku.com/haodanku/1596096751) no-repeat;
    background-size: 100% 100%
}

@-webkit-keyframes vmspinLoad {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes vmspinLoad {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(1turn)
    }
}

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,742 @@
			<!DOCTYPE html>
			<html lang="zh-CN">

			<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
			<meta name="screen-orientation" content="portrait">
			<meta name="x5-orientation" content="portrait">
			<meta name="full-screen" content="yes">
			<meta name="x5-fullscreen" content="true">
			<meta name="browsermode" content="application">
			<meta name="x5-page-mode" content="app">
			<meta name="msapplication-tap-highlight" content="no">
			<meta content="telephone=no" name="format-detection">
			<title>åå²æ°ä½</title>
			<link rel="stylesheet" href="//at.alicdn.com/t/font_1534407_5zmyvxx3vxs.css">
			<script type="text/javascript" src="https://img.ushopvip.com/js/uni-webview-js.js"></script>
			<script>
			document.write("<link rel=\"stylesheet\" href=\"./css/bottomprice.css?t=" + (Date.now() - Date.now() % (60 * 1000 * 30)) + "\"/>");
			</script>
			<style>
			.box
			{
			position:absolute;
			width: 100%;
			height: 100%;
			background: url(https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5loading.gif) no-repeat fixed top;
			background-size: 70px 70px;
			}
			.list{
			position: relative;
			top: 0;
			width: 100%;
			}
			.category {
			height: 0.88rem;
			line-height: 0.88rem;
			font-size: 0.3rem;
			overflow: hidden;
			padding: 0 0.1rem;
			}

			.items > span.act {
			background: #e7013a;
			color: white;
			padding: 0 0.2rem;
			border-radius:0.4rem;
			}

			.items > span {
			color: #fff;
			font-weight: 500;
			margin: 0 0.1rem;
			display: inline-block;
			line-height: 0.48rem;
			height: 0.48rem;
			font-size: .28rem;
			}

			.items {
			overflow: scroll;
			white-space: nowrap;
			}

			</style>
			</head>

			<body>
			<div class="box">
			<div class="list">
			<div id="app" style="background-color:#e7013a;padding-top:0.5rem" v-cloak>
			<template v-if="isexplain && issource">
			<div class="main">
			</div>
			<div class="list-wrapper">
			<div class="newtop">
			<div class="search" style="width:100%">
			<!---ç±»ç®-->
			<div class="category">
			<div class="items">
			<span :class="active == 0 ? 'act':''" @click="handleSwiperNav(0, $event)">å¨é¨</span>
			<span :class="active == i.cid ? 'act':''" v-for="i in nav" :key="i.cid"
			@click="handleSwiperNav(i.cid, $event)">
			{{i.cname}}
			</span>
			</div>
			</div>
			</div>
			<div class="sort">
			<ul class="sort-list">
			<li v-for="item in fristOrderSort" v-bind:class="{'sort-active': item.number == sortNumber}"
			v-on:click="handleSort(item)">
			{{ item.name }}
			<span v-show="item.min !== item.max">
			<i v-bind:class="{'arrow-active': item.min == sortId}"></i>
			<i v-bind:class="{'arrow-active': item.max == sortId}"></i>
			</span>
			</li>
			</ul>
			</div>
			</div>

			<ul class="shoplist contscore" v-if="fristOrderItems.length>0">
			<li v-for="(item,index) in fristOrderItems">
			<img class="shop-img" v-lazy="item.itempic" v-if="item.itempic">
			<img class="shop-img" src="http://img.bc.haodanku.com/haodanku-activity/1596092443" v-else>
			<div class="shop-box" v-bind:class="!item.couponurl?'active':''">
			<p class="shop-title">{{item.itemshorttitle}}</p>
			<div class="shop-tips">
			<img src="http://img.bc.haodanku.com/haodanku/1613978202">
			<p>é¢åç¾å°çº¢åå¯åå å æµæ£ï¼</p>
			</div>
			<div class="shop-tips row-2">
			<img src="http://img.bc.haodanku.com/cms/1627703910">
			<p>åºéºï¼{{item.shopname}}</p>
			</div>
			<div>
			<div class="ticket" v-if="item.couponurl"><span class="name" style="height: 0.3rem;">å¸</span><span
			class="value" style="height: 0.3rem;">ï¿¥{{item.couponmoney}}</span></div>
			<div class="ticket" v-if="item.couponurl"><span class="name" style="height: 0.3rem;background:linear-gradient(180deg,#b21db6,#ad25d1)">è¿</span><span
			class="value" style="border:1px solid #b817ce;color:#b817ce;height: 0.3rem;">ï¿¥{{item.fanli}}</span></div>
			</div>

			<div class="shop-b">
			<div class="shop-b-l">
			<p class="shop-b-m"><i>å¸åä»·</i>ï¿¥{{parseFloat(item.itemendprice)}}</p>
			<p class="shop-b-label">ï¿¥{{parseFloat(item.itemprice)}}</p>
			</div>
			</div>

			<span class="shop-btn shop-coupon" v-on:click="getTaocode(item,true)" v-if="item.couponurl">ç«å³é¢å¸</span>
			<span class="shop-btn" v-on:click="getTaocode(item)">æç´¢ä¸å</span>
			</div>
			</li>
			</ul>
			<div class="combox">
			<p class="realpic-loading" v-if="loadshow"><i class="vmIconLoad"></i><em>æ°æ®å è½½ä¸...</em></p>
			<p class="realpic-loading" v-else>æ°æ®å·²å è½½å®äº</p>
			</div>
			</div>
			<!-- <div class="free-share" v-bind:class="acFocus?'active':''">
			<img src="http://img.bc.haodanku.com/haodanku/1613981706" v-on:click="copyShare()" class="share-btn">
			</div> -->
			<div>
			<div class="back_top" v-if="scrollShow" v-on:click="arrowTop()"></div>
			<div class="tokenbox tokenbox1">
			<em class="shut" v-on:click="shutBtn"></em>
			<span>{{taoToken}}</span>
			<p>å¤å¶æ·å£ä»¤ï¼æå¼ææºæ·å®é¢å</p>
			<span class="copybtn" v-on:click="copyBtn('.copybtn')">å¤å¶æ·å£ä»¤</span>
			</div>
			</div>
			</template>

			<div v-if="!isexplain">
			<img src="http://img.bc.haodanku.com/haodanku-activity/1596022875" class="goback"
			v-on:click="arrowBtn('isexplain')">
			<img src="http://img.bc.haodanku.com/haodanku_activity/1596768292">
			</div>

			<div v-if="!issource">
			<img src="http://img.bc.haodanku.com/haodanku-activity/1596022875" class="goback"
			v-on:click="arrowBtn('issource')">
			<img src="http://img.bc.haodanku.com/haodanku-activity/1596032111" alt="">
			</div>

			<div class="direct-img" v-show="showDirect" v-on:click="closeDirect">
			<div class="direct-box">
			<div class="box-header">
			ä½¿ç¨æç¨
			<img
			v-on:click="closeDirect"
			class="btn-close"
			src="http://img-haodanku-com.cdn.fudaiapp.com/FsHmpTJUJxhdJ7X8YL36ix1GduZg"
			alt="">
			</div>
			<div class="box-content">
			<img src="http://img.bc.haodanku.com/cms/1627703471?t=1" alt="">
			</div>
			</div>
			</div>
			<transition name="fade">
			<div class="snapped-up" v-show="snappedUp.show">
			<div class="box">
			<div class="box-header">
			<img
			class="btn-close"
			v-on:click="closeSnappedUpDialog"
			src="http://img.bc.haodanku.com/haodanku/1596096751"
			alt="">
			</div>
			<div class="box-content">
			<div class="title">
			å¤å¶ãä¸åé¾æ¥ãæå¼ææ·APPï¼<br>
			æç´¢ç«å³ä¸å ~
			</div>
			<img src="http://img.bc.haodanku.com/cms/1627701410" alt="">
			<button class="btn copy" v-on:click="copyBtn('.copy.btn')">ç¹å»å¤å¶</button>
			</div>
			</div>
			</div>
			</transition>
			<van-overlay :show="titleCopyTipsVisible" @click="titleCopyTipsVisible = false">
			<div
			class="wrapper"
			style="display:flex;align-items:center;justify-content:center;height: 100%;"
			>
			<img style="width: 6rem;" src="http://img-haodanku-com.cdn.fudaiapp.com/FhYQl6NqvQIycYZS1DM9DLBELA72" alt="">
			</div>
			</van-overlay>
			</div>
			</div>
			</div>
			<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
			<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
			<script src="https://cdn.staticfile.org/vue-lazyload/1.3.3/vue-lazyload.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
			<script type="text/javascript" src="https://public.ffquan.cn/lib/swiper/js/swiper.min.js"></script>
			<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/ScrollToFixed/1.0.8/jquery-scrolltofixed-min.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/device.js/0.2.7/device.min.js"></script>
			<script src="https://img.bc.haodanku.com/cms/SpaUtils.min.js"></script>
			<script src="https://cdn.staticfile.org/vant/2.12.5/vant.min.js"></script>
			<link href="https://cdn.staticfile.org/vant/2.12.5/index.min.css" rel="stylesheet">
			<script src="https://img.bc.haodanku.com/cdn/vant-touch-emulator.js"></script>
			<script>
			var vmUrlSearchs = null;

			function vmRequest(name) {
			if(!vmUrlSearchs) {
			vmUrlSearchs = new vmUrlSearch();
			}
			return vmUrlSearchs[name];
			}

			function vmUrlSearch() {
			var name, value;
			var str = location.href;
			var num = str.indexOf("?");
			str = str.substr(num + 1);
			var arr = str.split("&");
			for(var i = 0; i < arr.length; i++) {
			if(num = arr[i].indexOf("=") != -1) {
			num = arr[i].indexOf("=");
			} else {
			num = arr[i].indexOf("/");
			}
			if(num > 0) {
			name = arr[i].substring(0, num);
			value = arr[i].substr(num + 1);
			this[name] = value;
			}
			}
			}


			Vue.use(VueLazyload, {
			preLoad: 1.3,
			error: "http://img.bc.haodanku.com/haodanku/1595237918",
			loading: "http://img.bc.haodanku.com/haodanku-activity/1596092443",
			attempt: 1
			});
			var app = new Vue({
			el: "#app",
			data: function() {
			return {
			active:0,
			nav:[
			],
			posturl:"http://dfg.shop.com",
			//posturl:"http://appapitest.ushopvip.com",
			showDirect: false,
			codeId: vmRequest("code"),

			fristOrderSort: [
			{
			name: "ç»¼å",
			bool: true,
			max: "",
			min: "",
			number: 0
			},
			{
			name: "ä»·æ ¼",
			bool: false,
			max: 5,
			min: 6,
			number: 5
			},
			{
			name: "ä½£éæ¯ä¾",
			bool: false,
			max: 2,
			min: 2,
			number: 4
			},
			{
			name: "éé",
			bool: false,
			max: 5,
			min: 5,
			number: 2
			},
			{
			name: "é¢å¸é",
			bool: false,
			max: 5,
			min: 5,
			number: 3
			}
			],
			sortId: "",
			sortBool: true,
			sortNumber: 0,

			fristOrderItems: [],
			topArr: [],


			page: 1,
			loadmsg: true,
			loadshow: true,

			scrollShow: false,

			taoToken: "",

			isexplain: true,
			issource: true,
			locationUrl: window.location.href,

			keyword: "",

			sigclick: false,

			playState: false,
			vmHttp: window.location.protocol.substring(0, window.location.protocol.length - 1) != "file" ? window.location.protocol.substring(0, window.location.protocol.length - 1) : "https",

			acFocus: false,
			outerHeight: "",

			// ç«å³æ¢è´å¼¹çªç¸å³
			snappedUp: {
			show: false,
			code: ""
			},

			help_info: [],

			sign_info: {},
			titleCopyTipsVisible: false,
			};
			},
			created: function() {
			this.ajaxFristOrderItems(true);
			},
			mounted: function() {
			this.outerHeight = $(".banenr").outerHeight(true) + $(".secret-wrapper").outerHeight(true) + $(".list-wrapper>h6").outerHeight(true) + 2;
			this.taobaoscroll();
			this.getcategory();
			this.touch();
			},
			methods: {
			handleSwiperNav: function (key, event) {
			console.log(key, event.target)
			this.active = key;
			var _this = this;
			$(document).scrollTop(0);
			this.active = key;
			setTimeout(function () {
			//_this.getGoodsList();
			}, 200)

			},
			// è·ååç±»
			getcategory: function() {
			var _this = this;
			var result = '';
			$.ajax({
			url: 'https://openapi.dataoke.com/api/category/get-super-category',
			type: 'get',
			data: {
			appKey: '641129ab40767',
			version: 'v1.3.0',
			},
			async: false,
			}).done(function(res) {
			_this.nav = res.data
			});
			},
			touch:function()
			{
			const box = document.querySelector('.box')
			const list = document.querySelector('.list');
			// æä¸å±å¹çä½ç½®
			let touchStartPosition = 0

			// touchstartäºä»¶
			box.addEventListener('touchstart', function (e) {
			let touch = e.touches[0]
			touchStartPosition = touch.pageY
			})
			// touchmoveäºä»¶
			box.addEventListener('touchmove', function (e) {

			let touch = e.touches[0]
			// åè¡¨çtopå¼çäºåè¡¨ç¸å¯¹äºboxçåç§»é+æ»å¨çè·ç¦»
			let pySize= list.offsetTop + touch.pageY - touchStartPosition;
			if(pySize>=110)
			{
			return;
			}
			if(pySize<0)
			{
			return;
			}
			var scroll = document.getElementsByClassName('contscore')
			var srollPos = $('.contscore').scrollTop(); //æ»å¨æ¡è·é¡¶é¨è·ç¦»(é¡µé¢è¶åºçªå£çé«åº¦)
			if(srollPos>0)
			{
			return;
			}
			list.style.top =pySize + 'px';
			// å®ç°å¹³æ»çæ»å¨
			touchStartPosition = touch.pageY
			})
			// touchendäºä»¶
			box.addEventListener('touchend', function (e) {
			let top = list.offsetTop

			if (top > 70) {
			// å¨æ¤å¤è°ç¨å·æ°åçåè°
			console.log('å·æ°');
			location.reload();
			}

			if(top<0)
			{
			list.style.top=0;
			}
			if (top > 0) {
			// éè¿å®æ¶å¨å¹³æ»çå°listçtop = 0
			let timer = setInterval(() => {
			top=top-5;
			list.style.top = top + 'px'
			if (top <= 0) {
			list.style.top=0;
			clearInterval(timer)
			}
			},1)
			}
			})
			},
			toSignIn: function() {
			if(!this.sign_info.tpwd) {
			return;
			}
			SpaUtils.copy(this.sign_info.tpwd, "å¤å¶å£ä»¤æåï¼è¯·æå¼æ·å®æµè§é¢åç¾å°çº¢å");
			},
			getUrlPar:function(name)
			{
			var reg=new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)");
			var r=window.location.search.substr(1).match(reg);
			if(r !=null)return unescape(r[2]);
			return null;
			},
			arrowBtn: function(val) {
			this[val] = !this[val];
			this.arrowTop();
			},
			taobaoscroll: function() { //æ»å¨å è½½
			var that = this;
			window.addEventListener("scroll", function() {

			var scrollTop = document.documentElement.scrollTop \|\| document.body.scrollTop;
			var clientHeight = document.documentElement.clientHeight \|\| document.body.clientHeight;
			var scrollHeight = document.documentElement.scrollHeight \|\| document.body.scrollHeight;

			if(!that.isexplain \|\| !that.issource) return;
			that.scrollShow = scrollTop > 750;
			if(scrollHeight > clientHeight && scrollTop + clientHeight + 20 >= scrollHeight) {
			if(that.loadmsg && !that.sigclick) {
			that.loadmsg = false;
			that.sigclick = false;
			that.ajaxFristOrderItems();
			}
			}
			});
			},
			ajaxFristOrderItems: function(cb) {
			var that = this;
			if(that.sigclick) {
			if(this.fristOrderItems[0]) {
			this.fristOrderItems.forEach(function(item) {
			item.itempic = "";
			});
			}
			document.documentElement.scrollTop = that.outerHeight;
			document.body.scrollTop = that.outerHeight;
			}
			$.ajax({
			headers:{
			"token":that.getUrlPar("token")
			},
			url:that.posturl+'/api/activity/signRed',
			type:"post",
			dataType:"json",
			data:{
			apikey: '0F92EBA7AADA', //å¿å¡«
			min_size: 20,
			sort: that.sortId,
			min_id: that.page,
			keyword: that.keyword,
			pure_tpwd: vmRequest("pure_tpwd") ? 1 : undefined
			}
			}).done(function(res){
			var data=res.data;
			if(res.code == 0) {
			that.help_info = data.help_info \|\| [];
			that.sign_info = data.sign_info \|\| {};
			if(that.sigclick) {
			that.fristOrderItems = data.data;
			} else {
			that.fristOrderItems = that.fristOrderItems.concat(data.data);
			}
			that.topArr = data.top_data;
			if(that.page != data.min_id) {
			that.loadmsg = true;
			that.loadshow = true;
			that.page = data.min_id;
			} else {
			that.loadmsg = false;
			that.loadshow = false;
			}
			that.$nextTick(function() {
			that.sigclick = false;
			if(cb) {
			$(".newtop").scrollToFixed();
			}

			});
			} else {
			that.loadmsg = false;
			that.loadshow = false;
			that.sigclick = false;
			layer.msg(data.msg, {
			time: 2000,
			shade: 0.1,
			shadeClose: true
			});
			}
			})
			},
			handleSort: function(item) {
			if(this.sortNumber == item.number) {
			if(item.min === item.max) {
			return;
			}
			if(item.bool) {
			this.sortId = item.min;
			item.bool = false;
			} else {
			this.sortId = item.max;
			item.bool = true;
			}
			} else {
			item.bool = true;
			this.sortNumber = item.number;
			this.sortId = item.max;
			}
			this.page = 1;
			this.loadmsg = true;
			this.loadshow = true;
			this.sigclick = true;
			this.ajaxFristOrderItems();
			},
			popupFun: function(classname) {
			layer.open({
			type: 1,
			shift: 0,
			title: false,
			closeBtn: 0,
			shade: 0.4,
			shadeClose: true,
			content: $(classname)
			});
			},
			getTaocode: function(item, isCoupon) {
			// if(!isCoupon && vmRequest("pure_tpwd")) {
			// // ç´æ¥å¤å¶
			// copy(item.tpwd, "å¤å¶å£ä»¤æå,è¯·æå¼æ·å®ä¸å");
			if(!isCoupon) {
			// ç´æ¥å¤å¶
			SpaUtils.copy(item.itemtitle, false);
			this.titleCopyTipsVisible = true;
			return;
			}
			var that = this;
			var load = layer.load(1, {shade: 0.3});
			$.ajax({
			type: "Post",
			url: that.vmHttp + "://v2.api.haodanku.com/ratesurl",
			data: {
			apikey: '0F92EBA7AADA', //å¿å¡«
			itemid: item.itemid,
			activityid: isCoupon ? item.activityid : undefined,
			title: item.itemshorttitle,
			itemtitle: item.itemtitle,
			pid: 'mm_4091757048_2861600076_114781900494', //å¿å¡«
			tb_name: 'tb108547775155', //å¿å¡«
			get_taoword: 1,
			},
			dataType: "json",
			timeout: 5000,
			success: function(data) {
			layer.close(load);
			if(data.code == "1") {
			if(!isCoupon) {
			}
			that.taoToken = data.data.taoword;
			if(isCoupon) {
			//that.popupFun(".tokenbox1");
			uni.postMessage({
			data: {
			action: 'totb',
			tburl:data.data.link
			}
			})
			} else {
			that.openSnappedUpDialog();
			}
			} else {
			that.msgFun(data.msg);
			}

			},
			error: function() {
			layer.close(load);
			that.msgFun("ç½ç»éè¯¯ï¼è¯·æ£æ¥ç½ç»éè¯");
			}
			});
			},
			msgFun: function(val) {
			layer.msg(val, {
			time: 2000,
			shade: 0.1,
			shadeClose: true
			});
			},
			arrowTop: function() {
			$("body,html").stop(true, true).animate({
			scrollTop: 0
			});
			},
			copyBtn: function(dom) { //å¤å¶å¬å±æ¹æ³
			var that = this;
			var clipboard = new ClipboardJS(dom, {
			text: function(target) {
			return that.taoToken;
			}
			});
			clipboard.on("success", function(e) {
			layer.closeAll();
			that.msgFun(that.snappedUp.show ? "ä¸åé¾æ¥å¤å¶æåï¼è¯·æå¼ææ·APPæç´¢ä¸å" : "å¤å¶å£ä»¤æå,è¯·æå¼æ·å®é¢å");
			e.clearSelection();
			clipboard.destroy();
			});
			clipboard.on("error", function(e) {
			layer.msg("å¤å¶å£ä»¤å¤±è´¥,è¯·æå¨å¤å¶", {
			shade: 0.4,
			time: 1000,
			shadeClose: false
			}, function() {
			});

			});
			},
			copyShare: function() { //å¤å¶å¬å±æ¹æ³
			var that = this;

			var txt = that.locationUrl;

			var clipboard = new ClipboardJS(".share-btn", {
			text: function(target) {
			return txt;
			}
			});
			clipboard.on("success", function(e) {
			that.msgFun("å·²å¤å¶åäº«é¾æ¥");
			console.log(txt);
			e.clearSelection();
			clipboard.destroy();
			});
			clipboard.on("error", function(e) {
			layer.msg("å¤å¶åäº«é¾æ¥å¤±è´¥ï¼", {
			shade: 0.4,
			time: 1000,
			shadeClose: false
			}, function() {
			});

			});
			},
			handleSearch: function() {
			this.page = 1;
			this.loadmsg = true;
			this.loadshow = true;
			this.sigclick = true;
			this.ajaxFristOrderItems();
			},
			shutBtn: function() {
			layer.closeAll();
			},
			playBtn: function() {
			this.playState = true;
			},
			myfocus: function() {
			this.acFocus = true;
			},
			myblur: function() {
			this.acFocus = false;
			},
			openDirect: function() {
			this.showDirect = true;
			},
			closeDirect: function() {
			this.showDirect = false;
			},
			openSnappedUpDialog: function() {
			this.snappedUp.show = true;
			},
			closeSnappedUpDialog: function() {
			this.snappedUp.show = false;
			}
			},
			watch: {}
			});
			</script>
			</body>

			</html>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,1093 @@
			body,html {
			padding: 0;
			margin: 0
			}

			template {
			display: none
			}

			.root-rem-calc,html {
			font-size: 13.33333vw
			}

			@media only screen and (min-width: 540px) {
			.root-rem-calc,html {
			font-size:72px!important
			}
			}

			.max-width {
			max-width: 7.5rem;
			margin: auto
			}

			html {
			-webkit-text-size-adjust: 100%!important;
			text-size-adjust: 100%!important;
			-moz-text-size-adjust: 100%!important
			}

			.ellipsis-single {
			white-space: nowrap
			}

			.ellipsis-multiple,.ellipsis-single {
			overflow: hidden;
			text-overflow: ellipsis
			}

			.ellipsis-multiple {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			white-space: normal
			}

			[v-cloak] {
			display: none!important
			}

			.banner-wrapper {
			display: block;
			width: 7.5rem;
			min-height: 3.4rem
			}

			.banner-wrapper>img {
			width: 100%
			}

			.page-container {
			min-height: 100vh;
			max-width: 7.5rem;
			background: $bgColor;
			padding-bottom: 1.2rem;
			margin: 0 auto;
			box-sizing: border-box;
			font-size: .32rem;
			box-shadow: 0 0 8px 8px rgba(0,0,0,.1)
			}

			.layui-layer {
			font-size: 12px
			}

			::-webkit-scrollbar {
			all: unset;
			width: 0;
			height: 0
			}

			::-webkit-scrollbar-thumb {
			border-radius: .05rem;
			background-color: #c1c1c1
			}

			@media screen and (min-width: 750px) {
			::-webkit-scrollbar {
			width:.05rem;
			height: .05rem
			}
			}

			.van-toast--html,.van-toast--text {
			font-size: .24rem
			}

			@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio:1.5) {
			.border-1px:after {
			transform:scaleY(.7)
			}

			.border-1px-v:after {
			transform: scaleX(.7)
			}

			.border-1px-all {
			position: relative
			}

			.border-1px-all:after {
			display: block;
			position: absolute;
			width: 150%;
			height: 150%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%) scale(.66667);
			content: ""
			}
			}

			@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2) {
			.border-1px:after {
			transform:scaleY(.5)
			}

			.border-1px-v:after {
			transform: scaleX(.5)
			}

			.border-1px-all {
			position: relative
			}

			.border-1px-all:after {
			display: block;
			position: absolute;
			width: 200%;
			height: 200%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%) scale(.5);
			content: ""
			}
			}

			img[lazy=loading] {
			-o-object-fit: fill!important;
			object-fit: fill!important
			}

			.img-box>img {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			object-fit: cover
			}

			.iconfont {
			font-size: inherit
			}

			.btn:not(.disabled):not(.active) {
			cursor: pointer
			}

			.flex-c,.flex-c-1,.flex-c-2,.flex-c-c,.flex-c-evenly,.flex-col-c,.flex-col-c-1,.flex-col-c-2,.flex-col-c-c {
			display: flex;
			align-items: center
			}

			.flex-c-2,.flex-c-c,.flex-c-evenly,.flex-col-c-2,.flex-col-c-c {
			justify-content: center
			}

			.flex-c-evenly {
			justify-content: space-evenly
			}

			.flex-col-c,.flex-col-c-1,.flex-col-c-2,.flex-col-c-c {
			flex-direction: column
			}

			body {
			font-family: Microsoft YaHei,arial;
			max-width: 7.5rem;
			margin: 0 auto!important;
			font-size: .32rem
			}

			ol,ul {
			list-style: none
			}

			li {
			list-style-type: none
			}

			em,i,th {
			font-style: normal
			}

			.clearfix:after {
			display: block;
			overflow: hidden;
			clear: both;
			height: 0;
			visibility: hidden;
			content: ""
			}

			input,select,textarea {
			-webkit-appearance: none;
			outline: 0;
			border: none;
			resize: none;
			color: #939599
			}

			img {
			width: 100%;
			display: block
			}

			#app {
			position: relative;
			min-height: 100vh;
			background-color: #da2702
			}

			* {
			margin: 0;
			padding: 0;
			-webkit-tap-highlight-color: transparent;
			box-sizing: border-box
			}

			.comHidden {
			white-space: nowrap
			}

			.comHidden,.comHidden1 {
			overflow: hidden;
			text-overflow: ellipsis
			}

			.comHidden1 {
			display: -webkit-box;
			-webkit-line-clamp: 2
			}

			.comHidden1,.main {
			-webkit-box-orient: vertical
			}

			.main {
			padding-top: 1.82rem;
			width: 100%;
			height: 100%;
			background: #da2702 url(https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/bottomprice_bg.png) no-repeat 0 0;
			background-size: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start
			}

			.step {
			position: relative;
			width: 7.1rem;
			height: 3.1rem;
			margin: auto
			}

			.step>img {
			display: block;
			width: 100%
			}

			.step .step-content {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: .15rem;
			display: flex;
			flex-direction: column;
			padding: .22rem .54rem 0
			}

			.step .step-content .title {
			font-size: .4rem;
			line-height: 1em;
			font-weight: 700;
			color: #222;
			background: linear-gradient(0deg,#fe3a3f,#faa450);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-align: center
			}

			.step .step-content ul {
			flex: 1;
			margin-top: .2rem;
			margin-right: -.54rem;
			overflow-y: auto
			}

			.step .step-content ul li {
			line-height: .27rem
			}

			.step .step-content ul li .top-num {
			display: inline-block;
			margin-right: .1rem;
			width: .61rem;
			height: .27rem;
			line-height: .27rem;
			text-align: center;
			background: url(https://img.bc.haodanku.com/cms/1629342498) no-repeat;
			background-size: contain
			}

			.step .step-content ul li .text,.step .step-content ul li .top-num {
			font-size: .24rem;
			font-weight: 400;
			color: #c78348
			}

			.step .step-content ul li+li {
			margin-top: .14rem
			}

			.step .step-content .btn-block {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: .2rem
			}

			.step .step-content .btn-block .btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.1rem;
			height: .56rem;
			border-radius: .28rem;
			font-size: .22rem;
			font-weight: 700
			}

			.step .step-content .btn-block .btn i {
			margin-left: .02rem
			}

			.step .step-content .btn-block .btn.to-sign-in {
			background: #ff2e24;
			color: #fff
			}

			.step .step-content .btn-block .btn.view-direct {
			border: 1px solid #ff2e24;
			background: #ffeceb;
			color: #ff2e24
			}

			.video_preview {
			width: 100%;
			height: 100%;
			position: relative
			}

			.video_preview i {
			cursor: pointer;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: .64rem;
			height: .64rem;
			background-image: url(http://img.bc.haodanku.com/haodanku/1596246159);
			background-size: 100%
			}

			.video_preview p {
			width: 100%;
			height: 100%;
			background-image: url(http://img.bc.haodanku.com/haodanku/1613975046);
			background-size: 100%
			}

			.btn_body {
			height: .8rem;
			text-align: center;
			color: #fff;
			font-size: .28rem;
			line-height: .8rem
			}

			.btn_body,.btn_help {
			width: 100%
			}

			.divcss {
			position: absolute;
			bottom: .5rem;
			left: 50%;
			transform: translateX(-50%);
			margin-top: .25rem
			}

			.divcss,.divcss span {
			display: flex;
			align-items: center;
			justify-content: center
			}

			.divcss span {
			width: 2.38rem;
			height: .64rem;
			background: linear-gradient(90deg,#ff151f,#ff7033);
			border-radius: .07rem;
			color: #fff;
			font-size: .26rem
			}

			.list-wrapper {
			width: 100%;
			justify-content: flex-start;
			padding-bottom: 1.3rem
			}

			.list-wrapper>h6 {
			font-size: .36rem;
			font-family: PingFang SC;
			font-weight: 700;
			color: #fff;
			text-align: center;
			margin-bottom: .15rem
			}

			.newtop {
			background-color: #a51212;
			}

			.head-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background: #fff;
			width: 100%
			}

			.search {
			/* width:88%; */
			/* background-color:#fff; */
			border-radius: .1rem;
			margin: 0 auto .2rem
			}

			.search,.search-box {
			height: .72rem;
			display: flex
			}

			.search-box {
			width: 100%;
			border-radius: .08rem 0 0 .08rem;
			align-items: center
			}

			.search-box input {
			flex: 1;
			height: 100%;
			padding-right: .1rem;
			font-size: .24rem;
			color: #333
			}

			.search-icon {
			width: .74rem;
			height: 100%;
			background: url(http://img.bc.haodanku.com/haodanku/1596015010) no-repeat;
			background-size: .35rem .35rem;
			background-position: 50%
			}

			.search-btn {
			width: 1.23rem;
			height: .65rem;
			background: linear-gradient(90deg,#fe3a3f,#faa450);
			border-radius: .1rem;
			margin-top: .035rem;
			margin-right: .04rem;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: .28rem;
			font-weight: 500;
			color: #fff
			}

			.shoplist {
			width: 100%;
			margin: 0 auto;
			background: #e7013a
			}

			.shoplist>li {
			display: flex;
			padding: .2rem .25rem;
			background: #fff;
			width: 94%;
			margin: 0 auto .2rem;
			border-radius: .08rem;
			position: relative
			}

			.shop-img {
			width: 2.2rem;
			height: 2.2rem;
			border-radius: .08rem
			}

			.shop-box {
			display: flex;
			flex: 1;
			width: 50%;
			padding: 0 0 0 .22rem;
			flex-direction: column
			}

			.shop-box.active .shop-b {
			margin-top: .05rem
			}

			.shop-title {
			color: #333;
			font-weight: 500;
			font-size: .28rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
			}

			.shop-money {
			color: #999;
			font-size: .22rem;
			font-weight: 500;
			margin-top: .2rem;
			align-items: center
			}

			.shop-b,.shop-money {
			display: flex;
			justify-content: space-between
			}

			.shop-b {
			margin-top: .05rem
			}

			.shop-b-l,.shop-b-m {
			display: flex;
			align-items: baseline
			}

			.shop-b-m {
			font-size: .36rem;
			font-weight: 700;
			color: #fd471f
			}

			.shop-b-m i {
			font-size: .26rem;
			font-weight: 500
			}

			.shop-b-label {
			color: #666;
			font-size: .2rem;
			text-decoration: line-through
			}

			.shop-b-label,.shop-btn {
			display: flex;
			align-items: center;
			justify-content: center
			}

			.shop-btn {
			position: absolute;
			right: 0;
			bottom: .21rem;
			width: 1.3rem;
			height: .55rem;
			background: linear-gradient(90deg,#fe3a3f,#faa450);
			border-radius: .28rem 0 0 .28rem;
			font-weight: 500;
			color: #fff;
			font-size: .24rem
			}

			.shop-coupon {
			bottom: .93rem;
			border: 1px solid #ff856c;
			border-right: 0;
			background: #fff6f1;
			color: #fd471f;
			font-weight: 800
			}

			.shop-tips {
			width: 3.5rem;
			height: .38rem;
			background: linear-gradient(90deg,#ffeee7,#fff7f3 50%,#fff);
			border-radius: .19rem;
			display: flex;
			align-items: center;
			font-size: .2rem;
			color: #fc471f;
			font-weight: 500;
			padding-left: .14rem;
			margin-top: .05rem
			}

			.shop-tips img {
			width: .14rem;
			height: .18rem;
			display: block;
			margin-right: .06rem
			}

			.shop-tips.row-2 {
			margin-top: .02rem;
			color: #ff2b44;
			background: linear-gradient(90deg,rgba(254,60,64,.1),hsla(0,0%,100%,.1));
			padding-right: .5rem
			}

			.shop-tips.row-2 img {
			margin-left: -.02rem;
			width: .17rem
			}

			.shop-tips.row-2 p {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis
			}

			.tokenbox {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 5rem;
			height: 4rem;
			border-radius: .2rem;
			margin-left: -2.5rem;
			margin-top: -2rem;
			font-size: .3rem;
			background-color: #fff;
			color: #333;
			overflow: hidden;
			padding-top: .4rem;
			display: none
			}

			.tokenbox>span {
			display: block;
			text-align: center;
			margin-bottom: .24rem
			}

			.tokenbox>p {
			color: #333;
			padding: 0 .3rem;
			line-height: 1.2rem;
			min-height: 1.1rem;
			text-align: center
			}

			.tokenbox>p em {
			color: #ff1c43
			}

			.tokenbox>.copybtn {
			width: 2.4rem;
			height: .72rem;
			background: linear-gradient(90deg,#ff1944,#ff4e33);
			border-radius: .08rem;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: .28rem;
			margin: .3rem auto 0
			}

			.tokenbox1 {
			height: 3.6rem
			}

			.back_top {
			width: .78rem;
			height: .78rem;
			position: fixed;
			right: .2rem;
			bottom: 1.4rem;
			background: url(http://img.bc.haodanku.com/haodanku/1596017135) no-repeat;
			background-size: 100% 100%
			}

			.combox {
			width: 100%;
			-webkit-overflow-scrolling: touch;
			padding: .2rem 0
			}

			.realpic-loading {
			color: #ffcda0;
			font-size: .24rem;
			text-align: center
			}

			.vmIconLoad {
			width: .32rem;
			height: .32rem;
			font-size: 20px;
			color: #4d74ff;
			display: inline-block;
			vertical-align: middle;
			background-image: url(http://img.haodanku.com/Fs3CUOAV8FeUjyhyU-3xOO5DSphI);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			-webkit-animation: vmspinLoad 2s linear infinite;
			animation: vmspinLoad 1.2s linear infinite
			}

			.vmIconLoad:before {
			-webkit-font-smoothing: antialiased;
			transform: translate(0)
			}

			.direct-img {
			position: fixed;
			z-index: 10000;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			max-width: 7.5rem;
			margin: auto;
			padding: .5rem;
			background: rgba(0,0,0,.3);
			overflow: hidden
			}

			.direct-img .direct-box {
			display: flex;
			flex-direction: column;
			height: 100%;
			padding-bottom: .4rem;
			background: #fff;
			border-radius: .15rem;
			overflow: hidden
			}

			.direct-img .direct-box .box-header {
			position: relative;
			color: #fc6e73;
			font-size: .26rem;
			font-weight: bolder;
			text-align: center;
			line-height: .8rem;
			border-bottom: 1px solid #f0f0f0
			}

			.direct-img .direct-box .box-header .btn-close {
			position: absolute;
			top: .27rem;
			right: .27rem;
			width: .32rem;
			height: .32rem;
			cursor: pointer
			}

			.direct-img .direct-box .box-content {
			flex: 1;
			overflow: auto;
			padding: .3rem
			}

			.direct-img .direct-box .box-content img {
			display: block;
			width: 100%;
			height: auto
			}

			.fade-enter-active,.fade-leave-active {
			transition: all .3s ease-in
			}

			.fade-enter,.fade-leave-to {
			opacity: 0
			}

			.snapped-up {
			z-index: 10000;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			max-width: 7.5rem;
			margin: auto;
			padding: .5rem;
			background: rgba(0,0,0,.3)
			}

			.snapped-up,.snapped-up .box {
			position: fixed;
			overflow: hidden
			}

			.snapped-up .box {
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			display: flex;
			flex-direction: column;
			height: 6.8rem;
			width: 5.8rem;
			padding: 0 .42rem .4rem;
			background: #fff;
			border-radius: .15rem
			}

			.snapped-up .box .box-header {
			color: #fc6e73;
			font-size: .26rem;
			font-weight: bolder;
			text-align: center;
			line-height: .8rem;
			height: .92rem
			}

			.snapped-up .box .box-header .btn-close {
			position: absolute;
			top: .27rem;
			right: .27rem;
			width: .32rem;
			height: .32rem;
			cursor: pointer
			}

			.snapped-up .box .box-content {
			flex: 1
			}

			.snapped-up .box .box-content .title {
			text-align: center;
			font-size: .3rem;
			font-weight: 700;
			color: #d92500;
			line-height: .5rem
			}

			.snapped-up .box .box-content img {
			display: block;
			margin: .27rem 0 .33rem;
			width: 100%;
			height: auto
			}

			.snapped-up .box .box-content button {
			width: 100%;
			height: .8rem;
			background: linear-gradient(90deg,#fe3a3f,#faa450);
			border-radius: .4rem;
			text-align: center;
			font-size: .28rem;
			font-weight: 700;
			color: #fff;
			line-height: .8rem;
			border: 0;
			outline: 0
			}

			.goback {
			position: fixed;
			top: .15rem;
			left: 0;
			width: 1.2rem;
			height: .48rem
			}

			.nav {
			margin: .2rem 0 .15rem
			}

			.nav-list {
			display: flex;
			padding-left: .45rem;
			overflow-x: auto;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none
			}

			.nav-list:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden
			}

			.nav-list li {
			font-size: .24rem;
			color: #f17258;
			background: #b92709;
			flex-shrink: 0;
			padding: .08rem .2rem;
			margin-right: .2rem;
			border-radius: .06rem;
			cursor: pointer
			}

			.nav-list li:last-child {
			margin-right: .4rem
			}

			.nav-list li.nav-active {
			color: #fd471f;
			background: #fff
			}

			.sort {
			background-color: #e7013a;
			padding-bottom: .2rem;
			border-radius: .2rem .2rem 0 0
			}

			.sort-list {
			display: flex;
			border-bottom: .02rem solid #eb3a15;
			color: #ff8f78;
			justify-content: space-between
			}

			.sort-list>li {
			width: 25%;
			font-size: .26rem;
			font-weight: 500;
			color: #ff8f78;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: .24rem 0
			}

			.sort-list>li.sort-active {
			color: #fff
			}

			.sort-list>li span {
			position: relative;
			height: .16rem;
			margin-left: .06rem
			}

			.sort-list>li span i {
			position: absolute;
			width: 0;
			height: 0;
			border-color: #b92709 transparent transparent;
			border-style: solid;
			border-width: .06rem .06rem 0
			}

			.sort-list>li span i:first-child {
			transform: rotate(180deg)
			}

			.sort-list>li span i:nth-child(2) {
			bottom: 0
			}

			.sort-list>li span i.arrow-active {
			border-color: #f2f2f2 transparent transparent
			}

			.ticket {
			display: inline-flex;
			align-items: center;
			margin-top: .2rem;
			font-size: 0;
			font-family: Microsoft YaHei;
			border-radius: 2px
			}

			.ticket .name {
			width: .38rem;
			font-weight: 300;
			color: #fff;
			display: inline-flex;
			background: linear-gradient(180deg,#ff753c,#ff4b42);
			border-radius: .04rem 0 0 .04rem
			}

			.ticket .name,.ticket .value {
			height: .28rem;
			font-size: .2rem;
			align-items: center;
			justify-content: center;
			font-family: Microsoft YaHei
			}

			.ticket .value {
			display: flex;
			color: #fd471f;
			background: #fff;
			padding: 0 .05rem;
			border: 1px solid #ff8209;
			border-left: none;
			font-weight: 500;
			border-radius: 0 .04rem .04rem 0
			}

			.free-share {
			position: fixed;
			left: 0;
			right: 0;
			margin: auto;
			width: 7.5rem;
			height: 1.24rem;
			background: linear-gradient(180deg,hsla(0,0%,100%,0),#ff3f17 50%);
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center
			}

			.free-share.active {
			display: none
			}

			.free-share img {
			width: 6.16rem;
			height: .86rem;
			display: block
			}

			.shut {
			position: absolute;
			right: .2rem;
			top: .2rem;
			width: .4rem;
			height: .4rem;
			background: url(http://img.bc.haodanku.com/haodanku/1596096751) no-repeat;
			background-size: 100% 100%
			}

			@-webkit-keyframes vmspinLoad {
			0% {
			transform: rotate(0)
			}

			50% {
			transform: rotate(180deg)
			}

			to {
			transform: rotate(1turn)
			}
			}

			@keyframes vmspinLoad {
			0% {
			transform: rotate(0)
			}

			50% {
			transform: rotate(180deg)
			}

			to {
			transform: rotate(1turn)
			}
			}