lcoco/pages/my/set/autonym.vue

<template>
  <view class="autonym-box">
    <en-nav title="实名认证" :title-color="'#333'"  ></en-nav>
    <view class="autonym-no" v-if="!isAutonym">
      <view class="no-item">
        <view class="item-left">
          <image class="left-img" src="/static/img/my/autonym/no-2.png" mode="aspectFill"></image>
        </view>
        <view class="item-right">
          <view class="item-title sys-color-black sys-weight-600 sys-height-44">认证标识</view>
          <view class="item-text sys-color-gray-9 sys-weight-400">专属认证标识</view>
          <view class="item-text sys-color-gray-9 sys-weight-400">可以让你收获更多喜欢</view>
        </view>
      </view>
      <view class="no-item">
        <view class="item-left">
          <image class="left-img" src="/static/img/my/autonym/no-1.png" mode="aspectFill"></image>
        </view>
        <view class="item-right">
          <view class="item-title sys-color-black sys-weight-600 sys-height-44">优先推荐</view>
          <view class="item-text sys-color-gray-9 sys-weight-400">增加曝光率</view>
          <view class="item-text sys-color-gray-9 sys-weight-400">发现卡牌中优先推荐</view>
        </view>
      </view>
      <view class="no-but">
        <view class="but sys-color-white sys-background-black">开始认证</view>
        <view class="but-text sys-color-gray-9 sys-weight-400">提示:实名认证仅用于审核，其他用户不可见.</view>
      </view>
    </view>
    <view class="autonym-ok" v-else>
      <view class="ok-img">
        <image class="left-img" src="/static/img/my/autonym/ok.png" mode="aspectFill"></image>
      </view>
      <view class="ok-title sys-color-black-0 sys-weight-600">恭喜你，个人实名认证成功</view>
      <view class="ok-text sys-color-gray-9">您提交的认证信息已经通过审核</view>
    </view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
export default {
  components: {EnNav},
  data() {
    return {
      isAutonym:true
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.autonym-box{
  min-height: 100vh;
  position: relative;
  .autonym-no{
    margin-top: 20rpx;
    padding: 0 40rpx;
    .no-item{
      padding: 80rpx 72rpx;
      background-color: #FFFFFF;
      border-radius: 20rpx;
      box-shadow: 8rpx 8rpx 8rpx 8rpx rgba(0,0,0,0.06);
      display: flex;
      justify-content: center;
      align-items: center;
      .item-left{
        .left-img{
          width: 184rpx;
          height: 184rpx;
        }
      }
      .item-right{
        margin-left: 60rpx;
        .item-title{
            font-size: 40rpx;
        }
        .item-text{
          font-size: 28rpx;
          height: 40rpx;
          line-height: 40rpx;
        }
        .item-text:first-child{
          margin-top: 40rpx;
        }
      }
    }
    .no-item:first-child{
      margin-bottom: 40rpx;
    }
    .no-but{
      position: absolute;
      width: 100vw;
      bottom: 148rpx;
      left: 0;
      padding: 0 68rpx;
      .but{
        width: calc(100vw - 156rpx);
        border-radius: 200rpx;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        text-align: center;
      }
      .but-text{
        width: calc(100vw - 156rpx);
        margin-top: 32rpx;
        text-align: center;
        font-size: 28rpx;
      }
    }

  }
  .autonym-ok{
    .ok-img{
      margin-top: 168rpx;
      display: flex;
      justify-content: center;
      .left-img{
        width: 348rpx;
        height: 348rpx;
      }
    }
    .ok-title{
      margin-top: 68rpx;
      text-align: center;
      font-size: 34rpx;
    }
    .ok-text{
      margin-top: 16rpx;
      text-align: center;
      font-size: 24rpx;
    }
  }

}

</style>