WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实名认证静态页面

Browse Source
This commit is contained in:
WindowBird 2025-09-16 11:30:01 +08:00
parent 6e07867bcd
commit 46769ff923
1 changed files with 154 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
pages/realName/realName.vue
View File

@ -7,10 +7,31 @@
/>
<tile-grid />
<view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
<!-- 状态展示 -->
<status-display v-if="loading" loading-text="加载中..." type="loading" />
<!-- &lt;!&ndash; 状态展示 &ndash;&gt;-->
<!-- <status-display v-if="loading" loading-text="加载中..." type="loading" />-->
<!-- 页面内容将在这里添加 -->
<view class="container"></view>
<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>
@ -22,6 +43,7 @@ export default {
components: {},
data() {
return {
flower: "https://api.ccttiot.com/image-1757990177680.png",
CommonEnum,
loading: false,
};
@ -61,6 +83,134 @@ export default {
display: flex;
align-items: flex-start;
flex-direction: column;
padding: 0 15rpx 40rpx;
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>