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

<template>
  <div class="second-reward">
    <van-nav-bar
      title="0元购机，尽情享受"
      left-arrow
      @click-left="goBackFun"
      fixed
    />
    <div class="second-reward-container">
      <div>
        <div class="second-reward-container_title">
          请搜素您希望在云机内运行的应用为您安装至云机
        </div>
        <div class="second-reward-container_main">
          <template v-if="!isSelectBool">
            <div class="application">
              <div v-for="item in applicationList" :key="item">应用宝</div>
            </div>
          </template>
          <template v-else>
            <div
              v-for="item in adaptedModels"
              :key="item"
              class="adapted-models"
            >
              <div>
                <img
                  src="@/assets/image/claimCloudPhone/second-reward-img.png"
                  alt=""
                />
                梦幻西游
              </div>
              <div>推荐机型：星动安卓7/星曜安卓7/星曜/唔即/星空/唔即PRO</div>
            </div>
            <img  src="@/assets/image/claimCloudPhone/claim-mobile-phone-btn.png" />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  auth: false,
  name: 'secondReward',
  head: {
    title: '0元购机，尽情享受',
  },
  data() {
    return {
      applicationList: [1, 2, 3, 4, 5, 6, 10, 11, 12, 50], //  应用数组
      adaptedModels: [1], // 适配机型
      isSelectBool: true,
    };
  },
  components: {},
};
</script>

<style lang="less" scoped>
.second-reward {
  height: 100%;
  box-sizing: border-box;
  background: #f64d5d;
  .second-reward-container {
    padding: 12.2666666667vw 0 16px;
    height: 100%;
    box-sizing: border-box;
    background: url('~/assets/image/claimCloudPhone/second-reward-img.png')
      no-repeat;
    background-size: 100% 210px;
    background-position: 0px 12.2666666667vw;
    & > div {
      padding-top: 224px;
      .second-reward-container_title {
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: bold;
        font-size: 16px;
        color: #fefefe;
        line-height: 18px;
        text-align: center;
        font-style: normal;
      }

      .second-reward-container_main {
        padding: 0 16px;
        .application {
          margin-top: 24px;
          display: grid;
          grid-gap: 16px;
          grid-template-columns: repeat(3, 1fr);
          & > div {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #742428;
            line-height: 20px;
            text-align: center;
            font-style: normal;
            background: #fff1e1;
            border-radius: 14px;
            padding: 11px 0;
          }
        }

        .adapted-models {
          margin-top: 16px;
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-size: 14px;
          color: #891c04;
          & > div {
            height: 64px;
            padding: 16px;
            box-sizing: border-box;
            &:first-of-type {
              background: #fff1e1;
              border-radius: 12px 12px 0 0;
              font-weight: bold;
              line-height: 32px;
              display: flex;
              align-items: center;
              & > img {
                height: 32px;
                width: 32px;
                margin-right: 8px;
              }
            }
            &:last-of-type {
              background: #fedec0;
              border-radius: 0 0 12px 12px;
              font-weight: 400;
              font-size: 14px;
              font-style: normal;
              line-height: 15px;
            }
          }
        }

        &>img{
          height: 56px;
          width: 281px;
          display: block;
          margin: 0 auto;
          margin-top: 32px;
        }
      }
    }
  }
}
::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>