diff --git a/src/assets/renzheng.png b/src/assets/renzheng.png
new file mode 100644
index 0000000..9320589
Binary files /dev/null and b/src/assets/renzheng.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index 797577c..ce56605 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -191,6 +191,18 @@ const routes: RouteRecordRaw[] = [
             component: () =>
               import("@/views/admin/account/realnameAuth/index.vue"),
           },
+          {
+            path: "realnameAuthTrue",
+            name: "realnameAuthTrue",
+            component: () =>
+              import("@/views/admin/account/realnameAuthTrue/index.vue"),
+          },
+          {
+            path: "realnameAuthBusiness",
+            name: "realnameAuthBusiness",
+            component: () =>
+              import("@/views/admin/account/realnameAuthBusiness/index.vue"),
+          },
           {
             path: "enterRealAuth",
             name: "EnterRealAuth",
@@ -220,6 +232,18 @@ const routes: RouteRecordRaw[] = [
             component: () =>
               import("@/views/admin/account/msgCenter/index.vue"),
           },
+          {
+            path: "bankCard",
+            name: "bankCard",
+            component: () =>
+              import("@/views/admin/account/bankCard/index.vue"),
+          },
+          {
+            path: "invoices",
+            name: "invoices",
+            component: () =>
+              import("@/views/admin/account/invoices/index.vue"),
+          },
           {
             path: "image",
             name: "Image",
diff --git a/src/views/admin/account/accountSet/index.vue b/src/views/admin/account/accountSet/index.vue
index 651693b..b70c80e 100644
--- a/src/views/admin/account/accountSet/index.vue
+++ b/src/views/admin/account/accountSet/index.vue
@@ -28,7 +28,12 @@
             </a-col>
             <a-col :span="24">
                 <a-card title="安全设置">
-                    <div class="info"><span>手机号</span><span>17044054908</span></div>
+                    <div class="info" style="display: flex;justify-content: space-between;">
+                        <div>
+                            <span style="margin-right: 25px;">手机号</span><span>{{ currentPhone }}</span>
+                        </div>
+                        <div style="color:#1677ff;" @click="handleModifyPhone">修改</div>
+                    </div>
                     <div class="info" style="display: flex;justify-content: space-between;">
                         <div>
                             <span style="margin-right: 25px;">绑定微信</span><span style="color: #666;">未绑定微信</span>
@@ -39,54 +44,787 @@
                         <div>
                             <span style="margin-right: 25px;">登录密码</span><span>********</span>
                         </div>
-                        <div style="color:#1677ff;">修改</div>
+                        <div style="color:#1677ff;" @click="handleModifyPassword">修改</div>
                     </div>
                 </a-card>
             </a-col>
         </a-row>
+
+        <!-- 第一步：身份验证对话框（共用） -->
+        <a-modal
+            v-model:visible="verifyVisible"
+            title="身份验证"
+            @ok="handleVerify"
+            @cancel="handleCancelVerify"
+            :maskClosable="false"
+            :width="480"
+            :ok-button-props="{ disabled: !isVerificationValid }"
+            :confirmLoading="verifying"
+            okText="下一步"
+        >
+            <div class="verify-content">
+                <!-- 安全提示 -->
+                <div class="security-tip">
+                    <!-- <div class="security-icon">🔒</div> -->
+                    <div class="security-text">
+                        <div class="security-title">为确保账号安全，请您本人操作进行身份验证</div>
+                        <div class="security-subtitle">我们将向您绑定的手机发送验证码</div>
+                    </div>
+                </div>
+
+                <!-- 手机号信息 -->
+                <div class="phone-info">
+                    <div class="phone-label">验证手机号</div>
+                    <div class="phone-number">
+                        <!-- <span class="phone-icon">📱</span> -->
+                        <span class="phone-text">{{ maskedPhone }}</span>
+                    </div>
+                </div>
+
+                <!-- 验证码输入 -->
+                <div class="verification-code">
+                    <div class="code-label">验证码</div>
+                    <div class="code-input-group">
+                        <a-input
+                            v-model:value="verificationCode"
+                            placeholder="请输入6位验证码"
+                            :maxlength="6"
+                            @input="handleCodeInput"
+                            class="code-input"
+                        />
+                        <a-button
+                            type="link"
+                            @click="sendVerificationCode"
+                            :disabled="countdown > 0 || sendingCode"
+                            class="send-code-btn"
+                        >
+                            {{ countdownText }}
+                        </a-button>
+                    </div>
+                    <div v-if="codeError" class="code-error">{{ codeError }}</div>
+                </div>
+
+                <!-- 发送状态 -->
+                <div v-if="sendStatus" class="send-status" :class="{ 'send-success': sendStatus === '发送成功' }">
+                    {{ sendStatus }}
+                </div>
+            </div>
+        </a-modal>
+
+        <!-- 第二步：修改手机号对话框 -->
+        <a-modal
+            v-model:visible="changePhoneVisible"
+            title="修改手机号"
+            @ok="handleChangePhone"
+            @cancel="handleCancelChangePhone"
+            :maskClosable="false"
+            :width="480"
+            :ok-button-props="{ disabled: !isChangeValid }"
+            :confirmLoading="changing"
+        >
+            <div class="change-phone-content">
+                <!-- 安全提示 -->
+                <div class="security-tip">
+                    <!-- <div class="security-icon">🔒</div> -->
+                    <div class="security-text">
+                        <div class="security-title">为确保账号安全，请您本人操作进行手机号的修改</div>
+                    </div>
+                </div>
+
+                <!-- 新手机号输入 -->
+                <div class="new-phone-section">
+                    <div class="input-label">新手机号</div>
+                    <a-input
+                        v-model:value="newPhoneNumber"
+                        placeholder="请输入新手机号"
+                        :maxlength="11"
+                        @input="handlePhoneInput"
+                        class="phone-input"
+                    />
+                    <div v-if="phoneError" class="input-error">{{ phoneError }}</div>
+                </div>
+
+                <!-- 新手机号验证码 -->
+                <div class="verification-code">
+                    <div class="code-label">验证码</div>
+                    <div class="code-input-group">
+                        <a-input
+                            v-model:value="newVerificationCode"
+                            placeholder="请输入6位验证码"
+                            :maxlength="6"
+                            @input="handleNewCodeInput"
+                            class="code-input"
+                        />
+                        <a-button
+                            type="link"
+                            @click="sendNewVerificationCode"
+                            :disabled="newCountdown > 0 || sendingNewCode"
+                            class="send-code-btn"
+                        >
+                            {{ newCountdownText }}
+                        </a-button>
+                    </div>
+                    <div v-if="newCodeError" class="input-error">{{ newCodeError }}</div>
+                </div>
+            </div>
+        </a-modal>
+
+        <!-- 修改密码对话框 -->
+        <a-modal
+            v-model:visible="changePasswordVisible"
+            title="修改密码"
+            @ok="handleChangePassword"
+            @cancel="handleCancelChangePassword"
+            :maskClosable="false"
+            :width="480"
+            :ok-button-props="{ disabled: !isPasswordValid }"
+            :confirmLoading="changingPassword"
+        >
+            <div class="change-password-content">
+                <!-- 安全提示 -->
+                <div class="security-tip">
+                    <!-- <div class="security-icon">🔒</div> -->
+                    <div class="security-text">
+                        <div class="security-title">为确保账号安全，请设置新的登录密码</div>
+                    </div>
+                </div>
+
+                <!-- 原密码输入 -->
+                <div class="password-section">
+                    <div class="input-label">原密码</div>
+                    <a-input-password
+                        v-model:value="oldPassword"
+                        placeholder="请输入原密码"
+                        @input="handleOldPasswordInput"
+                        class="password-input"
+                        :visibilityToggle="true"
+                    />
+                    <div v-if="oldPasswordError" class="input-error">{{ oldPasswordError }}</div>
+                </div>
+
+                <!-- 新密码输入 -->
+                <div class="password-section">
+                    <div class="input-label">新密码</div>
+                    <a-input-password
+                        v-model:value="newPassword"
+                        placeholder="请输入新密码（6-20位字符）"
+                        @input="handleNewPasswordInput"
+                        class="password-input"
+                        :visibilityToggle="true"
+                    />
+                    <div v-if="newPasswordError" class="input-error">{{ newPasswordError }}</div>
+                    <div class="password-tip">
+                        <div class="tip-item" :class="{ 'valid': passwordStrength.lengthValid }">
+                            <span class="tip-icon">{{ passwordStrength.lengthValid ? '✓' : '○' }}</span>
+                            <span>6-20位字符</span>
+                        </div>
+                        <div class="tip-item" :class="{ 'valid': passwordStrength.hasLetter }">
+                            <span class="tip-icon">{{ passwordStrength.hasLetter ? '✓' : '○' }}</span>
+                            <span>至少包含字母</span>
+                        </div>
+                        <div class="tip-item" :class="{ 'valid': passwordStrength.hasNumber }">
+                            <span class="tip-icon">{{ passwordStrength.hasNumber ? '✓' : '○' }}</span>
+                            <span>至少包含数字</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 确认密码输入 -->
+                <div class="password-section">
+                    <div class="input-label">确认密码</div>
+                    <a-input-password
+                        v-model:value="confirmPassword"
+                        placeholder="请再次输入新密码"
+                        @input="handleConfirmPasswordInput"
+                        class="password-input"
+                        :visibilityToggle="true"
+                    />
+                    <div v-if="confirmPasswordError" class="input-error">{{ confirmPasswordError }}</div>
+                </div>
+            </div>
+        </a-modal>
     </div>
 </template>
+
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed, onUnmounted, watch } from 'vue';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { message, Modal as AModal, Input as AInput, InputPassword as AInputPassword, Button as AButton } from 'ant-design-vue';
+
 const loading = ref(false);
 const imageUrl = ref<string | null>("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
 const fileList = ref<any[]>([{ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' }]);
+
+// 操作类型：修改手机号或修改密码
+const operationType = ref<'phone' | 'password'>('phone');
+
+// 第一步：身份验证相关状态（共用）
+const verifyVisible = ref(false);
+const verificationCode = ref('');
+const countdown = ref(0);
+const sendingCode = ref(false);
+const sendStatus = ref('');
+const codeError = ref('');
+const verifying = ref(false);
+
+// 第二步：修改手机号相关状态
+const changePhoneVisible = ref(false);
+const newPhoneNumber = ref('');
+const newVerificationCode = ref('');
+const newCountdown = ref(0);
+const sendingNewCode = ref(false);
+const newCodeError = ref('');
+const phoneError = ref('');
+const changing = ref(false);
+
+// 修改密码相关状态
+const changePasswordVisible = ref(false);
+const oldPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const oldPasswordError = ref('');
+const newPasswordError = ref('');
+const confirmPasswordError = ref('');
+const changingPassword = ref(false);
+
+// 用户当前绑定的手机号
+const currentPhone = ref('17044054908');
+
+// 计算属性
+const maskedPhone = computed(() => {
+    const phone = currentPhone.value;
+    if (phone.length > 7) {
+        return phone.slice(0, 3) + '****' + phone.slice(7);
+    }
+    return phone;
+});
+
+const countdownText = computed(() => {
+    if (countdown.value > 0) {
+        return `${countdown.value}秒后重试`;
+    }
+    return '获取验证码';
+});
+
+const newCountdownText = computed(() => {
+    if (newCountdown.value > 0) {
+        return `${newCountdown.value}秒后重试`;
+    }
+    return '获取验证码';
+});
+
+const isVerificationValid = computed(() => {
+    return verificationCode.value.length === 6 && /^\d+$/.test(verificationCode.value);
+});
+
+const isChangeValid = computed(() => {
+    return newPhoneNumber.value.length === 11 && 
+           /^1[3-9]\d{9}$/.test(newPhoneNumber.value) &&
+           newVerificationCode.value.length === 6 &&
+           /^\d+$/.test(newVerificationCode.value);
+});
+
+// 密码强度验证
+const passwordStrength = computed(() => {
+    const lengthValid = newPassword.value.length >= 6 && newPassword.value.length <= 20;
+    const hasLetter = /[a-zA-Z]/.test(newPassword.value);
+    const hasNumber = /\d/.test(newPassword.value);
+    
+    return {
+        lengthValid,
+        hasLetter,
+        hasNumber
+    };
+});
+
+const isPasswordValid = computed(() => {
+    const isOldPasswordValid = oldPassword.value.length >= 6;
+    const isNewPasswordValid = passwordStrength.value.lengthValid && 
+                              passwordStrength.value.hasLetter && 
+                              passwordStrength.value.hasNumber;
+    const isConfirmValid = confirmPassword.value === newPassword.value && confirmPassword.value.length > 0;
+    
+    return isOldPasswordValid && isNewPasswordValid && isConfirmValid;
+});
+
+// 监听密码输入变化
+watch(newPassword, (newVal) => {
+    if (newVal.length > 0 && newVal.length < 6) {
+        newPasswordError.value = '密码长度不能少于6位';
+    } else if (newVal.length > 20) {
+        newPasswordError.value = '密码长度不能超过20位';
+    } else {
+        newPasswordError.value = '';
+    }
+    
+    // 更新确认密码错误提示
+    if (confirmPassword.value && confirmPassword.value !== newVal) {
+        confirmPasswordError.value = '两次输入的密码不一致';
+    } else {
+        confirmPasswordError.value = '';
+    }
+});
+
+watch(confirmPassword, (newVal) => {
+    if (newVal && newVal !== newPassword.value) {
+        confirmPasswordError.value = '两次输入的密码不一致';
+    } else {
+        confirmPasswordError.value = '';
+    }
+});
+
+// 倒计时定时器
+let timer: NodeJS.Timeout | null = null;
+let newTimer: NodeJS.Timeout | null = null;
+
+// 清理定时器
+onUnmounted(() => {
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+    if (newTimer) {
+        clearInterval(newTimer);
+        newTimer = null;
+    }
+});
+
 const beforeUpload = (file: File) => {
     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
     if (!isJpgOrPng) {
-        alert('You can only upload JPG/PNG file!');
+        message.error('只能上传JPG/PNG格式的图片!');
+        return false;
     }
     const isLt2M = file.size / 1024 / 1024 < 2;
     if (!isLt2M) {
-        alert('Image must smaller than 2MB!');
+        message.error('图片大小不能超过2MB!');
+        return false;
     }
     return isJpgOrPng && isLt2M;
 };
+
 const handleChange = (info: any) => {
     if (info.file.status === 'uploading') {
         loading.value = true;
         return;
     }
     if (info.file.status === 'done') {
-        // Get this url from response in real world.
         const reader = new FileReader();
         reader.addEventListener('load', () => {
             imageUrl.value = reader.result as string;
             loading.value = false;
+            message.success('头像上传成功');
         });
         reader.readAsDataURL(info.file.originFileObj);
     }
 };
+
+// 修改手机号按钮点击
+const handleModifyPhone = () => {
+    operationType.value = 'phone';
+    showPhoneVerifyDialog();
+};
+
+// 修改密码按钮点击
+const handleModifyPassword = () => {
+    operationType.value = 'password';
+    showPhoneVerifyDialog();
+};
+
+// 显示身份验证对话框（共用）
+const showPhoneVerifyDialog = () => {
+    // 重置验证状态
+    verificationCode.value = '';
+    codeError.value = '';
+    sendStatus.value = '';
+    verifyVisible.value = true;
+};
+
+// 取消身份验证
+const handleCancelVerify = () => {
+    verifyVisible.value = false;
+    // 重置倒计时
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+    countdown.value = 0;
+};
+
+// 验证码输入处理
+const handleCodeInput = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+    // 只允许数字
+    const numbersOnly = value.replace(/\D/g, '');
+    verificationCode.value = numbersOnly.slice(0, 6);
+    
+    // 清除错误提示
+    if (codeError.value) {
+        codeError.value = '';
+    }
+};
+
+// 发送当前手机号验证码
+const sendVerificationCode = async () => {
+    if (countdown.value > 0 || sendingCode.value) return;
+    
+    sendingCode.value = true;
+    sendStatus.value = '发送中...';
+    codeError.value = '';
+    
+    try {
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        // 假设发送成功
+        sendStatus.value = '发送成功';
+        countdown.value = 60;
+        
+        // 开始倒计时
+        timer = setInterval(() => {
+            countdown.value--;
+            if (countdown.value <= 0) {
+                if (timer) {
+                    clearInterval(timer);
+                    timer = null;
+                }
+            }
+        }, 1000);
+        
+        message.success('验证码已发送');
+    } catch (error) {
+        codeError.value = '发送失败，请稍后重试';
+        sendStatus.value = '';
+    } finally {
+        sendingCode.value = false;
+    }
+};
+
+// 执行身份验证，成功后根据操作类型跳转到相应的下一步
+const handleVerify = async () => {
+    if (!isVerificationValid.value) {
+        codeError.value = '请输入有效的6位验证码';
+        return;
+    }
+    
+    verifying.value = true;
+    
+    try {
+        // 模拟API验证
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        
+        // 假设验证成功
+        message.success('身份验证成功');
+        
+        // 关闭身份验证对话框
+        verifyVisible.value = false;
+        
+        // 根据操作类型打开相应的下一步对话框
+        if (operationType.value === 'phone') {
+            showChangePhoneDialog();
+        } else if (operationType.value === 'password') {
+            showChangePasswordDialog();
+        }
+        
+    } catch (error) {
+        codeError.value = '验证码错误，请重新输入';
+        verificationCode.value = '';
+    } finally {
+        verifying.value = false;
+    }
+};
+
+// 显示修改手机号对话框
+const showChangePhoneDialog = () => {
+    // 重置状态
+    newPhoneNumber.value = '';
+    newVerificationCode.value = '';
+    newCodeError.value = '';
+    phoneError.value = '';
+    changePhoneVisible.value = true;
+};
+
+// 取消修改手机号
+const handleCancelChangePhone = () => {
+    changePhoneVisible.value = false;
+    // 重置倒计时
+    if (newTimer) {
+        clearInterval(newTimer);
+        newTimer = null;
+    }
+    newCountdown.value = 0;
+};
+
+// 新手机号输入处理
+const handlePhoneInput = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+    // 只允许数字
+    const numbersOnly = value.replace(/\D/g, '');
+    newPhoneNumber.value = numbersOnly.slice(0, 11);
+    
+    // 清除错误提示
+    if (phoneError.value) {
+        phoneError.value = '';
+    }
+    if (newCodeError.value) {
+        newCodeError.value = '';
+    }
+};
+
+// 新验证码输入处理
+const handleNewCodeInput = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+    // 只允许数字
+    const numbersOnly = value.replace(/\D/g, '');
+    newVerificationCode.value = numbersOnly.slice(0, 6);
+    
+    // 清除错误提示
+    if (newCodeError.value) {
+        newCodeError.value = '';
+    }
+};
+
+// 发送新手机号验证码
+const sendNewVerificationCode = async () => {
+    // 验证手机号格式
+    if (!newPhoneNumber.value || newPhoneNumber.value.length !== 11) {
+        phoneError.value = '请输入11位手机号';
+        return;
+    }
+    
+    if (!/^1[3-9]\d{9}$/.test(newPhoneNumber.value)) {
+        phoneError.value = '请输入正确的手机号格式';
+        return;
+    }
+    
+    if (newPhoneNumber.value === currentPhone.value) {
+        phoneError.value = '新手机号不能与当前手机号相同';
+        return;
+    }
+    
+    if (newCountdown.value > 0 || sendingNewCode.value) return;
+    
+    sendingNewCode.value = true;
+    newCodeError.value = '';
+    
+    try {
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        // 假设发送成功
+        newCountdown.value = 60;
+        
+        // 开始倒计时
+        newTimer = setInterval(() => {
+            newCountdown.value--;
+            if (newCountdown.value <= 0) {
+                if (newTimer) {
+                    clearInterval(newTimer);
+                    newTimer = null;
+                }
+            }
+        }, 1000);
+        
+        message.success('验证码已发送到新手机号');
+    } catch (error) {
+        newCodeError.value = '发送失败，请稍后重试';
+    } finally {
+        sendingNewCode.value = false;
+    }
+};
+
+// 执行手机号修改
+const handleChangePhone = async () => {
+    if (!isChangeValid.value) {
+        // 详细错误提示
+        if (!newPhoneNumber.value || newPhoneNumber.value.length !== 11) {
+            phoneError.value = '请输入11位手机号';
+            return;
+        }
+        if (!/^1[3-9]\d{9}$/.test(newPhoneNumber.value)) {
+            phoneError.value = '请输入正确的手机号格式';
+            return;
+        }
+        if (newPhoneNumber.value === currentPhone.value) {
+            phoneError.value = '新手机号不能与当前手机号相同';
+            return;
+        }
+        if (!newVerificationCode.value || newVerificationCode.value.length !== 6) {
+            newCodeError.value = '请输入6位验证码';
+            return;
+        }
+        return;
+    }
+    
+    changing.value = true;
+    
+    try {
+        // 模拟API调用修改手机号
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        
+        // 更新当前手机号
+        currentPhone.value = newPhoneNumber.value;
+        
+        // 关闭对话框
+        changePhoneVisible.value = false;
+        
+        // 重置所有状态
+        resetAllStates();
+        
+        message.success('手机号修改成功');
+        
+    } catch (error) {
+        newCodeError.value = '修改失败，请稍后重试';
+    } finally {
+        changing.value = false;
+    }
+};
+
+// 显示修改密码对话框
+const showChangePasswordDialog = () => {
+    // 重置状态
+    oldPassword.value = '';
+    newPassword.value = '';
+    confirmPassword.value = '';
+    oldPasswordError.value = '';
+    newPasswordError.value = '';
+    confirmPasswordError.value = '';
+    changePasswordVisible.value = true;
+};
+
+// 取消修改密码
+const handleCancelChangePassword = () => {
+    changePasswordVisible.value = false;
+};
+
+// 原密码输入处理
+const handleOldPasswordInput = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+    oldPassword.value = value;
+    
+    // 清除错误提示
+    if (oldPasswordError.value) {
+        oldPasswordError.value = '';
+    }
+};
+
+// 新密码输入处理
+const handleNewPasswordInput = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+    newPassword.value = value;
+    
+    // 清除错误提示
+    if (newPasswordError.value) {
+        newPasswordError.value = '';
+    }
+};
+
+// 确认密码输入处理
+const handleConfirmPasswordInput = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+    confirmPassword.value = value;
+    
+    // 清除错误提示
+    if (confirmPasswordError.value) {
+        confirmPasswordError.value = '';
+    }
+};
+
+// 执行密码修改
+const handleChangePassword = async () => {
+    if (!isPasswordValid.value) {
+        // 详细错误提示
+        if (!oldPassword.value || oldPassword.value.length < 6) {
+            oldPasswordError.value = '请输入原密码';
+            return;
+        }
+        if (!newPassword.value || newPassword.value.length < 6) {
+            newPasswordError.value = '请输入新密码';
+            return;
+        }
+        if (!passwordStrength.value.hasLetter || !passwordStrength.value.hasNumber) {
+            newPasswordError.value = '密码必须包含字母和数字';
+            return;
+        }
+        if (!confirmPassword.value) {
+            confirmPasswordError.value = '请确认密码';
+            return;
+        }
+        if (confirmPassword.value !== newPassword.value) {
+            confirmPasswordError.value = '两次输入的密码不一致';
+            return;
+        }
+        return;
+    }
+    
+    changingPassword.value = true;
+    
+    try {
+        // 模拟API调用修改密码
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        
+        // 关闭对话框
+        changePasswordVisible.value = false;
+        
+        // 重置所有状态
+        resetPasswordStates();
+        
+        message.success('密码修改成功');
+        
+    } catch (error) {
+        oldPasswordError.value = '原密码错误或修改失败';
+    } finally {
+        changingPassword.value = false;
+    }
+};
+
+// 重置所有状态
+const resetAllStates = () => {
+    // 身份验证状态重置
+    verificationCode.value = '';
+    codeError.value = '';
+    sendStatus.value = '';
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+    countdown.value = 0;
+    
+    // 修改手机号状态重置
+    newPhoneNumber.value = '';
+    newVerificationCode.value = '';
+    newCodeError.value = '';
+    phoneError.value = '';
+    if (newTimer) {
+        clearInterval(newTimer);
+        newTimer = null;
+    }
+    newCountdown.value = 0;
+};
+
+// 重置密码相关状态
+const resetPasswordStates = () => {
+    oldPassword.value = '';
+    newPassword.value = '';
+    confirmPassword.value = '';
+    oldPasswordError.value = '';
+    newPasswordError.value = '';
+    confirmPasswordError.value = '';
+};
 </script>
+
 <style scoped lang="scss">
 .avatar-uploader .ant-upload {
     width: 128px;
     height: 128px;
     border-radius: 50% !important;
-    /* 改为 50% */
     overflow: hidden;
-    /* 防止内部图片溢出 */
     border: none !important;
     background: none !important;
 }
@@ -95,9 +833,7 @@ const handleChange = (info: any) => {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    /* 保持比例并填满 */
     border-radius: 50%;
-    /* 图片本身也要圆 */
 }
 
 .ant-upload-select-picture-card i {
@@ -116,9 +852,237 @@ const handleChange = (info: any) => {
     padding: 10px 20px;
     border-bottom: 1px solid #f0f0f0;
 
-    // gap: 50px;
     span:first-child {
         width: 80px;
     }
+    
+    div[style*="color:#1677ff"] {
+        cursor: pointer;
+        transition: color 0.3s;
+        
+        &:hover {
+            color: #0958d9;
+        }
+    }
+}
+
+/* 身份验证对话框样式 */
+.verify-content {
+    padding: 8px 0;
+}
+
+.security-tip {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #f6f9ff;
+    border-radius: 8px;
+    border: 1px solid #e6f0ff;
+}
+
+.security-icon {
+    font-size: 20px;
+    line-height: 1.4;
+}
+
+.security-text {
+    flex: 1;
+}
+
+.security-title {
+    color: #1890ff;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.security-subtitle {
+    color: #595959;
+    font-size: 13px;
+}
+
+.phone-info {
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #fafafa;
+    border-radius: 6px;
+    border: 1px solid #f0f0f0;
+}
+
+.phone-label {
+    color: #595959;
+    font-size: 13px;
+    margin-bottom: 8px;
+}
+
+.phone-number {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.phone-icon {
+    font-size: 16px;
+}
+
+.phone-text {
+    color: #262626;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.verification-code {
+    margin-bottom: 16px;
+}
+
+.code-label {
+    color: #262626;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.code-input-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.code-input {
+    flex: 1;
+}
+
+:deep(.code-input .ant-input) {
+    height: 40px;
+    font-size: 14px;
+    letter-spacing: 2px;
+}
+
+.send-code-btn {
+    width: 100px;
+    height: 40px;
+    padding: 0;
+    white-space: nowrap;
+}
+
+.send-code-btn:disabled {
+    color: #bfbfbf;
+}
+
+.code-error {
+    color: #ff4d4f;
+    font-size: 12px;
+    margin-top: 4px;
+    min-height: 20px;
+}
+
+.send-status {
+    color: #595959;
+    font-size: 12px;
+    text-align: center;
+    margin-top: 8px;
+    min-height: 20px;
+}
+
+.send-success {
+    color: #52c41a;
+}
+
+/* 修改手机号对话框样式 */
+.change-phone-content {
+    padding: 8px 0;
+}
+
+.new-phone-section {
+    margin-bottom: 24px;
+}
+
+.input-label {
+    color: #262626;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.phone-input {
+    width: 100%;
+}
+
+:deep(.phone-input .ant-input) {
+    height: 40px;
+    font-size: 14px;
+}
+
+.input-error {
+    color: #ff4d4f;
+    font-size: 12px;
+    margin-top: 4px;
+    min-height: 20px;
+}
+
+/* 修改密码对话框样式 */
+.change-password-content {
+    padding: 8px 0;
+}
+
+.password-section {
+    margin-bottom: 20px;
+}
+
+.password-input {
+    width: 100%;
+}
+
+:deep(.password-input .ant-input) {
+    height: 40px;
+    font-size: 14px;
+}
+
+.password-tip {
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: #fafafa;
+    border-radius: 4px;
+    border: 1px solid #f0f0f0;
+}
+
+.tip-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #8c8c8c;
+    margin-bottom: 4px;
+    
+    &:last-child {
+        margin-bottom: 0;
+    }
+    
+    &.valid {
+        color: #52c41a;
+    }
+}
+
+.tip-icon {
+    font-size: 10px;
+    width: 14px;
+    height: 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+    .code-input-group {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .send-code-btn {
+        width: 100%;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/admin/account/bankCard/index.vue b/src/views/admin/account/bankCard/index.vue
new file mode 100644
index 0000000..3d37fcc
--- /dev/null
+++ b/src/views/admin/account/bankCard/index.vue
@@ -0,0 +1,712 @@
+<template>
+  <div class="bank-card-container">
+    <!-- 页面标题 -->
+    <div class="header">
+      <h2>我的银行卡</h2>
+      <span class="subtitle">只能绑定一张银行卡</span>
+    </div>
+
+    <!-- 状态判断：已绑定银行卡或未绑定 -->
+    <div v-if="hasBoundCard" class="bound-card-section">
+      <!-- 已绑定银行卡展示区域 -->
+      <div class="card-display">
+        <div class="card-header">
+          <div class="bank-icon">
+            <img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" alt="银联" />
+          </div>
+          <div class="card-number">{{ formatCardNumber(boundCard.cardNumber) }}</div>
+        </div>
+        
+        <div class="card-details">
+          <div class="detail-item">
+            <span class="label">持卡人姓名：</span>
+            <span class="value">{{ boundCard.realName }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">开户行：</span>
+            <span class="value">{{ boundCard.bankName }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">手机号：</span>
+            <span class="value">{{ boundCard.phone }}</span>
+          </div>
+        </div>
+        
+        <div class="card-actions">
+          <a-button type="link" danger @click="showUnbindModal">解绑</a-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 未绑定银行卡时显示添加银行卡区域 -->
+    <div v-else class="add-card-section">
+      <div class="add-card-box" @click="showAddModal">
+        <div class="add-icon">
+          <plus-outlined />
+        </div>
+        <div class="add-text">添加银行卡</div>
+      </div>
+    </div>
+
+    <!-- 添加银行卡对话框 -->
+    <a-modal
+      v-model:visible="addModalVisible"
+      title="添加银行卡"
+      @ok="handleAddCard"
+      @cancel="handleAddCancel"
+      :confirm-loading="addLoading"
+      :width="500"
+      :ok-text="'绑定'"
+      :cancel-text="'取消'"
+    >
+      <a-form
+        ref="addFormRef"
+        :model="addFormState"
+        :rules="addFormRules"
+        layout="vertical"
+      >
+        <a-form-item label="真实姓名" name="realName">
+          <a-input
+            v-model:value="addFormState.realName"
+            placeholder="请输入持卡人真实姓名"
+            size="large"
+          />
+        </a-form-item>
+        
+        <a-form-item label="银行卡号" name="cardNumber">
+          <a-input
+            v-model:value="addFormState.cardNumber"
+            placeholder="请输入银行卡号"
+            size="large"
+            :maxlength="19"
+            @input="formatCardInput"
+          />
+        </a-form-item>
+        
+        <a-form-item label="开户行" name="bankName">
+          <a-select
+            v-model:value="addFormState.bankName"
+            placeholder="请选择开户行"
+            size="large"
+            :options="bankOptions"
+            show-search
+          />
+        </a-form-item>
+        
+        <a-form-item name="agreement">
+          <a-checkbox v-model:checked="addFormState.agreement">
+            绑定银行卡前，我已阅读并确认
+            <a href="#" @click.prevent="showAgreement">《银行卡绑定协议》</a>
+          </a-checkbox>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 解绑银行卡对话框 -->
+    <a-modal
+      v-model:visible="unbindModalVisible"
+      title="解绑银行卡"
+      @ok="handleUnbindCard"
+      @cancel="handleUnbindCancel"
+      :confirm-loading="unbindLoading"
+      :width="500"
+      :ok-text="'确认解绑'"
+      :cancel-text="'取消'"
+    >
+      <div class="unbind-info">
+        <div class="info-item">
+          <span class="label">持卡人姓名：</span>
+          <span class="value">{{ boundCard.realName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">银行卡号：</span>
+          <span class="value">{{ formatCardNumber(boundCard.cardNumber) }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">开户行：</span>
+          <span class="value">{{ boundCard.bankName }}</span>
+        </div>
+        <a-divider />
+      </div>
+      
+      <a-form
+        ref="unbindFormRef"
+        :model="unbindFormState"
+        :rules="unbindFormRules"
+        layout="vertical"
+      >
+        <a-form-item label="手机号码" name="phone">
+          <a-input
+            v-model:value="unbindFormState.phone"
+            placeholder="请输入银行预留手机号"
+            size="large"
+            :maxlength="11"
+          />
+        </a-form-item>
+        
+        <a-form-item label="短信验证码" name="smsCode">
+          <div class="sms-code-input">
+            <a-input
+              v-model:value="unbindFormState.smsCode"
+              placeholder="请输入短信验证码"
+              size="large"
+              :maxlength="6"
+            />
+            <a-button
+              type="primary"
+              :disabled="countdown > 0"
+              @click="sendSmsCode"
+              class="sms-button"
+            >
+              {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
+            </a-button>
+          </div>
+        </a-form-item>
+        
+        <a-form-item name="agreement">
+          <a-checkbox v-model:checked="unbindFormState.agreement">
+            解绑银行卡前，我已阅读并确认
+            <a href="#" @click.prevent="showUnbindAgreement">《银行卡解绑协议》</a>
+          </a-checkbox>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { PlusOutlined } from '@ant-design/icons-vue'
+import { message, Modal } from 'ant-design-vue'
+
+// 已绑定银行卡数据 - 初始为空
+const boundCard = ref(null)
+
+// 是否已绑定银行卡 - 初始为false
+const hasBoundCard = computed(() => {
+  return boundCard.value !== null && boundCard.value !== undefined
+})
+
+// 银行选项
+const bankOptions = ref([
+  { label: '中国工商银行', value: '中国工商银行' },
+  { label: '中国建设银行', value: '中国建设银行' },
+  { label: '中国农业银行', value: '中国农业银行' },
+  { label: '中国银行', value: '中国银行' },
+  { label: '交通银行', value: '交通银行' },
+  { label: '招商银行', value: '招商银行' },
+  { label: '中国邮政储蓄银行', value: '中国邮政储蓄银行' },
+  { label: '中信银行', value: '中信银行' },
+  { label: '光大银行', value: '光大银行' },
+  { label: '华夏银行', value: '华夏银行' },
+  { label: '民生银行', value: '民生银行' },
+  { label: '兴业银行', value: '兴业银行' },
+  { label: '浦发银行', value: '浦发银行' },
+  { label: '平安银行', value: '平安银行' },
+  { label: '广发银行', value: '广发银行' },
+])
+
+// 添加银行卡对话框状态
+const addModalVisible = ref(false)
+const addLoading = ref(false)
+const addFormRef = ref()
+const addFormState = reactive({
+  realName: '',
+  cardNumber: '',
+  bankName: '',
+  agreement: false
+})
+
+// 添加银行卡表单验证规则
+const addFormRules = {
+  realName: [
+    { required: true, message: '请输入真实姓名', trigger: 'blur' },
+    { pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '请输入2-10位中文字符', trigger: 'blur' }
+  ],
+  cardNumber: [
+    { required: true, message: '请输入银行卡号', trigger: 'blur' },
+    { 
+      validator: (_, value) => {
+        const cleanValue = value.replace(/\s+/g, '')
+        return /^[0-9]{16,19}$/.test(cleanValue) ? 
+          Promise.resolve() : 
+          Promise.reject('银行卡号格式不正确（16-19位数字）')
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  bankName: [
+    { required: true, message: '请选择开户行', trigger: 'change' }
+  ],
+  agreement: [
+    { validator: (_, value) => value ? Promise.resolve() : Promise.reject('请阅读并同意协议'), trigger: 'change' }
+  ]
+}
+
+// 解绑银行卡对话框状态
+const unbindModalVisible = ref(false)
+const unbindLoading = ref(false)
+const unbindFormRef = ref()
+const unbindFormState = reactive({
+  phone: '',
+  smsCode: '',
+  agreement: false
+})
+
+// 短信验证码倒计时
+const countdown = ref(0)
+
+// 解绑银行卡表单验证规则
+const unbindFormRules = {
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
+  ],
+  smsCode: [
+    { required: true, message: '请输入短信验证码', trigger: 'blur' },
+    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
+  ],
+  agreement: [
+    { validator: (_, value) => value ? Promise.resolve() : Promise.reject('请阅读并同意协议'), trigger: 'change' }
+  ]
+}
+
+// 格式化银行卡号输入（每4位加空格）
+const formatCardInput = (e) => {
+  let value = e.target.value.replace(/\s+/g, '').replace(/[^\d]/g, '')
+  let formattedValue = ''
+  
+  for (let i = 0; i < value.length; i++) {
+    if (i > 0 && i % 4 === 0) {
+      formattedValue += ' '
+    }
+    formattedValue += value[i]
+  }
+  
+  addFormState.cardNumber = formattedValue
+}
+
+// 显示添加银行卡对话框
+const showAddModal = () => {
+  addModalVisible.value = true
+  // 重置表单
+  Object.assign(addFormState, {
+    realName: '',
+    cardNumber: '',
+    bankName: '',
+    agreement: false
+  })
+}
+
+// 显示解绑银行卡对话框
+const showUnbindModal = () => {
+  unbindModalVisible.value = true
+  // 重置表单
+  Object.assign(unbindFormState, {
+    phone: '',
+    smsCode: '',
+    agreement: false
+  })
+}
+
+// 处理添加银行卡
+const handleAddCard = () => {
+  addFormRef.value.validate().then(() => {
+    addLoading.value = true
+    
+    // 模拟API请求
+    setTimeout(() => {
+      // 清除空格，保存纯数字
+      const cleanCardNumber = addFormState.cardNumber.replace(/\s+/g, '')
+      
+      // 更新已绑定银行卡信息
+      boundCard.value = {
+        realName: addFormState.realName,
+        cardNumber: cleanCardNumber,
+        bankName: addFormState.bankName,
+        phone: '138****' + cleanCardNumber.substr(cleanCardNumber.length - 4) // 模拟手机号
+      }
+      
+      addModalVisible.value = false
+      addLoading.value = false
+      
+      message.success('银行卡绑定成功')
+    }, 1000)
+  }).catch(error => {
+    console.log('验证失败:', error)
+  })
+}
+
+// 处理解绑银行卡
+const handleUnbindCard = () => {
+  unbindFormRef.value.validate().then(() => {
+    unbindLoading.value = true
+    
+    // 模拟API请求
+    setTimeout(() => {
+      // 清除已绑定银行卡信息
+      boundCard.value = null
+      unbindModalVisible.value = false
+      unbindLoading.value = false
+      
+      message.success('银行卡解绑成功')
+    }, 1000)
+  }).catch(error => {
+    console.log('验证失败:', error)
+  })
+}
+
+// 发送短信验证码
+const sendSmsCode = () => {
+  if (!unbindFormState.phone) {
+    message.warning('请输入手机号码')
+    return
+  }
+  
+  if (!/^1[3-9]\d{9}$/.test(unbindFormState.phone)) {
+    message.warning('手机号格式不正确')
+    return
+  }
+  
+  // 模拟验证手机号是否匹配
+  const expectedPhone = boundCard.value.phone.replace(/\*/g, '')
+  const inputPhone = unbindFormState.phone
+  const lastFourDigits = boundCard.value.cardNumber.substr(boundCard.value.cardNumber.length - 4)
+  
+  if (inputPhone !== '138' + lastFourDigits) {
+    message.error('手机号与预留手机号不匹配')
+    return
+  }
+  
+  // 开始倒计时
+  countdown.value = 60
+  const timer = setInterval(() => {
+    countdown.value -= 1
+    if (countdown.value <= 0) {
+      clearInterval(timer)
+    }
+  }, 1000)
+  
+  // 模拟发送验证码（实际为123456）
+  message.success('验证码已发送，请注意查收（演示验证码：123456）')
+  unbindFormState.smsCode = '123456'
+}
+
+// 格式化银行卡号显示
+const formatCardNumber = (cardNumber) => {
+  if (!cardNumber) return ''
+  const cleanNumber = cardNumber.replace(/\s+/g, '')
+  const visibleDigits = 4
+  const maskedPart = '*'.repeat(cleanNumber.length - visibleDigits * 2)
+  const part1 = cleanNumber.substring(0, visibleDigits)
+  const part2 = cleanNumber.substring(cleanNumber.length - visibleDigits)
+  return `${part1} ${maskedPart} ${part2}`
+}
+
+// 取消添加银行卡
+const handleAddCancel = () => {
+  addModalVisible.value = false
+}
+
+// 取消解绑银行卡
+const handleUnbindCancel = () => {
+  unbindModalVisible.value = false
+}
+
+// 显示协议（示例）
+const showAgreement = () => {
+  Modal.info({
+    title: '银行卡绑定协议',
+    content: `
+      <div style="max-height: 400px; overflow-y: auto;">
+        <h4>一、总则</h4>
+        <p>1. 本协议旨在明确用户绑定银行卡的相关权利和义务。</p>
+        <p>2. 用户绑定银行卡前，应仔细阅读并理解本协议的全部内容。</p>
+        
+        <h4>二、用户义务</h4>
+        <p>1. 用户应确保绑定的银行卡为本人名下有效的银行卡。</p>
+        <p>2. 用户应妥善保管银行卡信息，不得泄露给他人。</p>
+        <p>3. 用户应确保提供的所有信息真实、准确、完整。</p>
+        
+        <h4>三、平台责任</h4>
+        <p>1. 平台应保障用户银行卡信息的安全。</p>
+        <p>2. 平台不得未经用户同意擅自使用银行卡信息。</p>
+        
+        <h4>四、风险提示</h4>
+        <p>1. 用户应自行承担因银行卡信息泄露造成的损失。</p>
+        <p>2. 如发现异常情况，应立即联系平台客服。</p>
+      </div>
+    `,
+    width: 600,
+    okText: '我已阅读并同意'
+  })
+}
+
+// 显示解绑协议（示例）
+const showUnbindAgreement = () => {
+  Modal.info({
+    title: '银行卡解绑协议',
+    content: `
+      <div style="max-height: 400px; overflow-y: auto;">
+        <h4>一、解绑须知</h4>
+        <p>1. 解绑银行卡将解除该银行卡与账户的绑定关系。</p>
+        <p>2. 解绑后，该银行卡将无法用于账户的相关操作。</p>
+        
+        <h4>二、解绑条件</h4>
+        <p>1. 账户内无正在进行中的交易。</p>
+        <p>2. 账户余额为零（如有余额需先提现）。</p>
+        <p>3. 无未完成的订单或服务。</p>
+        
+        <h4>三、解绑流程</h4>
+        <p>1. 验证持卡人身份信息。</p>
+        <p>2. 输入正确的短信验证码。</p>
+        <p>3. 确认解绑操作。</p>
+        
+        <h4>四、注意事项</h4>
+        <p>1. 解绑操作不可撤销，请谨慎操作。</p>
+        <p>2. 解绑后如需重新绑定，需重新验证身份。</p>
+        <p>3. 如遇问题，请联系客服协助处理。</p>
+      </div>
+    `,
+    width: 600,
+    okText: '我已阅读并理解'
+  })
+}
+</script>
+
+<style scoped>
+.bank-card-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  min-height: 400px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.header h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+}
+
+.header .subtitle {
+  margin-left: 12px;
+  color: #1890ff;
+  font-size: 14px;
+  padding-top: 4px;
+}
+
+.add-card-section, .bound-card-section {
+  /* display: flex;
+  justify-content: center; */
+  align-items: center;
+  min-height: 320px;
+}
+
+.add-card-box {
+  width: 320px;
+  height: 200px;
+  border: 2px dashed #d9d9d9;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: #fafafa;
+}
+
+.add-card-box:hover {
+  border-color: #1890ff;
+  border-style: solid;
+  background-color: #f0f8ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1);
+}
+
+.add-icon {
+  font-size: 56px;
+  color: #bfbfbf;
+  margin-bottom: 20px;
+  transition: all 0.3s;
+}
+
+.add-card-box:hover .add-icon {
+  color: #1890ff;
+}
+
+.add-text {
+  font-size: 20px;
+  color: #8c8c8c;
+  font-weight: 500;
+  transition: all 0.3s;
+}
+
+.add-card-box:hover .add-text {
+  color: #1890ff;
+}
+
+.card-display {
+  width: 450px;
+  height: 240px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 28px;
+  color: white;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  position: relative;
+  overflow: hidden;
+}
+
+.card-display::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+  border-radius: 50%;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 36px;
+  position: relative;
+  z-index: 1;
+}
+
+.bank-icon img {
+  width: 64px;
+  height: 64px;
+  background-color: white;
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-number {
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: 3px;
+  font-family: 'Courier New', monospace;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.card-details {
+  margin-bottom: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.detail-item {
+  margin-bottom: 14px;
+  font-size: 16px;
+  display: flex;
+}
+
+.detail-item .label {
+  opacity: 0.85;
+  width: 100px;
+}
+
+.detail-item .value {
+  font-weight: 500;
+  flex: 1;
+}
+
+.card-actions {
+  position: absolute;
+  bottom: 24px;
+  right: 28px;
+  z-index: 1;
+}
+
+:deep(.ant-btn-link) {
+  color: rgba(255, 255, 255, 0.9) !important;
+  font-size: 16px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+:deep(.ant-btn-link:hover) {
+  color: white !important;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.unbind-info {
+  background-color: #f6f8fa;
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.info-item {
+  margin-bottom: 12px;
+  font-size: 15px;
+  display: flex;
+}
+
+.info-item .label {
+  color: #666;
+  width: 100px;
+}
+
+.info-item .value {
+  color: #333;
+  font-weight: 500;
+  flex: 1;
+}
+
+.sms-code-input {
+  display: flex;
+  gap: 12px;
+}
+
+.sms-code-input :deep(.ant-input) {
+  flex: 1;
+}
+
+.sms-button {
+  white-space: nowrap;
+}
+
+:deep(.ant-modal-body) {
+  padding: 24px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 20px;
+}
+
+:deep(.ant-input-lg) {
+  border-radius: 6px;
+}
+
+:deep(.ant-select-lg) {
+  border-radius: 6px;
+}
+
+:deep(.ant-checkbox-wrapper) {
+  font-size: 14px;
+}
+
+:deep(.ant-checkbox-checked .ant-checkbox-inner) {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/account/invoices/index.vue b/src/views/admin/account/invoices/index.vue
new file mode 100644
index 0000000..30aaee6
--- /dev/null
+++ b/src/views/admin/account/invoices/index.vue
@@ -0,0 +1,779 @@
+<template>
+  <div class="invoice-page">
+    <!-- 头部区域 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        我的发票抬头
+      </h1>
+      <div class="header-actions">
+        <a-button type="primary" @click="showAddModal" size="large">
+          <template #icon><PlusOutlined /></template>
+          新增抬头
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 发票抬头列表 -->
+    <div class="invoice-list-container">
+      <a-alert 
+        v-if="invoiceHeaders.length === 0" 
+        message="暂无发票抬头" 
+        description="点击上方按钮添加您的第一个发票抬头"
+        type="info"
+        show-icon
+        style="margin-bottom: 20px;"
+      />
+      
+      <a-row :gutter="[16, 16]">
+        <a-col 
+          v-for="header in sortedHeaders" 
+          :key="header.id"
+          :xs="24" 
+          :sm="24" 
+          :md="12" 
+          :lg="8"
+        >
+          <a-card 
+            :class="['invoice-card', { 'default-card': header.isDefault }]"
+            :bordered="true"
+          >
+            <template #actions>
+              <span @click="editHeader(header)">
+                <EditOutlined />
+                编辑
+              </span>
+              <span 
+                @click="setDefaultHeader(header.id)"
+                :class="{ disabled: header.isDefault }"
+              >
+                <StarOutlined />
+                {{ header.isDefault ? '已是默认' : '设为默认' }}
+              </span>
+              <span @click="showDeleteConfirm(header)">
+                <DeleteOutlined />
+                删除
+              </span>
+            </template>
+            
+            <a-card-meta>
+              <template #title>
+                <div class="card-title">
+                  <span class="header-name">{{ header.name }}</span>
+                  <a-tag 
+                    :color="getTypeColor(header.type)" 
+                    size="small"
+                  >
+                    {{ getTypeText(header.type) }}
+                  </a-tag>
+                  <a-tag 
+                    :color="getInvoiceTypeColor(header.invoiceType)" 
+                    size="small"
+                  >
+                    {{ getInvoiceTypeText(header.invoiceType) }}
+                  </a-tag>
+                </div>
+              </template>
+              
+              <template #description>
+                <div class="card-content">
+                  <!-- 默认标识 -->
+                  <div v-if="header.isDefault" class="default-badge">
+                    <CheckCircleFilled style="color: #52c41a; margin-right: 4px;" />
+                    <span>默认抬头</span>
+                  </div>
+                  
+                  <!-- 详细信息 -->
+                  <div class="info-section">
+                    <div v-if="header.taxNumber" class="info-row">
+                      <span class="info-label">税号：</span>
+                      <span class="info-value">{{ header.taxNumber }}</span>
+                    </div>
+                    
+                    <div v-if="header.bankName" class="info-row">
+                      <span class="info-label">开户银行：</span>
+                      <span class="info-value">{{ header.bankName }}</span>
+                    </div>
+                    
+                    <div v-if="header.bankAccount" class="info-row">
+                      <span class="info-label">银行账号：</span>
+                      <span class="info-value">{{ header.bankAccount }}</span>
+                    </div>
+                    
+                    <div v-if="header.companyAddress" class="info-row">
+                      <span class="info-label">企业地址：</span>
+                      <span class="info-value">{{ header.companyAddress }}</span>
+                    </div>
+                    
+                    <div v-if="header.companyPhone" class="info-row">
+                      <span class="info-label">企业电话：</span>
+                      <span class="info-value">{{ header.companyPhone }}</span>
+                    </div>
+                    
+                    <div class="info-row create-time">
+                      <span class="info-label">创建时间：</span>
+                      <span class="info-value">{{ header.createTime }}</span>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-card-meta>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+
+    <!-- 新增/编辑弹窗 -->
+    <a-modal
+      v-model:visible="modalVisible"
+      :title="modalTitle"
+      width="600px"
+      :maskClosable="false"
+      :keyboard="false"
+      @ok="handleSubmit"
+      @cancel="handleCancel"
+      :confirm-loading="confirmLoading"
+    >
+      <a-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 18 }"
+        layout="horizontal"
+      >
+        <!-- 发票抬头名称 -->
+        <a-form-item label="发票抬头" name="name" required>
+          <a-input
+            v-model:value="formData.name"
+            placeholder="请输入发票抬头名称"
+            :maxlength="100"
+            show-count
+          />
+        </a-form-item>
+
+        <!-- 抬头类型 -->
+        <a-form-item label="抬头类型" name="type" required>
+          <a-radio-group 
+            v-model:value="formData.type" 
+            button-style="solid"
+            @change="handleTypeChange"
+          >
+            <a-radio-button value="personal">个人</a-radio-button>
+            <a-radio-button value="enterprise">企业</a-radio-button>
+            <a-radio-button value="institution">事业单位</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+
+        <!-- 发票类型 -->
+        <a-form-item label="发票类型" name="invoiceType" required>
+          <a-select
+            v-model:value="formData.invoiceType"
+            placeholder="请选择发票类型"
+          >
+            <a-select-option value="vat">增值税专用发票</a-select-option>
+            <a-select-option value="normal">增值税普通发票</a-select-option>
+            <a-select-option value="electronic">电子普通发票</a-select-option>
+            <a-select-option value="special">专用发票</a-select-option>
+            <a-select-option value="general">通用发票</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <!-- 税号（非个人时显示） -->
+        <a-form-item 
+          v-if="formData.type !== 'personal'" 
+          label="税号" 
+          name="taxNumber" 
+          required
+        >
+          <a-input
+            v-model:value="formData.taxNumber"
+            placeholder="请输入纳税人识别号/统一社会信用代码"
+            :maxlength="30"
+          />
+        </a-form-item>
+
+        <!-- 开户银行（非个人时显示） -->
+        <a-form-item 
+          v-if="formData.type !== 'personal'" 
+          label="开户银行" 
+          name="bankName"
+        >
+          <a-input
+            v-model:value="formData.bankName"
+            placeholder="请输入开户银行名称"
+            :maxlength="100"
+          />
+        </a-form-item>
+
+        <!-- 银行账号（非个人时显示） -->
+        <a-form-item 
+          v-if="formData.type !== 'personal'" 
+          label="银行账号" 
+          name="bankAccount"
+        >
+          <a-input
+            v-model:value="formData.bankAccount"
+            placeholder="请输入银行账号"
+            :maxlength="30"
+          />
+        </a-form-item>
+
+        <!-- 企业地址（非个人时显示） -->
+        <a-form-item 
+          v-if="formData.type !== 'personal'" 
+          label="企业地址" 
+          name="companyAddress"
+        >
+          <a-input
+            v-model:value="formData.companyAddress"
+            placeholder="请输入企业注册地址"
+            :maxlength="200"
+          />
+        </a-form-item>
+
+        <!-- 企业电话（非个人时显示） -->
+        <a-form-item 
+          v-if="formData.type !== 'personal'" 
+          label="企业电话" 
+          name="companyPhone"
+        >
+          <a-input
+            v-model:value="formData.companyPhone"
+            placeholder="请输入企业联系电话"
+            :maxlength="20"
+          />
+        </a-form-item>
+
+        <!-- 设为默认 -->
+        <a-form-item name="isDefault" :wrapper-col="{ offset: 6 }">
+          <a-checkbox v-model:checked="formData.isDefault">
+            设为默认抬头
+          </a-checkbox>
+          <div class="form-tip">设为默认后，下单时将自动选择此抬头</div>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { message, Modal } from 'ant-design-vue'
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  StarOutlined,
+  FileTextOutlined,
+  CheckCircleFilled,
+  ExclamationCircleOutlined
+} from '@ant-design/icons-vue'
+
+// 初始数据
+const initialData = [
+  {
+    id: 1,
+    name: '张三科技有限公司',
+    type: 'enterprise',
+    invoiceType: 'vat',
+    taxNumber: '91370100MA3C4BQ123',
+    bankName: '中国工商银行北京分行',
+    bankAccount: '6222021234567890123',
+    companyAddress: '北京市海淀区中关村软件园一期1号楼',
+    companyPhone: '010-12345678',
+    isDefault: true,
+    createTime: '2024-01-15 10:30:45'
+  },
+  {
+    id: 2,
+    name: '李四个人',
+    type: 'personal',
+    invoiceType: 'normal',
+    taxNumber: '',
+    bankName: '',
+    bankAccount: '',
+    companyAddress: '',
+    companyPhone: '',
+    isDefault: false,
+    createTime: '2024-01-10 14:20:15'
+  },
+  {
+    id: 3,
+    name: '某某研究所',
+    type: 'institution',
+    invoiceType: 'electronic',
+    taxNumber: '123456789012345',
+    bankName: '中国建设银行上海分行',
+    bankAccount: '6217001234567890123',
+    companyAddress: '上海市浦东新区张江高科技园区',
+    companyPhone: '021-87654321',
+    isDefault: false,
+    createTime: '2024-01-05 09:15:30'
+  },
+  {
+    id: 4,
+    name: '王五网络有限公司',
+    type: 'enterprise',
+    invoiceType: 'vat',
+    taxNumber: '91370200MA3D4CQ456',
+    bankName: '招商银行深圳分行',
+    bankAccount: '6225881234567890',
+    companyAddress: '深圳市南山区科技园',
+    companyPhone: '0755-66889900',
+    isDefault: false,
+    createTime: '2024-01-20 16:45:22'
+  }
+]
+
+// 响应式数据
+const invoiceHeaders = ref([...initialData])
+const modalVisible = ref(false)
+const modalMode = ref('add') // 'add' | 'edit'
+const confirmLoading = ref(false)
+const formRef = ref()
+
+// 表单数据
+const formData = reactive({
+  id: null,
+  name: '',
+  type: 'personal',
+  invoiceType: 'normal',
+  taxNumber: '',
+  bankName: '',
+  bankAccount: '',
+  companyAddress: '',
+  companyPhone: '',
+  isDefault: false
+})
+
+// 表单验证规则
+const formRules = {
+  name: [
+    { required: true, message: '请输入发票抬头名称', trigger: 'blur' },
+    { min: 2, max: 100, message: '抬头名称长度为2-100个字符', trigger: 'blur' }
+  ],
+  type: [
+    { required: true, message: '请选择抬头类型', trigger: 'change' }
+  ],
+  invoiceType: [
+    { required: true, message: '请选择发票类型', trigger: 'change' }
+  ],
+  taxNumber: [
+    { 
+      required: formData.type !== 'personal', 
+      message: '请输入税号', 
+      trigger: 'blur' 
+    },
+    { 
+      pattern: /^[A-Z0-9]{15,20}$/, 
+      message: '税号格式不正确（15-20位字母或数字）', 
+      trigger: 'blur' 
+    }
+  ],
+  bankAccount: [
+    { 
+      pattern: /^[0-9]{12,20}$/, 
+      message: '银行账号格式不正确（12-20位数字）', 
+      trigger: 'blur' 
+    }
+  ],
+  companyPhone: [
+    { 
+      pattern: /^(\d{3,4}-)?\d{7,8}$/, 
+      message: '电话号码格式不正确（例：010-12345678）', 
+      trigger: 'blur' 
+    }
+  ]
+}
+
+// 计算属性
+const modalTitle = computed(() => {
+  return modalMode.value === 'add' ? '新增发票抬头' : '编辑发票抬头'
+})
+
+const sortedHeaders = computed(() => {
+  return [...invoiceHeaders.value].sort((a, b) => {
+    // 默认的排在最前面
+    if (a.isDefault && !b.isDefault) return -1
+    if (!a.isDefault && b.isDefault) return 1
+    // 其次按创建时间倒序
+    return new Date(b.createTime) - new Date(a.createTime)
+  })
+})
+
+// 方法
+const showAddModal = () => {
+  modalMode.value = 'add'
+  resetForm()
+  modalVisible.value = true
+}
+
+const editHeader = (header) => {
+  modalMode.value = 'edit'
+  Object.assign(formData, { ...header })
+  modalVisible.value = true
+}
+
+const resetForm = () => {
+  Object.assign(formData, {
+    id: null,
+    name: '',
+    type: 'personal',
+    invoiceType: 'normal',
+    taxNumber: '',
+    bankName: '',
+    bankAccount: '',
+    companyAddress: '',
+    companyPhone: '',
+    isDefault: false
+  })
+  if (formRef.value) {
+    formRef.value.clearValidate()
+  }
+}
+
+const handleTypeChange = () => {
+  // 类型切换时，如果是个人类型，清除非必填字段
+  if (formData.type === 'personal') {
+    formData.taxNumber = ''
+    formData.bankName = ''
+    formData.bankAccount = ''
+    formData.companyAddress = ''
+    formData.companyPhone = ''
+  }
+}
+
+const handleSubmit = () => {
+  formRef.value.validate().then(() => {
+    confirmLoading.value = true
+    
+    // 模拟API调用延迟
+    setTimeout(() => {
+      if (modalMode.value === 'add') {
+        addNewHeader()
+      } else {
+        updateHeader()
+      }
+      
+      confirmLoading.value = false
+      modalVisible.value = false
+    }, 500)
+  }).catch(error => {
+    console.log('表单验证失败:', error)
+  })
+}
+
+const addNewHeader = () => {
+  const newHeader = {
+    ...formData,
+    id: Date.now(), // 生成唯一ID
+    createTime: new Date().toLocaleString('zh-CN')
+  }
+  
+  // 如果设置为默认，清除其他默认设置
+  if (newHeader.isDefault) {
+    invoiceHeaders.value.forEach(header => {
+      header.isDefault = false
+    })
+  }
+  
+  invoiceHeaders.value.unshift(newHeader)
+  message.success('新增发票抬头成功')
+}
+
+const updateHeader = () => {
+  const index = invoiceHeaders.value.findIndex(item => item.id === formData.id)
+  if (index !== -1) {
+    const oldHeader = invoiceHeaders.value[index]
+    
+    // 如果设置为默认，清除其他默认设置
+    if (formData.isDefault && !oldHeader.isDefault) {
+      invoiceHeaders.value.forEach(header => {
+        header.isDefault = false
+      })
+    }
+    
+    // 更新数据
+    Object.assign(invoiceHeaders.value[index], formData, {
+      createTime: oldHeader.createTime // 保留创建时间
+    })
+    
+    message.success('修改发票抬头成功')
+  }
+}
+
+const setDefaultHeader = (id) => {
+  invoiceHeaders.value.forEach(header => {
+    header.isDefault = header.id === id
+  })
+  message.success('设置默认抬头成功')
+}
+
+const showDeleteConfirm = (header) => {
+  Modal.confirm({
+    title: '确认删除',
+    icon: ExclamationCircleOutlined, // 这里直接传递图标组件
+    content: `确定要删除发票抬头"${header.name}"吗？此操作不可恢复。`,
+    okText: '删除',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk() {
+      deleteHeader(header.id)
+    }
+  })
+}
+
+const deleteHeader = (id) => {
+  const index = invoiceHeaders.value.findIndex(item => item.id === id)
+  if (index !== -1) {
+    const isDefault = invoiceHeaders.value[index].isDefault
+    invoiceHeaders.value.splice(index, 1)
+    
+    // 如果删除的是默认抬头，且还有其他抬头，设置第一个为默认
+    if (isDefault && invoiceHeaders.value.length > 0) {
+      invoiceHeaders.value[0].isDefault = true
+      message.success('已自动设置第一个抬头为默认')
+    }
+    
+    message.success('删除发票抬头成功')
+  }
+}
+
+const handleCancel = () => {
+  modalVisible.value = false
+  resetForm()
+}
+
+// 辅助函数
+const getTypeText = (type) => {
+  const typeMap = {
+    personal: '个人',
+    enterprise: '企业',
+    institution: '事业单位'
+  }
+  return typeMap[type] || '未知'
+}
+
+const getTypeColor = (type) => {
+  const colorMap = {
+    personal: 'blue',
+    enterprise: 'green',
+    institution: 'orange'
+  }
+  return colorMap[type] || 'default'
+}
+
+const getInvoiceTypeText = (type) => {
+  const typeMap = {
+    vat: '增值税专用',
+    normal: '增值税普通',
+    electronic: '电子普通',
+    special: '专用发票',
+    general: '通用发票'
+  }
+  return typeMap[type] || '未知'
+}
+
+const getInvoiceTypeColor = (type) => {
+  const colorMap = {
+    vat: 'red',
+    normal: 'purple',
+    electronic: 'cyan',
+    special: 'magenta',
+    general: 'gray'
+  }
+  return colorMap[type] || 'default'
+}
+
+// 初始化
+onMounted(() => {
+  console.log('发票抬头管理页面已加载')
+})
+</script>
+
+<style scoped>
+.invoice-page {
+  /* padding: 10px; */
+  /* background-color: #f5f5f5; */
+  min-height: 100vh;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.page-title {
+  margin: 0;
+  /* color: #1890ff; */
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.page-title .anticon {
+  font-size: 28px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.invoice-list-container {
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.invoice-card {
+  height: 100%;
+  transition: all 0.3s ease;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+}
+
+.invoice-card:hover {
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+  border-color: #1890ff;
+  transform: translateY(-2px);
+}
+
+.invoice-card.default-card {
+  border: 2px solid #52c41a;
+  background: linear-gradient(135deg, #f6ffed 0%, #e6ffd1 100%);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.header-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+}
+
+.card-content {
+  margin-top: 12px;
+}
+
+.default-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #52c41a;
+  margin-bottom: 12px;
+}
+
+.info-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.info-row {
+  display: flex;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.info-label {
+  color: #666;
+  min-width: 70px;
+  flex-shrink: 0;
+}
+
+.info-value {
+  color: #333;
+  flex: 1;
+}
+
+.create-time {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed #f0f0f0;
+  color: #999;
+  font-size: 12px;
+}
+
+:deep(.ant-card-actions) {
+  border-top: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+:deep(.ant-card-actions > li) {
+  margin: 12px 0;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+:deep(.ant-card-actions > li:hover) {
+  color: #1890ff;
+}
+
+:deep(.ant-card-actions > li.disabled) {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+:deep(.ant-card-actions > li span) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+:deep(.ant-modal-body) {
+  padding: 24px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+  }
+  
+  .header-actions {
+    justify-content: flex-end;
+  }
+  
+  :deep(.ant-form .ant-form-item .ant-form-item-label) {
+    text-align: left;
+  }
+  
+  :deep(.ant-form .ant-form-item .ant-form-item-control) {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/account/realnameAuthBusiness/index.vue b/src/views/admin/account/realnameAuthBusiness/index.vue
new file mode 100644
index 0000000..1f19807
--- /dev/null
+++ b/src/views/admin/account/realnameAuthBusiness/index.vue
@@ -0,0 +1,782 @@
+<template>
+    <div class="real-name-auth">
+        <!-- 页面标题 -->
+        <div class="page-title-area">
+            <h2 class="page-title">实名认证</h2>
+            <p class="page-description">
+                Fast亼算云严格遵守国家相关个人信息隐私保护规定，并不存储使用您的个人信息，
+                <a href="#" class="protocol-link">查看实名认证协议</a>
+            </p>
+        </div>
+
+        <!-- 认证信息卡片 -->
+        <div class="auth-card">
+            <div class="card-content">
+                <!-- 左侧信息区 -->
+                <div class="info-left">
+                    <!-- 卡片标题 -->
+                    <div class="card-title">
+                        <div class="auth-status">
+                            <span class="status-dot"></span>
+                            <span class="status-text">已认证</span>
+                        </div>
+                        <h3 class="auth-type">企业认证</h3>
+                    </div>
+
+                    <!-- 信息网格 -->
+                    <div class="info-grid">
+                        <div class="info-item">
+                            <div class="info-label">认证类型</div>
+                            <div class="info-value">企业认证</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">认证时间</div>
+                            <div class="info-value">2025-11-18</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">证件类型</div>
+                            <div class="info-value">身份证</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">身份证号</div>
+                            <div class="info-value">
+                                <span>150************859</span>
+                                <a-button type="link" size="small" @click="handleCopy">复制</a-button>
+                            </div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">认证人</div>
+                            <div class="info-value">*如</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 右侧图片区 -->
+                <div class="image-right">
+                    <img src="../../../../assets/renzheng.png" alt="认证" class="auth-image" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onUnmounted } from 'vue';
+import { 
+    Button as AButton, 
+    Table as ATable, 
+    Modal as AModal,
+    Checkbox as ACheckbox,
+    Input as AInput,
+    message 
+} from 'ant-design-vue';
+
+// 表格列定义
+const columns = [
+    {
+        title: '变更类型',
+        dataIndex: 'type',
+        key: 'type',
+        width: 120,
+    },
+    {
+        title: '变更时间',
+        dataIndex: 'time',
+        key: 'time',
+        width: 160,
+    },
+    {
+        title: '变更状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 100,
+        slots: { customRender: 'status' },
+    },
+    {
+        title: '操作人',
+        dataIndex: 'operator',
+        key: 'operator',
+        width: 100,
+    },
+    {
+        title: '备注',
+        dataIndex: 'remark',
+        key: 'remark',
+        ellipsis: true,
+    },
+];
+
+// 表格数据
+const dataSource = ref([
+    {
+        key: '1',
+        type: '个人认证',
+        time: '2025-11-18 14:30:25',
+        status: '成功',
+        operator: '系统',
+        remark: '首次实名认证',
+    },
+]);
+
+// 对话框状态
+const changeModalVisible = ref(false);
+const isAgreeWarning = ref(false);
+
+// 身份验证相关状态
+const verifyModalVisible = ref(false);
+const verificationCode = ref('');
+const countdown = ref(0);
+const sendingCode = ref(false);
+const sendStatus = ref('');
+const codeError = ref('');
+const verifying = ref(false);
+
+// 用户绑定的手机号（实际应该从用户信息获取）
+const userPhone = '13800138000';
+
+// 计算属性
+const maskedPhone = computed(() => {
+    if (userPhone.length > 7) {
+        return userPhone.slice(0, 3) + '****' + userPhone.slice(7);
+    }
+    return userPhone;
+});
+
+const countdownText = computed(() => {
+    if (countdown.value > 0) {
+        return `${countdown.value}秒后重试`;
+    }
+    return '获取验证码';
+});
+
+const isVerificationValid = computed(() => {
+    return verificationCode.value.length === 6 && /^\d+$/.test(verificationCode.value);
+});
+
+// 倒计时定时器
+let timer = null;
+
+// 清理定时器
+onUnmounted(() => {
+    if (timer) {
+        clearInterval(timer);
+    }
+});
+
+const getStatusClass = (status) => {
+    const statusMap = {
+        '成功': 'status-success',
+        '失败': 'status-failed',
+        '处理中': 'status-processing',
+    };
+    return statusMap[status] || '';
+};
+
+const handleCopy = () => {
+    message.success('身份证号已复制');
+};
+
+// 显示变更确认对话框
+const showChangeConfirm = () => {
+    // 重置确认状态
+    isAgreeWarning.value = false;
+    changeModalVisible.value = true;
+};
+
+// 确认变更，打开身份验证对话框
+const handleConfirmChange = () => {
+    if (!isAgreeWarning.value) {
+        message.warning('请先确认已阅读并理解相关提示');
+        return;
+    }
+    
+    // 关闭变更确认对话框
+    changeModalVisible.value = false;
+    
+    // 打开身份验证对话框
+    showVerifyModal();
+};
+
+// 取消变更
+const handleCancelChange = () => {
+    changeModalVisible.value = false;
+    isAgreeWarning.value = false;
+};
+
+// 显示身份验证对话框
+const showVerifyModal = () => {
+    // 重置验证状态
+    verificationCode.value = '';
+    codeError.value = '';
+    sendStatus.value = '';
+    verifyModalVisible.value = true;
+};
+
+// 取消身份验证
+const handleCancelVerify = () => {
+    verifyModalVisible.value = false;
+    // 重置倒计时
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+    countdown.value = 0;
+};
+
+// 验证码输入处理
+const handleCodeInput = (e) => {
+    const value = e.target?.value || e;
+    // 只允许数字
+    const numbersOnly = value.replace(/\D/g, '');
+    verificationCode.value = numbersOnly.slice(0, 6);
+    
+    // 清除错误提示
+    if (codeError.value) {
+        codeError.value = '';
+    }
+};
+
+// 发送验证码
+const sendVerificationCode = async () => {
+    if (countdown.value > 0 || sendingCode.value) return;
+    
+    sendingCode.value = true;
+    sendStatus.value = '发送中...';
+    codeError.value = '';
+    
+    try {
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        // 假设发送成功
+        sendStatus.value = '发送成功';
+        countdown.value = 60;
+        
+        // 开始倒计时
+        timer = setInterval(() => {
+            countdown.value--;
+            if (countdown.value <= 0) {
+                clearInterval(timer);
+                timer = null;
+            }
+        }, 1000);
+        
+        message.success('验证码已发送');
+    } catch (error) {
+        codeError.value = '发送失败，请稍后重试';
+        sendStatus.value = '';
+    } finally {
+        sendingCode.value = false;
+    }
+};
+
+// 执行验证
+const handleVerify = async () => {
+    if (!isVerificationValid.value) {
+        codeError.value = '请输入有效的6位验证码';
+        return;
+    }
+    
+    verifying.value = true;
+    
+    try {
+        // 模拟API验证
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        
+        // 假设验证成功
+        message.success('身份验证成功');
+        
+        // 关闭验证对话框
+        verifyModalVisible.value = false;
+        
+        // 执行实际的变更操作
+        message.info('跳转至企业认证页面');
+        
+        // 这里可以添加跳转逻辑或API调用
+        // router.push('/enterprise-auth');
+        
+    } catch (error) {
+        codeError.value = '验证码错误，请重新输入';
+        verificationCode.value = '';
+    } finally {
+        verifying.value = false;
+    }
+};
+
+const handleExport = () => {
+    message.info('导出变更记录');
+};
+</script>
+
+<style scoped>
+.real-name-auth {
+    padding: 24px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background-color: #fafafa;
+    min-height: 100vh;
+}
+
+/* 页面标题区域 */
+.page-title-area {
+    margin-bottom: 32px;
+}
+
+.page-title {
+    margin: 0 0 12px;
+    font-size: 20px;
+    font-weight: 500;
+    color: #262626;
+}
+
+.page-description {
+    margin: 0;
+    color: #8c8c8c;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.protocol-link {
+    color: #1890ff;
+    text-decoration: none;
+}
+
+.protocol-link:hover {
+    text-decoration: underline;
+}
+
+/* 认证卡片 */
+.auth-card {
+    background: white;
+    border-radius: 8px;
+    padding: 24px;
+    margin-bottom: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f0f0f0;
+}
+
+/* 卡片内容区域 - 左右布局 */
+.card-content {
+    display: flex;
+    gap: 40px;
+    margin-bottom: 24px;
+}
+
+/* 左侧信息区 */
+.info-left {
+    flex: 1;
+}
+
+.card-title {
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.auth-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    background: #f6ffed;
+    border-radius: 4px;
+    margin-bottom: 12px;
+}
+
+.status-dot {
+    width: 6px;
+    height: 6px;
+    background: #52c41a;
+    border-radius: 50%;
+}
+
+.status-text {
+    color: #52c41a;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.auth-type {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+    color: #262626;
+}
+
+/* 信息网格 */
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.info-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.info-label {
+    color: #595959cf;
+    font-size: 16px;
+    margin-bottom: 6px;
+    font-weight: 400;
+}
+
+.info-value {
+    color: #262626;
+    font-size: 18px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* 右侧图片区 */
+.image-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    margin-top: 60px;
+}
+
+.auth-image {
+    width: 120px;
+    height: 120px;
+    object-fit: contain;
+    opacity: 0.9;
+}
+
+/* 操作按钮 */
+.card-actions {
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+    width: 200px;
+}
+
+.card-actions .ant-btn {
+    width: 100%;
+    height: 40px;
+    font-size: 14px;
+}
+
+/* 分割线 */
+.divider {
+    height: 1px;
+    background: #f0f0f0;
+    margin: 32px 0;
+}
+
+/* 变更记录区域 */
+.record-section {
+    background: white;
+    border-radius: 8px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f0f0f0;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.section-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #262626;
+}
+
+.section-actions .ant-btn-link {
+    color: #1890ff;
+    font-size: 13px;
+}
+
+/* 表格样式 */
+.change-record-table {
+    width: 100%;
+}
+
+.change-record-table :deep(.ant-table-thead > tr > th) {
+    background: #fafafa;
+    color: #595959;
+    font-weight: 500;
+    border-bottom: 1px solid #f0f0f0;
+    padding: 12px 16px;
+    font-size: 13px;
+}
+
+.change-record-table :deep(.ant-table-tbody > tr > td) {
+    padding: 12px 16px;
+    font-size: 13px;
+    color: #262626;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.change-record-table :deep(.ant-table-tbody > tr:hover > td) {
+    background: #fafafa;
+}
+
+/* 状态标签 */
+.status-tag {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 2px;
+    font-size: 12px;
+    font-weight: 400;
+}
+
+.status-success {
+    background: #f6ffed;
+    color: #52c41a;
+}
+
+.status-failed {
+    background: #fff2f0;
+    color: #ff4d4f;
+}
+
+.status-processing {
+    background: #e6f7ff;
+    color: #1890ff;
+}
+
+/* 空状态 */
+.empty-state {
+    padding: 48px 0;
+    text-align: center;
+}
+
+.empty-icon {
+    font-size: 24px;
+    margin-bottom: 12px;
+    opacity: 0.3;
+}
+
+.empty-text {
+    color: #bfbfbf;
+    font-size: 14px;
+    margin: 0;
+}
+
+/* 变更确认对话框样式 */
+.change-confirm-content {
+    padding: 8px 0;
+}
+
+.warning-section {
+    margin-bottom: 20px;
+}
+
+.warning-item {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding: 12px;
+    background: #fff7e6;
+    border-radius: 6px;
+    border-left: 4px solid #faad14;
+}
+
+.warning-item:last-child {
+    margin-bottom: 0;
+}
+
+.warning-icon {
+    font-size: 18px;
+    line-height: 1.4;
+}
+
+.warning-text {
+    flex: 1;
+    color: #262626;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.confirm-agreement {
+    padding: 16px;
+    background: #fafafa;
+    border-radius: 6px;
+    border: 1px solid #f0f0f0;
+}
+
+.confirm-agreement :deep(.ant-checkbox-wrapper) {
+    display: flex;
+    align-items: flex-start;
+}
+
+.agreement-text {
+    color: #595959;
+    font-size: 13px;
+    line-height: 1.4;
+    margin-left: 8px;
+}
+
+/* 身份验证对话框样式 */
+.verify-content {
+    padding: 8px 0;
+}
+
+.security-tip {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #f6f9ff;
+    border-radius: 8px;
+    border: 1px solid #e6f0ff;
+}
+
+.security-icon {
+    font-size: 20px;
+    line-height: 1.4;
+}
+
+.security-text {
+    flex: 1;
+}
+
+.security-title {
+    color: #1890ff;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.security-subtitle {
+    color: #595959;
+    font-size: 13px;
+}
+
+.phone-info {
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #fafafa;
+    border-radius: 6px;
+    border: 1px solid #f0f0f0;
+}
+
+.phone-label {
+    color: #595959;
+    font-size: 13px;
+    margin-bottom: 8px;
+}
+
+.phone-number {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.phone-icon {
+    font-size: 16px;
+}
+
+.phone-text {
+    color: #262626;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.verification-code {
+    margin-bottom: 16px;
+}
+
+.code-label {
+    color: #262626;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.code-input-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.code-input {
+    flex: 1;
+}
+
+.code-input :deep(.ant-input) {
+    height: 40px;
+    font-size: 14px;
+    letter-spacing: 2px;
+}
+
+.send-code-btn {
+    width: 100px;
+    height: 40px;
+    padding: 0;
+    white-space: nowrap;
+}
+
+.send-code-btn:disabled {
+    color: #bfbfbf;
+}
+
+.code-error {
+    color: #ff4d4f;
+    font-size: 12px;
+    margin-top: 4px;
+    min-height: 20px;
+}
+
+.send-status {
+    color: #595959;
+    font-size: 12px;
+    text-align: center;
+    margin-top: 8px;
+    min-height: 20px;
+}
+
+.send-success {
+    color: #52c41a;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+    .real-name-auth {
+        padding: 16px;
+    }
+
+    .card-content {
+        flex-direction: column;
+        gap: 24px;
+    }
+
+    .info-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .image-right {
+        width: 100%;
+        order: -1;
+    }
+
+    .auth-image {
+        width: 100px;
+        height: 100px;
+    }
+
+    .auth-card,
+    .record-section {
+        padding: 16px;
+    }
+
+    .code-input-group {
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .send-code-btn {
+        width: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/account/realnameAuthTrue/index.vue b/src/views/admin/account/realnameAuthTrue/index.vue
new file mode 100644
index 0000000..5b6150e
--- /dev/null
+++ b/src/views/admin/account/realnameAuthTrue/index.vue
@@ -0,0 +1,916 @@
+<template>
+    <div class="real-name-auth">
+        <!-- 页面标题 -->
+        <div class="page-title-area">
+            <h2 class="page-title">实名认证</h2>
+            <p class="page-description">
+                Fast亼算云严格遵守国家相关个人信息隐私保护规定，并不存储使用您的个人信息，
+                <a href="#" class="protocol-link">查看实名认证协议</a>
+            </p>
+        </div>
+
+        <!-- 认证信息卡片 -->
+        <div class="auth-card">
+            <div class="card-content">
+                <!-- 左侧信息区 -->
+                <div class="info-left">
+                    <!-- 卡片标题 -->
+                    <div class="card-title">
+                        <div class="auth-status">
+                            <span class="status-dot"></span>
+                            <span class="status-text">已认证</span>
+                        </div>
+                        <h3 class="auth-type">个人认证</h3>
+                    </div>
+
+                    <!-- 信息网格 -->
+                    <div class="info-grid">
+                        <div class="info-item">
+                            <div class="info-label">认证类型</div>
+                            <div class="info-value">个人认证</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">认证时间</div>
+                            <div class="info-value">2025-11-18</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">证件类型</div>
+                            <div class="info-value">身份证</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">身份证号</div>
+                            <div class="info-value">
+                                <span>150************859</span>
+                                <a-button type="link" size="small" @click="handleCopy">复制</a-button>
+                            </div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">认证人</div>
+                            <div class="info-value">*如</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 右侧图片区 -->
+                <div class="image-right">
+                    <img src="../../../../assets/renzheng.png" alt="认证" class="auth-image" />
+                </div>
+            </div>
+
+            <!-- 操作区域 -->
+            <div class="card-actions">
+                <a-button type="primary" size="large" @click="showChangeConfirm">
+                    变更为企业认证
+                </a-button>
+            </div>
+        </div>
+
+        <!-- 分割线 -->
+        <div class="divider"></div>
+
+        <!-- 变更记录 -->
+        <div class="record-section">
+            <div class="section-header">
+                <h3 class="section-title">变更记录</h3>
+                <!-- <div class="section-actions">
+                    <a-button type="link" size="small" @click="handleExport">导出记录</a-button>
+                </div> -->
+            </div>
+
+            <a-table :columns="columns" :data-source="dataSource" :pagination="false" :bordered="true"
+                class="change-record-table">
+                <template #empty>
+                    <div class="empty-state">
+                        <div class="empty-icon">📄</div>
+                        <p class="empty-text">暂无变更记录</p>
+                    </div>
+                </template>
+
+                <template #status="{ text }">
+                    <span :class="['status-tag', getStatusClass(text)]">
+                        {{ text }}
+                    </span>
+                </template>
+            </a-table>
+        </div>
+
+        <!-- 变更确认对话框 -->
+        <a-modal
+            v-model:visible="changeModalVisible"
+            title="确认变更认证类型"
+            @ok="handleConfirmChange"
+            @cancel="handleCancelChange"
+            :maskClosable="false"
+            :width="520"
+            :ok-button-props="{ disabled: !isAgreeWarning }"
+        >
+            <div class="change-confirm-content">
+                <!-- 警告提示 -->
+                <div class="warning-section">
+                    <div class="warning-item">
+                        <span class="warning-icon">⚠️</span>
+                        <div class="warning-text">
+                            您正在进行个人实名认证变更为企业实名认证操作，变更后账号以及账号下资产将属于新的认证企业。
+                        </div>
+                    </div>
+                    <div class="warning-item">
+                        <span class="warning-icon">⚠️</span>
+                        <div class="warning-text">
+                            请知悉升级企业实名认证后，该账号将无法再变更回个人实名认证，请您谨慎操作。
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 确认条款 -->
+                <div class="confirm-agreement">
+                    <a-checkbox v-model:checked="isAgreeWarning">
+                        <span class="agreement-text">
+                            我已阅读并理解以上提示，确认继续变更
+                        </span>
+                    </a-checkbox>
+                </div>
+            </div>
+        </a-modal>
+
+        <!-- 身份验证对话框 -->
+        <a-modal
+            v-model:visible="verifyModalVisible"
+            title="身份验证"
+            @ok="handleVerify"
+            @cancel="handleCancelVerify"
+            :maskClosable="false"
+            :width="480"
+            :ok-button-props="{ disabled: !isVerificationValid }"
+            :confirmLoading="verifying"
+        >
+            <div class="verify-content">
+                <!-- 安全提示 -->
+                <div class="security-tip">
+                    <!-- <div class="security-icon">🔒</div> -->
+                    <div class="security-text">
+                        <div class="security-title">为确保账号安全，请您本人操作进行身份验证</div>
+                        <div class="security-subtitle">我们将向您绑定的手机发送验证码</div>
+                    </div>
+                </div>
+
+                <!-- 手机号信息 -->
+                <div class="phone-info">
+                    <div class="phone-label">验证手机号</div>
+                    <div class="phone-number">
+                        <!-- <span class="phone-icon">📱</span> -->
+                        <span class="phone-text">{{ maskedPhone }}</span>
+                    </div>
+                </div>
+
+                <!-- 验证码输入 -->
+                <div class="verification-code">
+                    <div class="code-label">验证码</div>
+                    <div class="code-input-group">
+                        <a-input
+                            v-model:value="verificationCode"
+                            placeholder="请输入6位验证码"
+                            :maxlength="6"
+                            @input="handleCodeInput"
+                            class="code-input"
+                        />
+                        <a-button
+                            type="link"
+                            @click="sendVerificationCode"
+                            :disabled="countdown > 0 || sendingCode"
+                            class="send-code-btn"
+                        >
+                            {{ countdownText }}
+                        </a-button>
+                    </div>
+                    <div v-if="codeError" class="code-error">{{ codeError }}</div>
+                </div>
+
+                <!-- 发送状态 -->
+                <div v-if="sendStatus" class="send-status" :class="{ 'send-success': sendStatus === '发送成功' }">
+                    {{ sendStatus }}
+                </div>
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onUnmounted } from 'vue';
+import { 
+    Button as AButton, 
+    Table as ATable, 
+    Modal as AModal,
+    Checkbox as ACheckbox,
+    Input as AInput,
+    message 
+} from 'ant-design-vue';
+
+// 表格列定义
+const columns = [
+    {
+        title: '变更类型',
+        dataIndex: 'type',
+        key: 'type',
+        width: 120,
+    },
+    {
+        title: '变更时间',
+        dataIndex: 'time',
+        key: 'time',
+        width: 160,
+    },
+    {
+        title: '变更状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 100,
+        slots: { customRender: 'status' },
+    },
+    {
+        title: '操作人',
+        dataIndex: 'operator',
+        key: 'operator',
+        width: 100,
+    },
+    {
+        title: '备注',
+        dataIndex: 'remark',
+        key: 'remark',
+        ellipsis: true,
+    },
+];
+
+// 表格数据
+const dataSource = ref([
+    {
+        key: '1',
+        type: '个人认证',
+        time: '2025-11-18 14:30:25',
+        status: '成功',
+        operator: '系统',
+        remark: '首次实名认证',
+    },
+]);
+
+// 对话框状态
+const changeModalVisible = ref(false);
+const isAgreeWarning = ref(false);
+
+// 身份验证相关状态
+const verifyModalVisible = ref(false);
+const verificationCode = ref('');
+const countdown = ref(0);
+const sendingCode = ref(false);
+const sendStatus = ref('');
+const codeError = ref('');
+const verifying = ref(false);
+
+// 用户绑定的手机号（实际应该从用户信息获取）
+const userPhone = '13800138000';
+
+// 计算属性
+const maskedPhone = computed(() => {
+    if (userPhone.length > 7) {
+        return userPhone.slice(0, 3) + '****' + userPhone.slice(7);
+    }
+    return userPhone;
+});
+
+const countdownText = computed(() => {
+    if (countdown.value > 0) {
+        return `${countdown.value}秒后重试`;
+    }
+    return '获取验证码';
+});
+
+const isVerificationValid = computed(() => {
+    return verificationCode.value.length === 6 && /^\d+$/.test(verificationCode.value);
+});
+
+// 倒计时定时器
+let timer = null;
+
+// 清理定时器
+onUnmounted(() => {
+    if (timer) {
+        clearInterval(timer);
+    }
+});
+
+const getStatusClass = (status) => {
+    const statusMap = {
+        '成功': 'status-success',
+        '失败': 'status-failed',
+        '处理中': 'status-processing',
+    };
+    return statusMap[status] || '';
+};
+
+const handleCopy = () => {
+    message.success('身份证号已复制');
+};
+
+// 显示变更确认对话框
+const showChangeConfirm = () => {
+    // 重置确认状态
+    isAgreeWarning.value = false;
+    changeModalVisible.value = true;
+};
+
+// 确认变更，打开身份验证对话框
+const handleConfirmChange = () => {
+    if (!isAgreeWarning.value) {
+        message.warning('请先确认已阅读并理解相关提示');
+        return;
+    }
+    
+    // 关闭变更确认对话框
+    changeModalVisible.value = false;
+    
+    // 打开身份验证对话框
+    showVerifyModal();
+};
+
+// 取消变更
+const handleCancelChange = () => {
+    changeModalVisible.value = false;
+    isAgreeWarning.value = false;
+};
+
+// 显示身份验证对话框
+const showVerifyModal = () => {
+    // 重置验证状态
+    verificationCode.value = '';
+    codeError.value = '';
+    sendStatus.value = '';
+    verifyModalVisible.value = true;
+};
+
+// 取消身份验证
+const handleCancelVerify = () => {
+    verifyModalVisible.value = false;
+    // 重置倒计时
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+    countdown.value = 0;
+};
+
+// 验证码输入处理
+const handleCodeInput = (e) => {
+    const value = e.target?.value || e;
+    // 只允许数字
+    const numbersOnly = value.replace(/\D/g, '');
+    verificationCode.value = numbersOnly.slice(0, 6);
+    
+    // 清除错误提示
+    if (codeError.value) {
+        codeError.value = '';
+    }
+};
+
+// 发送验证码
+const sendVerificationCode = async () => {
+    if (countdown.value > 0 || sendingCode.value) return;
+    
+    sendingCode.value = true;
+    sendStatus.value = '发送中...';
+    codeError.value = '';
+    
+    try {
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        // 假设发送成功
+        sendStatus.value = '发送成功';
+        countdown.value = 60;
+        
+        // 开始倒计时
+        timer = setInterval(() => {
+            countdown.value--;
+            if (countdown.value <= 0) {
+                clearInterval(timer);
+                timer = null;
+            }
+        }, 1000);
+        
+        message.success('验证码已发送');
+    } catch (error) {
+        codeError.value = '发送失败，请稍后重试';
+        sendStatus.value = '';
+    } finally {
+        sendingCode.value = false;
+    }
+};
+
+// 执行验证
+const handleVerify = async () => {
+    if (!isVerificationValid.value) {
+        codeError.value = '请输入有效的6位验证码';
+        return;
+    }
+    
+    verifying.value = true;
+    
+    try {
+        // 模拟API验证
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        
+        // 假设验证成功
+        message.success('身份验证成功');
+        
+        // 关闭验证对话框
+        verifyModalVisible.value = false;
+        
+        // 执行实际的变更操作
+        message.info('跳转至企业认证页面');
+        
+        // 这里可以添加跳转逻辑或API调用
+        // router.push('/enterprise-auth');
+        
+    } catch (error) {
+        codeError.value = '验证码错误，请重新输入';
+        verificationCode.value = '';
+    } finally {
+        verifying.value = false;
+    }
+};
+
+const handleExport = () => {
+    message.info('导出变更记录');
+};
+</script>
+
+<style scoped>
+.real-name-auth {
+    padding: 24px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background-color: #fafafa;
+    min-height: 100vh;
+}
+
+/* 页面标题区域 */
+.page-title-area {
+    margin-bottom: 32px;
+}
+
+.page-title {
+    margin: 0 0 12px;
+    font-size: 20px;
+    font-weight: 500;
+    color: #262626;
+}
+
+.page-description {
+    margin: 0;
+    color: #8c8c8c;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.protocol-link {
+    color: #1890ff;
+    text-decoration: none;
+}
+
+.protocol-link:hover {
+    text-decoration: underline;
+}
+
+/* 认证卡片 */
+.auth-card {
+    background: white;
+    border-radius: 8px;
+    padding: 24px;
+    margin-bottom: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f0f0f0;
+}
+
+/* 卡片内容区域 - 左右布局 */
+.card-content {
+    display: flex;
+    gap: 40px;
+    margin-bottom: 24px;
+}
+
+/* 左侧信息区 */
+.info-left {
+    flex: 1;
+}
+
+.card-title {
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.auth-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    background: #f6ffed;
+    border-radius: 4px;
+    margin-bottom: 12px;
+}
+
+.status-dot {
+    width: 6px;
+    height: 6px;
+    background: #52c41a;
+    border-radius: 50%;
+}
+
+.status-text {
+    color: #52c41a;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.auth-type {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+    color: #262626;
+}
+
+/* 信息网格 */
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.info-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.info-label {
+    color: #595959cf;
+    font-size: 16px;
+    margin-bottom: 6px;
+    font-weight: 400;
+}
+
+.info-value {
+    color: #262626;
+    font-size: 18px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* 右侧图片区 */
+.image-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    margin-top: 60px;
+}
+
+.auth-image {
+    width: 120px;
+    height: 120px;
+    object-fit: contain;
+    opacity: 0.9;
+}
+
+/* 操作按钮 */
+.card-actions {
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+    width: 200px;
+}
+
+.card-actions .ant-btn {
+    width: 100%;
+    height: 40px;
+    font-size: 14px;
+}
+
+/* 分割线 */
+.divider {
+    height: 1px;
+    background: #f0f0f0;
+    margin: 32px 0;
+}
+
+/* 变更记录区域 */
+.record-section {
+    background: white;
+    border-radius: 8px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f0f0f0;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.section-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #262626;
+}
+
+.section-actions .ant-btn-link {
+    color: #1890ff;
+    font-size: 13px;
+}
+
+/* 表格样式 */
+.change-record-table {
+    width: 100%;
+}
+
+.change-record-table :deep(.ant-table-thead > tr > th) {
+    background: #fafafa;
+    color: #595959;
+    font-weight: 500;
+    border-bottom: 1px solid #f0f0f0;
+    padding: 12px 16px;
+    font-size: 13px;
+}
+
+.change-record-table :deep(.ant-table-tbody > tr > td) {
+    padding: 12px 16px;
+    font-size: 13px;
+    color: #262626;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.change-record-table :deep(.ant-table-tbody > tr:hover > td) {
+    background: #fafafa;
+}
+
+/* 状态标签 */
+.status-tag {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 2px;
+    font-size: 12px;
+    font-weight: 400;
+}
+
+.status-success {
+    background: #f6ffed;
+    color: #52c41a;
+}
+
+.status-failed {
+    background: #fff2f0;
+    color: #ff4d4f;
+}
+
+.status-processing {
+    background: #e6f7ff;
+    color: #1890ff;
+}
+
+/* 空状态 */
+.empty-state {
+    padding: 48px 0;
+    text-align: center;
+}
+
+.empty-icon {
+    font-size: 24px;
+    margin-bottom: 12px;
+    opacity: 0.3;
+}
+
+.empty-text {
+    color: #bfbfbf;
+    font-size: 14px;
+    margin: 0;
+}
+
+/* 变更确认对话框样式 */
+.change-confirm-content {
+    padding: 8px 0;
+}
+
+.warning-section {
+    margin-bottom: 20px;
+}
+
+.warning-item {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding: 12px;
+    background: #fff7e6;
+    border-radius: 6px;
+    border-left: 4px solid #faad14;
+}
+
+.warning-item:last-child {
+    margin-bottom: 0;
+}
+
+.warning-icon {
+    font-size: 18px;
+    line-height: 1.4;
+}
+
+.warning-text {
+    flex: 1;
+    color: #262626;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.confirm-agreement {
+    padding: 16px;
+    background: #fafafa;
+    border-radius: 6px;
+    border: 1px solid #f0f0f0;
+}
+
+.confirm-agreement :deep(.ant-checkbox-wrapper) {
+    display: flex;
+    align-items: flex-start;
+}
+
+.agreement-text {
+    color: #595959;
+    font-size: 13px;
+    line-height: 1.4;
+    margin-left: 8px;
+}
+
+/* 身份验证对话框样式 */
+.verify-content {
+    padding: 8px 0;
+}
+
+.security-tip {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #f6f9ff;
+    border-radius: 8px;
+    border: 1px solid #e6f0ff;
+}
+
+.security-icon {
+    font-size: 20px;
+    line-height: 1.4;
+}
+
+.security-text {
+    flex: 1;
+}
+
+.security-title {
+    color: #1890ff;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.security-subtitle {
+    color: #595959;
+    font-size: 13px;
+}
+
+.phone-info {
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #fafafa;
+    border-radius: 6px;
+    border: 1px solid #f0f0f0;
+}
+
+.phone-label {
+    color: #595959;
+    font-size: 13px;
+    margin-bottom: 8px;
+}
+
+.phone-number {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.phone-icon {
+    font-size: 16px;
+}
+
+.phone-text {
+    color: #262626;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.verification-code {
+    margin-bottom: 16px;
+}
+
+.code-label {
+    color: #262626;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.code-input-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.code-input {
+    flex: 1;
+}
+
+.code-input :deep(.ant-input) {
+    height: 40px;
+    font-size: 14px;
+    letter-spacing: 2px;
+}
+
+.send-code-btn {
+    width: 100px;
+    height: 40px;
+    padding: 0;
+    white-space: nowrap;
+}
+
+.send-code-btn:disabled {
+    color: #bfbfbf;
+}
+
+.code-error {
+    color: #ff4d4f;
+    font-size: 12px;
+    margin-top: 4px;
+    min-height: 20px;
+}
+
+.send-status {
+    color: #595959;
+    font-size: 12px;
+    text-align: center;
+    margin-top: 8px;
+    min-height: 20px;
+}
+
+.send-success {
+    color: #52c41a;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+    .real-name-auth {
+        padding: 16px;
+    }
+
+    .card-content {
+        flex-direction: column;
+        gap: 24px;
+    }
+
+    .info-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .image-right {
+        width: 100%;
+        order: -1;
+    }
+
+    .auth-image {
+        width: 100px;
+        height: 100px;
+    }
+
+    .auth-card,
+    .record-section {
+        padding: 16px;
+    }
+
+    .code-input-group {
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .send-code-btn {
+        width: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/index.vue b/src/views/admin/index.vue
index 11e04a2..5731357 100644
--- a/src/views/admin/index.vue
+++ b/src/views/admin/index.vue
@@ -90,6 +90,8 @@ const menuItems: MenuItem[] = [
       { path: '/layout/admin/myCertificate', name: '我的算力券', visible: true },
       { path: '/layout/admin/myInvite', name: '我的邀请', visible: true },
       { path: '/layout/admin/msgCenter', name: '消息中心', visible: true },
+      { path: '/layout/admin/bankCard', name: '银行卡管理', visible: true },
+      { path: '/layout/admin/invoices', name: '发票抬头管理', visible: true },
     ],
   },
 ];