<template>
  <view class="page-box">
    <navBar title="vip" color="#b1643c" />
    <view class="page-content">
      <!-- 用户端 -->
      <block v-if="userType == 1">
        <view class="bgTop flex justify-center">
          <view class="bgTop-box">
            <view class="bgTop-box-top flex justify-center align-center">
              <view class="bgTop-box-top-box flex justify-between align-center">
                <view class="bgTop-box-top-box-l">
                  <view class="bgTop-box-top-box-l-t">
                    {{ isVip == true ? "已开通会员" : "开通会员" }}
                  </view>
                  <view class="bgTop-box-top-box-l-c"> 提升简历曝光 </view>
                  <view class="bgTop-box-top-box-l-b">
                    {{
                      isVip == true ? "到期时间：" + dataTime : "开通会员更多招聘方联系你"
                    }}
                  </view>
                </view>
                <view class="bgTop-box-top-box-r">
                  <image src="../../static/images/my/icon/vip5.png" mode=""></image>
                </view>
              </view>
            </view>
            <view class="bgTop-box-btn flex justify-around">
              <view class="bgTop-box-btn-item">
                <image src="../../static/images/my/icon/btn1.png" mode=""></image>
                <view class="bgTop-box-btn-item-t"> 专属客服 </view>
              </view>
              <view class="bgTop-box-btn-item">
                <image src="../../static/images/my/icon/btn2.png" mode=""></image>
                <view class="bgTop-box-btn-item-t"> 优先提醒 </view>
              </view>
              <view class="bgTop-box-btn-item">
                <image src="../../static/images/my/icon/btn3.png" mode=""></image>
                <view class="bgTop-box-btn-item-t"> 简历刷新 </view>
              </view>
              <view class="bgTop-box-btn-item">
                <image src="../../static/images/my/icon/btn4.png" mode=""></image>
                <view class="bgTop-box-btn-item-t"> 简历置顶 </view>
              </view>
            </view>
          </view>
        </view>
        <view class="icon flex justify-center align-start">
          <u-icon name="arrow-up-fill" color="#ffffff" size="50"></u-icon>
        </view>
        <view class="bgc"></view>
        <view class="bgb flex justify-center">
          <view class="bgb-c flex justify-center">
            <view class="bgb-c-n">
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 专属特权 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> 普通用户 </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> VIP </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 简历刷新 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> {{ noVipNum }}次/天 </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> {{ vipNum }}次/天 </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 优先提醒 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 专属客服 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 视频面试 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 语音沟通 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 简历置顶 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
            </view>
          </view>
        </view>
        <view class="btn flex justify-center align-start flex-wrap" v-if="isVip == false">
          <view class="" style="width: 686rpx; padding-left: 20rpx">
            <view class="flex align-center" style="width: 100%">
              <u-checkbox size="28rpx" v-model="checked" shape="circle">
                <view class="flex align-center"
                  >开通即同意<navigator
                    style="color: #016bf6"
                    url="/my/setting/weekXiYi"
                    open-type="navigate"
                    >《会员开通协议》</navigator
                  >
                </view>
              </u-checkbox>
            </view>
          </view>
          <view class="btn-c flex align-center justify-between">
            <view class="btn-c-l flex align-center">
              <text>{{ vipPrice }}</text>
              <text>元/月</text>
            </view>
            <view class="btn-c-r flex justify-center align-center" @click="submit()">
              立即购买
            </view>
          </view>
        </view>
      </block>
      <block v-else>
        <view class="bgTop flex justify-center">
          <view class="bgTop-box">
            <view class="bgTop-box-top flex justify-center align-center">
              <view class="bgTop-box-top-box flex justify-between align-center">
                <view class="bgTop-box-top-box-l">
                  <view class="bgTop-box-top-box-l-t">
                    {{ isVipC == true ? "已开通会员" : "开通会员" }}
                  </view>
                  <view class="bgTop-box-top-box-l-c"> 提升岗位曝光 </view>
                  <view class="bgTop-box-top-box-l-b">
                    {{
                      isVipC == true
                        ? "到期时间：" + dataTimeC
                        : "开通会员更多求职者联系你"
                    }}
                  </view>
                </view>
                <view class="bgTop-box-top-box-r">
                  <image src="../../static/images/my/icon/vip5.png" mode=""></image>
                </view>
              </view>
            </view>
            <view class="bgTop-box-btn flex justify-around">
              <view class="bgTop-box-btn-item">
                <image src="../../static/images/my/icon/btn1.png" mode=""></image>
                <view class="bgTop-box-btn-item-t"> 专属客服 </view>
              </view>
              <view class="bgTop-box-btn-item">
                <image src="../../static/images/my/icon/btn2.png" mode=""></image>
                <view class="bgTop-box-btn-item-t"> 优先推荐 </view>
              </view>
              <view class="bgTop-box-btn-item">
                <image src="../../static/images/my/icon/btn3.png" mode=""></image>
                <view class="bgTop-box-btn-item-t"> 招聘刷新 </view>
              </view>
              <view class="bgTop-box-btn-item">
                <image src="../../static/images/my/icon/btn4.png" mode=""></image>
                <view class="bgTop-box-btn-item-t"> 专属特权 </view>
              </view>
            </view>
          </view>
        </view>
        <view class="icon flex justify-center align-start">
          <u-icon name="arrow-up-fill" color="#ffffff" size="50"></u-icon>
        </view>
        <view class="bgc"></view>
        <view class="bgb flex justify-center">
          <view class="bgb-c flex justify-center">
            <view class="bgb-c-n">
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 专属特权 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> 普通用户 </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> VIP </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 招聘刷新 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles">
                  {{ noVipNumCom }}次/天
                </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> {{ vipNumCom }}次/天 </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 优先推荐 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 专属客服 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 视频面试 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 语音沟通 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 免费沟通 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> {{ msgNum }}次/天 </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles"> {{ vipMsgNum }}次/天 </view>
              </view>
              <view class="bgb-c-n-title flex justify-between align-center">
                <view class="bgb-c-n-title-l bgb-c-n-titles"> 沟通价格 </view>
                <view class="bgb-c-n-title-c bgb-c-n-titles"> {{ msgPrice }}元/次 </view>
                <view class="bgb-c-n-title-r bgb-c-n-titles">
                  {{ vipMsgPrice }}元/次
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="btn flex justify-center align-start flex-wrap"
          v-if="isVipC == false"
        >
          <view class="" style="width: 686rpx; padding-left: 20rpx">
            <view class="flex align-center" style="width: 100%">
              <u-checkbox size="28rpx" v-model="checked" shape="circle">
                <view class="flex align-center"
                  >开通即同意<navigator
                    style="color: #016bf6"
                    url="/my/setting/weekXiYi"
                    open-type="navigate"
                    >《会员开通协议》</navigator
                  >
                </view>
              </u-checkbox>
            </view>
          </view>
          <view class="btn-c flex align-center justify-between">
            <view class="btn-c-l flex align-center">
              <text>{{ vipPrice }}</text>
              <text>元/月</text>
            </view>
            <view class="btn-c-r flex justify-center align-center" @click="submit()">
              立即购买
            </view>
          </view>
        </view>
      </block>
      <u-popup
        v-model="show"
        mode="bottom"
        :mask-close-able="false"
        border-radius="24"
        :closeable="true"
      >
        <view class="payTitle">选择支付类型</view>
        <view class="payPrice"> 支付价格：¥{{ vipPrice }} </view>
        <view class="payList flex justify-center">
          <view class="payList-box">
            <view
              class="payList-box-item flex align-center justify-between"
              v-for=""
              v-for="(item, index) in openLists"
              :key="index"
            >
              <view class="payList-box-item-l flex align-center">
                <image
                  :src="item.image"
                  style="
                    width: 54rpx;
                    height: 54rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                  "
                  mode=""
                >
                </image>
                {{ item.text }}
              </view>
              <view class="payList-box-item-r">
                <radio-group name="openWay" @tap="selectWay(item)">
                  <label class="tui-radio">
                    <radio
                      color="#016BF6"
                      :checked="openWay === item.id ? true : false"
                    />
                  </label>
                </radio-group>
              </view>
            </view>
          </view>
        </view>
        <view class="payBtn flex justify-center">
          <view class="payBtn-box flex justify-center align-center" @click="pay()">
            确认支付
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      show: false,
      checked: false,
      number: 0,
      userType: "2",
      current: 0,
      xingValue1: "",
      chakan1: "",
      jiangjiMouth: "",
      xingValue2: "",
      chakan2: "",
      jiangjiMouth2: "",
      list1: [],
      list2: [],
      list3: [],
      vipNum: 0,
      noVipNum: 0,
      vipNumCom: 0,
      noVipNumCom: 0,
      userMonthTime: "", //用户会员到期时间
      companyMonthTime: "", //企业会员到期时间
      vipPrice: "0", //会员价格
      openLists: [],
      openWay: 1,
      isVip: false,
      isVipC: "",
      dataTime: "", //到期时间
      dataTimeC: "",
      isTrue: true,
      msgNum: 0, //非会员每天免费联系次数
      vipMsgNum: 0, //会员每天免费联系次数
      msgPrice: 0, //非会员每次联系价格
      vipMsgPrice: 0, //会员每次联系价格
    };
  },
  components: {
    navBar,
  },
  onShow() {
    this.msgNum = uni.getStorageSync("msgNum") ? uni.getStorageSync("msgNum") : 0;
    this.vipMsgNum = uni.getStorageSync("vipMsgNum")
      ? uni.getStorageSync("vipMsgNum")
      : 0;
    this.vipMsgPrice = uni.getStorageSync("vipMsgPrice")
      ? uni.getStorageSync("vipMsgPrice")
      : 0;
    this.msgPrice = uni.getStorageSync("msgPrice") ? uni.getStorageSync("msgPrice") : 0;
    this.getUserInfo();
  },
  onLoad() {
    this.userType = uni.getStorageSync("userType");
    if (this.userType == 1) {
      //用户简历的刷新次数
      this.getVipPeople();
      this.getNoVipPeople();
    } else {
      this.getVipCom();
      this.getNoVipCom();
    }
    this.getVipPrice();
    // #ifdef APP-PLUS
    this.openLists = [
      {
        image: "../../static/images/my/zhifubao.png",
        text: "支付宝",
        id: 1,
      },
      {
        image: "../../static/images/my/icon_weixin.png",
        text: "微信",
        id: 2,
      },
    ];
    this.openWay = 1;
    // #endif

    // #ifdef MP-WEIXIN
    this.openLists = [
      {
        image: "../../static/share/icon_weixin.png",
        text: "微信",
        id: 2,
      },
    ];
    this.openWay = 2;
    // #endif

    // #ifdef H5
    let ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") !== -1) {
      this.openLists = [
        {
          image: "../../static/images/my/zhifubao.png",
          text: "支付宝",
          id: 1,
        },
        {
          image: "../../static/share/icon_weixin.png",
          text: "微信",
          id: 2,
        },
      ];
    } else {
      this.openLists = [
        {
          image: "../../static/images/my/zhifubao.png",
          text: "支付宝",
          id: 1,
        },
      ];
    }

    this.openWay = 1;
    // #endif
  },
  methods: {
    //支付
    pay() {
      let that = this;
      if (that.isTrue == false) {
        return;
      }
      that.isTrue = false;
      if (this.openWay == 2) {
        // #ifdef APP-PLUS
        // 微信APP支付 根据订单id获取支付信息
        this.$Request
          .post("/app/wxPay/wxPayOrder", {
            classify: 1,
            money: this.vipPrice,
            type: 2,
          })
          .then((ret) => {
            this.isCheckPay(ret.code, "wxpay", JSON.stringify(ret.data));
          });
        // #endif

        // #ifdef MP-WEIXIN
        // 微信小程序支付
        this.$Request
          .post("/app/wxPay/wxPayOrder", {
            classify: 3,
            money: this.vipPrice,
            type: 2,
          })
          .then((ret) => {
            uni.hideLoading();
            console.log(ret.data);
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: ret.data.timestamp,
              nonceStr: ret.data.noncestr,
              package: ret.data.package,
              signType: ret.data.signType,
              paySign: ret.data.sign,
              success: function (suc) {
                console.log("success:" + JSON.stringify(suc));
                uni.showToast({
                  title: "支付成功",
                  icon: "success",
                });
                that.show = false;
                that.isTrue = true;
                that.getUserInfo();
              },
              fail: function (err) {
                console.log("fail:" + JSON.stringify(err));
                that.isTrue = true;
                uni.showToast({
                  title: "支付失败",
                  icon: "none",
                });
              },
            });
          });
        // #endif

        // #ifdef H5
        let ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf("micromessenger") !== -1) {
          let data = {
            classify: 2,
            money: this.vipPrice,
            type: 2,
          };
          this.$Request.post("/app/wxPay/wxPayOrder", data).then((res) => {
            if (res.code == 0) {
              this.callPay(res.data);
            } else {
              that.isTrue = true;
              uni.showToast({
                icon: "none",
                title: "支付失败!",
              });
            }
          });
        }
        // #endif
      } else {
        // APP支付宝支付
        // #ifdef APP
        this.$Request
          .post("/app/aliPay/payMoneyOrder", {
            classify: 4,
            money: this.vipPrice,
            type: 2,
          })
          .then((ret) => {
            this.show = false;
            console.log(ret);
            this.isCheckPay(ret.code, "alipay", ret.data);
          });
        // #endif
        // #ifdef H5
        let data = {
          classify: 5,
          money: this.vipPrice,
          type: 2,
        };
        this.$Request.post("/app/aliPay/payMoneyOrder", data).then((res) => {
          if (res.code === 0) {
            this.show = false;
            that.isTrue = true;
            const div = document.createElement("div");
            div.innerHTML = res.data; //此处form就是后台返回接收到的数据
            document.body.appendChild(div);
            document.forms[0].submit();
          } else {
            that.isTrue = true;
            uni.showToast({
              icon: "none",
              title: "支付失败!",
            });
          }
        });
        // #endif
      }
    },
    callPay: function (response) {
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.onBridgeReady(response),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady(response));
          document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady(response));
        }
      } else {
        this.onBridgeReady(response);
      }
    },
    onBridgeReady: function (response) {
      let that = this;
      if (!response.package) {
        return;
      }
      console.log(response, "++++++++");
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: response.appid, //公众号名称，由商户传入
          timeStamp: response.timestamp, //时间戳，自1970年以来的秒数
          nonceStr: response.noncestr, //随机串
          package: response.package,
          signType: response.signType, //微信签名方式：
          paySign: response.sign, //微信签名
        },
        function (res) {
          console.log(res, "/*-/*-/*-");
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            uni.showLoading({
              title: "支付成功",
            });
            setTimeout(function () {
              that.isTrue = true;
              uni.hideLoading();
            }, 1000);
            that.show = false;
            that.getUserInfo();
          } else {
            that.isTrue = true;
            uni.hideLoading();
          }
          WeixinJSBridge.log(response.err_msg);
        }
      );
    },
    isCheckPay(status, name, order) {
      let that = this;
      if (status == 0) {
        this.setPayment(name, order);
      } else {
        uni.hideLoading();
        that.isTrue = true;
        uni.showToast({
          title: "支付信息有误",
          icon: "none",
        });
      }
    },
    setPayment(name, order) {
      let that = this;
      console.log("*-*-*");
      uni.requestPayment({
        provider: name,
        orderInfo: order, //微信、支付宝订单数据
        success: function (res) {
          console.log(res);
          uni.hideLoading();
          uni.showLoading({
            title: "支付成功",
          });
          that.show = false;
          that.getUserInfo();
          that.isTrue = true;
        },
        fail: function (err) {
          console.log(err);
          that.isTrue = true;
          uni.hideLoading();
        },
        complete() {
          that.isTrue = true;
          uni.hideLoading();
        },
      });
    },
    selectWay: function (item) {
      this.openWay = item.id;
    },
    //获取会员开通价格
    getVipPrice() {
      if (uni.getStorageSync("userType") == 1) {
        //用户会员价格
        this.$Request.get("/app/common/type/331").then((res) => {
          if (res.code == 0) {
            this.vipPrice = res.data.value;
          }
        });
      } else {
        //企业会员价格
        this.$Request.get("/app/common/type/332").then((res) => {
          if (res.code == 0) {
            this.vipPrice = res.data.value;
          }
        });
      }
    },
    //获取个人信息
    getUserInfo() {
      this.$Request.get("/app/user/selectUserById").then((res) => {
        if (res.code == 0) {
          if (res.data.isUserVip + "" == 1) {
            this.isVip = true;
            this.dataTime = res.data.userMonthTime;
          } else {
            this.isVip = false;
          }
          if (res.data.isCompanyVip + "" == "1") {
            this.isVipC = true;
            this.dataTimeC = res.data.companyMonthTime;
          } else {
            this.isVipC = false;
          }
        }
      });
    },
    submit() {
      if (this.checked == false) {
        uni.showToast({
          title: "请阅读并同意《会员开通协议》",
          icon: "none",
        });
        return;
      }
      this.show = true;
    },
    //会员简历刷新次数
    getVipPeople() {
      this.$Request.get("/app/common/type/328").then((res) => {
        if (res.code == 0) {
          this.vipNum = res.data.value;
        }
      });
    },
    //非会员简历刷新次数
    getNoVipPeople() {
      this.$Request.get("/app/common/type/327").then((res) => {
        if (res.code == 0) {
          this.noVipNum = res.data.value;
        }
      });
    },
    //会员岗位刷新次数
    getVipCom() {
      this.$Request.get("/app/common/type/330").then((res) => {
        if (res.code == 0) {
          this.vipNumCom = res.data.value;
        }
      });
    },
    //非会员岗位刷新次数
    getNoVipCom() {
      this.$Request.get("/app/common/type/329").then((res) => {
        if (res.code == 0) {
          this.noVipNumCom = res.data.value;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.page-box {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .page-content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
  }
}
page {
  background-color: #f6f6f6;
}

/deep/.u-checkbox__icon-wrap--checked {
  background-color: #016bf6;
  border-color: #016bf6;
}

.payTitle {
  width: 100%;
  text-align: center;
  font-weight: bold;
  margin-top: 30rpx;
}

.payPrice {
  width: 100%;
  margin-top: 30rpx;
  text-align: center;
}

.payList {
  width: 100%;
  margin-top: 20rpx;

  .payList-box {
    width: 686rpx;

    .payList-box-item {
      width: 100%;
      margin-bottom: 20rpx;
    }

    .payList-box-item-l {
      font-size: 30rpx;
    }
  }
}

.payBtn {
  width: 100%;
  height: 88rpx;
  margin-top: 20rpx;
  margin-bottom: 60rpx;

  .payBtn-box {
    width: 686rpx;
    height: 100%;
    background-color: #016bf6;
    color: #ffffff;
    border-radius: 40rpx;
  }
}

.bgTop {
  width: 100%;
  height: 611rpx;
  background-color: #1f1f27;

  .bgTop-box {
    width: 686rpx;
    height: 100%;

    .bgTop-box-top {
      width: 100%;
      height: 300rpx;
      margin-top: 30rpx;
      background: linear-gradient(90deg, #eab99b 0%, #f8d6bb 46%, #dc9c79 100%);
      border-radius: 16rpx;
    }

    .bgTop-box-top-box {
      width: calc(100% - 60rpx);
      height: 165rpx;
    }

    .bgTop-box-top-box-l {
      .bgTop-box-top-box-l-t {
        // color: #9C694D;
        font-size: 34rpx;
        font-weight: 800;
        background-image: linear-gradient(to right, #6f3e1d, #c4724b);
        background-clip: text;
        color: transparent;
      }

      .bgTop-box-top-box-l-c {
        background-image: linear-gradient(to right, #6f3e1d, #c4724b);
        background-clip: text;
        color: transparent;
        font-size: 34rpx;
        font-weight: 800;
        // margin-top: 10rpx;
      }

      .bgTop-box-top-box-l-b {
        color: #9c694d;
        font-size: 26rpx;
        font-weight: 500;
        margin-top: 30rpx;
      }
    }

    .bgTop-box-top-box-r {
      width: 178rpx;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .bgTop-box-btn {
      width: 100%;
      height: 187rpx;
      background: linear-gradient(0deg, #272731 0%, #1f1f27 100%);
      border-radius: 16rpx;
      margin-top: 20rpx;

      .bgTop-box-btn-item {
        width: 100rpx;
        margin-top: 10rpx;

        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }

        .bgTop-box-btn-item-t {
          width: 100rpx;
          color: #d6b19b;
          font-size: 24rpx;
          font-weight: 500;
          margin-top: 16rpx;
        }
      }
    }
  }
}

.icon {
  width: 100%;
  margin-top: -50rpx;
}

.bgc {
  width: 100%;
  height: 158rpx;
  background: #f6f6f6;
  border-radius: 24rpx;
  margin-top: -20rpx;
}

.bgb {
  width: 100%;
  // height: 400rpx;
  margin-top: -130rpx;

  .bgb-c {
    width: 686rpx;
    height: 100%;
    background-color: #ffffff;
    border-radius: 24rpx;

    .bgb-c-n {
      width: 606rpx;
      height: 100%;
    }

    .bgb-c-n-title:nth-of-type(1) {
      margin-top: 46rpx;
    }

    .bgb-c-n-title {
      width: 100%;
      // margin-top: 20rpx;
      margin-bottom: 50rpx;

      .bgb-c-n-titles {
        width: 150rpx;
        text-align: center;
      }

      .bgb-c-n-title-l {
        color: #202020;
        font-size: 28rpx;
        font-weight: 800;
      }

      .bgb-c-n-title-c {
        color: #202020;
        font-size: 28rpx;
        font-weight: 800;
      }

      .bgb-c-n-title-r {
        color: #b1643c;
        font-size: 28rpx;
        font-weight: 800;
      }
    }
  }
}

.btn {
  width: 100%;
  // height: 140rpx;
  background-color: #f6f6f6;
  position: fixed;
  bottom: 0;

  .btn-c {
    margin-top: 10rpx;
    width: 686rpx;
    height: 90rpx;
    border-radius: 45rpx;
    background: linear-gradient(90deg, #056d70 0%, #023842 100%);
    margin-bottom: 40rpx;

    .btn-c-l {
      width: 436rpx;
      height: 100%;
      color: #febb91;

      // font-weight: 800;
      text:nth-of-type(1) {
        font-size: 44rpx;
        margin-left: 20rpx;
      }

      text:nth-of-type(2) {
        font-size: 32rpx;
      }
    }

    .btn-c-r {
      width: 250rpx;
      height: 100%;
      background: linear-gradient(90deg, #ffe2da 0%, #ffb584 100%);
      border-radius: 0rpx 45rpx 45rpx 0rpx;
      color: #5e3c28;
      font-size: 28rpx;
      // font-weight: 800;
    }
  }
}
</style>
