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

<template>
  <div class="first-reward">
    <van-nav-bar
      title="0元购机，尽情享受"
      left-arrow
      @click-left="goBackFun"
      fixed
    />
    <div class="first-reward-container">
      <div class="first-reward-container_privilege">
        <img src="@/assets/image/claimCloudPhone/privilege-img.png" alt="" />
        <div class="first-reward-container_privilege-tips">
          以上权益已开通至您的账户
        </div>
        <img src="@/assets/image/claimCloudPhone/first-reward-container-privilege.png" alt="" class="btn">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  auth: false,
  name: 'firstReward',
  head: {
    title: '0元购机，尽情享受',
  },
  components: {},
};
</script>

<style lang="less" scoped>
.first-reward {
  height: 100%;
  box-sizing: border-box;
  background: #f64d5d;
  .first-reward-container {
    padding: 12.2666666667vw 16px 16px;
    height: 100%;
    box-sizing: border-box;
    background: url('~/assets/image/claimCloudPhone/first-reward-img.png')
      no-repeat;
    background-size: 100% 210px;
    background-position: 0px 12.2666666667vw;

    .first-reward-container_privilege {
      padding-top: 224px;
      & > img {
        width: 100%;
      }

      .first-reward-container_privilege-tips {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        margin: 16px 0;
        line-height: 17px;
        text-align: center;
        font-style: normal;
      }

      .btn{
        height: 56px;
      }
    }
  }
}
::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>