android-cloud-H5/pages/claimCloudPhone/purchase.vue

<template>
  <div class="purchase">
    <van-nav-bar title="0元购机，尽情享受" left-arrow fixed />
    <div class="purchase-container">
      <div>
        <div class="purchase-privilege">
          <div>
            <img src="@/assets/image/claimCloudPhone/privilege-1.png" alt="" />
            应用预装已完成
          </div>
          <div>
            <img src="@/assets/image/claimCloudPhone/privilege-2.png" alt="" />
            任意下单
          </div>
          <div>
            <img src="@/assets/image/claimCloudPhone/privilege-3.png" alt="" />
            立即使用云机
          </div>
        </div>
        <setMealItem v-for="item in 10" :key="item" :type="0" />
      </div>

      <van-popup
        v-model="visible"
        position="bottom"
        :style="{ background: 'transparent' }"
      >
        <div class="payment-container">
          <div class="payment-container-title">新增云手机</div>
          <div class="payment-container-info">
            <div>
              <div class="payment-container-info_value">
                <span>￥</span>77.90
              </div>
              <div class="payment-container-info_name">星耀30天卡</div>
            </div>
          </div>
          <div class="payment-container-num">
            数量：<van-stepper button-size="18" />
          </div>
          <div class="payment-container-method">
            <div class="payment-container-method_title">选择支付方式</div>
            <div class="payment-container-method_select">
              <div class="active">
                <img
                  src="@/assets/image/claimCloudPhone/weChatActvie.png"
                  alt=""
                />
                微信
              </div>
              <div>
                <img src="@/assets/image/claimCloudPhone/alipay.png" alt="" />
                支付宝
              </div>
            </div>
          </div>
          <div class="payment-container-amount">
            <div>
              需支付金额:<span><span>¥</span>77.90</span>
            </div>
            <div>确认协议并付款</div>
          </div>
          <div class="payment-container-agreement">
            购买前阅读<span> 《双子星云手机类型服务协议》 </span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import setMealItem from './components/setMealItem.vue';
export default {
  auth: false,
  name: 'purchase',
  head: {
    title: '0元购机，尽情享受',
  },
  data() {
    return {
      visible: false,
    };
  },
  components: { setMealItem },
};
</script>

<style lang="less" scoped>
.purchase {
  height: 100%;
  box-sizing: border-box;
  background: #fdf2e3;
  .purchase-container {
    padding: 12.2666666667vw 0 16px;
    height: 100%;
    box-sizing: border-box;
    background: url('~/assets/image/claimCloudPhone/purchase-img.png') no-repeat;
    background-size: 100% 210px;
    background-position: 0px 12.2666666667vw;
    & > div {
      padding: 224px 16px 0;
      .purchase-privilege {
        padding: 16px;
        height: 102px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px #f6e5d3;
        border-radius: 8px;
        display: grid;
        grid-gap: 8px;
        grid-template-columns: repeat(3, 1fr);
        & > div {
          text-align: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #1c2023;
          line-height: 20px;
          font-style: normal;
          & > img {
            width: 42px;
            height: 42px;
            display: block;
            margin: 0 auto;
          }
        }
      }
    }
  }

  .payment-container {
    border-radius: 10px 10px 0 0;
    padding: 16px;
    height: 66vh;
    display: flex;
    flex-direction: column;
    background: #f4f6f8;
    overflow-y: auto;
    .payment-container-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 18px;
      color: #0a132b;
      line-height: 20px;
      text-align: center;
      font-style: normal;
    }

    .payment-container-info {
      margin-top: 16px;
      height: 100px;
      background: #ffffff;
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      .payment-container-info_value {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 18px;
        color: #0a132b;
        font-style: normal;
        span {
          font-size: 14px;
        }
      }

      .payment-container-info_name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #0a132b;
        font-style: normal;
      }
    }

    .payment-container-num {
      margin-top: 16px;
      padding: 16px;
      box-sizing: border-box;
      height: 50px;
      background: #ffffff;
      border-radius: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 14px;
      color: #0a132b;
      line-height: 18px;
      text-align: left;
      display: flex;
      font-style: normal;
      .van-stepper {
        margin-left: 10px;
      }
    }

    .payment-container-method {
      .payment-container-method_title {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #0a132b;
        line-height: 18px;
        text-align: left;
        font-style: normal;
        margin: 16px 0;
      }

      .payment-container-method_select {
        display: grid;
        grid-gap: 8px;
        grid-template-columns: repeat(2, 1fr);
        & > div {
          height: 54px;
          line-height: 54px;
          background: #edeef0;
          border-radius: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 18px;
          font-family: PingFangSC, PingFang SC;
          font-weight: bold;
          font-size: 14px;
          color: #666666;
          border: 1px solid transparent;
          line-height: 18px;
          font-style: normal;

          &.active {
            background: #ffffff;
            border-radius: 6px;
            border: 1px solid #3b7fff;
            position: relative;
            &::after {
              position: absolute;
              top: 0;
              right: 0;
              width: 26px;
              height: 15px;
              background: #3a86fe;
              border-radius: 0px 6px 0px 6px;
              display: block;
              content: '√';
              font-size: 10px;
              text-align: center;
              line-height: 15px;
              color: #ffffff;
            }
          }
          & > img {
            width: 24px;
            height: 24px;
            margin-right: 4px;
          }
        }
      }
    }

    .payment-container-amount {
      background: #ffffff;
      box-shadow: 0px 0px 13px 0px rgba(206, 206, 206, 0.5);
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      & > div:first-of-type {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #0a132b;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        padding: 16px 0 16px 16px;
        & > span {
          font-size: 18px;
          color: #f04646;
          line-height: 20px;
          font-style: normal;
          span {
            font-size: 12px;
          }
        }
      }

      & > div:last-of-type {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #ffffff;
        line-height: 55px;
        text-align: left;
        font-style: normal;
        width: 136px;
        height: 55px;
        text-align: center;
        background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
        border-radius: 16px;
      }
    }

    .payment-container-agreement {
      margin-top: 9px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #bbbbbb;
      line-height: 16px;
      text-align: center;
      font-style: normal;
      span{
        color: #3A86FE;
      }
    }
  }
}
::v-deep .van-nav-bar__arrow {
  color: #000000;
  font-size: 24px;
}

::v-deep .van-nav-bar__title {
  font-weight: bold !important;
  font-size: 17px !important;
  color: #0a132b !important;
  line-height: 24px !important;
}
</style>