buddhism/pages/realName/realName.vue

<template>
  <view class="page">
    <custom-navbar
      ref="customNavbar"
      :style="{ backgroundColor: '#f5f5f5' }"
      title="实名认证"
    />
    <tile-grid />
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <!--      &lt;!&ndash; 状态展示 &ndash;&gt;-->
      <!--      <status-display v-if="loading" loading-text="加载中..." type="loading" />-->
      <!-- 页面内容将在这里添加 -->

      <view class="title"> 爱心捐助 · 实名认证</view>
      <view class="lotusMeditation">
        <image :src="flower" mode="widthFix" />
      </view>
      <view class="content"
        >根据国家相关规定，为确保捐赠行为的合规性与可追溯性，保
        障您的公益捐赠权益，请进行实名认证
      </view>
      <view class="box"></view>
      <view class="inputYourIdentify">请输入您的有效身份信息</view>

      <view class="inputBox">
        <input class="input" placeholder="请输入您的姓名" type="text" />
        <input class="input" placeholder="请输入您的身份证号" type="text" />
        <input class="input" placeholder="请输入您的手机号" type="text" />
      </view>

      <button class="submit">提交</button>
      <view class="tip"
        >点击提交代表您授权日行一善、项目捐款获取以上信 息，用于实名验证
      </view>
    </view>
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";

export default {
  components: {},
  data() {
    return {
      flower: "https://api.ccttiot.com/image-1757990177680.png",
      CommonEnum,
      loading: false,
    };
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadPageData();
  },
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.loading = true;
      try {
        // TODO: 调用页面数据API
        // const response = await getPageData()
        // 模拟加载
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      } catch (error) {
        console.error("获取页面数据失败:", error);
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  //background: #f5f0e7;
}

.header {
  width: 100%;
  //min-height: 100vh;//可能导致页面留白
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 0 40rpx;

  .title {
    position: absolute;
    left: 54rpx; /* 27px * 2 */
    top: 326rpx; /* 163px * 2 */
    height: 60rpx; /* 30px * 2 */
    opacity: 1;

    font-family: AlibabaPuHuiTi;
    font-size: 44rpx; /* 22px * 2 */
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;

    font-feature-settings: "kern" on;
    color: #522510;
  }

  .lotusMeditation {
    position: absolute;
    left: 502rpx; /* 251px * 2 */
    top: 222rpx; /* 111px * 2 */
    width: 33.07%; /* 33.07% 保持不变（百分比单位不受影响） */
    height: 13.67%; /* 百分比单位保持不变 */
    opacity: 1;
  }

  .content {
    position: absolute;
    left: 54rpx; /* 27px * 2 */
    top: 412rpx; /* 206px * 2 */
    width: 638rpx; /* 319px * 2 */
    height: 64rpx; /* 32px * 2 */
    opacity: 1;

    font-family: AlibabaPuHuiTi;
    font-size: 24rpx; /* 12px * 2 */
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;

    font-feature-settings: "kern" on;
    color: #522510;
  }

  .box {
    position: absolute;
    left: 27px;
    top: 259px;
    width: 321px;
    height: 356px;
    border-radius: 15px;
    opacity: 1;

    background: #fffbf5;

    box-sizing: border-box;
    border: 0.5px solid #c7a26d;
  }

  .inputYourIdentify {
    position: absolute;
    left: 50px;
    top: 282px;

    height: 22px;
    opacity: 1;

    font-family: AlibabaPuHuiTi;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;

    font-feature-settings: "kern" on;
    color: #3d3d3d;
  }

  .inputBox {
    position: relative;
    top: 400rpx;
    width: 550rpx;
    left: 100rpx;
    height: 300rpx;

    .input {
      height: 100rpx;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      border-bottom: #d8d8d8 solid 1px;
    }
  }

  .submit {
    position: absolute;
    left: 50px;
    top: 488px;
    width: 275px;
    height: 49px;
    border-radius: 10px;
    opacity: 0.5;

    background: #c7a26d;
  }

  .tip {
    position: absolute;
    left: 50px;
    top: 549px;
    width: 272px;
    height: 32px;
    opacity: 1;

    font-family: AlibabaPuHuiTi;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;

    font-feature-settings: "kern" on;
    color: #695347;
  }
}
</style>