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

<template>
  <div class="invitee-exits">
    <van-nav-bar title="0元购机，尽情享受" left-arrow fixed />
    <div class="invitee-exits-container">
      <div>
        <div class="invitee-exits-container_privilege">
          <div>三大云机特权</div>
          <div>
            <div>
              <img
                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-1.png"
                alt=""
              />
              <div>游戏托管</div>
            </div>
            <div>
              <img
                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-2.png"
                alt=""
              />
              <div>应用分身</div>
            </div>
            <div>
              <img
                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-3.png"
                alt=""
              />
              <div>坐标定位</div>
            </div>
          </div>
        </div>
        <div class="invitee-exits-container_phone-info">
          <div>云机可助您</div>
          <ul>
            <li>
              <img
                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-4.png"
                alt=""
              />
              24小时运行游戏任务
            </li>
            <li>
              <img
                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-5.png"
                alt=""
              />
              登录您的多个账号
            </li>
            <li>
              <img
                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-6.png"
                alt=""
              />
              隐私手机空间
            </li>
            <li>
              <img
                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-7.png"
                alt=""
              />
              苹果手机玩安卓应用
            </li>
          </ul>
        </div>
        <div class="invitee-exits-container_btn">
          <div>一键领取</div>
          <div>放弃所有奖励</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style lang="less" scoped>
.invitee-exits {
  height: 100%;
  box-sizing: border-box;
  background: #fdf2e3;
  .invitee-exits-container {
    padding: 12.2666666667vw 0 16px;
    height: 100%;
    box-sizing: border-box;
    background: url('~/assets/image/claimCloudPhone/invitee-exits-img.png')
      no-repeat;
    background-size: 100% 210px;
    background-position: 0px 12.2666666667vw;
    & > div {
      padding: 224px 16px 0;
      .invitee-exits-container_privilege,
      .invitee-exits-container_phone-info {
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px #f6e5d3;
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 16px;
        & > div:first-of-type {
          font-family: PingFangSC, PingFang SC;
          font-weight: bold;
          font-size: 16px;
          color: #0a132b;
          line-height: 22px;
          font-style: normal;
          margin-bottom: 12px;
        }
      }

      .invitee-exits-container_privilege {
        img {
          height: 42px;
          width: 42px;
          display: block;
          margin: 0 auto;
        }

        & > div:last-of-type {
          display: grid;
          grid-gap: 8px;
          grid-template-columns: repeat(3, 1fr);
          text-align: center;
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: 400;
          font-size: 14px;
          color: #213d5f;
          line-height: 20px;
          font-style: normal;
        }
      }

      .invitee-exits-container_phone-info {
        ul {
          padding: 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #0a132b;
          line-height: 20px;
          font-style: normal;
          img {
            width: 20px;
            height: 20px;
            vertical-align: middle;
          }
        }
      }

      .invitee-exits-container_btn {
        & > div:first-of-type {
          width: 226px;
          height: 40px;
          background: linear-gradient(178deg, #fd8c50 0%, #fc3307 100%);
          border-radius: 26px;
          margin: 0 auto;
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: bold;
          font-size: 18px;
          color: #ffffff;
          line-height: 40px;
          text-align: center;
          font-style: normal;
        }

        & > div:last-of-type {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #7e8495;
          line-height: 17px;
          text-align: center;
          font-style: normal;
          margin-top: 10px;
        }
      }
    }
  }
}
::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>