pay-video-applet-uniapp-24-8-22/pages/mine/certifiedIndividual.vue

<template>
  <view class="certified-individual">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="个人认证"/>


    <!--内容区域-->
    <view class="content">
      <view class="title">
        <view class="image">
          <image src="/static/image/auth/1.svg" style="width: 100%;height: 100%"></image>
        </view>
        请确保二代身份证有效,并且头像文字清晰，四角对齐,无反光，无遮挡。
      </view>
      <view class="center">
        <view class="avatarFace">
          <image src="/static/image/auth/2.png" style="width: 100%;height: 100%"></image>
        </view>
        <view class="reverseSide">
          <image src="/static/image/auth/2.png" style="width: 100%;height: 100%"></image>
        </view>
      </view>
    </view>

    <!--立即上传按钮-->
    <view @click="nowAuth" class="bottomBtn">
      立即认证
    </view>

    <!--立即上传按钮-->
    <view class="agree">
      <uv-checkbox-group v-model="checkboxValue" placement="column" size="35"
                         activeColor="#008000" inactiveColor="#999999">
        <uv-checkbox shape='circle' :checked="true" name="apple"
                     :label="labelValue ? labelValue : ''" iconSize="35">
        </uv-checkbox>
      </uv-checkbox-group>
      我已阅读并同意签署 <span style="color:#009dff">《人脸识别服务协议》</span>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checkboxValue: '香蕉',
      labelValue: '' // 如果labelValue为空，则不会显示任何内容
    };
  },
  methods: {
    nowAuth() {

    }
  }
}
</script>

<style lang="scss" scoped>
.certified-individual {
  .content {
    padding: 40rpx;

    .title {
      display: flex;
      font-size: 30rpx;

      .image {
        display: flex;
        align-items: flex-start;
        width: 10vw;
        height: 3vh;
      }
    }

    .center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 150rpx;
      margin-top: 15%;

      .avatarFace {
        width: 80vw;
        height: 20vh;
      }

      .reverseSide {
        width: 80vw;
        height: 20vh;
      }
    }
  }

  .bottomBtn {
    position: fixed;
    bottom: 15%;
    left: 25%;
    width: 50%;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 30rpx;
    color: #FFFFFF;
    text-align: center;

    border: 1px solid red;
    background: $uni-linear-gradient-color;
    -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent; /*给文字设置成透明*/
  }

  .agree {
    position: fixed;
    bottom: 7%;
    display: flex;
    padding-left: 20rpx;
    border: 1px solid red;
  }
}
</style>