You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1238 lines
44 KiB
1238 lines
44 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>青核 Youthome - 实名认证</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--youth-primary: #26C2BB;
|
|
--youth-primary-light: #54CAC5;
|
|
--youth-bg-page: #F7F8FA;
|
|
--youth-bg-card: #FFFFFF;
|
|
--youth-text-primary: #1F1F1F;
|
|
--youth-text-secondary: #595959;
|
|
--youth-text-tertiary: #8C8C8C;
|
|
--youth-border-light: #E8E8E8;
|
|
--youth-success: #52C41A;
|
|
--youth-warning: #FAAD14;
|
|
--youth-error: #F5222D;
|
|
--youth-gradient-primary: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
|
|
--youth-gradient-progress: linear-gradient(90deg, #54CAC5 0%, #26C2BB 100%);
|
|
--youth-gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
|
|
--youth-gray-100: #F0F1F3;
|
|
--youth-gray-200: #E8E8E8;
|
|
--youth-gray-300: #D9D9D9;
|
|
--youth-gray-400: #BFBFBF;
|
|
--youth-muted-foreground: #8C8C8C;
|
|
--youth-accent: #E6F7F6;
|
|
--youth-accent-foreground: #26C2BB;
|
|
--youth-inset-soft: inset 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
--youth-inset-input: inset 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
--youth-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
--youth-shadow-lg: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
--youth-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
--radius-xs: 4px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 9999px;
|
|
--height-btn: 44px;
|
|
--height-input: 44px;
|
|
--height-nav-bottom: 64px;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
--shadow-btn: 0 2px 8px rgba(38, 194, 187, 0.25);
|
|
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
body {
|
|
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: var(--youth-bg-page);
|
|
color: var(--youth-text-primary);
|
|
overflow: hidden;
|
|
overflow-x: hidden;}
|
|
|
|
.page-container {
|
|
width: 375px;
|
|
height: 812px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--youth-bg-page);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 状态栏 */
|
|
.status-bar {
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-bar .right-icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* 顶部导航 */
|
|
.top-nav {
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
padding: 0 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-back-btn {
|
|
position: absolute;
|
|
left: 16px;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--youth-bg-card);
|
|
border: 1px solid var(--youth-border-light);
|
|
box-shadow: var(--shadow-card);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
color: var(--youth-text-primary);
|
|
}
|
|
|
|
.nav-back-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
}
|
|
|
|
/* 内容区 */
|
|
.scroll-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 0 16px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 三步进度条 */
|
|
.steps-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 0 4px;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.step-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.step-circle {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.step-circle.pending {
|
|
background: var(--youth-gray-100);
|
|
color: var(--youth-gray-400);
|
|
border: 1px solid var(--youth-border-light);
|
|
box-shadow: var(--youth-inset-soft);
|
|
}
|
|
|
|
.step-circle.active {
|
|
background: var(--youth-gradient-primary);
|
|
color: white;
|
|
box-shadow: 0 3px 12px rgba(38, 194, 187, 0.4), 0 0 0 3px rgba(38, 194, 187, 0.15);
|
|
animation: stepGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes stepGlow {
|
|
0%, 100% { box-shadow: 0 3px 12px rgba(38, 194, 187, 0.4), 0 0 0 3px rgba(38, 194, 187, 0.15); }
|
|
50% { box-shadow: 0 3px 16px rgba(38, 194, 187, 0.5), 0 0 0 5px rgba(38, 194, 187, 0.2); }
|
|
}
|
|
|
|
.step-circle.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
|
|
border-radius: 50% 50% 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.step-circle.completed {
|
|
background: var(--youth-gradient-primary);
|
|
color: white;
|
|
box-shadow: 0 2px 6px rgba(38, 194, 187, 0.3);
|
|
}
|
|
|
|
.step-circle.completed svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.step-label {
|
|
margin-top: 4px;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--youth-muted-foreground);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.step-item.active .step-label {
|
|
color: var(--youth-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.step-item.completed .step-label {
|
|
color: var(--youth-primary);
|
|
}
|
|
|
|
.step-connector {
|
|
flex: 1;
|
|
height: 2.5px;
|
|
margin: 0 4px;
|
|
margin-bottom: 16px;
|
|
border-radius: 2px;
|
|
background: var(--youth-gray-200);
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: var(--youth-inset-soft);
|
|
}
|
|
|
|
.step-connector.filled {
|
|
background: var(--youth-gradient-progress);
|
|
box-shadow: 0 1px 2px rgba(38, 194, 187, 0.2);
|
|
}
|
|
|
|
.step-connector.filled::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
|
|
}
|
|
|
|
.steps-subtitle {
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: var(--youth-muted-foreground);
|
|
margin-bottom: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 页面标题区 */
|
|
.page-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--youth-text-primary);
|
|
line-height: 1.3;
|
|
margin-bottom: 2px;
|
|
letter-spacing: -0.015em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 12px;
|
|
color: var(--youth-muted-foreground);
|
|
line-height: 1.5;
|
|
margin-bottom: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 扫描动画区域 */
|
|
.scan-animation-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 6px 0 10px;
|
|
transition: all 0.4s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.scan-animation-wrap.hidden {
|
|
opacity: 0;
|
|
height: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scan-document-icon {
|
|
width: 52px;
|
|
height: 66px;
|
|
position: relative;
|
|
background: var(--youth-bg-card);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--youth-border-light);
|
|
box-shadow: var(--youth-shadow-md), var(--youth-inset-soft);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scan-document-icon::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
right: 8px;
|
|
height: 4px;
|
|
background: var(--youth-gray-200);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.scan-document-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 8px;
|
|
right: 12px;
|
|
height: 2px;
|
|
background: var(--youth-gray-200);
|
|
border-radius: 2px;
|
|
box-shadow: 0 7px 0 var(--youth-gray-200), 0 14px 0 var(--youth-gray-200), 0 21px 0 var(--youth-gray-200), 0 28px 0 var(--youth-gray-200);
|
|
}
|
|
|
|
.scan-line {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent 0%, var(--youth-primary) 50%, transparent 100%);
|
|
box-shadow: 0 0 8px rgba(38, 194, 187, 0.6), 0 0 16px rgba(38, 194, 187, 0.3);
|
|
animation: scanMove 2s ease-in-out infinite;
|
|
z-index: 2;
|
|
}
|
|
|
|
@keyframes scanMove {
|
|
0% { top: 0; opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { top: 100%; opacity: 0; }
|
|
}
|
|
|
|
.scan-text {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--youth-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.scan-dots::after {
|
|
content: '';
|
|
animation: scanDots 1.5s steps(4, end) infinite;
|
|
}
|
|
|
|
@keyframes scanDots {
|
|
0% { content: ''; }
|
|
25% { content: '.'; }
|
|
50% { content: '..'; }
|
|
75% { content: '...'; }
|
|
100% { content: ''; }
|
|
}
|
|
|
|
/* 识别成功状态 */
|
|
.scan-success-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 6px 0 8px;
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
height: 0;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.scan-success-wrap.show {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
height: auto;
|
|
padding: 6px 0 8px;
|
|
}
|
|
|
|
.success-circle {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 14px rgba(38, 194, 187, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.success-circle::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
|
|
border-radius: 50% 50% 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.success-circle svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: white;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
|
|
}
|
|
|
|
.success-text {
|
|
margin-top: 6px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--youth-primary);
|
|
}
|
|
|
|
/* OCR信息卡片 */
|
|
.ocr-info-card {
|
|
background: var(--youth-gradient-card);
|
|
border-radius: 12px;
|
|
padding: 2px 14px;
|
|
box-shadow: var(--youth-shadow-lg);
|
|
border: 1px solid var(--youth-border-light);
|
|
margin-bottom: 8px;
|
|
opacity: 0;
|
|
transform: translateY(16px);
|
|
transition: all 0.5s ease;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ocr-info-card.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.ocr-info-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
|
|
border-radius: 12px 12px 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.info-field-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--youth-border-light);
|
|
gap: 8px;
|
|
}
|
|
|
|
.info-field-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-field-label {
|
|
font-size: 12px;
|
|
color: var(--youth-muted-foreground);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-field-value-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.info-field-value {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--youth-text-primary);
|
|
text-align: right;
|
|
}
|
|
|
|
.info-field-edit {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--youth-accent);
|
|
color: var(--youth-accent-foreground);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-field-edit:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.info-field-edit svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* 已验证徽章 */
|
|
.verified-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 2px 6px;
|
|
background: var(--youth-gradient-primary);
|
|
border-radius: 16px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: white;
|
|
box-shadow: 0 2px 6px rgba(38, 194, 187, 0.3);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.verified-badge svg {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
/* 学籍状态标签 */
|
|
.status-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 2px 8px;
|
|
background: rgba(142, 216, 184, 0.15);
|
|
border-radius: 16px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: #8ED8B8;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-tag::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: #8ED8B8;
|
|
animation: statusPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes statusPulse {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(142, 216, 184, 0.4); }
|
|
50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(142, 216, 184, 0); }
|
|
}
|
|
|
|
/* 复选框 */
|
|
.checkbox-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.custom-checkbox {
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 5px;
|
|
background: var(--youth-bg-card);
|
|
border: 1px solid var(--youth-border-light);
|
|
box-shadow: var(--youth-inset-soft);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.custom-checkbox.checked {
|
|
background: var(--youth-gradient-primary);
|
|
border-color: transparent;
|
|
box-shadow: 0 2px 6px rgba(38, 194, 187, 0.35), var(--youth-inset-soft);
|
|
}
|
|
|
|
.custom-checkbox svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
color: white;
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.custom-checkbox.checked svg {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.checkbox-label {
|
|
font-size: 11px;
|
|
color: var(--youth-muted-foreground);
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
}
|
|
|
|
.checkbox-label strong {
|
|
color: var(--youth-text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 警告卡片 */
|
|
.warning-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
background: linear-gradient(135deg, rgba(255, 185, 128, 0.12) 0%, rgba(255, 185, 128, 0.06) 100%);
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 185, 128, 0.2);
|
|
margin-bottom: 8px;
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
transition: all 0.4s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.warning-card.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.warning-icon {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #FFCBA3 0%, #FFB980 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 2px 6px rgba(255, 185, 128, 0.3);
|
|
}
|
|
|
|
.warning-icon svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
color: white;
|
|
}
|
|
|
|
.warning-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.warning-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #C4865A;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.warning-text {
|
|
font-size: 10px;
|
|
color: #B07848;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 底部操作区 */
|
|
.bottom-actions {
|
|
padding-top: 4px;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
transition: all 0.4s ease 0.2s;
|
|
margin-top: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.bottom-actions.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-submit {
|
|
width: 100%;
|
|
height: 44px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
|
|
color: white;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
box-shadow: 0 3px 14px rgba(38,194,187,0.25);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.btn-submit::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-submit:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 2px 10px rgba(38,194,187,0.2);
|
|
}
|
|
|
|
.btn-submit:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
background: var(--youth-gray-300);
|
|
}
|
|
|
|
.btn-prev {
|
|
width: 100%;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--youth-muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-top: 6px;
|
|
font-family: inherit;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.btn-prev:hover {
|
|
color: var(--youth-gray-500);
|
|
}
|
|
|
|
/* 背景装饰 */
|
|
.bg-glow {
|
|
position: absolute;
|
|
top: -80px;
|
|
right: -80px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(circle, rgba(38, 194, 187, 0.08) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bg-glow-2 {
|
|
position: absolute;
|
|
bottom: 80px;
|
|
left: -80px;
|
|
width: 180px;
|
|
height: 180px;
|
|
background: radial-gradient(circle, rgba(84, 202, 197, 0.06) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.content-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 字段编辑弹窗 */
|
|
.edit-field-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
z-index: 998;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.edit-field-modal.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.edit-field-sheet {
|
|
width: 375px;
|
|
background: var(--youth-bg-card);
|
|
border-radius: 20px 20px 0 0;
|
|
padding: 16px 20px 28px;
|
|
transform: translateY(100%);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 999;
|
|
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
|
|
position: relative;
|
|
}
|
|
|
|
.edit-field-modal.show .edit-field-sheet {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.edit-sheet-handle {
|
|
width: 36px;
|
|
height: 4px;
|
|
background: var(--youth-gray-300);
|
|
border-radius: 2px;
|
|
margin: 0 auto 12px;
|
|
}
|
|
|
|
.edit-sheet-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.edit-input {
|
|
width: 100%;
|
|
height: 44px;
|
|
background: var(--youth-bg-card);
|
|
border: 1px solid var(--youth-border-light);
|
|
border-radius: 8px;
|
|
padding: 0 14px;
|
|
font-size: 14px;
|
|
color: var(--youth-text-primary);
|
|
box-shadow: var(--youth-inset-input);
|
|
font-family: inherit;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.edit-input:focus {
|
|
outline: none;
|
|
border-color: var(--youth-primary);
|
|
box-shadow: var(--youth-inset-input), 0 0 0 3px rgba(38, 194, 187, 0.15);
|
|
}
|
|
|
|
.edit-save-btn {
|
|
width: 100%;
|
|
height: 44px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: var(--youth-gradient-primary);
|
|
color: white;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
box-shadow: 0 3px 12px rgba(38, 194, 187, 0.25);
|
|
}
|
|
|
|
.edit-save-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* SVG 图标统一尺寸 */
|
|
.icon-svg {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
}
|
|
.icon-svg svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
stroke: currentColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
<!-- 背景装饰 -->
|
|
<div class="bg-glow"></div>
|
|
<div class="bg-glow-2"></div>
|
|
|
|
<div class="content-wrap">
|
|
<!-- 状态栏 -->
|
|
<div class="status-bar">
|
|
<span>9:41</span>
|
|
<div class="right-icons">
|
|
<svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor">
|
|
<rect x="0" y="7" width="3" height="4" rx="0.5"></rect>
|
|
<rect x="4.5" y="5" width="3" height="6" rx="0.5"></rect>
|
|
<rect x="9" y="2.5" width="3" height="8.5" rx="0.5"></rect>
|
|
<rect x="13.5" y="0" width="3" height="11" rx="0.5"></rect>
|
|
</svg>
|
|
<svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor">
|
|
<path d="M7.5 11C6.9 11 6.4 10.8 6 10.4C5.2 9.6 5 8.6 5.4 7.6C5.8 6.6 6.8 6 7.8 6C9 6 10 6.8 10.2 8C10.4 8.8 10 9.6 9.4 10.2C8.9 10.7 8.2 11 7.5 11Z"></path>
|
|
<path d="M7.5 4.5C6 4.5 4.5 5 3.4 6.2C2.3 7.4 2 9 2.4 10.4C2.5 10.8 2.8 11 3.2 11C3.5 11 3.8 10.8 3.9 10.5C4.2 9.5 4.8 8.6 5.7 8C6.6 7.4 7.6 7.1 8.6 7.2C9.8 7.3 10.9 7.8 11.6 8.7C12.3 9.6 12.6 10.7 12.4 11.8L12.4 12C12.3 12.4 12.6 12.7 13 12.8C13.4 12.9 13.7 12.6 13.8 12.2C14.1 10.5 13.5 8.8 12.4 7.5C11.3 6.2 9.6 5.3 7.8 4.9L7.5 4.5Z"></path>
|
|
<path d="M7.5 1C5.3 1 3.2 1.7 1.5 3C-0.5 4.7 -0.5 7.5 1.5 9.2C1.9 9.6 2.5 9.6 2.9 9.2C3.3 8.8 3.3 8.2 2.9 7.8C1.6 6.5 1.6 4.4 2.9 3.1C4.2 1.9 5.8 1.3 7.5 1.3C9.2 1.3 10.8 1.9 12.1 3.1C13.4 4.4 13.7 6.5 12.6 8.1C12.3 8.5 11.8 8.6 11.4 8.3C11 7.9 10.9 7.4 11.2 7C12 6 12.1 4.7 11.4 3.7C10.5 2.5 9 1.9 7.5 1.9Z" opacity="0.9"></path>
|
|
</svg>
|
|
<svg width="25" height="11" viewBox="0 0 25 11" fill="none">
|
|
<rect x="0.5" y="0.5" width="21" height="10" rx="2.5" stroke="currentColor" opacity="0.5"></rect>
|
|
<rect x="2" y="2" width="18" height="7" rx="1.5" fill="currentColor"></rect>
|
|
<rect x="22.5" y="3.5" width="2" height="4" rx="1" fill="currentColor" opacity="0.5"></rect>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 顶部导航 -->
|
|
<div class="top-nav">
|
|
<button class="nav-back-btn" data-dom-id="btn-back" onclick="goBack()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
<span class="nav-title">学生认证</span>
|
|
</div>
|
|
|
|
<!-- 内容区 -->
|
|
<div class="scroll-content">
|
|
<!-- 三步进度条 -->
|
|
<div class="steps-progress">
|
|
<div class="step-item completed">
|
|
<div class="step-circle completed">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="step-label">基础信息</span>
|
|
</div>
|
|
<div class="step-connector filled"></div>
|
|
<div class="step-item completed">
|
|
<div class="step-circle completed">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="step-label">上传报告</span>
|
|
</div>
|
|
<div class="step-connector filled"></div>
|
|
<div class="step-item active">
|
|
<div class="step-circle active">3</div>
|
|
<span class="step-label">识别验证</span>
|
|
</div>
|
|
</div>
|
|
<div class="steps-subtitle">
|
|
</div>
|
|
|
|
<!-- 页面标题 -->
|
|
<h1 class="page-title">识别结果确认</h1>
|
|
<p class="page-subtitle">OCR已自动识别以下信息,请核对是否正确</p>
|
|
|
|
<!-- 扫描动画区域 -->
|
|
<div class="scan-animation-wrap" data-dom-id="scan-animation" id="scanAnimation">
|
|
<div class="scan-document-icon">
|
|
<div class="scan-line"></div>
|
|
</div>
|
|
<div class="scan-text">
|
|
<span>正在识别中</span><span class="scan-dots"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 识别成功 -->
|
|
<div class="scan-success-wrap" id="scanSuccess">
|
|
<div class="success-circle">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div class="success-text">识别成功</div>
|
|
</div>
|
|
|
|
<!-- OCR识别信息卡片 -->
|
|
<div class="ocr-info-card" id="ocrInfoCard">
|
|
<div class="info-field-row">
|
|
<span class="info-field-label">真实姓名</span>
|
|
<div class="info-field-value-wrap">
|
|
<span class="info-field-value" data-dom-id="info-name" id="infoName">张明远</span>
|
|
<button class="info-field-edit" data-dom-id="btn-edit-field" onclick="openEditField('name', '真实姓名')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="info-field-row">
|
|
<span class="info-field-label">身份证号</span>
|
|
<div class="info-field-value-wrap">
|
|
<span class="info-field-value" data-dom-id="info-idcard" id="infoIdcard">110101********1234</span>
|
|
<button class="info-field-edit" data-dom-id="btn-edit-field" onclick="openEditField('idcard', '身份证号')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="info-field-row">
|
|
<span class="info-field-label">学校名称</span>
|
|
<div class="info-field-value-wrap">
|
|
<span class="info-field-value" data-dom-id="info-school" id="infoSchool">清华大学</span>
|
|
<span class="verified-badge">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
已验证
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="info-field-row">
|
|
<span class="info-field-label">学历层次</span>
|
|
<div class="info-field-value-wrap">
|
|
<span class="info-field-value" data-dom-id="info-degree" id="infoDegree">本科</span>
|
|
<button class="info-field-edit" data-dom-id="btn-edit-field" onclick="openEditField('degree', '学历层次')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="info-field-row">
|
|
<span class="info-field-label">入学年份</span>
|
|
<div class="info-field-value-wrap">
|
|
<span class="info-field-value" data-dom-id="info-year" id="infoYear">2022级</span>
|
|
<button class="info-field-edit" data-dom-id="btn-edit-field" onclick="openEditField('year', '入学年份')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="info-field-row">
|
|
<span class="info-field-label">专业</span>
|
|
<div class="info-field-value-wrap">
|
|
<span class="info-field-value" data-dom-id="info-major" id="infoMajor">计算机科学与技术</span>
|
|
<button class="info-field-edit" data-dom-id="btn-edit-field" onclick="openEditField('major', '专业')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="info-field-row">
|
|
<span class="info-field-label">学籍状态</span>
|
|
<div class="info-field-value-wrap">
|
|
<span class="status-tag" data-dom-id="info-status" id="infoStatus">在籍</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 警告卡片 -->
|
|
<div class="warning-card" id="warningCard">
|
|
<div class="warning-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
|
|
<line x1="12" y1="9" x2="12" y2="13"></line>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
</svg>
|
|
</div>
|
|
<div class="warning-content">
|
|
<div class="warning-title">信息识别提示</div>
|
|
<div class="warning-text">部分信息识别可能存在偏差,请仔细核对后再提交</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 确认复选框 -->
|
|
<div class="checkbox-wrapper" onclick="toggleConfirm()">
|
|
<div class="custom-checkbox" id="checkboxConfirm" data-dom-id="checkbox-confirm">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="checkbox-label">
|
|
我确认以上信息与<strong>学信网报告</strong>一致,信息真实有效
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 底部操作区 -->
|
|
<div class="bottom-actions" id="bottomActions">
|
|
<button class="btn-submit" data-dom-id="btn-submit" id="btnSubmit" onclick="handleSubmit()" disabled>
|
|
提交认证
|
|
</button>
|
|
<button class="btn-prev" data-dom-id="btn-prev" onclick="goPrev()">
|
|
返回修改
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 字段编辑弹窗 -->
|
|
<div class="edit-field-modal" id="editFieldModal">
|
|
<div class="edit-field-sheet">
|
|
<div class="edit-sheet-handle"></div>
|
|
<div class="edit-sheet-title" id="editSheetTitle">编辑字段</div>
|
|
<input type="text" class="edit-input" id="editFieldInput" placeholder="请输入内容">
|
|
<button class="edit-save-btn" onclick="saveFieldEdit()">保存</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ===== 返回按钮 =====
|
|
function goBack() {
|
|
window.location.href = 'auth-step2.html';
|
|
}
|
|
|
|
// ===== 返回修改 =====
|
|
function goPrev() {
|
|
window.location.href = 'auth-step2.html';
|
|
}
|
|
|
|
// ===== 提交认证 =====
|
|
function handleSubmit() {
|
|
if (!isConfirmed) return;
|
|
window.location.href = 'auth-success.html';
|
|
}
|
|
|
|
// ===== 复选框切换 =====
|
|
let isConfirmed = false;
|
|
function toggleConfirm() {
|
|
isConfirmed = !isConfirmed;
|
|
const checkbox = document.getElementById('checkboxConfirm');
|
|
const btnSubmit = document.getElementById('btnSubmit');
|
|
|
|
if (isConfirmed) {
|
|
checkbox.classList.add('checked');
|
|
btnSubmit.disabled = false;
|
|
} else {
|
|
checkbox.classList.remove('checked');
|
|
btnSubmit.disabled = true;
|
|
}
|
|
}
|
|
|
|
// ===== 字段编辑 =====
|
|
let currentEditField = '';
|
|
function openEditField(field, title) {
|
|
currentEditField = field;
|
|
const modal = document.getElementById('editFieldModal');
|
|
const sheetTitle = document.getElementById('editSheetTitle');
|
|
const input = document.getElementById('editFieldInput');
|
|
|
|
sheetTitle.textContent = '编辑' + title;
|
|
|
|
input.value = document.getElementById('info' + field.charAt(0).toUpperCase() + field.slice(1)).textContent;
|
|
|
|
modal.classList.add('show');
|
|
setTimeout(() => input.focus(), 300);
|
|
}
|
|
|
|
function saveFieldEdit() {
|
|
const input = document.getElementById('editFieldInput');
|
|
const value = input.value.trim();
|
|
|
|
if (value) {
|
|
const fieldId = 'info' + currentEditField.charAt(0).toUpperCase() + currentEditField.slice(1);
|
|
const el = document.getElementById(fieldId);
|
|
if (el) {
|
|
el.textContent = value;
|
|
}
|
|
}
|
|
|
|
document.getElementById('editFieldModal').classList.remove('show');
|
|
}
|
|
|
|
// 点击弹窗背景关闭
|
|
document.getElementById('editFieldModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
this.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// ===== OCR识别动画 =====
|
|
function startOCRRecognition() {
|
|
setTimeout(() => {
|
|
document.getElementById('scanAnimation').classList.add('hidden');
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('scanSuccess').classList.add('show');
|
|
}, 200);
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('ocrInfoCard').classList.add('show');
|
|
}, 400);
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('warningCard').classList.add('show');
|
|
}, 600);
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('bottomActions').classList.add('show');
|
|
}, 800);
|
|
}, 2000);
|
|
}
|
|
|
|
// 页面加载后启动识别动画
|
|
window.addEventListener('load', function() {
|
|
startOCRRecognition();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|