mall-web-ssr/components/lotteryDraw/lottery.vue

<template>
  <div class="lucky" v-if="nextLevel">
    <div class="banner"></div>
    <div class="lottery container">
      <div class="level" style="margin-top: 80px;" v-if="user.itemName === '王者'">
        <img src="/images/lottery/level-04.png" alt=""/>
        <div class="high_title">联系客服直接领取</div>
      </div>
      <div class="level" v-else>
        <div class="low_level">
          <img :src="user.itemName === '青铜' ? '/images/lottery/level-01.png' : user.itemName === '黄金' ? '/images/lottery/level-02.png' : '/images/lottery/level-03.png'" alt=""/>
          <div class="level_title">青铜买家用户每发布十条询价便可获得一次抽奖机会</div>
        </div>
        <div class="up"><img src="/images/lottery/up.png" alt=""/><span>升级</span></div>
        <div class="high_level">
          <img :src="nextLevel.nextItem.name === '黄金' ? '/images/lottery/level-020.png' : nextLevel.nextItem.name === '钻石' ? '/images/lottery/level-030.png' : '/images/lottery/level-040.png'" alt=""/>
        </div>
        <div class="progress_bar" v-show="this.user.itemName === '青铜'">
          <div class="buyer_inquiry inquiry">
            <el-progress :text-inside="true" :stroke-width="15" :percentage="inquiryRate"></el-progress>
            <span class="all_count"><span v-text="buyerInquiryCount"></span>条询价</span>
            <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span v-text="activityInquiryCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
          </div>
          <div class="vendor_inquiry inquiry">
            <el-progress :text-inside="true" :stroke-width="15" :percentage="replyRate"></el-progress>
            <span class="all_count"><span v-text="vendorInquiryCount"></span>条询价</span>
            <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>卖家再增加<span v-text="activityReplyCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
          </div>
        </div>
        <div class="progress_bar" v-show="this.user.itemName === '黄金'">
          <div class="buyer_inquiry inquiry" v-if="this.user.role === 'CUSTOMER'">
            <el-progress :text-inside="true" :stroke-width="15" :percentage="inquiryRate"></el-progress>
            <span class="all_count"><span v-text="buyerInquiryCount"></span>条询价</span>
            <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span v-text="activityInquiryCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
          </div>
          <div class="vendor_inquiry inquiry" v-if="this.user.role === 'SELLER'">
            <el-progress :text-inside="true" :stroke-width="15" :percentage="replyRate"></el-progress>
            <span class="all_count"><span v-text="vendorInquiryCount"></span>条询价</span>
            <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>卖家再增加<span v-text="activityReplyCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
          </div>
        </div>
        <div class="progress_bar" v-show="this.user.itemName === '钻石' && this.user.role === 'CUSTOMER'">
          <div class="buyer_inquiry inquiry">
            <el-progress :text-inside="true" :stroke-width="15" :percentage="inquiryRate"></el-progress>
            <span class="all_count"><span v-text="buyerInquiryCount"></span>条询价</span>
            <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span v-text="activityInquiryCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
          </div>
          <div class="buyer_trad inquiry">
            <el-progress :text-inside="true" :stroke-width="15" :percentage="tradeRate"></el-progress>
            <span class="all_count"><span v-text="buyerTradeCount"></span>元</span>
            <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span v-text="activityTradeCount"></span>元交易额，便可升级{{this.nextLevel.nextItem.name}}用户</div>
          </div>
        </div>
      </div>
      <div class="prize">
        <div class="press-prise">
          <div class="press_prise">
            <ul class="nineGrid">
              <li class="row">
                <div v-for="(prise, index) in currentPrizes.slice(0, 3)" :class="activeIndex === index ? `active` : ``">
                  <div class="wrapper">
                    <img :src="prise.img" alt="">
                    <p v-text="prise.name"></p>
                  </div>
                  <div class="mask"></div>
                </div>
              </li>
              <li class="row">
                <div :class="activeIndex === 7 ? 'active': ''" class="grid_center">
                  <div class="wrapper">
                    <img :src="sevenPrize.img" alt="">
                    <p v-text="sevenPrize.name"></p>
                  </div>
                  <div class="mask"></div>
                </div>
                <div class="getLuck" @click="startLottery">
                  <p>立即抽奖</p>
                </div>
                <div :class="activeIndex === 3 ? 'active': ''" class="grid_center">
                  <div class="wrapper">
                    <img :src="thirdPrize.img" alt="">
                    <p v-text="thirdPrize.name"></p>
                  </div>
                  <div class="mask"></div>
                </div>
              </li>
              <li class="row">
                <div v-for="(prise, index) in currentPrize" :class="activeIndex === 6-index ? `active` : ``">
                  <div class="wrapper">
                    <img :src="prise.img" alt="">
                    <p v-text="prise.name"></p>
                  </div>
                  <div class="mask"></div>
                </div>
              </li>
            </ul>
          </div>
          <div class="lave-count">剩余<span>{{restCount}}</span>次</div>
          <div class="tab-prise">
            <span class="toggle"
                  v-for="(item, index) in user.userDetails"
                  :class="{'active' : index === selectLevelIndex}"
                  @click="toggleLevel(item)">{{item.itemName}}用户</span>
          </div>
        </div>
        <div class="look_prise">
          <div class="header">
            <span>获奖名单</span>
            <span @click="lookMyPrizes(true)">查看我的奖品</span>
          </div>
          <div class="body">
            <div class="list_head">
              <span>时间</span>
              <span>用户</span>
              <span>奖品</span>
            </div>
            <ul>
              <li v-for="(record, index) in recordData" :key="index" :style="'top: -' + 40 * scrollTimerIndex + 'px'" :class="{'scrollTop': isTop}">
                <div class="time" :title="record.drawnTime" v-text="record.drawnTime">2018-08-08</div>
                <div class="company" :title="record.userName" v-text="record.userName">深圳市优软科技有限公司公司深圳市优软科技有限公司公司</div>
                <div class="prise_level" :title="record.prizeName" v-text="record.prizeName">一等奖</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="describe">
        <img src="/images/lottery/describe.png" alt=""/>
      </div>
      <div class="rule">
        <header>活动规则</header>
        <div class="section">
          <div class="list">1、活动时间：九月起；</div>
          <div class="list">2、三个月内的重复型号询价，不计入抽奖机会；</div>
          <div class="list">3、钻石用户连续3个月内累计的数据达到抽奖资格，将于最近的一次抽奖中参与，如9-10-11月内达到抽奖资格，将在12月底的抽奖(钻石用户领奖在每个季度最后一个工作日)，钻石用户奖品 将由我们电话联系用户；</div>
          <div class="list">4、获得实物礼品的客户，联系客服微信领取；</div>
          <div class="list">5、活动礼品按周发放；</div>
          <div class="list">6、对活动规则以及礼品发送有疑问，请联系在线客服（友情提示：客服在线时间周一至周五，早九点至晚六点，法定节假日除外）；</div>
          <div class="list">7、领奖时，兑换码和手机号为一致，便可兑换奖品，望您妥善保管；</div>
          <div class="list">8、本次活动所属权归优软商城所有。</div>
        </div>
      </div>
    </div>
    <!--去登录-->
    <div class="no-prise login">
      <el-dialog
        :visible.sync="showLoginBox">
        <div class="dialog-content">
          <img src="/images/lottery/hua.png" class="hua" alt=""/>
          <p>你还未登录，请登陆后抽奖</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <a type="button" @click="goLogin">确认</a>
        </span>
      </el-dialog>
    </div>
    <!--未获得抽奖机会-->
    <div class="no-prise">
      <el-dialog
        :visible.sync="showNoPriseBox">
        <div class="dialog-content">
          <img src="/images/lottery/hua.png" class="hua" alt=""/>
          <p>您未获得抽奖机会，请您先发布询价</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <a type="button" @click="sureInquiry(false)">确认</a>
        </span>
      </el-dialog>
    </div>
    <!--未抽中奖品还有机会-->
    <div class="no-prise">
      <el-dialog
        :visible.sync="showChooseBox">
        <div class="dialog-content">
          <img src="/images/lottery/hua.png" class="hua" alt=""/>
          <p>很遗憾，您没有中奖，下次还有机会！</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <a type="button" @click="showChooseBox = false">确认</a>
        </span>
      </el-dialog>
    </div>
    <!--中奖提示-->
    <div class="no-prise get-prise" v-if="winningInfo.data">
      <el-dialog
        :visible.sync="showGetPriseBox">
        <div class="dialog-content" v-if="winningInfo.data.name === ''">
          <!--<div class="close" @click="showGetPriseBox = false">&times;</div>-->
          <img src="/images/lottery/hua.png" class="hua" alt=""/>
          <p>很遗憾，您没有中奖，下次还有机会！</p>
          <span slot="footer" class="dialog-footer">
          <a type="button" @click="closeGotPriseInfo(false)">确认</a>
        </span>
        </div>
        <div class="dialog-content" v-else>
          <!--<div class="close" @click="showGetPriseBox = false">&times;</div>-->
          <img src="/images/lottery/hua.png" class="hua" alt=""/>
          <p>恭喜您抽中<span v-text="winningInfo.data.name"></span>，请添加客服微信使用兑换码兑换</p>
          <div class="qr"><p>扫描微信二维码或添加XXX微信领取奖品</p><img src="/images/lottery/qr.png" alt=""/></div>
          <span slot="footer" class="dialog-footer">
          <a type="button" @click="closeGotPriseInfo(false)">确认</a>
        </span>
        </div>
      </el-dialog>
    </div>
    <!--查看我的奖品-->
    <div class="no-prise look-prise">
      <el-dialog
        :visible.sync="lookPriseBox">
        <div class="dialog-content">
          <div class="close" @click="lookPriseBox = false">&times;</div>
          <img src="/images/lottery/hua.png" class="hua" alt=""/>
          <div class="btn-tip">奖品列表</div>
          <div v-if="ownRecordData.content && ownRecordData.content.length">
            <div style="margin: 0 auto; text-align: center; width: 700px;">
              <div class="prise-tab"><span>奖品</span><span>竞换码</span><span>中奖时间</span><span>竞换状态</span></div>
              <ul>
                <li v-for="item in ownRecordData.content">
                  <div :title="item.prizeName" v-text="item.prizeName">一等奖</div>
                  <div :title="item.code" v-text="item.code">YRQT0010</div>
                  <div :title="item.drawnTime" v-text="item.drawnTime">2018年12月30日</div>
                  <div v-text="item.status === 100 ? '已兑奖' : item.status === 200 ? '未兑奖' : ''">已兑换</div>
                </li>
              </ul>
              <div style="float: right;">
                <page :total="ownRecordData.totalElements" :page-size="pageParams.count"
                      :current="pageParams.page" @childEvent="handleCurrentChange"></page>
              </div>
            </div>
            <div class="prise-style">兑奖方式：扫描微信二维码或添加XXXX微信领取奖品 <img src="/images/lottery/mall_qr.png" alt=""/></div>
          </div>
          <div v-else>
            <div class="no_prise"><i class="fa fa-smile-o fa-lg"></i>暂无中奖记录</div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!--二维码-->
    <div class="qr-active">
      <img src="/images/lottery/qr.png" alt=""/>
    </div>
  </div>
</template>
<script>
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    name: 'lottery',
    data () {
      return {
        pageParams: {
          page: 1,
          count: 3
        },
        activeIndex: -1,  // 当前转动到哪个位置，起点位置
        count: 8,    // 总共有多少个位置
        timer: 0,    // 每次转动定时器
        speed: 200,   // 初始转动速度
        times: 0,    // 转动次数
        cycle: 50,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1,   // 中奖位置
        click: true,
        showToast: false,
        showLoginBox: false,
        showNoPriseBox: false,
        lookPriseBox: false,
        showChooseBox: false,
        showGetPriseBox: false,
        scrollTimer: {},
        scrollTimerIndex: 0,
        isTop: false,
        selectLevelIndex: 0,
        // 询价
        buyerInquiryCount: 0,
        activityInquiryCount: 0,
        inquiryRate: 0,
        // 回复
        vendorInquiryCount: 0,
        activityReplyCount: 0,
        replyRate: 0,
        thirdPrize: {},
        sevenPrize: {},
        // 钻石交易
        buyerTradeCount: 0,
        activityTradeCount: 0,
        tradeRate: 0,
        restCount: 0,
        pCode: '',
        gotIndexItem: 0
      }
    },
    components: {
      Page
    },
    fetch ({ store }) {
      return Promise.all([
        // 获取个人中奖
        store.dispatch('lottery/getOwnLotteryInfo', {activityCode: '11wwwwwwww',itemCode: this.user.itemCode})
      ])
    },
    computed: {
      user () {
        console.log(this.$store.state.lottery.lotteryInfo.userInfo.data.data, 'user')
        return this.$store.state.lottery.lotteryInfo.userInfo.data ? this.$store.state.lottery.lotteryInfo.userInfo.data.data : []
      },
      nextLevel () {
        console.log(this.$store.state.lottery.lotteryInfo.nextLevel.data.data, 'next')
        return this.$store.state.lottery.lotteryInfo.nextLevel.data ? this.$store.state.lottery.lotteryInfo.nextLevel.data.data : []
      },
      recordData () {
        return this.$store.state.lottery.lotteryInfo.record.data ? this.$store.state.lottery.lotteryInfo.record.data.data : []
      },
      ownRecordData () {
        return this.$store.state.lottery.lotteryInfo.ownRecord.data ? this.$store.state.lottery.lotteryInfo.ownRecord.data : []
      },
      currentPrizes () {
        console.log(this.$store.state.lottery.lotteryInfo.prizes.data, 'current')
        return this.$store.state.lottery.lotteryInfo.prizes.data ? this.$store.state.lottery.lotteryInfo.prizes.data.data : []
      },
      currentPrize () {
        return this.currentPrizes.slice(4,7).reverse()
      },
      winningInfo () {
        return this.$store.state.lottery.lotteryInfo.ownLotteryInfo.data ? this.$store.state.lottery.lotteryInfo.ownLotteryInfo.data : []
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.scrollInterval(true)
        this.getDetail()
        this.getLevel()
      })
    },
    methods: {
      // 去询价
      sureInquiry (type) {
        this.showNoPriseBox = type
        this.$router.push('/applyPurchase')
      },
      // 获取第3和第7奖品详情
      getDetail () {
        this.currentPrizes.forEach((item, index) => {
          if (index === 3) {
            this.thirdPrize = item
          }
          if (index === 7) {
            this.sevenPrize = item
          }
        })
      },
      // 获取等级
      getLevel () {
        this.nextLevel.currentItem.activityItemDetails.forEach(item => {
          let percent = Number(100)
          if (item.type === 'CUSTOMER_UPGRADE' && this.user.itemName === '青铜') {
            this.buyerInquiryCount = item.amount
            this.activityInquiryCount =  this.buyerInquiryCount - this.user.activityInquiryCount
            let inquiry = (percent - ((this.activityInquiryCount / this.buyerInquiryCount) * 100)).toFixed(0)
            this.inquiryRate = Number(inquiry)
          }
          if (item.type === 'SELLER_UPGRADE' && this.user.itemName === '青铜') {
            this.vendorInquiryCount = item.amount
            this.activityReplyCount =  this.vendorInquiryCount - this.user.activityReplyCount
            let replay = (percent - ((this.activityReplyCount / this.vendorInquiryCount) * 100)).toFixed(0)
            this.replyRate = Number(replay)
          }
          if (this.user.role === 'CUSTOMER' && item.type === 'CUSTOMER_UPGRADE' && this.user.itemName === '黄金') {
            this.buyerInquiryCount = item.amount
            this.activityInquiryCount =  this.buyerInquiryCount - this.user.itemCount
            let inquiry = (percent - ((this.activityInquiryCount / this.buyerInquiryCount) * 100)).toFixed(0)
            this.inquiryRate = Number(inquiry)
          }
          if (this.user.role === 'SELLER' && item.type === 'SELLER_UPGRADE' && this.user.itemName === '黄金') {
            this.vendorInquiryCount = item.amount
            this.activityReplyCount =  this.vendorInquiryCount - this.user.itemCount
            let replay = (percent - ((this.activityReplyCount / this.vendorInquiryCount) * 100)).toFixed(0)
            this.replyRate = Number(replay)
          }
          if (this.user.role === 'CUSTOMER' && item.type === 'CUSTOMER_UPGRADE' && item.resource === 'INQUIRY' && this.user.itemName === '钻石') {
            this.buyerInquiryCount = item.amount
            this.activityInquiryCount =  this.buyerInquiryCount - this.user.itemCount
            let inquiry = (percent - ((this.activityInquiryCount / this.buyerInquiryCount) * 100)).toFixed(0)
            this.inquiryRate = Number(inquiry)
          }
          if (this.user.role === 'CUSTOMER' && item.type === 'CUSTOMER_UPGRADE' && item.resource === 'TRADE_AMOUNT' && this.user.itemName === '钻石') {
            this.buyerTradeCount = item.amount
            this.activityTradeCount =  this.buyerTradeCount - this.user.activityTradeCount
            let trad = (percent - ((this.activityTradeCount / this.buyerTradeCount) * 100)).toFixed(3)
            this.tradeRate = Number(trad)
          }
        })
      },
      getOwnWiningInfo () {
        this.$http.get('/lottery/user/draw', {params: {activityCode: '11wwwwwwww', itemCode: this.pCode ? this.pCode : this.user.itemCode}})
          .then(res => {
            console.log(res.data, 'res.data')
            let _arr = []
            for (let i = 0; i < this.currentPrizes.length; i++) {
              console.log(this.currentPrizes[i].code, 'code')
              if (this.currentPrizes[i].code === res.data.data.code) {
                _arr.push(this.currentPrizes[i])
              }
            }
            this.gotIndexItem = _arr.slice(0, 1)[0].$index
            console.log(_arr.slice(0, 1)[0], 'gotItem0')
            console.log(this.gotIndexItem, 'gotItem')
            console.log(_arr)
            this.$store.commit('lottery/lotteryInfo/GET_OWN_LOTTERY_INFO_SUCCESS', res.data)
          }, err => {
            this.$store.commit('lottery/lotteryInfo/GET_OWN_LOTTERY_INFO_FAILURE', err)
            console.log(err)
          })
      },
      // 切换等级
      toggleLevel (item) {
        console.log(item, 'item')
        if (item.itemName === '钻石') {
          this.$message.info('钻石等级暂不能自主抽奖')
        } else {
          this.pCode = item.itemCode
          this.restCount = item.lotteryCount
          if (this.pCode) {
            this.$http.get('/lottery//user/prizes', {params: {activityCode: '11wwwwwwww', itemCode: this.pCode}})
              .then(res => {
                this.$store.commit('lottery/lotteryInfo/GET_CURRENT_GRADE_PRIZES_SUCCESS', res.data)
                setTimeout( () => {
                  this.getDetail()
                }, 0)
              }, err => {
                this.$store.commit('lottery/lotteryInfo/GET_CURRENT_GRADE_PRIZES_FAILURE', err)
              })
          }
        }
      },
      // 查看我的奖品
      lookMyPrizes (type) {
        this.lookPriseBox = type
      },
      // 去登录
      goLogin () {
        this.$router.push('/auth/login?returnUrl=' + window.location.href)
      },
      // 开始抽奖
      startLottery () {
        if (this.$store.state.option.user.logged) {
          if (this.restCount < 1) {
            this.showNoPriseBox = true
          } else {
            if (!this.click) {
              return
            }
            this.getOwnWiningInfo()
            this.closeToast()
            this.speed = 200
            this.click = false
            this.startRoll()
          }
        } else {
          this.showLoginBox = true
        }
      },
      // 开始转动
      startRoll () {
        this.times += 1  // 转动次数
        this.oneRoll()  // 转动过程调用的每一次转动方法，这里是第一次调用初始化
        // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
        if (this.times > this.cycle + 10 && this.prize === this.activeIndex) {
          clearTimeout(this.timer)   // 清除转动定时器，停止转动
          this.prize = -1
          this.times = 0
          this.click = true
          this.showToast = true
          // console.log('你已经中奖了')
          this.showGetPriseBox = true
        } else {
          if (this.times < this.cycle) {
            this.speed -= 10   // 加快转动速度
          } else if (this.times === this.cycle) {    // 随机获得一个中奖位置
            // const index = parseInt(Math.random() * 10, 0) || 0
            this.prize = this.gotIndexItem
            if (this.prize > 7) {
              this.prize = 7
            }
            // console.log(`中奖位置${this.prize}`)
          } else if (this.times > this.cycle + 10 &&
            ((this.prize === 0 && this.activeIndex === 7) || this.prize === this.activeIndex + 1)) {
            this.speed += 110
          } else {
            this.speed += 20
          }
          if (this.speed < 40) {
            this.speed = 40
          }
          this.timer = setTimeout(this.startRoll, this.speed)
        }
      },
      // 每一次转动
      oneRoll () {
        let index = this.activeIndex  // 当前转动到哪个位置
        const count = this.count  // 总共有多少个位置
        index += 1
        if (index > count - 1) {
          index = 0
        }
        this.activeIndex = index
      },
      // 关闭弹出框
      closeToast () {
        this.showToast = false
      },
      // 我的奖品
      scrollInterval (flag) {
        // let _arr = {}
        // _arr = this.recordData
        if (flag && this.recordData.length > 5) {
          this.scrollTimer = setInterval(() => {
            this.scrollTimerIndex ++
            this.isTop = (this.scrollTimerIndex % 45 === 0)
            if (this.isTop) {
              this.scrollTimerIndex = 0
              // for (let i = 0; i < this.recordData; i++) {
              //   _arr.push(this.recordData.pop())
              // }
            }
          }, 3000)
        } else {
          clearInterval(this.scrollTimer)
        }
      },
      // 个人奖品分页
      handleCurrentChange (page) {
        this.pageParams.page = page
        this.pageCommodity(this.pageParams)
      },
      async pageCmpGoods (pageParams) {
        console.log(pageParams)
        params.page = pageParams.page
        params.count = pageParams.count
        params.activityCode = '11wwwwwwww'
        try {
          let { data } = await this.$http.get('/lottery/user/winninghistories/one', { params })
          this.$store.commit('lottery/lotteryInfo/GET_OWN_WIN_RECORD_SUCCESS', data)
        } catch (err) {
          this.$store.commit('lottery/lotteryInfo/GET_OWN_WIN_RECORD_FAILURE', err)
        }
      },
      closeGotPriseInfo (type) {
        this.showGetPriseBox = type
        this.prize = -1
      }
    }
  }
</script>
<style lang="scss" scoped>
  .lucky {
    position: relative;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    background: #88dcf4;
    .qr-active {
      position: fixed;
      top: 300px;
      right: 50px;
    }
    .banner{
      margin: 0 auto;
      height: 552px;
      text-align: center;
      background: url('/images/lottery/banner.png') center center/auto 100% no-repeat #018bff;
    }
    .lottery{
      margin: 0 auto;
      padding-bottom: 100px !important;
      width: 1190px;
      text-align: center;
      .level{
        position: relative;
        margin-top: 140px;
        .low_level{
          width: 372px;
          .level_title {
            margin: 20px auto 0;
            padding: 9px 23px 10px 22px;
            text-align: left;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            background-color: #fcac46;
            border-radius: 15px;
          }
        }
        .high_title{
          width: 184px;
          margin: 20px auto 0;
          padding: 10px 12px;
          text-align: left;
          font-size: 20px;
          font-weight: bold;
          color: #fff;
          background-color: #fcac46;
          border-radius: 15px;
        }
        .up {
          position: absolute;
          top: 20px;
          left: 320px;
          span{
            position: absolute;
            top: 28px;
            left: 229px;
            font-size: 30px;
            font-weight: bold;
            color: #693100;
          }
        }
        .high_level {
          position: absolute;
          top: -107px;
          left: 803px
        }
        .progress_bar {
          position: absolute;
          top: 245px;
          left: 460px;
          width: 511px;
          .inquiry {
            position: relative;
            div.tip_text{
              padding-left: 20px;
              margin-top: 18px;
              font-size: 24px;
              color: #0082c4;
              text-align: left;
              img{
                margin: -4px 10px 0 0;
              }
            }
            span.all_count{
              position: absolute;
              top: -5px;
              left: 525px;
              width: 136px;
              font-size: 24px;
              color: #0083c5;
              text-align: left;
            }
          }
          .vendor_inquiry, .buyer_trad{
            margin-top: 60px;
          }
        }
      }
      .prize{
        overflow: hidden;
        margin: 110px auto;
        .press-prise {
          float: left;
          margin: 0 auto;
          width: 500px;
          text-align: center;
          .lave-count{
            margin: 22px 0;
            font-size: 30px;
            font-weight: bold;
            color: #ff6600;
            >span{
              font-size: 30px;
              font-weight: bold;
              color: #ff6600;
            }
          }
          .tab-prise{
            span.toggle{
              display: inline-block;
              width: 131px;
              height: 44px;
              line-height: 44px;
              text-align: center;
              font-size: 24px;
              font-weight: bold;
              color: #ffffff;
              background-color: #fdd557;
              border-radius: 15px;
              cursor: pointer;
              margin-right: 16px;
              &:hover, &.active{
                background-color: #ff9000;
              }
            }
          }
        }
        .press_prise{
          position: relative;
          width: 494px;
          height: 309px;
          background-color: #ffbe04;
          border-radius: 13px;
          .nineGrid {
            padding-right: 15px;
            position: absolute;
            top: 8px;
            left: 8px;
            width: 478px;
            height: 293px;
            background-color: #ff9000;
            border-radius: 13px;
            li {
              height: 86px;
              display: flex;
              > div {
                flex: 1;
                height: 100%;
                text-align: center;
                position: relative;
                margin-top: 10px;
                .wrapper {
                  width: 148px;
                  height: 80px;
                  background-color: #fff2cf;
                  border-radius: 13px;
                  box-shadow: 0 7px 0 #ffc63c;
                  -moz-box-shadow: 0 7px 0 #ffc63c;
                  -o-box-shadow: 0 7px 0 #ffc63c;
                  -webkit-box-shadow: 0 7px 0 #ffc63c;
                }
                img {
                  /*width: 46px;*/
                  /*height: 38px;*/
                  vertical-align: middle;
                  margin: 8px 0;
                }
                p{
                  color: #ff6000;
                  font-size: 16px;
                  font-weight: bold;
                }
                .mask {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 148px;
                  height: 86px;
                  opacity: 0.5;
                  border-radius: 10px;
                  background-color: #000;
                  display: none;
                }
              }
              >div:nth-child(2) .wrapper {
                background: #fee6a7;
              }
              >div.grid_center .wrapper{
                background: #fee6a7;
              }
              > div.active {
                .mask {
                  display: block;
                }
              }
              > div:first-child {
                margin-left: 24px;
              }
              > div.getLuck {
                margin-right: 6px;
                width: 148px;
                height: 80px;
                background-color: #fddb00;
                border-radius: 13px;
                box-shadow: 0 7px 0 #ffc63c;
                -moz-box-shadow: 0 7px 0 #ffc63c;
                -o-box-shadow: 0 7px 0 #ffc63c;
                -webkit-box-shadow: 0 7px 0 #ffc63c;
                cursor: pointer;
                p {
                  font-size: 27px;
                  font-weight: 900;
                  color: #f91f00;
                  line-height: 85px;
                }
              }
            }
            li:nth-child(2), li:last-child  {
              margin-top: 8px;
            }
          }
        }
        .look_prise{
          float: right;
          width: 582px;
          .header {
            padding: 0 8px 0 28px;
            overflow: hidden;
            width: 582px;
            height: 50px;
            line-height: 50px;
            background-color: #fdd557;
            border-radius: 13px 13px 0px 0px;
            span{
              color: #846244;
              &:first-child {
                float: left;
                font-size: 30px;
              }
              &:last-child {
                display: inline-block;
                margin-top: 8px;
                float: right;
                width: 134px;
                height: 35px;
                line-height: 35px;
                font-size: 18px;
                border-radius: 5px;
                border: solid 1px #846244;
                cursor: pointer                                         ;
              }
            }
          }
          .body{
            padding: 0 24px 29px;
            background: #fff;
            border-radius: 0px 0px 13px 13px;
            .list_head{
              width: 100%;
              height: 54px;
              line-height: 54px;
              border-bottom: solid 1px #846244;
              span{
                display: inline-block;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                color: #846244;
                &:first-child {
                  width: 120px;
                }
                &:nth-child(2) {
                  width: 300px;
                }
                &:last-child {
                  width: 110px;
                }
              }
            }
            ul{
              width: 100%;
              height: 296px;
              overflow: hidden;
              li{
                display: inline-block;
                overflow: hidden;
                height: 40px;
                line-height: 40px;
                position: relative;
                top: 0;
                transition: top 1s;
                -moz-transition: top 1s;
                -webkit-transition: top 1s;
                -o-transition: top 1s;
                &.scrollTop {
                  transition: top 0s;
                  -moz-transition: top 0s;
                  -webkit-transition: top 0s;
                  -o-transition: top 0s;
                }
                div{
                  float: left;
                  font-size: 18px;
                  color: #846244;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  &:first-child {
                    width: 120px;
                  }
                  &:nth-child(2) {
                    width: 300px;
                  }
                  &:last-child {
                    width: 110px;
                  }
                }
              }
            }
          }
        }
      }
      .describe{
        margin-bottom: 88px;
      }
      .rule{
        margin: 0 auto;
        width: 1040px;
        text-align: center;
        header{
          padding-left: 14px;
          width: 100%;
          height: 50px;
          line-height: 50px;
          font-size: 24px;
          color: #846244;
          background-color: #fdd557;
          border-radius: 13px 13px 0px 0px;
        }
        .section{
          padding: 20px 20px 36px 14px;
          background-color: #ffffff;
          border-radius: 0px 0px 13px 13px;
          .list{
            line-height: 36px;
            text-align: left;
            font-size: 24px;
            color: #846244;
          }
        }
      }
    }
  }
</style>