代码修改
This commit is contained in:
qiuyuan
parent
8551a4cf09
commit
336e9b4e42
@ -197,6 +197,12 @@ const routes: RouteRecordRaw[] = [
|
|||||||
component: () =>
|
component: () =>
|
||||||
import("@/views/admin/account/realnameAuthTrue/index.vue"),
|
import("@/views/admin/account/realnameAuthTrue/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "realnameAuthBusiness",
|
||||||
|
name: "realnameAuthBusiness",
|
||||||
|
component: () =>
|
||||||
|
import("@/views/admin/account/realnameAuthBusiness/index.vue"),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "enterRealAuth",
|
path: "enterRealAuth",
|
||||||
name: "EnterRealAuth",
|
name: "EnterRealAuth",
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
782
src/views/admin/account/realnameAuthBusiness/index.vue
Normal file
782
src/views/admin/account/realnameAuthBusiness/index.vue
Normal file
@ -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>
|
||||||
@ -59,7 +59,7 @@
|
|||||||
|
|
||||||
<!-- 操作区域 -->
|
<!-- 操作区域 -->
|
||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<a-button type="primary" size="large" @click="handleChangeAuth">
|
<a-button type="primary" size="large" @click="showChangeConfirm">
|
||||||
变更为企业认证
|
变更为企业认证
|
||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
@ -93,12 +93,117 @@
|
|||||||
</template>
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, computed, onUnmounted } from 'vue';
|
||||||
import { Button as AButton, Table as ATable, message } from 'ant-design-vue';
|
import {
|
||||||
|
Button as AButton,
|
||||||
|
Table as ATable,
|
||||||
|
Modal as AModal,
|
||||||
|
Checkbox as ACheckbox,
|
||||||
|
Input as AInput,
|
||||||
|
message
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
// 表格列定义
|
// 表格列定义
|
||||||
const columns = [
|
const columns = [
|
||||||
@ -147,6 +252,51 @@ const dataSource = ref([
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
// 对话框状态
|
||||||
|
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 getStatusClass = (status) => {
|
||||||
const statusMap = {
|
const statusMap = {
|
||||||
'成功': 'status-success',
|
'成功': 'status-success',
|
||||||
@ -160,8 +310,131 @@ const handleCopy = () => {
|
|||||||
message.success('身份证号已复制');
|
message.success('身份证号已复制');
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChangeAuth = () => {
|
// 显示变更确认对话框
|
||||||
message.info('跳转至企业认证页面');
|
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 = () => {
|
const handleExport = () => {
|
||||||
@ -258,7 +531,7 @@ const handleExport = () => {
|
|||||||
|
|
||||||
.auth-type {
|
.auth-type {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #262626;
|
color: #262626;
|
||||||
}
|
}
|
||||||
@ -277,14 +550,14 @@ const handleExport = () => {
|
|||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
color: #595959cf;
|
color: #595959cf;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value {
|
.info-value {
|
||||||
color: #262626;
|
color: #262626;
|
||||||
font-size: 14px;
|
font-size: 18px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -422,6 +695,184 @@ const handleExport = () => {
|
|||||||
margin: 0;
|
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) {
|
@media (max-width: 768px) {
|
||||||
.real-name-auth {
|
.real-name-auth {
|
||||||
@ -452,5 +903,14 @@ const handleExport = () => {
|
|||||||
.record-section {
|
.record-section {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.code-input-group {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-code-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user