<template>
  <!-- 额外页面 -->
  <div class="additional" ref="addit">
    <!-- 内容 -->
    <div class="additionalContent" ref="bottom">
      <!-- 头部商品展示 -->
      <div class="headerExhibition">
        <!-- 图片 -->
        <div class="ExhibitionImg">
          <!-- 幸运用户 -->
          <!-- <div class="LuckyUser">
            <van-icon name="smile" color="#FFFFFF" size="20" />
            1分钟前开出传说款
          </div> -->
          <!-- 联系客服投诉 -->
          <div class="complaint" @click="kefuchaxun">
            <van-icon name="service-o" size="30" />
            <p>客服投诉</p>
          </div>
          <!-- 活动规则 -->
          <img
            class="activity"
            src="../image/activity.png"
            alt=""
            @click="ruleTips"
          />
          <!-- 商品图片 -->
          <img
            v-if="boxMsg.productList"
            class="goodsImg"
            :src="boxMsg.productList[0].pic"
            alt=""
          />
          <!-- 横幅价格 -->
          <img class="bannerPrice" src="../image/priceBanner.png" alt="" />
        </div>
      </div>
      <!-- 限时特惠 -->
      <div class="limitedTime">
        <!-- 左边价钱 -->
        <div class="limitedTimeLeft">
          <!-- 价钱 -->
          <p>
            ￥<span>{{ boxMsg.price }}</span>
          </p>
          <!-- 图片 -->
          <img class="boxPrice" src="../image/boxPrice.png" alt="" />
        </div>
        <!-- 右边倒计时 -->
        <div class="limitedTimeRight">
          <p><span>限时</span>特惠</p>
          <!-- 倒计时 -->

          <p class="countDown">
            还剩<van-count-down class="timeCountDown" :time="time" />
          </p>
        </div>
      </div>
      <!-- 盲盒奖品 -->
      <div class="BlindBox">
        <!-- 奖品 -->
        <p class="prize">该盲盒内所含奖品：</p>
        <!-- 查看所有物品 -->
        <div class="goodsAll">
          <!-- 商品列表 -->
          <div class="goodsList">
            <!-- 每个商品 -->
            <div class="eachBox" v-for="(el, index) in boxGoods" :key="el.id">
              <div class="each" :class="index == 0 ? 'firstBorder' : ''">
                <img class="eachImg" :src="el.pic" alt="" />
              </div>
            </div>
          </div>
          <!-- 保底奖品 -->
          <div class="minimum">保底奖品</div>
          <!-- 查看所有物品 -->
          <div class="seeGoods" @click="probability">点击查看所有奖品</div>
        </div>
      </div>
      <!-- 盲盒信息 -->
      <div class="boxInformation">
        <!-- 最高得奖 -->
        <div class="highest">
          <!-- 头部 -->
          <div class="highestTop">
            <img class="highestImg" src="../image/highest.png" alt="" />
            <!-- 字体 -->
            <span class="font">苹果Apple iPhone 13 Pro 支持移动联通电</span>
          </div>
          <span class="font">信5G双卡双待手机</span>
        </div>
        <!-- 手机信息 -->
        <div class="phoneInformation">
          <!-- 每一列信息 -->
          <div class="phoneList">
            <p>6.1英寸</p>
            <div class="bottom">
              <img src="../image/big.png" alt="" />
              <span>超大屏</span>
            </div>
          </div>
          <div class="phoneList">
            <p>2532X117...</p>
            <div class="bottom">
              <img src="../image/definition.png" alt="" />
              <span>分辨率</span>
            </div>
          </div>
          <div class="phoneList">
            <p>1200万像素</p>
            <div class="bottom">
              <img src="../image/before.png" alt="" />
              <span>前置摄像头</span>
            </div>
          </div>
          <div class="phoneList">
            <p>1200万+1...</p>
            <div class="bottom">
              <img src="../image/after.png" alt="" />
              <span>后置摄像头</span>
            </div>
          </div>
          <div class="phoneList noneBorder">
            <p>7.65mm</p>
            <div class="bottom">
              <img src="../image/thickness.png" alt="" />
              <span>机身厚度</span>
            </div>
          </div>
        </div>
        <!-- 百分比正品 -->
        <div class="quality">
          <img src="../image/iphone.png" alt="" />
          <p>苹果 | 该最高抽得奖品,100%官方正品</p>
        </div>
        <!-- 支付宝支付 -->
        <div class="zfbPay">
          <div class="zfbPayBox">
            <!-- 图片 -->
            <img src="../image/zfb.png" alt="" />
            <!-- 支付宝 -->
            <p class="zfbFont">支付宝</p>
            <!-- 随机免单 -->
            <div class="random">首单随机立减，最高至免单</div>
            <!-- 按钮 -->
            <van-checkbox
              class="affirm"
              v-model="zfbTrue"
              checked-color="red"
            ></van-checkbox>
          </div>
        </div>
        <!-- 会员手机号 -->
        <div class="memberPhone">
          <!-- 手机号 -->
          <div class="phoneInput">
            <p>手机号</p>
            <input
              :class="iptRed"
              type="text"
              placeholder="请输入您的收件手机号"
              v-model="phone"
              @input="filterStr"
            />
          </div>
          <!-- 注意 -->
          <p>*注意：手机号填错可能导致订单无法发货！</p>
        </div>
        <!-- 广告、客服电话 -->
        <div class="advertisement">
          <p>广州瑞扩科技有限公司</p>
          <P>广州市天河区天河北路721号三楼自编01-274</P>
          <p>客服电话:400-600-0603</p>
          <p>粤ICP备2021096863号</p>
        </div>
        <!-- 定位支付按钮 -->
        <div class="payBtn">
          <div class="payBtnLeft">
            <span>【开盒价】</span>￥{{ boxMsg.price }}
          </div>
          <div class="payBtnRight" id="tiaozhuang" @click="payZFB">
            确认支付
          </div>
        </div>
      </div>
    </div>
    <!-- 下拉框概率 -->
    <van-action-sheet
      v-model="probabilityShow"
      title="奖品抽奖存在概率性，付费请谨慎"
    >
      <!-- 内容 -->
      <div class="probabilityContent">
        <!-- 商品概率类型 -->
        <div class="probabilityType">
          <!-- 标题 -->
          <div class="probabilityTypeTitle">盒内商品类型概率</div>
          <!-- 概率详细 -->
          <div class="probabilityDetailed">
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <img class="GradeType" src="../image/putong.png" alt="" />
              <p class="percentage">90.767%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <img class="GradeType" src="../image/zg.png" alt="" />
              <p class="percentage">8.723%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <img class="GradeType" src="../image/ss.png" alt="" />
              <p class="percentage">0.342%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <img class="GradeType" src="../image/cs.png" alt="" />
              <p class="percentage">0.168%</p>
            </div>
          </div>
        </div>
        <!-- 盒内全部商品标题 -->
        <!-- 大标题 -->
        <div class="bigTitle">ALL GOOD THINGS</div>
        <!-- 小标题 -->
        <div class="smallTitle">盒内全部商品</div>

        <!-- 商品大全 -->
        <div class="wholeCommodity">
          <!-- 每一件商品 -->
          <div class="commodity" v-for="el in boxGoods" :key="el.id">
            <!-- 商品图片 -->
            <img class="commodityImg" :src="el.pic" alt="" />
            <!-- 标签 -->
            <div class="labelType" :class="typeArr[el.level]"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              {{ el.name }}
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize">
                <span>参考价 ￥</span>{{ el.price }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </van-action-sheet>
    <!-- 玩法规则提示 -->
    <van-dialog v-model="showTips" title="规则说明" show-cancel-button>
      <!--每一个 -->
      <div class="every">
        1.用户在本平台使用幸运星球，应遵守本规则。
        用户开始使用及/或继续使用本服务，即视为用户同意并已经接受本规则中全部内容。
        此后用户不得以未阅读/未同意本规则内容或类似理由提出任何形式的抗辩。
      </div>
      <div class="every">
        2.点击“立即抽奖”即可进行抽奖，抽中的结果为盲盒的购买资格，结果显示的商品为该盲盒里有概率中奖的商品；
      </div>
      <div class="every">
        3.转盘页面展示的商品均为有概率中奖的商品，除此外还有其它可抽中的商品，
        具体可抽中商品清单及中奖概率请在支付页面点击“全部商品”进行查看；
      </div>
      <div class="every">
        4.付费前，请您务必了解，付款获得的是抽奖资格（盲盒），并非页面显示的当前商品；
      </div>
      <div class="every">
        5.“100%中奖”意为不设空盒，付费成功后您将获得可抽中商品清单里的任一商品；
      </div>
      <div class="every">
        6.该盲盒内商品类型概率:传说款:0.168%、史诗款:0.342%、尊贵款:8.723%、普通款:90.767%;
      </div>
      <div class="every">7.风险提示：商品抽奖存在概率性，付费请谨慎；</div>
      <div class="every">8.未成年人须在家长监督下进行购买；</div>
      <div class="every">
        9.本渠道抽中的所有商品包邮，以下偏远地区（内蒙古、宁夏、海南）
        需补邮费差价25元，受疫情天气及物流公司安排等影响，以下偏远地区
        (新疆、西藏、甘肃、青海) 暂不支持配送；
      </div>
      <div class="every">
        10.付费成功后，您需回到本页面，或下载“幸运星球”查看您的中奖商品，
        填写您的收货地址，等待宝贝发出；
      </div>
      <div class="every">
        11.当您收到盲盒商品后，出现以下质量问题的，您可提供开箱图片或视频，
        由本公司进行确认及受理：商品错发或者数量不符、商品在运输过程造成严重破损，商品做工存在明显瑕疵；
      </div>
      <div class="every">
        12.因工艺原因存在微瑕的商品，轻微盒损的商品，商品漆味重，均不属于质量问题；
      </div>
      <div class="every">
        13.如有疑问，可下载“幸运星球”APP，联系在线客服进行咨询。
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Additional",
  data() {
    return {
      // 倒计时
      time: 60 * 60 * 1000,
      // 概率显示与展示
      probabilityShow: false,
      //   支付宝勾选
      zfbTrue: true,
      // 手机号
      phone: "",
      // 规则提示弹窗
      showTips: false,
      // 标签数组
      typeArr: ["", "cs", "ss", "zg", "pt"],
      timerNav: null,
      //input边框
      iptRed: "",
      //不能重复支付
      replacePay:true,
    };
  },
  methods: {
    // 客服查询跳转
    kefuchaxun() {
      (function (w, d, n, a, j) {
        w[n] =
          w[n] ||
          function () {
            return (w[n].a = w[n].a || []).push(arguments);
          };
        j = d.createElement("script");
        j.async = true;
        j.src =
          "https://qiyukf.com/script/e79536c3a3b3b8b8ae2fcd16084fd137.js?hidden=1";
        d.body.appendChild(j);
      })(window, document, "ysf");
      ysf("onready", function () {
        // todo
        ysf("open");
      });
    },
    // 显示概率
    probability() {
      this.probabilityShow = !this.probabilityShow;
    },
    // 自动跳转带参数页
    navParams() {
      this.$router.push({
        path: "/additional",
        query: {
          boxId: 40,
        },
      });
    },

    // 支付
    async payZFB() {
      if (this.zfbTrue) {
        let res =
          /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
        if (res.test(this.phone)) {
          //多一层判断，防止恶意提交订单
          if(this.replacePay){
            // 重复提交，就为false，失败
            this.replacePay=false;
            setTimeout(()=>{
              this.replacePay=true;
            },1800)
             try {
            //手机号登录
            await this.$store.dispatch("PayPhoneLogin", this.phone);
            //开始支付
            try {
              await this.$store.dispatch("payment", {
                boxId: this.boxMsg.boxId,
                price: this.boxMsg.price,
                total: this.boxMsg.price * 1,
                num: 1,
              });
              // this.repeat=false
              // 提交表单
              const div = document.createElement("div");
              div.innerHTML = this.$store.state.pay.fromData;
              document.body.appendChild(div);
              document.forms[0].submit();
              this.replacePay=true;
              //支付成功后抽奖
              // 判断订单状态支付了没
              // let timerlunxun = setInterval(() => {
              //   this.$store.dispatch(
              //     "gainOrder",
              //     this.$store.state.pay.orderId
              //   );

              //   setTimeout(() => {
              //     if (this.$store.state.pay.payStatus == 1) {
              //       clearInterval(timerlunxun);
              //       //跳转页面查看奖品
              //       this.$router.push({
              //         path: "/lottery",
              //         query: {
              //           boxId: 40,
              //         },
              //       });
              //     } else {
              //     }
              //   }, 0);
              // }, 1000);
            
            
            } catch (error) {}


          } catch (error) {
            // console.log(error);
          }
          }else{
             Toast.success("请勿重复提交");
          }
         
        } else {
          setTimeout(() => {
            this.iptRed = "iptRed";
            setTimeout(() => {
              this.iptRed = "";
              setTimeout(() => {
                this.iptRed = "iptRed";
              }, 300);
              setTimeout(() => {
                this.iptRed = "";
                setTimeout(() => {
                  this.iptRed = "iptRed";
                  setTimeout(() => {
                    this.iptRed = "";
                    setTimeout(() => {
                      this.iptRed = "iptRed";
                      setTimeout(() => {
                        this.iptRed = "";
                      }, 300);
                    }, 300);
                  }, 300);
                }, 300);
              }, 300);
            }, 300);
          }, 300);
          document.documentElement.scrollTop = this.$refs.bottom.scrollHeight;
          Toast.success("请输入正确的手机号码");
        }
      } else {
        Toast.success("请勾选付款方式");
      }
    },
    // 提示规则
    ruleTips() {
      this.showTips = !this.showTips;
    },
    // 输入框不能大于11位
    filterStr(e) {
      // console.log(e.target.value);
      if (e.target.value.length > 11) {
        Toast.success("手机号码为11位数");
        this.phone = this.phone.slice(0, 11);
      }
    },
  },
  mounted() {
    // 请求盲盒信息
    this.$store.dispatch("gainBoxMsg", this.$route.query.boxId);
    // 盲盒内商品
    this.$store.dispatch("gainBogMsgId", this.$route.query.boxId);

  },
  computed: {
    // 盲盒信息
    boxMsg() {
      return this.$store.state.goods.boxmsg;
    },
    // 盲盒内物品
    boxGoods() {
      return this.$store.state.goods.boxGoods;
    },
  },
};
</script>

<style lang="scss" scoped>
// 页面适配
@function vw($px) {
  @return 100 * $px/750 + vw;
}
* {
  margin: 0;
  padding: 0;
}
.iptRed {
  background-color: rgba(246, 64, 9, 0.549) !important;
}
// 额外页面
.additional {
  width: vw(750);
  display: flex;
  align-items: center;
  justify-content: center;
  //内容
  .additionalContent {
    width: vw(750);
    display: flex;
    align-items: center;
    flex-direction: column;
    // 头部商品展示
    .headerExhibition {
      width: vw(750);
      height: vw(657);
      display: flex;
      position: relative;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: center;
      background-color: white;
      //   background-color: red;
      //   幸运用户
      .LuckyUser {
        width: vw(322);
        height: vw(61);
        background: rgba($color: #000000, $alpha: 0.75);
        position: absolute;
        border-top-right-radius: vw(31);
        border-bottom-right-radius: vw(31);
        left: 0;
        top: vw(39);
        display: flex;
        align-items: center;
        font-size: vw(25);
        color: white;
        justify-content: space-around;
      }
      //   客服投诉
      .complaint {
        width: vw(100);
        height: vw(100);
        position: absolute;
        top: vw(20);
        right: vw(42);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        p {
          text-align: center;
          font-size: vw(24);
        }
      }
      //   活动规则
      .activity {
        position: absolute;
        width: vw(42);
        height: vw(139);
        top: vw(89);
        right: 0;
      }
      // 图片
      .ExhibitionImg {
        width: vw(500);
        height: vw(500);
        .goodsImg {
          width: 100%;
          height: 100%;
        }
      }
      // 横幅价钱
      .bannerPrice {
        width: vw(750);
        height: vw(191);
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
    // 限时特惠
    .limitedTime {
      width: vw(713);
      height: vw(130);
      margin: vw(21) 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fa3c38;
      border-radius: vw(20);
      padding: 0 vw(28);
      box-sizing: border-box;
      //  左边价钱
      .limitedTimeLeft {
        width: vw(150);
        .boxPrice {
          width: vw(104);
          height: vw(31);
        }
        p {
          color: white;
          span {
            font-size: vw(60);
          }
        }
      }
      //右边倒计时
      .limitedTimeRight {
        width: vw(146);
        height: vw(72);
        p {
          font-size: vw(32);
          color: white;
          span {
            color: #fff000;
          }
        }
        // 倒计时
        .countDown {
          width: vw(160);
          font-size: vw(22);
          color: white;
          display: flex;
          .timeCountDown {
            color: white;
            font-size: vw(22);
          }
        }
      }
    }
    //盲盒物品
    .BlindBox {
      width: vw(716);
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-bottom: vw(13);
      //奖品
      .prize {
        width: vw(716);
        font-size: vw(22);
        color: #7e7e7e;
        margin-bottom: vw(12);
      }
      //查看所有物品
      .goodsAll {
        width: vw(716);
        height: vw(64);
        display: flex;
        align-items: center;
        justify-content: space-between;
        // 物品列表
        .goodsList {
          overflow: hidden;
          width: vw(400);
          height: vw(64);
          display: flex;

          align-items: center;
          .eachBox {
            width: vw(64);
            height: vw(64);
            margin-right: vw(16);
            display: inline-block;
            //   每个商品
            .each {
              width: vw(64);
              height: vw(64);
              display: flex;
              align-items: center;
              justify-content: center;
              box-sizing: border-box;
              border: vw(1) solid #c9c9c9;
              .eachImg {
                width: vw(34);
                height: vw(45);
                background-color: gainsboro;
              }
            }
            //   第一个红色边框
            .firstBorder {
              border: vw(1) solid #d01f01;
            }
          }
        }
        //   保底奖品
        .minimum {
          width: vw(64);
          height: vw(64);
          line-height: vw(32);
          text-align: center;
          font-size: vw(23);
          border: 1px dashed black;
        }
        // 查看所有物品
        .seeGoods {
          width: vw(202);
          height: vw(64);
          text-align: center;
          line-height: vw(64);
          font-size: vw(23);
          background: #f3f3f3;
          border-radius: vw(10);
        }
      }
    }

    // 盲盒信息
    .boxInformation {
      width: vw(716);
      display: flex;
      align-items: center;
      flex-direction: column;
      border-top: vw(2) solid #e0e0e0;
      padding-top: vw(33);
      // 最高得奖标题
      .highest {
        width: vw(716);
        display: flex;
        flex-direction: column;
        // 头部
        .highestTop {
          width: vw(716);
          display: flex;
          align-items: center;
          // 图片
          .highestImg {
            width: vw(75);
            height: vw(31);
            display: inline-block;
          }
          .font {
            font-size: vw(30);
            display: inline-block;
            font-weight: 800;
            color: #090909;
          }
        }
        // 字体
        .font {
          font-size: vw(30);
          display: inline-block;
          font-weight: 800;
          color: #090909;
        }
      }
      // 手机信息
      .phoneInformation {
        width: vw(716);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: vw(33) 0;

        // 手机每一列
        .phoneList {
          width: vw(140);
          height: vw(54);
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          border-right: vw(1) solid gray;
          p {
            width: vw(140);
            height: vw(21);
            font-size: vw(20);
            font-weight: bold;
            color: #7e7e7e;
            text-align: center;
            line-height: vw(14);
          }
          .bottom {
            width: vw(140);
            height: vw(20);
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              font-size: vw(19);
              font-weight: 500;
              color: #b1b1b1;
            }
            img {
              width: vw(18);
              height: vw(18);
            }
          }
        }
        // 没有边框
        .noneBorder {
          border: none;
        }
      }
      // 百分比正品
      .quality {
        width: vw(716);
        height: vw(58);
        background: #e7edf0;
        border-radius: vw(10);
        font-weight: 500;
        font-size: vw(27);
        display: flex;
        align-items: center;
        img {
          width: vw(36);
          height: vw(38);
          margin: 0 vw(11);
        }
      }
      //支付宝支付
      .zfbPay {
        width: vw(716);
        height: vw(92);
        background: rgba($color: #f4f4f4, $alpha: 0.5);
        border-radius: vw(10);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: vw(30) 0;
        .zfbPayBox {
          width: vw(680);
          height: vw(36);
          display: flex;
          align-items: center;
          img {
            width: vw(36);
            height: vw(36);
            margin: 0 vw(20);
          }
          .zfbFont {
            width: vw(95);
            height: vw(26);
            line-height: vw(26);
            font-size: vw(28);
            font-weight: 500;
          }
          .random {
            width: vw(330);
            height: vw(36);
            border: vw(2) solid red;
            font-size: vw(24);
            color: red;
            text-align: center;
            line-height: vw(40);
            margin: 0 vw(100) 0 vw(30);
          }
        }
      }
      // 会员手机号
      .memberPhone {
        width: vw(716);
        height: vw(129);
        background: rgba($color: #f4f4f4, $alpha: 0.5);
        border-radius: vw(10);
        display: flex;
        align-items: center;
        flex-direction: column;

        // 手机号
        .phoneInput {
          width: vw(650);
          height: vw(60);
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: vw(20) 0;
          p {
            font-size: vw(28);
            color: black;
          }
          input {
            width: vw(450);
            height: vw(60);
            outline: none;
            border: none;
            font-size: vw(28);
            border-radius: vw(5);
            padding-left: vw(20);
            background-color: #eeeeee;
          }
        }
        // 注意
        p {
          width: vw(650);
          height: vw(20);
          font-size: vw(20);
          font-family: PingFang;
          font-weight: 500;
          color: #b1b1b1;
          line-height: vw(14);
        }
      }
      // 广告、客服电话
      .advertisement {
        width: vw(508);
        height: vw(63);
        font-size: vw(24);
        font-weight: 500;
        color: #b1b1b1;
        text-align: center;
        margin: vw(28) 0 vw(210) 0;
      }
      // 定位支付按钮
      .payBtn {
        width: vw(720);
        height: vw(120);
        position: fixed;
        bottom: 0;
        display: flex;
        background-color: white;
        font-size: vw(40);
        color: white;
        .payBtnLeft {
          width: vw(370);
          height: vw(111);
          line-height: vw(111);
          text-align: center;
          background-color: #3e3e3e;
          span {
            font-size: vw(30);
          }
        }
        .payBtnRight {
          width: vw(370);
          height: vw(111);
          text-align: center;
          line-height: vw(111);
          background-color: #ec5542;
        }
      }
    }
  }
  // 下拉框概率
  .van-popup--round {
    overflow: visible !important;
    align-items: center;
    padding-top: vw(17);
    border-top: vw(15) solid black;
    border-image: linear-gradient(to right, #ffe7be, #ca81f7, #79ecff) 1 10;
    border-radius: 0;
    background-color: #1e3250;
    // 标题头
    .van-action-sheet__header {
      width: vw(700);
      height: vw(60);
      background: #314b6f;
      border-radius: vw(8);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: vw(24);
      color: white;
      // icon图标
      .van-icon {
        width: vw(65) !important;
        height: vw(65) !important;
        background-color: rgba(0, 0, 0, 0.8);
        border: 1px solid white;
        position: absolute;
        top: vw(-100);
        right: vw(50);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: vw(45);
      }
    }
    // 内容
    .probabilityContent {
      margin-top: vw(20);
      display: flex;
      flex-direction: column;
      align-items: center;
      // 商品类型概率
      .probabilityType {
        width: vw(700);
        height: vw(248);
        background: #314b6f;
        border-radius: vw(8);
        display: flex;
        flex-direction: column;
        align-items: center;
        // 标题
        .probabilityTypeTitle {
          width: vw(192);
          height: vw(33);
          font-size: vw(24);
          font-weight: 400;
          color: #ffffff;
          line-height: vw(33);
          margin-top: vw(23);
        }
        // 概率详细
        .probabilityDetailed {
          width: vw(600);
          height: vw(120);
          margin-top: vw(57);
          display: flex;
          align-items: center;
          justify-content: space-between;
          // 每个类型
          .TypeList {
            width: vw(110);
            height: vw(95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            // 等级类型
            .GradeType {
              width: vw(100);
              height: vw(40);
              font-size: vw(22);
              text-align: center;
              line-height: vw(40);
              border-radius: vw(8);
              font-weight: 700;
            }
            // 普通 尊贵 史诗 传说
            .PT {
              background: linear-gradient(200deg, #0c4cf9 0%, #64e7ff 100%);
            }
            .ZG {
              background: linear-gradient(
                90deg,
                #ffead3 0%,
                #d587ff 57%,
                #8b82ff 100%
              );
            }
            .SS {
              background: linear-gradient(320deg, #f0ce83 0%, #c88c32 100%);
            }
            .CS {
              background: linear-gradient(
                55deg,
                #03ebf1 0%,
                #c3fdff 34%,
                #f8c6e7 69%,
                #fffee1 100%
              );
            }
            // 百分比
            .percentage {
              width: vw(110);
              height: vw(34);
              font-size: vw(28);
              font-weight: 500;
              color: #ffffff;
              line-height: vw(34);
              text-align: center;
            }
          }
        }
      }
      // 盒内全部商品标题
      // 大标题
      .bigTitle {
        height: vw(60);
        font-size: vw(48);
        font-weight: normal;
        color: #ffffff;
        line-height: vw(60);
        font-weight: 700;
        margin-top: vw(41);
        align-self: flex-start;
      }
      // 小标题
      .smallTitle {
        width: vw(192);
        height: vw(45);
        font-size: vw(32);
        font-weight: 600;
        color: #ffffff;
        line-height: vw(45);
        margin-bottom: vw(30);
        align-self: flex-start;
      }
      // 商品大全
      .wholeCommodity {
        width: vw(688);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #1e3250;
        // 每一件商品
        .commodity {
          width: vw(336);
          height: vw(518);
          background-color: #314b6f;
          border-radius: vw(8);
          margin-bottom: vw(18);
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          // 商品图片
          .commodityImg {
            width: vw(214);
            height: vw(214);
            margin: vw(31) 0 vw(43);
          }
          // 商品标签
          .labelType {
            width: vw(90);
            height: vw(40);
            position: absolute;
            top: vw(19);
            left: vw(20);
          }
          .pt {
            background: url("../image/putong.png") 0 0 /100% no-repeat;
          }
          .zg {
            background: url("../image/zg.png") 0 0 /100% no-repeat;
          }
          .ss {
            background: url("../image/ss.png") 0 0 /100% no-repeat;
          }
          .cs {
            background: url("../image/cs.png") 0 0 /100% no-repeat;
          }
          // 商品名字
          .commodityName {
            width: vw(304);
            height: vw(65);
            font-size: vw(24);
            font-weight: 400;
            color: #ffffff;
            line-height: vw(33);
            letter-spacing: vw(1);
            margin-bottom: vw(15);
          }
          // 商品价钱
          .commodityPrice {
            width: vw(336);
            height: vw(70);
            line-height: vw(70);
            .commodityPriceSize {
              font-size: vw(56);
              font-weight: 700;
              color: white;
              margin-left: vw(23);
              span {
                font-size: vw(24);
                font-weight: 100;
              }
            }
          }
        }
      }
    }
  }
  // 规则玩法提示
  .van-dialog {
    width: vw(620);
    height: vw(800);
    display: flex;
    align-items: center;
    flex-direction: column;
    // 标题头
    :deep(.van-dialog__header) {
      font-size: vw(38);
      font-weight: 700;
    }
    // 内容
    :deep(.van-dialog__content) {
      width: vw(550);
      height: vw(600);
      overflow: scroll;
      margin-top: vw(20);
      // 每一条信息
      .every {
        width: vw(550);
        margin-bottom: vw(15);
        text-align: left;
      }
    }
    //底部按钮
    :deep(.van-dialog__footer) {
      width: vw(550);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>