抽奖九宫格

template部分代码：

<template>
<div class="container">
  <div class="gameBox">
    <!-- 背景图 -->
    <div class="bg1"></div>
    <!-- 点击开始抽奖 -->
    <div  @click="start">
      <div class="click">点击</div>
      <div class="draw">抽奖</div>
      <img class="rui-pointer" src="../../assets/image/LuckyDraw/coujiangbtn.png" alt="">
    </div>
    <!-- 九宫格选项 -->
    <ul>
      <li v-for="(item,i) in list" :key="i" :class="'item' + (i+1)">
          <div class="img1">
            <img v-if="i==current" class="prize" src="../../assets/image/LuckyDraw/select.png" alt="">
            <img v-else class="prize" src="../../assets/image/LuckyDraw/prize.png" alt="">
            <div class="value">{{item.value}}</div>
            <img :src="require(`../../assets/image/LuckyDraw/${item.image}`)" alt="" class="luckyimg">
          </div>
      </li>
    </ul>
    <!-- 查看中奖记录 -->
    <div class="record">
      <div @click="ToWinningRecord">
        <div class="look">查看中奖记录</div>
      </div>
      <div  @click="ToResultPage">
        <div class="back">返回结果页</div>
      </div>
    </div>
  </div>
  <!-- 中实物弹窗 -->
  <div v-if="physical" class="physical">
    <img class="overlay" src="../../assets/image/LuckyDraw/img1/mengceng.png" alt="">
    <img class="dialog" src="../../assets/image/LuckyDraw/img1/tanchuang.png" alt="">
    <!-- 中奖物品 -->
    <div class="price_in">{{ award.name }}*1</div>
    <div class="receipt_information">请填写您的收货信息</div>
    <div class="header">收货人姓名</div>
    <input class="name" type="text" v-model="consignee_name">
    <div class="game_age">联系方式</div>
    <input type="text"  class="game-age" v-model="consignee_phone">
    <div class="address">收货地址</div>
    <input type="text"  class="address_input" v-model="consignee_address">
    
    <div @click="back">
      <div class="back">返回</div>
    </div>
    <div @click="physical_submit">
      <!-- 修改 -->
      <div v-if="consignee_address">
        <div class="share1">确定</div>
      </div>
      <!-- 提交 -->
      <div v-else>
        <div class="share">提交</div>
      </div>
    </div>
  </div>
  <!-- 中Q币 -->
  <div v-if="QqMoney" class="QqMoney">
    <img class="overlay" src="../../assets/image/LuckyDraw/img1/mengceng.png" alt="">
    <img class="dialog" src="../../assets/image/LuckyDraw/img1/tanchuang.png" alt="">
    <!-- 中奖物品 -->
    <div class="price_in">{{ award.name }}</div>
    <div class="receipt_information">请填写你的充值QQ号码</div>
    <div class="header">QQ号码</div>
    <input class="name" v-model="qqNumber" type="text">
    <div class="insert">请您填写QQ号码，我们将在活动结束后的14个工作日<br/>内进行充值。</div>
    <div @click="money">
      <div class="back">返回</div>
    </div>
    <!-- 中Q币修改 -->
    <div v-if="HaveNumber" @click="saveQQNumber">
      <div class="share" style="right: 21.5%;">确定</div>
    </div>
    <!-- 中Q币提交 -->
    <div v-else @click="saveQQNumber">
      <div class="share">提交</div>
    </div>
  </div>
  <!-- 没有中奖 -->
  <div v-if="NoHavePrice" class="NoHavePrice">
    <img class="overlay" src="../../assets/image/LuckyDraw/img1/mengceng.png" alt="">
    <img class="dialog" src="../../assets/image/LuckyDraw/img1/weizhongjiang.png" alt="">
    <div class="insert">很遗憾你没能中奖</div>
    <div @click="back">
      <div class="back">返回</div>
    </div>
    <!-- 分享 -->
    <div @click="ShareFriends">
      <div class="share">分享</div>
    </div>
    <div v-if="overlay" @click="OverLay">
      <img class="ShareFriendsOverlay" src="../../assets/image/WinningRecord/overlay.png" alt="">
      <img class="guide" src="../../assets/image/WinningRecord/dashed.png" alt="">
      <div class="ShareBox">
        请点击右上角" ··· "，将它发送给指定朋友，或分享到朋友圈
      </div>
    </div>
  </div>
   <!-- 中红包 -->
  <div v-if="RedEnvelope" class="RedEnvelope">
    <img class="overlay" src="../../assets/image/LuckyDraw/img1/mengceng.png" alt="">
    <img class="dialog" src="../../assets/image/LuckyDraw/img1/tanchuang.png" alt="">
    <div class="price_in">随机红包</div>
    <div class="price_num">{{ award.value }}</div>
    <img class="name" src="../../assets/image/LuckyDraw/redbox.png" alt="">
    <div class="insert"></div>
    <div @click="back">
      <div class="back">返回</div>
    </div>
  </div>
</div>
</template>

js部分代码：

<script>
import { KeepAddress, getTimes, getResult } from '../../api/LuckyDraw'
import { ConfigureShare } from '../../utils/share'
export default {
  data () {
    return {
      list: [
        { value: 'T恤', image: 'T-shirt.png', id: '1' },
        { value: '50Q币', image: 'QMoney.png', id: '2' },
        { value: '4手机', image: 'phone.png', id: '3' },
        { value: '移动电源', image: 'chongdianbao.png', id: '4' },
        { value: '谢谢参与', image: 'xiaonian.png', id: '5' },
        { value: '束口袋', image: 'shukoudai.png', id: '6' },
        { value: '冰封散热背夹', image: 'sanrebeijia.png', id: '7' },
        { value: '随机现金红包', image: 'RedPack.png', id: '8' }
      ], // 奖品列表
      current: 0, // 当前索引值
      speed: 200, // 时间->速度
      diff: 15, // 基数
      award: {}, // 抽中的奖品
      time: 0, // 当前时间戳
      timer: null, // 定时器
      physical: false, // 中实物
      QqMoney: false, // 中q币
      RedEnvelope: false, // 中红包
      NoHavePrice: false, // 未中奖
      consignee_name: '', // 收货人姓名
      consignee_phone: '', // 收货人联系方式
      consignee_address: '', // 收货人地址
      qqNumber: '', // QQ号
      BlackSharkFurryDoll: null, // 从中实物页跳转过来
      QqNumber: null, // 从中Q币页调过来
      HaveNumber: false, // 修改qq号
      times: 0, // 抽奖次数
      reTimes: 0,
      recordId: '',
      overlay: false // 分享
    }
  },
  watch: {
    times: function (value) {
      if (value === 0) {
        this.reTimes = 0
      } else {
        this.reTimes = this.times - 1
      }
    }
  },
  created () {
    // 从中实物页跳转过来修改收货地址
    this.consignee_name = this.$route.query.name
    this.consignee_phone = this.$route.query.address
    this.consignee_address = this.$route.query.phone
    this.recordId = this.$route.query.recordId
    this.BlackSharkFurryDoll = this.$route.query.BlackSharkFurryDoll
    if (this.BlackSharkFurryDoll) {
      this.physical = true
    }
    // 从中Q币页调过来
    this.qqNumber = this.$route.query.QqNumber
    const money = this.$route.query.QqMoney
    this.recordId = this.$route.query.recordId
    if (money) {
      this.QqMoney = true
    }
    if (this.qqNumber) {
      this.HaveNumber = true
    }
    this.getTimes()
    const arr = {
      title: '！', // 分享标题
      desc: '参与互动测试哦', // 分享描述
      imgUrl: '' // 分享图标
    }
    ConfigureShare(arr)
  },
  methods: {
    // 分享
    ShareFriends () {
      this.overlay = true
    },
    OverLay () {
      this.overlay = false
    },
    physical_submit () {
      if (this.consignee_name === '' || this.consignee_address === '' || this.consignee_phone === '') {
        this.$message.warning({
          message: '请填写完整收货地址信息！',
          type: 'warning',
          center: true
        })
      } else {
        KeepAddress({
          id: JSON.parse(this.recordId),
          receiver: this.consignee_name,
          address: this.consignee_address,
          phone: this.consignee_phone
        }).then(res => {
          this.physical = false
          this.$message({
            message: this.consignee_address ? '修改成功！' : '提交成功',
            type: 'success',
            center: true
          })
        }).catch(res => {
          this.$message.error({
            message: this.consignee_address ? '修改失败' : '提交失败',
            type: 'error',
            center: true
          })
        })
      }
    },
    // 保存qq号
    saveQQNumber () {
      if (this.qqNumber === '') {
        this.$message.warning({
          message: '请填写您的qq号！',
          type: 'warning',
          center: true
        })
      } else {
        KeepAddress({
          id: JSON.parse(this.recordId),
          address: this.qqNumber
        }).then(res => {
          this.QqMoney = false
          this.$message({
            message: '提交成功',
            type: 'success',
            center: true
          })
        }).catch(res => {
          this.$message.error({
            message: '提交失败',
            type: 'error',
            center: true
          })
        })
      }
    },
    money () {
      this.QqMoney = false
    },
    back () {
      this.times--
      this.NoHavePrice = this.QqMoney = this.RedEnvelope = this.physical = false
    },
    ToResultPage () {
      this.$router.push('/ResultPage')
      
    },
    ToWinningRecord () {
      this.$router.push('/WinningRecord')
    },
    start () {
      if (this.times === 0) {
        this.$message.warning({
          message: '您的抽奖次数已用完！',
          type: 'warning',
          center: true
        })
        return
      }
      // 开始抽
      this.getLottery()
      this.time = Date.now()
      this.speed = 200
      this.diff = 12
    },
    // 调接口获取奖品
    async getLottery () {
      const res = await getResult()
      if (res.code === 0) {
        this.award = res.data
        this.recordId = this.award.record_id
      }
      this.move()
    },
    // 开始转动
    move () {
      this.timer = setTimeout(() => {
        this.current++
        if (this.current > 7) {
          this.current = 0
        }

        if (this.award.name && (Date.now() - this.time) / 1000 > 2) {
          this.speed += this.diff // 转动减速
         
          if (
            (Date.now() - this.time) / 1000 > 4 &&
            this.award.name === this.list[this.current].value
          ) {
            clearTimeout(this.timer)
            setTimeout(() => {
              if (this.award.name === '谢谢参与') {
                this.NoHavePrice = true
              } else if (this.award.name === '50Q币') {
                this.QqMoney = true
              } else if (this.award.name === '随机现金红包') {
                this.RedEnvelope = true
              } else {
                this.physical = true
              }
            }, 1000)
            return
          }
        } else {

          this.speed -= this.diff
        }
        this.move()
      }, this.speed)
    },
    // 获取抽奖次数
    async getTimes () {
      const res = await getTimes()
      if (res.code === 0) {
        this.times = res.data.times
      }
    }
  }
}
</script>

样式部分：

<style lang="less" scoped>
.container{
  .gameBox {
    width: 100vw;
    height: 100vh;
    position: relative;
    .rui-pointer{
      width: 20.19%;
      height: 14.86%;
      text-align: center;
      box-sizing: border-box;
      border-radius: 10px;
      font-size: 30px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 54%;
      left: 22%;
      right: 0;
      margin: auto;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    .click{
      font-size: 20px;
      font-weight: bold;
      color: #FFFFFF;
      text-shadow: 0px 3px 6px rgba(157, 0, 43, 0.54);
      text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      top: 52%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
    .draw{
      font-size: 20px;
      font-weight: bold;
      color: #FFFFFF;
      text-shadow: 0px 3px 6px rgba(157, 0, 43, 0.54);
      text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      top: 56%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: none!important;
      z-index: 2;
    }
    .bg1 {
      background: url('') no-repeat center;
      width: 100%;
      height: 100%;
      background-size:100% 100%;/*设置图片大小*/
      background-repeat:no-repeat;
      z-index: -10;
      background-attachment:fixed;
    }
    ul {
      width: 76vw;
      height: 76vw;
      max-width: 67%;
      min-height: 47%;
      position: absolute;
      top: 31.39%;
      left: 17.31%;
      li {
        width: 32%;
        height: 32%;
        text-align: center;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 30px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        .img1 {
          width: 100%;
          height: 100%;
          .prize{
            width: 100%;
            height: 94.39%;
            z-index: -1;
            position: relative;
          }
          .value{
            width: 58px;
            height: 9px;
            font-size: 10px;
            font-weight: 400;
            color: #333333;
            position: absolute;
            bottom: 34%;
            left: 0;
            right: 0;
            margin: auto;
          }
          .luckyimg{
            width: 94%;
            height: 94%;
            position: absolute;
            bottom: 11%;
            left: 0;
            right: 0;
            margin: auto;
          }
        }
      }
      .item1 {
        top: 0;
        left: 0;
        transform: translate(0, 0);
        }
      .item2 {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        }
      .item3 {
        top: 0;
        right: 0;
        transform: translate(0, 0);
        }
      .item4 {
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        }
      .item5 {
        bottom: 0;
        right: 0;
        transform: translate(0, 0);
        }
      .item6 {
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        }
      .item7 {
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
        }
      .item8 {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        }
    }
    .record{
    .ToLuck{
      width: 36.76%;
      position: absolute;
      bottom: 5.16%;
      left: 10.37%;
    }
    .look{
      background-image: url();
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      font-weight: 800;
      color: #FFFFFF;
      text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
      right: 0;
      margin: 0 auto;
      width: 36%;
      height: 8%;
      position: absolute;
      bottom: 4%;
      left: -41%;
    }
    .back{
      background-image: url(../../assets/image/LuckyDraw/backresult.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      font-weight: 800;
      color: #FFFFFF;
      text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
      right: 0;
      margin: 0 auto;
      width: 36%;
      height: 8%;
      position: absolute;
      bottom: 4%;
      right: 11%;
    }
   }
  }
  // 中实物弹窗
  .physical{
    .dialog{
      width:92.78%;
      height: 92.74%;
      z-index: 20;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .overlay{
      width:100%;
      height: 100%;
      z-index: 20;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .price_in{
      font-size: 21px;
      font-weight: bold;
      color: #333333;
      z-index: 21;
      position: absolute;
      top: 26.5%;
      left: 35.74%;
    }
    .receipt_information{
      font-size: 13px;
      font-weight: 800;
      color: #333333;
      z-index: 21;
      position: absolute;
      top: 32.75%;
      left: 16%;
    }
     .header{
        position: absolute;
        top: 39%;
        left: 16%;
        z-index: 30;
        font-weight: 500;
        color: #333333;
        font-size: 13px;
      }
      .name{
        height: 7%;
        width: 47%;
        text-indent: 4px;
        border-radius: 10px;
        background: #D2E1FF;
        border: none;
        position: absolute;
        top: 37%;
        left: 38%;
        z-index: 30;
      }
      .game_age{
        position: absolute;
        top: 47%;
        left:17%;
        z-index: 30;
        font-size: 13px;
        font-weight: 500;
        color: #333333;
      }
      .game-age{
        height: 7%;
        width: 50%;
        text-indent: 4px;
        border-radius: 10px;
        background: #D2E1FF;
        border: none;
        position: absolute;
        top: 45.5%;
        left: 35%;
        z-index: 30;
      }
      .address{
        position: absolute;
        top: 56%;
        left: 16%;
        z-index: 30;
        font-size: 13px;
        font-weight: 500;
        color: #333333;
      }
      .address_input{
        height: 7%;
        width: 50%;
        text-indent: 4px;
        border-radius: 10px;
        background: #D2E1FF;
        border: none;
        position: absolute;
        top: 54%;
        left: 35%;
        z-index: 30;
      }
      .insert{
        font-size: 10px;
        font-weight: 400;
        color: #333333;
        position: absolute;
        line-height: 19px;
        top: 64%;
        z-index: 30;
        letter-spacing: -0.5px;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    .back{
      font-size: 22px;
      font-weight: 400;
      text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      bottom: 12%;
      left: 16%;
      font-style: italic;
      z-index: 34;
      background-image: url(../../assets/image/LuckyDraw/img1/back.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      width: 33%;
      height: 9%;
    }
    .share{
      font-size: 22px;
      font-weight: 400;
      text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      bottom: 12%;
      right: 16%;
      font-style: italic;
      z-index: 34;
      background-image: url(../../assets/image/LuckyDraw/img1/submit.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      width: 33%;
      height: 9%;
    }
    .share1{
      font-size: 22px;
      font-weight: 400;
      text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      bottom: 12%;
      right: 16%;
      font-style: italic;
      z-index: 34;
      background-image: url(../../assets/image/LuckyDraw/img1/submit.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      width: 33%;
      height: 9%;
    }
  }
  // qq弹窗
  .QqMoney{
    .dialog{
      width: 92.78%;
      height: 71.74%;
      z-index: 20;
      position: absolute;
      top: 1.88%;
      left: 0px;
      right: 0;
      margin: auto;
    }
    .overlay{
      width:100%;
      height: 100%;
      z-index: 20;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .price_in{
      font-size: 21px;
      font-weight: bold;
      color: #333333;
      z-index: 21;
      position: absolute;
      top: 22%;
      left: 45.74%;
    }
    .receipt_information{
      font-size: 13px;
      font-weight: 800;
      color: #333333;
      z-index: 21;
      position: absolute;
      top: 28%;
      left: 17%;
    }
     .header{
        position: absolute;
        top: 35%;
        left: 17%;
        z-index: 30;
        font-weight: 500;
        color: #333333;
        font-size: 13px;
      }
      .name{
        height: 7%;
        width: 50%;
        text-indent: 4px;
        border-radius: 10px;
        background: #D2E1FF;
        border: none;
        position: absolute;
        top: 33%;
        left: 33%;
        z-index: 30;
      }
      .insert{
        font-size: 10px;
        font-weight: 400;
        color: #333333;
        position: absolute;
        line-height: 20px;
        top: 46%;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 30;
        letter-spacing: -0.5px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    .back_img{
      width: 32.07%;
      position: absolute;
      bottom: 33%;
      left: 16%;
      z-index: 33;
    }
    .back{
      font-size: 22px;
      font-weight: 400;
      text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      bottom: 33%;
      left: 16%;
      font-style: italic;
      z-index: 34;
      background-image: url(../../assets/image/LuckyDraw/img1/back.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      width: 33%;
      height: 9%;
    }
    .share{
      font-size: 22px;
      font-weight: 400;
      text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      bottom: 33%;
      right: 16%;
      font-style: italic;
      z-index: 34;
      background-image: url(../../assets/image/LuckyDraw/img1/submit.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      width: 33%;
      height: 9%;
    }
  }
  // 中红包
  .RedEnvelope{
     .dialog{
      width: 92.78%;
      height: 71.74%;
      z-index: 20;
      position: absolute;
      top: 1.88%;
      left: 0px;
      right: 0;
      margin: auto;
    }
    .overlay{
      width:100%;
      height: 100%;
      z-index: 20;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .price_in{
      font-size: 21px;
      font-weight: bold;
      color: #333333;
      z-index: 21;
      position: absolute;
      top: 22%;
      left: 38%;
    }
    .price_num{
      z-index: 40;
      position: absolute;
      top: 34.5%;
      left: 34%;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
    }
      .name{
        height: 7%;
        width: 34%;
        text-indent: 4px;
        border-radius: 10px;
        background: #D2E1FF;
        border: none;
        position: absolute;
        top: 33%;
        left: 32%;
        z-index: 30;
      }
      .insert{
        font-size: 10px;
        font-weight: 400;
        color: #333333;
        position: absolute;
        line-height: 20px;
        top: 44%;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 30;
        letter-spacing: -0.5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
      }
    .back_img{
      width: 32.07%;
      position: absolute;
      bottom: 36.5%;
      left: 35%;
      z-index: 33;
    }
    .back{
      font-size: 22px;
      font-weight: 400;
      text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      bottom: 34.5%;
      left: 0;
      right: 0;
      margin: auto;
      font-style: italic;
      z-index: 34;
      background-image: url(../../assets/image/LuckyDraw/img1/back.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      width: 33%;
      height: 9%;
    }
  }
  // 未中奖
  .NoHavePrice{
     // 分享好友
    .ShareFriendsOverlay{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 1000000;
    }
    .guide{
      width: 66%;
      height: 22%;
      position: absolute;
      top: 1.6%;
      right: 2.6%;
      z-index: 1100000;
    }
    .ShareBox{
      width: 72%;
      height: 13%;
      background: #005DD1;
      border-radius: 16px;
      position: absolute;
      top: 24%;
      right: 13%;
      z-index: 1100000;
      font-size: 13px;
      font-weight: 500;
      color: #FFFFFF;
      display:flex;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px 26px;
      box-sizing: border-box;
    }
    .dialog{
      width: 93%;
      height: 82.74%;
      z-index: 20;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .overlay{
      width:100%;
      height: 100%;
      z-index: 20;
      position: absolute;
      top: 0px;
      left: 0px;
    }
      .insert{
        width: 77%;
        font-weight: 400;
        color: #333333;
        position: absolute;
        top: 58%;
        left: 0;
        right: 0;
        justify-content: center;
        align-items: center;
        margin: auto;
        display: flex;
        z-index: 30;
        font-size: 11px;
        letter-spacing: 1.5px;
      }
    .back{
      font-size: 22px;
      font-weight: 400;
      text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      bottom: 13.5%;
      left: 16%;
      font-style: italic;
      z-index: 34;
      background-image: url(../../assets/image/LuckyDraw/img1/back.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      width: 33%;
      height: 9%;
    }
    .share{
      font-size: 22px;
      font-weight: 400;
      text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
      position: absolute;
      bottom: 13.5%;
      right: 16%;
      font-style: italic;
      z-index: 34;
      background-image: url(../../assets/image/LuckyDraw/img1/submit.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      width: 33%;
      height: 9%;
    }
  }
}
</style>