<template>
  <!--第二外推页面 -->
  <div class="homeSecond">
    <!-- 顶部提示 -->
    <div class="topTips"></div>

    <!-- 盒子 -->
    <div class="homeSecondBox">
      <!-- 盒子头部 -->
      <div class="HeaderBox"></div>
      <!-- 填写手机号 -->
      <div class="fillInPhone">
        <!-- 定位盒子 -->
        <div class="fillInPhoneBox">
          <!-- 手机号 -->
          <input class="phone" type="text" placeholder="请输入购买手机号" />
          <!-- 购买按钮 -->
          <div class="purchaseBtn" @click="fn">领取购买资格</div>
          <!-- 协议 -->
          <div class="agreement">
            <!-- 确认按钮 -->
            <!-- <input class="affirm" type="checkbox" v-model="agree" /> -->
            <van-checkbox
              class="affirm"
              v-model="agree"
              checked-color="red"
            ></van-checkbox>
            <div class="agreementSize">
              我已阅读并同意《用户协议》、《隐私政策》、《幸运星球盒子购买协议》
            </div>
          </div>
        </div>
      </div>
      <!-- 商品展示 -->
      <div class="exhibition">
        <img src="./image/exhibition.png" alt="" />
      </div>

      <!-- 底部公司信息 -->
      <div class="footerInformation">公司信息</div>
    </div>

    <!-- 左边固定导航条 -->
    <div class="navigationBar">
      <!-- 每一列服务 -->
      <div class="serviceList" @click="probability">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/gailv.png" alt="" />
          <p>商品 概率</p>
        </div>
      </div>
      <div class="serviceList">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/order.png" alt="" />
          <p>订单 查询</p>
        </div>
      </div>
      <div class="serviceList" @click="ruleTips">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/guize.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">
              <!-- 等级类型 -->
              <div class="GradeType PT">普通款</div>
              <p class="percentage">86.434%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType ZG">尊贵款</div>
              <p class="percentage">12.314%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType SS">史诗款</div>
              <p class="percentage">0.834%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType CS">传说款</div>
              <p class="percentage">0.418%</p>
            </div>
          </div>
        </div>
        <!-- 盒内全部商品标题 -->
        <!-- 大标题 -->
        <div class="bigTitle">ALL GOOD THINGS</div>
        <!-- 小标题 -->
        <div class="smallTitle">盒内全部商品</div>

        <!-- 商品大全 -->
        <div class="wholeCommodity">
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize"><span>参考价 ￥</span>40</p>
            </div>
          </div>
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize">
                <span>参考价 ￥</span>
                40
              </p>
            </div>
          </div>
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize">
                <span>参考价 ￥</span>
                40
              </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>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: "HomeSecond",
  data() {
    return {
      // 概率显示与展示
      probabilityShow: false,
      // 规则提示弹窗
      showTips: false,
      // 勾选同意政策
      agree: false,
    };
  },
  methods: {
    fn() {
      this.$router.push({
        name: "HomeThird",
      });
    },
    // 显示概率
    probability() {
      this.probabilityShow = !this.probabilityShow;
    },
    // 提示规则
    ruleTips() {
      this.showTips = !this.showTips;
    },
    // 客服查询跳转
    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");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}
// 第二外推页面
.homeSecond {
  width: vw(720);
  display: flex;
  flex-direction: column;
  align-items: center;
  // 顶部提示
  .topTips {
    width: vw(720);
    height: vw(62);
    background-size: contain;
    background-image: url("./image/top.png");
    background-position: center;
    background-repeat: no-repeat;
  }
  // 盒子
  .homeSecondBox {
    width: vw(720);
    display: flex;
    flex-direction: column;
    align-items: center;
    //头部盒子
    .HeaderBox {
      width: vw(720);
      height: vw(787);
      background-size: contain;
      background-image: url("./image/banner.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    // 填写手机号
    .fillInPhone {
      width: vw(720);
      height: vw(432);
      background: #f22f2d;
      position: relative;
      // 定位盒子
      .fillInPhoneBox {
        position: absolute;
        top: vw(-58);
        width: vw(720);
        height: vw(432);
        display: flex;
        align-items: center;
        flex-direction: column;
        // 手机号
        .phone {
          width: vw(614);
          height: vw(116);
          background: #ffffff;
          box-shadow: 0px vw(2) vw(4) 0px #c54230;
          border-radius: vw(16);
          font-size: vw(38);
          font-weight: 400;
          outline: none;
          border: none;
          color: black;
          padding-left: vw(80);
          box-sizing: border-box;
          background-image: url(./image/phoneLeft.png);
          background-repeat: no-repeat;
          background-size: vw(40) vw(40);
          background-position: left center;
          background-position-x: vw(20);
        }
        //购买按钮
        .purchaseBtn {
          width: vw(614);
          height: vw(116);
          background-color: #ff5237;
          box-shadow: 0px vw(2) vw(4) 0px #c54230;
          border-radius: vw(16);
          font-size: vw(42);
          font-weight: 500;
          color: #ffffff;
          line-height: vw(116);
          text-align: center;
          margin: vw(30) 0;
        }
        // 协议
        .agreement {
          width: vw(514);
          height: vw(76);
          display: flex;
          justify-content: space-between;
          align-items: center;
          // 确认按钮
          .affirm {
            width: vw(40);
            height: vw(40);
          }
          // 协议详细字体
          .agreementSize {
            width: vw(462);
            height: vw(76);
            font-size: vw(22);
            color: white;
          }
        }
      }
    }
    // 商品展示
    .exhibition {
      width: vw(720);
      height: vw(1633);
      background-color: #f22f2d;
      img {
        width: 100%;
        height: 100%;
      }
    }
    // 底部公司信息
    .footerInformation {
      width: vw(720);
      height: vw(223);
      text-align: center;
      color: white;
      background-color: #f22f2d;
    }
  }
  // 导航条
  .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;
          // 商品图片
          .commodityImg {
            width: vw(214);
            height: vw(268);
            background-color: red;
            margin: vw(31) 0 vw(43);
          }
          // 商品名字
          .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 {
        margin-bottom: vw(15);
      }
    }
    //底部按钮
    :deep(.van-dialog__footer){
      width: vw(550);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>