<template>
  <!-- 抽奖 -->
  <div class="lottery">
    <!-- 内容 -->
    <div class="lotteryContent">
      <!-- 卡片 -->
      <transition
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__bounceIn"
        leave-active-class="animate__fadeInBottomRight"
      >
        <div class="card" v-show="!goodsShow">
          <!-- 恭喜 -->
          <img class="congratulations" src="../image/gongxi.png" alt="" />
          <!-- 图片 -->

          <!-- <div class="getGoodsImg"></div> -->
          <img
            v-if="isGoods[0]"
            class="getGoodsImg"
            :src="isGoods[0].productPic"
            alt=""
          />

          <!-- 参数 -->

          <div class="getGoodsParameter">
            <!-- 商品类型 -->

            <div
              class="goodsType"
              v-if="isGoods[0]"
              :class="typeArr[[isGoods[0].productLevel]]"
            ></div>
            <!-- 名字和价钱 -->
            <div class="nameOrprice">
              <p class="name" v-if="isGoods[0]">{{ isGoods[0].productName }}</p>
              <div class="price" v-if="isGoods[0]">
                参考价 ¥{{ isGoods[0].productPrice }}
              </div>
            </div>
            <!-- <div class="nameOrprice">
              <p class="name" >afafaafafafafafafafafafafafaffaf</p>
              <div class="price">
                参考价 ¥131331
              </div>
            </div> -->
          </div>
        </div>
      </transition>
      <!-- 盒子 -->
      <img
        :class="boxCss"
        src="../image/surprised.png"
        alt=""
        @click.once="openBox"
        v-show="goodsShow"
      />
      <!-- 操作按钮 -->
      <transition
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__bounceIn"
        leave-active-class="animate__fadeInBottomRight"
      >
        <div class="operationBtn" v-if="!goodsShow">
          <!-- 下载APP -->
          <div class="downloadApp" @click="navApp">下载APP</div>
          <!-- 再来一次 -->
          <div class="onceMore" @click="onceMoreFn">再来一次</div>
          <!-- 必出尊贵款 -->
          <img class="fiveInevitable" src="../image/Inevitable.png" alt="" />
        </div>
      </transition>
      <transition
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__bounceIn"
        leave-active-class="animate__fadeInBottomRight"
      >
        <!-- 提示文字 -->
        <p class="tipsFont" v-if="!goodsShow">
          现在立即下载 [幸运星球] APP 使用购买手机号[13580159193]登录
          前往[盒柜]页选择[立即提货]即可完成提货
        </p>
      </transition>
      <!-- 请点击魔盒 -->
      <img class="clibox" src="../image/cliBox.png" alt="" v-if="goodsShow" />
    </div>
    <!-- 左边固定导航条 -->
    <div class="navigationBar" v-if="!goodsShow">
      <!-- 每一列服务 -->
      <div class="serviceList" @click="probability">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/gailv.png" alt="" />
          <p>商品 概率</p>
        </div>
      </div>
      <div class="serviceList noBor" @click="kefuchaxun">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/service.png" alt="" />
          <p>联系 客服</p>
        </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-action-sheet class="againPay" title=" " v-model="onceMoreShow">
      <!-- 内容 -->
      <div class="againPayContent">
        <!-- 商品展示 -->
        <div class="goodsExhibition">
          <!-- 顶部颜色条 -->
          <div class="topLine"></div>
          <!-- 商品 -->
          <div class="goods">
            <!-- 商品信息 -->
            <div class="goodsInformation">
              <!-- 商品图片 -->
              <!-- <div class="goodsImg"></div> -->
              <img class="goodsImg" :src="boxMsg.productList[0].pic" alt="" />
              <!-- 商品描述 -->
              <div class="goodsDescribe">
                <!-- 商品标题 -->
                <p class="goodsTitle">
                  {{ boxMsg.name }}
                </p>
                <!-- 商品价格 -->
                <p class="goodsPrice">¥{{ boxMsg.price }}</p>
              </div>
            </div>
            <!-- 商品轮播图 -->
            <div class="goodsCarousel">
              <!-- 轮播 -->
              <div class="carousel">
                <!-- 信息 -->
                <div
                  class="carouselInformation"
                  v-for="el in boxGoods"
                  :key="el.id"
                >
                  <!-- 商品图片 -->
                  <img class="carouselImg" :src="el.pic" alt="" />
                  <!-- 标题价格 -->
                  <p class="carouselTitle">{{ el.name }}</p>
                  <p class="carouselPrice">¥{{ el.price }}</p>
                </div>
              </div>
              <!-- 图片 -->
              <img
                class="moreImg"
                @click="probability"
                src="../image/more.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <!-- 支付方式 -->
        <div class="payType">
          <!-- 选择支付方式 -->
          <div class="choiceType">选择支付方式</div>
          <!-- 支付宝 -->
          <div class="zhifubao">
            <!-- 左 -->
            <div class="zhifubaoLeft">
              <!-- 支付宝图标 -->
              <img class="zfbIcon" src="../image/zfb.png" alt="" />
              <!-- zfbName -->
              <p class="zfbName">支付宝</p>
              <!-- 首单立减 -->
              <div class="firstOrder">首单随机立减，最高至免单</div>
            </div>
            <van-checkbox
              class="affirm"
              v-model="zfbTrue"
              checked-color="red"
            ></van-checkbox>
          </div>
        </div>
        <!-- 定位支付按钮 -->
        <div class="payBtn">
          <div class="payBtnLeft" @click="navDownloadApp">下载APP</div>
          <div class="payBtnRight" @click="navDownloadApp">再来一次</div>
          <!-- 仅限一次 -->
          <img class="onlyOnce" src="../image/onlyOnce.png" alt="" />
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { Toast } from "vant";
import "animate.css";
export default {
  name: "Lottery",
  data() {
    return {
      // 概率显示与展示
      probabilityShow: false,
      //  再来一次
      onceMoreShow: false,
      //   支付宝勾选
      zfbTrue: true,
      //盒子动画
      boxCss: "boxImg",
      //显示商品
      goodsShow: true,
      // 标签数组
      typeArr: ["", "cs", "ss", "zg", "pt", "pt"],
    };
  },
  methods: {
    //开启盒子
    openBox() {
      this.boxCss = "boxImgzy";
      setTimeout(() => {
        this.goodsShow = !this.goodsShow;
      }, 1500);
    },
    // 显示概率
    probability() {
      this.probabilityShow = !this.probabilityShow;
    },
    // 客服查询跳转
    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");
      });
      // var isSdkReady = true;
      // if (isSdkReady) {
      //
      // }
    },
    // 再来一次下拉框事件
    onceMoreFn() {
      this.onceMoreShow = !this.onceMoreShow;
    },
    // 跳转下载App页面
    navApp() {
      this.$router.push({
        name: "DownloadApp",
      });
    },
    // 跳转额外支付页
    navAdditional() {
      this.$router.push({
        name: "Additional",
      });
    },
    //支付再来一次
    async navDownloadApp() {
      this.onceMoreShow = false;
      if (this.zfbTrue) {
        try {
          // 手机号登录
          await this.$store.dispatch(
            "PayPhoneLogin",
            localStorage.getItem("phone")
          );
          //开始支付
          try {
            await this.$store.dispatch("payment", {
              boxId: this.boxMsg.boxId,
              price: this.boxMsg.price,
              total: this.boxMsg.price * 1,
              num: 1,
              // boxId:7,
              //   price: 0.01,
              //   total:0.01 * 1,
            });
            // 提交表单
            const div = document.createElement("div");
            div.innerHTML = this.$store.state.pay.fromData;
            document.body.appendChild(div);
            document.forms[0].submit();
            //支付成功后抽奖
            await this.$store.dispatch("gainOrder", this.$route.query.orderId);
            // 判断订单状态支付了没
            if (this.$store.state.pay.payStatus == 1) {
              this.$router.go(0);
            } else {
              this.$router.push({
                path: "/additional",
                query: {
                  boxId: 40,
                },
              });
            }
          } catch (error) {}
        } catch (error) {
          console.log(error);
        }
      } else {
        Toast.success("请勾选付款方式");
      }
    },
  },
  mounted() {
    console.log(this.$route);
    // 请求盲盒信息
    this.$store.dispatch("gainBoxMsg", this.$route.query.boxId);
    // 盲盒内商品
    this.$store.dispatch("gainBogMsgId", this.$route.query.boxId);
    console.log(localStorage.getItem("orderId"));
    //查询物品
    this.$store.dispatch("gainOrder", this.$route.query.orderId);
  },
  computed: {
    // 盲盒信息
    boxMsg() {
      return this.$store.state.goods.boxmsg;
    },
    // 盲盒内物品
    boxGoods() {
      return this.$store.state.goods.boxGoods;
    },
    // 商品
    isGoods() {
      return this.$store.state.pay.commoditys;
    },
  },
};
</script>

<style lang="scss" scoped>
.animate__animated {
  --animate-duration: 1s;
}

// 适配函数计算
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}
// 上下抖动动画
@keyframes upDown {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(vw(-25));
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(vw(-25));
  }

  100% {
    transform: translateY(vw(0));
  }
}
// 左右抖动动画
@keyframes leftR {
  0% {
    transform: rotateZ(0);
  }

  25% {
    transform: rotateZ(15deg);
  }

  50% {
    transform: rotateZ(-15deg);
  }

  75% {
    transform: rotateZ(15deg);
  }

  100% {
    transform: rotateZ(-15deg);
  }
}
// 抽奖
.lottery {
  width: vw(720);
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  background: url("../image/showbgd.png") 0px 0px / 100% no-repeat;
  //   内容
  .lotteryContent {
    width: vw(720);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    //   卡片
    .card {
      width: vw(680);
      height: vw(853);
      margin-top: vw(132);
      display: flex;
      flex-direction: column;
      align-items: center;
      // background-color: red;
      // background: url("../image/kapian.png") 0px 0px / 100% no-repeat;
      //   恭喜
      .congratulations {
        width: vw(477);
        height: vw(49);
        margin-top: vw(142);
      }
      //   图片
      .getGoodsImg {
        width: vw(384);
        height: vw(353);
        margin-top: vw(50);
        // background-color: red;
      }

      // 参数
      .getGoodsParameter {
        width: vw(530);
        height: vw(182);
        margin-top: vw(22);
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: space-between;
        // 参数类型
        .goodsType {
          width: vw(120);
          height: vw(60);
        }
        .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;
        }
        // 名字和价钱
        .nameOrprice {
          width: vw(410);
          height: vw(135);
          background: #ffffff;
          border-radius: vw(10);
          border: vw(3) solid rgba(245, 249, 252, 0.8);
          background: rgba(220, 229, 246, 0.4);
          backdrop-filter: blur(vw(8));
          box-sizing: border-box;
          padding: vw(19) 0 0 vw(28);
          display: flex;
          flex-direction: column;
          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: vw(300);
            font-size: vw(28);
            font-weight: 700;
            margin-bottom: vw(10);
          }
          .price {
            width: vw(205);
            height: vw(47);
            background: linear-gradient(
              140deg,
              #3e5e83 0%,
              #314b6f 47%,
              #192941 49%,
              #1e3250 100%
            );
            border-radius: vw(10);
            font-size: vw(26);
            font-weight: 600;
            color: #ffffff;
            line-height: vw(47);
            text-align: center;
          }
        }
      }
    }
    //盒子上下
    .boxImg {
      width: vw(335);
      height: vw(335);
      position: absolute;
      top: vw(472);
      transform: translateY(0);
      animation: upDown 3s infinite;
      // animation: leftR 0.4s infinite;
    }
    // 盒子左右
    .boxImgzy {
      width: vw(335);
      height: vw(335);
      position: absolute;
      top: vw(472);
      transform: translateY(0);
      // animation: upDown 3s infinite;
      animation: leftR 0.4s infinite;
    }
    // 操作按钮
    .operationBtn {
      width: vw(660);
      height: vw(96);
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: vw(80);
      position: relative;
      // 下载App
      .downloadApp {
        width: vw(320);
        height: vw(106);
        background: url("../image/downloadApp.png") 0 0 / 100% no-repeat;
        border-radius: vw(8);
        text-align: center;
        line-height: vw(96);
        font-size: vw(44);
        color: white;
        font-weight: 700;
        text-shadow: 0px 0px 10px rgba(127, 1, 1, 0.5);
      }
      // 再来一次
      .onceMore {
        width: vw(320);
        height: vw(106);
        background: url("../image/onceMore.png") 0 0 / 100% no-repeat;
        border-radius: vw(8);
        text-align: center;
        line-height: vw(96);
        font-size: vw(44);
        color: white;
        font-weight: 700;
        text-shadow: 0px 0px 10px rgba(127, 1, 1, 0.5);
      }
      //   五次必出
      .fiveInevitable {
        width: vw(328);
        height: vw(60);
        position: absolute;
        right: 0;
        top: vw(-68);
      }
    }
    // 提示文字
    .tipsFont {
      width: vw(595);
      height: vw(126);
      font-size: vw(28);
      font-weight: 600;
      color: #314370;
      text-align: center;
      margin-top: vw(60);
    }
    // 点击魔盒
    .clibox {
      width: vw(270.7);
      height: vw(65);
      position: absolute;
      bottom: vw(114);
    }
  }

  // 导航条
  .navigationBar {
    width: vw(64);
    position: fixed;
    top: vw(181);
    left: vw(656);
    background: #ffffff;
    border-radius: vw(26) vw(0) vw(0) vw(26);
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 每一列服务
    .serviceList {
      width: vw(48);
      height: vw(107);
      border-bottom: 1px solid #a5a4a1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // 每一列盒子
      .serviceListBox {
        width: vw(48);
        height: vw(92);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .gailvImg {
          width: vw(30);
          height: vw(30);
        }
        p {
          width: vw(48);
          font-size: vw(18);
          text-align: center;
        }
      }
    }
    // 无边框
    .noBor {
      border: none;
    }
  }

  // 下拉框概率
  .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;
              }
            }
          }
        }
      }
    }
  }

  //再来一次下拉框
  .againPay {
    overflow: visible !important;
    align-items: center;
    background-color: white;
    border-radius: 0;
    // 标题
    .van-action-sheet__header {
      width: vw(0);
      height: vw(0);
      // 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);
      }
    }
    // 内容
    .againPayContent {
      width: vw(680);
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: vw(18);
      //商品
      .goods {
        width: vw(680);
        height: vw(356);
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        // 商品信息
        .goodsInformation {
          width: vw(680);
          height: vw(104);
          display: flex;
          align-items: center;
          justify-content: space-between;
          //   商品图片
          .goodsImg {
            width: vw(102);
            height: vw(102);
          }
          //   商品描述
          .goodsDescribe {
            // 商品标题
            .goodsTitle {
              width: vw(559);
              font-size: vw(28);
              font-weight: 400;
              color: #000000;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            //   商品价格
            .goodsPrice {
              font-size: vw(36);
              color: #000000;
              letter-spacing: vw(2);
            }
          }
        }
        //商品轮播
        .goodsCarousel {
          width: vw(680);
          height: vw(242);
          display: flex;
          align-items: center;
          //   轮播
          .carousel {
            width: vw(570);
            height: vw(242);
            display: flex;
            overflow: hidden;
            // 信息
            .carouselInformation {
              width: vw(140);
              height: vw(242);
              margin-right: vw(20);
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              //   图片
              .carouselImg {
                width: vw(140);
                height: vw(140);
              }
              //   标题
              .carouselTitle {
                width: vw(130);
                height: vw(37);
                font-size: vw(26);
                font-weight: 400;
                color: #000000;
                line-height: vw(37);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
              }
              //   价钱
              .carouselPrice {
                width: vw(43);
                height: vw(38);
                font-size: vw(32);
                font-weight: 400;
                color: #000000;
                line-height: vw(38);
                text-align: left;
              }
            }
          }
          // 查看更多
          .moreImg {
            width: vw(110);
            height: vw(242);
          }
        }
      }
      //支付方式
      .payType {
        width: vw(720);
        height: vw(202);
        background: rgb(255, 255, 255);
        margin: vw(20) 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: vw(378);
        //   选择支付方式
        .choiceType {
          width: vw(680);
          height: vw(92);
          line-height: vw(92);
          font-size: vw(26);
          color: black;
          border-bottom: vw(1) solid #979797;
        }
        //   支付宝
        .zhifubao {
          width: vw(680);
          height: vw(110);
          display: flex;
          align-items: center;
          justify-content: space-between;
          // 左
          .zhifubaoLeft {
            display: flex;
            width: vw(482);
            height: vw(49);
            display: flex;
            align-items: center;
            justify-content: space-between;

            // 支付宝图标
            .zfbIcon {
              width: vw(49);
              height: vw(49);
            }
            .zfbName {
              font-size: vw(28);
            }
            // 首单立减
            .firstOrder {
              width: vw(300);
              height: vw(32);
              font-size: vw(24);
              text-align: center;
              padding: vw(2);
              line-height: vw(36);
              color: #ffffff;
              background-color: #ff4d4d;
            }
          }

          //
        }
      }
      // 定位支付按钮
      .payBtn {
        width: vw(720);
        height: vw(120);
        position: fixed;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: vw(40);
        color: white;
        // 下载app
        .payBtnLeft {
          width: vw(320);
          height: vw(106);
          background: url("../image/onceMore.png") 0 0 / 100% no-repeat;
          border-radius: vw(8);
          text-align: center;
          line-height: vw(96);
          font-size: vw(44);
          color: white;
          font-weight: 700;
          text-shadow: 0px 0px 10px rgba(127, 1, 1, 0.5);
        }
        // 再来一次
        .payBtnRight {
          width: vw(320);
          height: vw(106);
          background: url("../image/downloadApp.png") 0 0 / 100% no-repeat;
          border-radius: vw(8);
          text-align: center;
          line-height: vw(96);
          font-size: vw(44);
          color: white;
          font-weight: 700;
          text-shadow: 0px 0px 10px rgba(127, 1, 1, 0.5);
        }
        // 仅限一次
        .onlyOnce {
          width: vw(358);
          height: vw(80);
          position: absolute;
          right: vw(20);
          top: vw(-88);
        }
      }
    }
  }
}
</style>