<template>
  <view class="page">
    <text>为了保证您的账号安全，须先验证您的身份，</text>
    <text>验证成功后可以进行下一步操作。</text>
    <view class="phone">{{ phone }}</view>
    <view class="verification-code">获取验证码</view>
    <view class="no-use">该手机号已无法使用？</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '+86 158****1232',
      userInfoSettings: [
        {
          label: '头像',
          value: '', // 实际项目中这里可能是图片URL
          icon: '灰色圆形图标', // 描述性文字，实际可用图片路径替换
          type: 'avatar',
        },
        {
          label: '昵称',
          value: '昵称', // 默认占位文字，实际应为用户昵称
          type: 'nickname',
        },
        {
          label: '手机号',
          value: '158****5964', // 脱敏后的手机号
          type: 'phone',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-top: 68rpx;
  background: #ffffff;

  text {
    text-align: center;
    font-weight: 400;
    font-size: 15px;
  }

  .phone {
    margin-top: 38rpx;
    font-size: 18px;
    font-weight: 500;
    color: #3d3d3d;
  }

  .verification-code {
    margin-top: 64rpx;
    text-align: center;
    line-height: 98rpx;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    width: 650rpx;
    height: 98rpx;
    background: #f15a04;
    border-radius: 7px;
  }

  .no-use {
    margin-top: 64rpx;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    color: #f15a04;
    border-bottom: #f15a04 1px solid;
  }
}
</style>
