|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="vh100">
|
|
|
+ <div class="container">
|
|
|
<!-- Add Toast component -->
|
|
|
<Toast ref="toast" />
|
|
|
<!-- 导航栏 -->
|
|
@@ -11,7 +11,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 已认证状态 -->
|
|
|
- <div v-if="userInfo.if_real === 1" class="auth-success">
|
|
|
+ <div v-if="userInfo.if_real === 1" class="auth-success">
|
|
|
<div class="success-icon">
|
|
|
<svg viewBox="64 64 896 896" data-icon="check-circle" width="80px" height="80px" fill="#52c41a" aria-hidden="true">
|
|
|
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
|
|
@@ -21,42 +21,45 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 未认证状态 -->
|
|
|
- <div v-else>
|
|
|
- <div style="color: #fff;font-size: 14px;padding: 40px 20px;font-weight: bold;">
|
|
|
- 实名认证<br/>
|
|
|
- 获得红旗资产18000元
|
|
|
+ <div v-else class="main">
|
|
|
+ <div class="form-containerr">
|
|
|
+ <div class="bdyhk">
|
|
|
+ <span class="bdyhkk">实名认证</span>
|
|
|
+ <img src="@/assets/icons8-name-tag-64.png" alt="实名认证" style="width: 64px;height: 64px;">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 认证表单 -->
|
|
|
<div class="form-container">
|
|
|
<div class="form-item">
|
|
|
- <div class="form-label">姓名</div>
|
|
|
- <input
|
|
|
+ <div class="form-label" style="font-size: 16px;">填写本人信息</div>
|
|
|
+ <div class="form-label">真实姓名:<input
|
|
|
type="text"
|
|
|
class="form-input"
|
|
|
placeholder="请输入您的姓名"
|
|
|
v-model="formData.realName"
|
|
|
- >
|
|
|
+ /></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <soan class="form-label">证明类型:<span class="form-label" style="margin-left: 10px;">身份证</span></soan>
|
|
|
</div>
|
|
|
-
|
|
|
<div class="form-item">
|
|
|
- <div class="form-label">身份证号码</div>
|
|
|
- <input
|
|
|
+ <div class="form-label">身份证号码:<input
|
|
|
type="text"
|
|
|
class="form-input"
|
|
|
placeholder="请输入身份证号码"
|
|
|
v-model="formData.idCard"
|
|
|
- >
|
|
|
- <div style="display: flex;justify-content: center;align-items: center;">
|
|
|
- <button
|
|
|
+ /></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display: flex;justify-content: center;align-items: center;">
|
|
|
+ <button
|
|
|
class="submit-btn"
|
|
|
@click="handleSubmit"
|
|
|
>
|
|
|
提交实名认证
|
|
|
</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -128,9 +131,11 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.vh100 {
|
|
|
+.container {
|
|
|
min-height: 100vh;
|
|
|
- background:#c94545;
|
|
|
+ background-color: #b43a39;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
}
|
|
|
|
|
|
.nav-bar {
|
|
@@ -167,6 +172,91 @@ export default {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
+.main {
|
|
|
+ /* 和银行卡页面保持一致的主容器样式 */
|
|
|
+}
|
|
|
+
|
|
|
+.form-containerr {
|
|
|
+ background: #f4c1c1;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 0 20px;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ margin-top: 33px;
|
|
|
+}
|
|
|
+
|
|
|
+.bdyhk {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.bdyhkk {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #de3232;
|
|
|
+}
|
|
|
+
|
|
|
+.form-container {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 0 20px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-item {
|
|
|
+ /* margin-bottom: 20px; */
|
|
|
+}
|
|
|
+
|
|
|
+.form-label {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input {
|
|
|
+ width: 60%;
|
|
|
+ height: 44px;
|
|
|
+ border: none;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input::placeholder {
|
|
|
+ color: #999;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input:focus {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn {
|
|
|
+ width: 60%;
|
|
|
+ height: 44px;
|
|
|
+ background: #d89191;
|
|
|
+ border-radius: 22px;
|
|
|
+ border: none;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-top: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn:active {
|
|
|
+ opacity: 0.9;
|
|
|
+}
|
|
|
+
|
|
|
+/* 保留原有的其他样式以防需要 */
|
|
|
+.vh100 {
|
|
|
+ min-height: 100vh;
|
|
|
+ background:#c94545;
|
|
|
+}
|
|
|
+
|
|
|
.flex { display: flex; }
|
|
|
.between { justify-content: space-between; }
|
|
|
.alcenter { align-items: center; }
|
|
@@ -281,58 +371,4 @@ export default {
|
|
|
color: #333;
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
-
|
|
|
-.form-container {
|
|
|
- padding: 0 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.form-item {
|
|
|
- background: #fff;
|
|
|
- padding: 18px;
|
|
|
-}
|
|
|
-
|
|
|
-.form-label {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.form-input {
|
|
|
- width: 100%;
|
|
|
- height: 44px;
|
|
|
- border: none;
|
|
|
- background: #fff;
|
|
|
- font-size: 14px;
|
|
|
- padding: 0;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.form-input::placeholder {
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.form-input:focus {
|
|
|
- outline: none;
|
|
|
- border-bottom-color: #ed4b39;
|
|
|
-}
|
|
|
-
|
|
|
-.submit-btn {
|
|
|
- width: 60%;
|
|
|
- height: 44px;
|
|
|
- background: #FF6B6B;
|
|
|
- border-radius: 22px;
|
|
|
- border: none;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- margin-top: 30px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.submit-btn:active {
|
|
|
- opacity: 0.9;
|
|
|
-
|
|
|
-}
|
|
|
</style>
|