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.
980 lines
30 KiB
980 lines
30 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>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:root {
|
|
/* Traework 设计令牌 - 圆角/间距/阴影/高度 */
|
|
--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: 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-card-hover: 0 6px 20px rgba(0, 0, 0, 0.06);
|
|
--shadow-btn: 0 2px 8px rgba(38, 194, 187, 0.25);
|
|
--shadow-btn-hover: 0 4px 16px rgba(38, 194, 187, 0.35);
|
|
--shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12);
|
|
--shadow-float: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
--glass-bg: rgba(255, 255, 255, 0.72);
|
|
--glass-blur: blur(20px);
|
|
--glass-border: rgba(255, 255, 255, 0.3);
|
|
|
|
}
|
|
|
|
body {
|
|
font-family: 'YouthSans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', sans-serif;
|
|
background: var(--youth-bg-page);
|
|
color: var(--youth-text-primary);
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
overflow-x: hidden;}
|
|
|
|
/* ===== 手机容器 - 固定812px高度 ===== */
|
|
.phone-container {
|
|
width: 375px;
|
|
height: 812px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
background: var(--youth-bg-page);
|
|
overflow: hidden;
|
|
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;
|
|
position: relative;
|
|
z-index: 10;
|
|
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;
|
|
z-index: 10;
|
|
padding: 0 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
}
|
|
|
|
.nav-close {
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--youth-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-close:active {
|
|
transform: translateY(-50%) scale(0.92);
|
|
}
|
|
|
|
.nav-close svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--youth-text-tertiary);
|
|
}
|
|
|
|
/* ===== 背景光晕装饰 ===== */
|
|
.bg-glow {
|
|
position: absolute;
|
|
top: -80px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 500px;
|
|
height: 500px;
|
|
background: radial-gradient(circle, rgba(38, 194, 187, 0.12) 0%, rgba(38, 194, 187, 0.04) 40%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bg-glow-2 {
|
|
position: absolute;
|
|
bottom: 50px;
|
|
right: -100px;
|
|
width: 280px;
|
|
height: 280px;
|
|
background: radial-gradient(circle, rgba(84, 202, 197, 0.08) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ===== 内容区 ===== */
|
|
.scroll-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.scroll-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* ===== 成功大图标区 ===== */
|
|
.success-icon-section {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.success-icon-wrap {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.success-icon-circle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: var(--youth-gradient-primary);
|
|
box-shadow:
|
|
0 16px 36px rgba(38, 194, 187, 0.35),
|
|
0 6px 14px rgba(38, 194, 187, 0.2),
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.4),
|
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
animation: successBounce 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
.success-icon-circle::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 55%;
|
|
height: 35%;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 发光效果 */
|
|
.success-icon-glow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 110px;
|
|
height: 110px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(38, 194, 187, 0.3) 0%, rgba(38, 194, 187, 0.1) 40%, transparent 70%);
|
|
pointer-events: none;
|
|
animation: glowPulse 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glowPulse {
|
|
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
|
|
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
|
|
}
|
|
|
|
.success-checkmark {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.success-checkmark svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
@keyframes successBounce {
|
|
0% { transform: scale(0.2); opacity: 0; }
|
|
40% { transform: scale(1.12); }
|
|
65% { transform: scale(0.94); }
|
|
85% { transform: scale(1.04); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* ===== 撒花/星光粒子 ===== */
|
|
.confetti-container {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.confetti-piece {
|
|
position: absolute;
|
|
border-radius: 2px;
|
|
animation: confettiFall 2.5s ease-out forwards;
|
|
}
|
|
|
|
.confetti-star {
|
|
position: absolute;
|
|
animation: starBurst 2s ease-out forwards;
|
|
}
|
|
|
|
@keyframes confettiFall {
|
|
0% {
|
|
transform: translate(0, 0) rotate(0deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes starBurst {
|
|
0% {
|
|
transform: translate(0, 0) scale(0);
|
|
opacity: 0;
|
|
}
|
|
30% {
|
|
transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) scale(1.2);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(var(--tx), var(--ty)) scale(0.3);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* ===== 标题区 ===== */
|
|
.title-section {
|
|
text-align: center;
|
|
padding: 0 28px 14px;
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: fadeInUp 0.6s ease 0.2s both;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.sub-title {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--youth-text-tertiary);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* 认证徽章 */
|
|
.verified-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 5px 12px 5px 8px;
|
|
border-radius: 999px;
|
|
background: var(--youth-gradient-primary);
|
|
box-shadow: 0 3px 10px rgba(38, 194, 187, 0.25);
|
|
color: white;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
position: relative;
|
|
}
|
|
|
|
.verified-badge .shield-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.verified-badge .badge-text {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ===== 卡片通用样式 ===== */
|
|
.section-card {
|
|
margin: 0 20px 10px;
|
|
padding: 14px;
|
|
background: var(--youth-bg-card);
|
|
border-radius: var(--youth-radius-2xl);
|
|
border: 1px solid var(--youth-border-light);
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.card-title-icon {
|
|
width: 3px;
|
|
height: 14px;
|
|
border-radius: 12px;
|
|
background: var(--youth-gradient-primary);
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* 卡片淡入动画 */
|
|
.fade-up-1 { animation: fadeInUp 0.5s ease 0.35s both; }
|
|
.fade-up-2 { animation: fadeInUp 0.5s ease 0.45s both; }
|
|
.fade-up-3 { animation: fadeInUp 0.5s ease 0.55s both; }
|
|
.fade-up-4 { animation: fadeInUp 0.5s ease 0.65s both; }
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(16px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ===== 权益网格 ===== */
|
|
.benefits-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.benefit-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px 8px;
|
|
background: var(--youth-gradient-card);
|
|
border-radius: var(--youth-radius-xl);
|
|
border: 1px solid var(--youth-border-light);
|
|
box-shadow: var(--shadow-card), var(--youth-shadow-inset-dark);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.benefit-item:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.benefit-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 6px;
|
|
position: relative;
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.benefit-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: white;
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
|
|
}
|
|
|
|
.benefit-icon.teal {
|
|
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 100%);
|
|
}
|
|
|
|
.benefit-icon.orange {
|
|
background: linear-gradient(135deg, #FFCFA8 0%, #FFB980 100%);
|
|
}
|
|
|
|
.benefit-icon.purple {
|
|
background: linear-gradient(135deg, #C5D0DC 0%, #A8B8C8 100%);
|
|
}
|
|
|
|
.benefit-icon.pink {
|
|
background: linear-gradient(135deg, #A8E2DD 0%, #8ED8D3 100%);
|
|
}
|
|
|
|
.benefit-name {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.benefit-status {
|
|
font-size: 10px;
|
|
color: var(--youth-primary);
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* ===== 认证信息卡片 ===== */
|
|
.info-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--youth-border-light);
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.info-row:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 12px;
|
|
color: var(--youth-text-tertiary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.status-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
background: rgba(142, 216, 184, 0.15);
|
|
color: #6BBF95;
|
|
}
|
|
|
|
/* ===== 隐私提示 ===== */
|
|
.privacy-tip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
padding: 8px 20px 4px;
|
|
font-size: 11px;
|
|
color: var(--youth-gray-500);
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: fadeInUp 0.5s ease 0.7s both;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.privacy-tip svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ===== 底部操作区 ===== */
|
|
.bottom-actions {
|
|
padding: 10px 24px 16px;
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: fadeInUp 0.5s ease 0.8s both;
|
|
margin-top: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.youth-btn-primary {
|
|
width: 100%;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
border: none;
|
|
border-radius: var(--youth-radius-xl);
|
|
background: var(--youth-gradient-primary);
|
|
color: white;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 16px rgba(38, 194, 187, 0.3);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.youth-btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
|
|
border-radius: var(--youth-radius-xl) var(--youth-radius-xl) 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.youth-btn-primary:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 2px 8px rgba(38, 194, 187, 0.2);
|
|
}
|
|
|
|
.btn-text-secondary {
|
|
width: 100%;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
color: var(--youth-text-tertiary);
|
|
border: none;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.btn-text-secondary:active {
|
|
color: var(--youth-primary);
|
|
}
|
|
|
|
/* ===== 深色模式调整 ===== */
|
|
|
|
/* 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;
|
|
}
|
|
/* 侧栏图标 */
|
|
.sidebar-icon .icon-svg { width: 22px; height: 22px; font-size: 22px; }
|
|
/* 社团logo图标 */
|
|
.club-logo .icon-svg { width: 28px; height: 28px; font-size: 28px; color: #fff; }
|
|
/* 头图大图标 */
|
|
.hero-icon .icon-svg { width: 56px; height: 56px; font-size: 56px; opacity: 0.3; }
|
|
/* meta 小图标 */
|
|
.club-meta .icon-svg { width: 12px; height: 12px; font-size: 12px; }
|
|
/* 分类选择网格图标 */
|
|
.cat-option .icon-svg { width: 26px; height: 26px; font-size: 26px; }
|
|
/* logo预览图标 */
|
|
.logo-preview .icon-svg { width: 40px; height: 40px; font-size: 40px; color: #fff; }
|
|
/* 提示图标 */
|
|
.notice-icon .icon-svg { width: 18px; height: 18px; font-size: 18px; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="phone-container" style="height: 934px;">
|
|
<!-- 背景光晕 -->
|
|
<div class="bg-glow"></div>
|
|
<div class="bg-glow-2"></div>
|
|
|
|
<!-- 状态栏 -->
|
|
<div class="status-bar">
|
|
<span id="status-time">9:41</span>
|
|
<div class="right-icons">
|
|
<!-- 信号 -->
|
|
<svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor">
|
|
<rect x="0" y="8" width="3" height="4" rx="1" opacity="0.4"></rect>
|
|
<rect x="5" y="5" width="3" height="7" rx="1" opacity="0.6"></rect>
|
|
<rect x="10" y="2" width="3" height="10" rx="1" opacity="0.8"></rect>
|
|
<rect x="15" y="0" width="3" height="12" rx="1"></rect>
|
|
</svg>
|
|
<!-- WiFi -->
|
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor">
|
|
<path d="M8 10.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" opacity="1"></path>
|
|
<path d="M3.5 6.5a6 6 0 018.5 0" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.7"></path>
|
|
<path d="M1 3.5a9.5 9.5 0 0114 0" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.4"></path>
|
|
</svg>
|
|
<!-- 电池 -->
|
|
<svg width="26" height="12" viewBox="0 0 26 12" fill="none">
|
|
<rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke="currentColor" opacity="0.5"></rect>
|
|
<rect x="2" y="2" width="19" height="8" rx="1.5" fill="currentColor"></rect>
|
|
<rect x="23.5" y="4" width="2" height="4" rx="1" fill="currentColor" opacity="0.5"></rect>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 顶部导航 -->
|
|
<div class="top-nav">
|
|
<span class="nav-title">认证成功</span>
|
|
<div class="nav-close" onclick="handleClose()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 滚动内容区 -->
|
|
<div class="scroll-content">
|
|
<!-- 成功大图标区 -->
|
|
<div class="success-icon-section" data-dom-id="success-icon">
|
|
<div class="success-icon-wrap">
|
|
<!-- 发光层 -->
|
|
<div class="success-icon-glow"></div>
|
|
<!-- 撒花粒子容器 -->
|
|
<div class="confetti-container" id="confettiContainer"></div>
|
|
<!-- 主图标 -->
|
|
<div class="success-icon-circle">
|
|
<div class="success-checkmark">
|
|
<svg viewBox="0 0 52 52" fill="none">
|
|
<path d="M14 27L22 35L38 19" stroke="white" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<!-- 对勾厚度效果 - 第二层 -->
|
|
<path d="M14 27L22 35L38 19" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5" transform="translate(1, 1)"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 标题区 -->
|
|
<div class="title-section">
|
|
<h1 class="main-title">认证成功!</h1>
|
|
<p class="sub-title">恭喜你完成学信网实名认证</p>
|
|
<!-- 认证徽章 -->
|
|
<div class="verified-badge" data-dom-id="badge-verified">
|
|
<span class="shield-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
<path d="M9 12l2 2 4-4" stroke-width="2"></path>
|
|
</svg>
|
|
</span>
|
|
<span class="badge-text">已认证 · 清华大学·本科·2022级</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 解锁权益卡片 -->
|
|
<div class="section-card fade-up-1">
|
|
<div class="card-title">
|
|
<span class="card-title-icon"></span>
|
|
已解锁全部功能
|
|
</div>
|
|
<div class="benefits-grid">
|
|
<!-- 全校交友 -->
|
|
<div class="benefit-item" data-dom-id="benefit-social">
|
|
<div class="benefit-icon teal">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="benefit-name">全校交友</div>
|
|
<div class="benefit-status">
|
|
<svg width="10" height="10" 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>
|
|
<!-- 发布动态 -->
|
|
<div class="benefit-item" data-dom-id="benefit-post">
|
|
<div class="benefit-icon orange">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 19l7-7 3 3-7 7-3-3z"></path>
|
|
<path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
|
|
<path d="M2 2l7.586 7.586"></path>
|
|
<circle cx="11" cy="11" r="2"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="benefit-name">发布动态</div>
|
|
<div class="benefit-status">
|
|
<svg width="10" height="10" 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>
|
|
<!-- 组局活动 -->
|
|
<div class="benefit-item" data-dom-id="benefit-activity">
|
|
<div class="benefit-icon purple">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</svg>
|
|
</div>
|
|
<div class="benefit-name">组局活动</div>
|
|
<div class="benefit-status">
|
|
<svg width="10" height="10" 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>
|
|
<!-- 认证标识 -->
|
|
<div class="benefit-item" data-dom-id="benefit-badge">
|
|
<div class="benefit-icon pink">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="8" r="6"></circle>
|
|
<path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="benefit-name">认证标识</div>
|
|
<div class="benefit-status">
|
|
<svg width="10" height="10" 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 认证信息卡片 -->
|
|
<div class="section-card fade-up-2" data-dom-id="info-card">
|
|
<div class="card-title">
|
|
<span class="card-title-icon"></span>
|
|
认证信息
|
|
</div>
|
|
<div class="info-list">
|
|
<div class="info-row">
|
|
<span class="info-label">姓名</span>
|
|
<span class="info-value">张同学</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">学校</span>
|
|
<span class="info-value">清华大学</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">学历</span>
|
|
<span class="info-value">本科</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">学籍状态</span>
|
|
<span class="info-value">
|
|
<span class="status-tag">
|
|
<svg width="10" height="10" 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>
|
|
</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">有效期</span>
|
|
<span class="info-value">至2026年7月</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 隐私承诺小提示 -->
|
|
<div class="privacy-tip">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
你的身份信息已加密存储,仅用于认证核验
|
|
</div>
|
|
|
|
<!-- 底部操作区 -->
|
|
<div class="bottom-actions">
|
|
<button class="youth-btn-primary" data-dom-id="btn-explore" onclick="handleExplore()">
|
|
开始探索青核
|
|
</button>
|
|
<button class="btn-text-secondary" data-dom-id="btn-back-home" onclick="handleBackHome()">
|
|
返回首页
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>// ===== 主题切换 =====
|
|
html.classList.add('dark');
|
|
iconSun.style.display = 'none';
|
|
iconMoon.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// ===== 初始化主题 =====
|
|
}
|
|
|
|
// ===== 撒花粒子效果 =====
|
|
function createConfetti() {
|
|
const container = document.getElementById('confettiContainer');
|
|
const colors = ['#26C2BB', '#54CAC5', '#A8E2DD', '#FFB980', '#A8B8C8', '#8ED8D3', '#BFF3F0'];
|
|
const confettiCount = 16;
|
|
|
|
for (let i = 0; i < confettiCount; i++) {
|
|
const piece = document.createElement('div');
|
|
piece.className = 'confetti-piece';
|
|
|
|
const angle = (Math.PI * 2 * i) / confettiCount + (Math.random() - 0.5) * 0.5;
|
|
const distance = 60 + Math.random() * 80;
|
|
const tx = Math.cos(angle) * distance;
|
|
const ty = Math.sin(angle) * distance + 40;
|
|
const rot = Math.random() * 720 - 360;
|
|
const size = 4 + Math.random() * 4;
|
|
const color = colors[Math.floor(Math.random() * colors.length)];
|
|
const delay = Math.random() * 0.3;
|
|
|
|
piece.style.cssText = `
|
|
width: ${size}px;
|
|
height: ${size * (Math.random() > 0.5 ? 1.5 : 1)}px;
|
|
background: ${color};
|
|
--tx: ${tx}px;
|
|
--ty: ${ty}px;
|
|
--rot: ${rot}deg;
|
|
animation-delay: ${delay}s;
|
|
opacity: 0.8;
|
|
`;
|
|
|
|
container.appendChild(piece);
|
|
}
|
|
|
|
// 星星粒子
|
|
const starCount = 5;
|
|
for (let i = 0; i < starCount; i++) {
|
|
const star = document.createElement('div');
|
|
star.className = 'confetti-star';
|
|
|
|
const angle = (Math.PI * 2 * i) / starCount + (Math.random() - 0.5) * 0.3;
|
|
const distance = 50 + Math.random() * 60;
|
|
const tx = Math.cos(angle) * distance;
|
|
const ty = Math.sin(angle) * distance;
|
|
const size = 8 + Math.random() * 6;
|
|
const color = colors[Math.floor(Math.random() * colors.length)];
|
|
const delay = 0.1 + Math.random() * 0.2;
|
|
|
|
star.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 16 16" fill="${color}">
|
|
<path d="M8 0L9.5 6.5L16 8L9.5 9.5L8 16L6.5 9.5L0 8L6.5 6.5L8 0Z"/>
|
|
</svg>`;
|
|
|
|
star.style.cssText = `
|
|
--tx: ${tx}px;
|
|
--ty: ${ty}px;
|
|
animation-delay: ${delay}s;
|
|
`;
|
|
|
|
container.appendChild(star);
|
|
}
|
|
|
|
// 3秒后清除粒子
|
|
setTimeout(() => {
|
|
container.innerHTML = '';
|
|
}, 3000);
|
|
}
|
|
|
|
// ===== 按钮交互 =====
|
|
function handleExplore() {
|
|
window.location.href = 'feed-home.html';
|
|
}
|
|
|
|
function handleBackHome() {
|
|
window.location.href = 'feed-home.html';
|
|
}
|
|
|
|
function handleClose() {
|
|
window.location.href = 'feed-home.html';
|
|
}
|
|
|
|
// ===== 更新时间 =====
|
|
function updateTime() {
|
|
const now = new Date();
|
|
const hours = now.getHours().toString().padStart(2, '0');
|
|
const minutes = now.getMinutes().toString().padStart(2, '0');
|
|
document.getElementById('status-time').textContent = `${hours}:${minutes}`;
|
|
}
|
|
|
|
// ===== 初始化 =====
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateTime();
|
|
setInterval(updateTime, 60000);
|
|
|
|
// 延迟启动撒花动画,配合图标弹跳
|
|
setTimeout(createConfetti, 300);
|
|
});</script>
|
|
</body>
|
|
</html>
|
|
|
|
|