android-cloud-H5/pages/activity/invite-user/invite-passive-user.vue

<template>
  <div class="padssive ">
    <div>
      <div class="bright-wrap">
        <div class="bright-item mb-6"></div>
        <div class="bright-item mb-6"></div>
        <div class="bright-item"></div>
        <div class="bright-item"></div>
      </div>

      <div class="input-wrap">
        <div class="input-cell">
          <div class="input-cell-label">
            <span class="required">*</span><span class="label-name">手机号</span>
          </div>
          <div class="input-cell-value">
            <input class="input" v-model.trim="value" type="text" placeholder="请输入11位手机号" />
          </div>
          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
        </div>

        <div class="input-cell">
          <div class="input-cell-label">
            <span class="required">*</span><span class="label-name">短信验证</span>
          </div>
          <div class="code-cell">
            <div class="input-cell-value">
              <input class="input" v-model.trim="value" type="text" placeholder="请输入验证码" />
            </div>
            <div class="get-code ml-2">获取验证码</div>
          </div>
          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
        </div>
        <div class="req-btn-wrap">
          <van-button class="mb-3" type="primary" round block color="#435EFB" text="注册并下载APP" />
        </div>

        <div class="tips">
          通过登录即可完成注册，成为我们的新用户，登录后表示同意双子星云手机服务协议
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  auth: false,
  name: 'InvitePassiveUser',
  head: {
    title: '受邀验证',
  },
  data() {
    return {
      value: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.padssive{
  padding: 80px 16px 16px 16px;
}
.bright-wrap{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  align-content: space-around;
  
  .bright-item{
    width: 155px;
    height: 82px;
    background: linear-gradient( 160deg, #62A9FF 0%, #3370FF 100%);
    border-radius: 8px;
  }
}

.input-wrap{
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;

  .input-cell{
    margin-bottom: 16px;

    .input-cell-label{
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 8px;

      .required{
        color: #FE5C5B;
      }

      .label-name{
        font-weight: 600;
        color: #242424;
      }
    }
    
    .input-cell-value{
      background-color: #F3F3F3;
      border-radius: 4px;
      display: flex;
      height: 48px;
      padding: 0 12px;
      align-items: center;
      flex: 1;
      position: relative;

     .input{
      flex: 1;
        background-color: transparent;
        border: none;
        outline: none;
        font-size: 14px;
        line-height: 20px;
        color: #242424;
     }
    }
    .input-error-msg{
     bottom: 0;
     left: 0;
     font-size: 12px;
     color: #FE5C5B
    }
    
    .code-cell{
      display: flex;
      
      .get-code{
       font-weight: 400;
       font-size: 14px;
       color: #3370FF;
       display: flex;
       align-items: center;
      }
    }
  }

  .req-btn-wrap{
      margin-top: 56px;
    }

    .tips{
      font-weight: 400;
      font-size: 14px;
      color: #979797;
      line-height: 20px;
    }
}
</style>