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.
1268 lines
50 KiB
1268 lines
50 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=375, 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);
|
|
|
|
}
|
|
|
|
html, body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--youth-bg-page);
|
|
color: var(--youth-text-primary);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.app-container {
|
|
width: 375px;
|
|
height: 812px;
|
|
margin: 0 auto;
|
|
background: var(--youth-bg-page);
|
|
position: relative;
|
|
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;
|
|
color: var(--youth-text-primary);
|
|
position: relative;
|
|
z-index: 10;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-bar .right-icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.status-bar svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* ===== 导航栏 ===== */
|
|
.nav-bar {
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--youth-radius-lg);
|
|
background: var(--youth-bg-card);
|
|
border: 1px solid var(--youth-border-light);
|
|
box-shadow: var(--shadow-card), var(--youth-inset-soft);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
color: var(--youth-text-primary);
|
|
}
|
|
|
|
.nav-btn:active {
|
|
transform: scale(0.95);
|
|
box-shadow: var(--youth-inset-soft);
|
|
}
|
|
|
|
.nav-btn-skip {
|
|
width: auto;
|
|
padding: 0 14px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--youth-muted-foreground);
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* ===== 分步进度条 ===== */
|
|
.stepper-section {
|
|
padding: 4px 20px 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stepper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
|
|
.stepper-line {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 28px;
|
|
right: 28px;
|
|
height: 2px;
|
|
background: var(--youth-gray-200);
|
|
transform: translateY(-50%);
|
|
z-index: 0;
|
|
box-shadow: var(--youth-inset-soft);
|
|
}
|
|
|
|
.stepper-line-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: var(--youth-gradient-progress);
|
|
border-radius: 1px;
|
|
box-shadow: 0 1px 2px rgba(38, 194, 187, 0.3);
|
|
}
|
|
|
|
.stepper-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stepper-dot {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--youth-gray-200);
|
|
border: 2px solid var(--youth-gray-200);
|
|
box-shadow: var(--youth-inset-soft);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.stepper-dot.completed {
|
|
background: var(--youth-gradient-primary);
|
|
border-color: transparent;
|
|
box-shadow: 0 2px 6px rgba(38, 194, 187, 0.35), var(--youth-inset-soft);
|
|
}
|
|
|
|
.stepper-dot.completed svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: white;
|
|
}
|
|
|
|
.stepper-dot.active {
|
|
background: var(--youth-gradient-primary);
|
|
border-color: transparent;
|
|
box-shadow: 0 0 0 4px rgba(38, 194, 187, 0.15), 0 2px 8px rgba(38, 194, 187, 0.4);
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.stepper-dot.active .dot-inner {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 4px rgba(38, 194, 187, 0.15), 0 2px 8px rgba(38, 194, 187, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 8px rgba(38, 194, 187, 0.08), 0 2px 12px rgba(38, 194, 187, 0.5);
|
|
}
|
|
}
|
|
|
|
.stepper-label {
|
|
font-size: 11px;
|
|
color: var(--youth-muted-foreground);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stepper-label.active {
|
|
color: var(--youth-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stepper-label.completed {
|
|
color: var(--youth-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stepper-progress-text {
|
|
text-align: center;
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: var(--youth-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ===== 标题区 ===== */
|
|
.hero-section {
|
|
padding: 6px 20px 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 20px;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.hero-title .brand {
|
|
background: var(--youth-gradient-primary);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 15px;
|
|
color: var(--youth-muted-foreground);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===== 表单卡片 ===== */
|
|
.form-card {
|
|
margin: 0 16px 10px;
|
|
background: var(--youth-gradient-card);
|
|
border-radius: 12px;
|
|
padding: 10px 14px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
border: 1px solid var(--youth-border-light);
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-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: 24px 24px 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.form-label .count-badge {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--youth-primary);
|
|
background: var(--youth-accent);
|
|
padding: 2px 8px;
|
|
border-radius: var(--youth-radius-full);
|
|
}
|
|
|
|
/* ===== 家乡三级选择器 ===== */
|
|
.hometown-selectors {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.hometown-selector {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.hometown-selector select {
|
|
background: var(--youth-input);
|
|
border: 1px solid var(--youth-border-light);
|
|
border-radius: var(--youth-radius-lg);
|
|
padding: 8px 26px 8px 8px;
|
|
font-size: 12px;
|
|
color: var(--youth-text-primary);
|
|
box-shadow: var(--youth-inset-input);
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-align-last: center;
|
|
}
|
|
|
|
.hometown-selector select:focus {
|
|
outline: none;
|
|
border-color: var(--youth-primary);
|
|
box-shadow: var(--youth-inset-input), 0 0 0 3px rgba(38, 194, 187, 0.15);
|
|
}
|
|
|
|
.hometown-selector select:invalid {
|
|
color: var(--youth-gray-400);
|
|
}
|
|
|
|
.hometown-selector select option {
|
|
color: var(--youth-text-primary);
|
|
background: var(--youth-bg-card);
|
|
}
|
|
|
|
.hometown-selector .select-arrow {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--youth-gray-400);
|
|
pointer-events: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hometown-selector .select-arrow svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* ===== 兴趣标签区域 ===== */
|
|
.tags-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.interest-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--youth-radius-full);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
border: 2px solid transparent;
|
|
user-select: none;
|
|
}
|
|
|
|
.interest-tag:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.interest-tag .tag-icon {
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.interest-tag .tag-check {
|
|
display: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.interest-tag .tag-check svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
color: white;
|
|
}
|
|
|
|
.interest-tag.selected {
|
|
border: 2px solid var(--youth-primary);
|
|
box-shadow: 0 4px 12px rgba(38, 194, 187, 0.25), 0 0 0 1px rgba(38, 194, 187, 0.1);
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.interest-tag.selected .tag-check {
|
|
display: flex;
|
|
}
|
|
|
|
.interest-tag.selected::after {
|
|
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%);
|
|
border-radius: var(--youth-radius-full) var(--youth-radius-full) 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 16种多彩兴趣标签色系 */
|
|
.tag-music { background: linear-gradient(135deg, #FFE5E5 0%, #FFD4D4 100%); color: #E55353; }
|
|
.tag-sports { background: linear-gradient(135deg, #E5F0FF 0%, #D4E5FF 100%); color: #5385E5; }
|
|
.tag-travel { background: linear-gradient(135deg, #E5FFF0 0%, #D4FFE0 100%); color: #53B972; }
|
|
.tag-photo { background: linear-gradient(135deg, #FFF5E5 0%, #FFECD4 100%); color: #E5A253; }
|
|
.tag-reading { background: linear-gradient(135deg, #F5E5FF 0%, #ECD4FF 100%); color: #A253E5; }
|
|
.tag-movie { background: linear-gradient(135deg, #FFE5F0 0%, #FFD4E5 100%); color: #E55395; }
|
|
.tag-food { background: linear-gradient(135deg, #FFF9E5 0%, #FFF4D4 100%); color: #E5C553; }
|
|
.tag-tech { background: linear-gradient(135deg, #E5F7FF 0%, #D4F0FF 100%); color: #53A8E5; }
|
|
.tag-art { background: linear-gradient(135deg, #FFE5EC 0%, #FFD4DE 100%); color: #E55378; }
|
|
.tag-game { background: linear-gradient(135deg, #E5FFE5 0%, #D4FFD4 100%); color: #53C253; }
|
|
.tag-dance { background: linear-gradient(135deg, #FFF0E5 0%, #FFE5D4 100%); color: #E57853; }
|
|
.tag-study { background: linear-gradient(135deg, #E5EBFF 0%, #D4DFFF 100%); color: #5378E5; }
|
|
.tag-pet { background: linear-gradient(135deg, #FFFAE5 0%, #FFF6D4 100%); color: #C5A253; }
|
|
.tag-fashion { background: linear-gradient(135deg, #FFE5FA 0%, #FFD4F7 100%); color: #C253E5; }
|
|
.tag-volunteer { background: linear-gradient(135deg, #E5FFE8 0%, #D4FFD9 100%); color: #53B95B; }
|
|
.tag-club { background: linear-gradient(135deg, #E5F7F5 0%, #D4F0ED 100%); color: #26C2BB; }
|
|
|
|
/* 深色模式下的标签色系 */
|
|
/* ===== 底部操作区 ===== */
|
|
.bottom-actions {
|
|
padding: 6px 20px 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn-complete {
|
|
width: 100%;
|
|
height: 44px;
|
|
background: var(--youth-gradient-primary);
|
|
color: var(--youth-primary-foreground);
|
|
border: none;
|
|
border-radius: var(--youth-radius-xl);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
box-shadow: var(--youth-shadow-soft), 0 4px 12px rgba(38, 194, 187, 0.25);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.btn-complete::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%);
|
|
border-radius: var(--youth-radius-xl) var(--youth-radius-xl) 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-complete::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
|
|
transition: left 0.6s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-complete:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 2px 8px rgba(38, 194, 187, 0.2);
|
|
}
|
|
|
|
.btn-complete:active::after {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-complete svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-complete span {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-skip-bottom {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 6px;
|
|
font-size: 13px;
|
|
color: var(--youth-muted-foreground);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.btn-skip-bottom:active {
|
|
color: var(--youth-primary);
|
|
}
|
|
|
|
/* ===== 成功弹窗蒙层 ===== */
|
|
.success-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
z-index: 998;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.success-overlay.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.success-modal {
|
|
width: 200px;
|
|
background: var(--youth-bg-card);
|
|
border-radius: 20px;
|
|
padding: 32px 24px;
|
|
text-align: center;
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
|
|
transform: scale(0.8);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 999;
|
|
}
|
|
|
|
.success-overlay.show .success-modal {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.success-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 16px;
|
|
background: var(--youth-gradient-primary);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 16px rgba(38, 194, 187, 0.35);
|
|
animation: success-bounce 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.success-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: white;
|
|
}
|
|
|
|
@keyframes success-bounce {
|
|
0% { transform: scale(0); }
|
|
50% { transform: scale(1.15); }
|
|
70% { transform: scale(0.95); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.success-text {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.success-sub {
|
|
font-size: 13px;
|
|
color: var(--youth-muted-foreground);
|
|
}
|
|
|
|
/* ===== 背景装饰 ===== */
|
|
.bg-decoration {
|
|
position: absolute;
|
|
top: -80px;
|
|
right: -80px;
|
|
width: 280px;
|
|
height: 280px;
|
|
background: radial-gradient(circle, rgba(38, 194, 187, 0.12) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bg-decoration-2 {
|
|
position: absolute;
|
|
bottom: 100px;
|
|
left: -100px;
|
|
width: 240px;
|
|
height: 240px;
|
|
background: radial-gradient(circle, rgba(84, 202, 197, 0.08) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.content-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===== 响应式 ===== */
|
|
@media (max-width: 375px) {
|
|
.app-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* 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="app-container" id="page-profile-3">
|
|
<!-- 背景装饰 -->
|
|
<div class="bg-decoration"></div>
|
|
<div class="bg-decoration-2"></div>
|
|
|
|
<div class="content-wrap">
|
|
<!-- 状态栏 -->
|
|
<div class="status-bar">
|
|
<span>9:41</span>
|
|
<div class="right-icons">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"></path>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航栏 -->
|
|
<div class="nav-bar">
|
|
<button class="nav-btn" data-dom-id="btn-back" onclick="goBack()">
|
|
<svg width="20" height="20" 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>
|
|
<button class="nav-btn nav-btn-skip" data-dom-id="btn-skip-top" onclick="handleSkip()">
|
|
跳过
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 分步进度条 -->
|
|
<div class="stepper-section">
|
|
<div class="stepper">
|
|
<div class="stepper-line">
|
|
<div class="stepper-line-fill"></div>
|
|
</div>
|
|
<!-- 第1步 已完成 -->
|
|
<div class="stepper-step">
|
|
<div class="stepper-dot 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="stepper-label completed">基本信息</span>
|
|
</div>
|
|
<!-- 第2步 已完成 -->
|
|
<div class="stepper-step">
|
|
<div class="stepper-dot 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="stepper-label completed">院校学历</span>
|
|
</div>
|
|
<!-- 第3步 进行中 -->
|
|
<div class="stepper-step">
|
|
<div class="stepper-dot active">
|
|
<div class="dot-inner"></div>
|
|
</div>
|
|
<span class="stepper-label active">兴趣标签</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 标题区 -->
|
|
<div class="hero-section">
|
|
<h1 class="hero-title">
|
|
选择你的<span class="brand">兴趣标签</span>
|
|
</h1>
|
|
<p class="hero-subtitle">找到志同道合的小伙伴</p>
|
|
</div>
|
|
|
|
<!-- 家乡选择卡片 -->
|
|
<div class="form-card">
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<span>来自哪里</span>
|
|
</label>
|
|
<div class="hometown-selectors">
|
|
<div class="hometown-selector">
|
|
<select id="select-province" data-dom-id="select-province" onchange="onProvinceChange()" required>
|
|
<option value="" disabled selected>省份</option>
|
|
</select>
|
|
<span class="select-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="hometown-selector">
|
|
<select id="select-city" data-dom-id="select-city" onchange="onCityChange()" required disabled>
|
|
<option value="" disabled selected>城市</option>
|
|
</select>
|
|
<span class="select-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="hometown-selector">
|
|
<select id="select-district" data-dom-id="select-district" required disabled>
|
|
<option value="" disabled selected>区县</option>
|
|
</select>
|
|
<span class="select-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 兴趣标签卡片 -->
|
|
<div class="form-card">
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<span class="count-badge" id="tag-count" data-editor-id="editor-node-mt6y7yff-1" style="">0/5</span>
|
|
|
|
</label>
|
|
<div class="tags-container">
|
|
<div class="interest-tag tag-music" data-dom-id="tag-music" data-tag="music" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-music"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg></span></span>
|
|
<span>音乐</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-sports" data-dom-id="tag-sports" data-tag="sports" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-trophy"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path></svg></span></span>
|
|
<span>运动</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-travel" data-dom-id="tag-travel" data-tag="travel" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-plane"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"></path></svg></span></span>
|
|
<span>旅行</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-photo" data-dom-id="tag-photo" data-tag="photo" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-camera"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle></svg></span></span>
|
|
<span>摄影</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-reading" data-dom-id="tag-reading" data-tag="reading" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-book-open"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg></span></span>
|
|
<span>阅读</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-movie" data-dom-id="tag-movie" data-tag="movie" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-clapperboard"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6.13 3.98-.83 2.5"></path><path d="M3.77 6.04 2.1 11.1a2 2 0 0 0 .52 2.1l8.1 8.1a2 2 0 0 0 2.1.5l5.06-1.67"></path><path d="M15.5 4.5 17 9"></path><path d="m17.5 4.5 2.5-2.5 1 1-2.5 2.5"></path><path d="m15.5 6.5 2.5 2.5"></path><path d="m11.5 10.5 2.5 2.5"></path><path d="m7.5 14.5 2.5 2.5"></path></svg></span></span>
|
|
<span>电影</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-food" data-dom-id="tag-food" data-tag="food" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-utensils"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path><path d="M7 2v20"></path><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path></svg></span></span>
|
|
<span>美食</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-tech" data-dom-id="tag-tech" data-tag="tech" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-laptop"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path></svg></span></span>
|
|
<span>科技</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-art" data-dom-id="tag-art" data-tag="art" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-palette"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5"></circle><circle cx="17.5" cy="10.5" r=".5"></circle><circle cx="8.5" cy="7.5" r=".5"></circle><circle cx="6.5" cy="12.5" r=".5"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg></span></span>
|
|
<span>艺术</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-game" data-dom-id="tag-game" data-tag="game" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-gamepad-2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="11" x2="10" y2="11"></line><line x1="8" y1="9" x2="8" y2="13"></line><line x1="15" y1="12" x2="15.01" y2="12"></line><line x1="18" y1="10" x2="18.01" y2="10"></line><rect width="20" height="12" x="2" y="6" rx="2"></rect></svg></span></span>
|
|
<span>游戏</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-dance" data-dom-id="tag-dance" data-tag="dance" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-music"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg></span></span>
|
|
<span>舞蹈</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-study" data-dom-id="tag-study" data-tag="study" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-book-open"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg></span></span>
|
|
<span>学习</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-pet" data-dom-id="tag-pet" data-tag="pet" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-paw-print"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="4" r="2"></circle><circle cx="18" cy="8" r="2"></circle><circle cx="20" cy="16" r="2"></circle><circle cx="9" cy="19" r="2"></circle><path d="M7 12.5a3 3 0 1 1 6 0c0 2-3 4.5-3 4.5S7 14.5 7 12.5Z"></path></svg></span></span>
|
|
<span>萌宠</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-fashion" data-dom-id="tag-fashion" data-tag="fashion" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-shirt"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"></path></svg></span></span>
|
|
<span>时尚</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-volunteer" data-dom-id="tag-volunteer" data-tag="volunteer" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-heart-hand"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path><path d="M11 16h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1h-3"></path></svg></span></span>
|
|
<span>志愿</span>
|
|
<span class="tag-check">
|
|
<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 class="interest-tag tag-club" data-dom-id="tag-club" data-tag="club" onclick="toggleTag(this)">
|
|
<span class="tag-icon"><span class="icon-svg icon-building"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"></rect><path d="M9 22v-4h6v4"></path><path d="M8 6h.01"></path><path d="M16 6h.01"></path><path d="M12 6h.01"></path><path d="M12 10h.01"></path><path d="M12 14h.01"></path><path d="M16 10h.01"></path><path d="M16 14h.01"></path><path d="M8 10h.01"></path><path d="M8 14h.01"></path></svg></span></span>
|
|
<span>社团</span>
|
|
<span class="tag-check">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- 底部操作区 -->
|
|
<div class="bottom-actions"><button class="btn-complete" data-dom-id="btn-complete" onclick="handleComplete()" data-editor-id="editor-node-mt7zegbq-1" style="">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
|
|
<span data-vd-editable-host="1" class="" data-editor-id="editor-node-mt7zhsop-2" style="">完成</span></button>
|
|
|
|
<button class="btn-skip-bottom" data-dom-id="btn-skip-bottom" onclick="handleSkip()">
|
|
先跳过,稍后补充
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 成功动画弹窗 -->
|
|
<div class="success-overlay" id="success-overlay">
|
|
<div class="success-modal">
|
|
<div class="success-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div class="success-text">资料完善成功</div>
|
|
<div class="success-sub">欢迎加入青核</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>// ===== 省市区数据 =====
|
|
const regionData = {
|
|
"北京市": {
|
|
"北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区", "石景山区", "通州区", "昌平区"]
|
|
},
|
|
"上海市": {
|
|
"上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "浦东新区"]
|
|
},
|
|
"广东省": {
|
|
"广州市": ["天河区", "越秀区", "海珠区", "荔湾区", "白云区", "番禺区", "黄埔区", "花都区"],
|
|
"深圳市": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区"],
|
|
"珠海市": ["香洲区", "斗门区", "金湾区"],
|
|
"东莞市": ["莞城街道", "南城街道", "东城街道", "万江街道"]
|
|
},
|
|
"浙江省": {
|
|
"杭州市": ["上城区", "下城区", "江干区", "拱墅区", "西湖区", "滨江区", "萧山区", "余杭区"],
|
|
"宁波市": ["海曙区", "江北区", "北仑区", "镇海区", "鄞州区", "奉化区"],
|
|
"温州市": ["鹿城区", "龙湾区", "瓯海区", "洞头区"],
|
|
"金华市": ["婺城区", "金东区", "义乌市", "东阳市"]
|
|
},
|
|
"江苏省": {
|
|
"南京市": ["玄武区", "秦淮区", "建邺区", "鼓楼区", "浦口区", "栖霞区", "雨花台区", "江宁区"],
|
|
"苏州市": ["姑苏区", "虎丘区", "吴中区", "相城区", "吴江区", "工业园区"],
|
|
"无锡市": ["梁溪区", "锡山区", "惠山区", "滨湖区", "新吴区"],
|
|
"常州市": ["天宁区", "钟楼区", "新北区", "武进区", "金坛区"]
|
|
},
|
|
"四川省": {
|
|
"成都市": ["锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区"],
|
|
"绵阳市": ["涪城区", "游仙区", "安州区"],
|
|
"德阳市": ["旌阳区", "罗江区"],
|
|
"宜宾市": ["翠屏区", "南溪区", "叙州区"]
|
|
},
|
|
"湖北省": {
|
|
"武汉市": ["江岸区", "江汉区", "硚口区", "汉阳区", "武昌区", "青山区", "洪山区", "东西湖区"],
|
|
"宜昌市": ["西陵区", "伍家岗区", "点军区", "猇亭区", "夷陵区"],
|
|
"襄阳市": ["襄城区", "樊城区", "襄州区"]
|
|
},
|
|
"湖南省": {
|
|
"长沙市": ["芙蓉区", "天心区", "岳麓区", "开福区", "雨花区", "望城区", "长沙县"],
|
|
"株洲市": ["荷塘区", "芦淞区", "石峰区", "天元区"],
|
|
"湘潭市": ["雨湖区", "岳塘区"]
|
|
},
|
|
"福建省": {
|
|
"福州市": ["鼓楼区", "台江区", "仓山区", "马尾区", "晋安区", "长乐区"],
|
|
"厦门市": ["思明区", "海沧区", "湖里区", "集美区", "同安区", "翔安区"],
|
|
"泉州市": ["鲤城区", "丰泽区", "洛江区", "泉港区", "晋江市", "石狮市"]
|
|
},
|
|
"山东省": {
|
|
"济南市": ["历下区", "市中区", "槐荫区", "天桥区", "历城区", "长清区", "章丘区"],
|
|
"青岛市": ["市南区", "市北区", "黄岛区", "崂山区", "李沧区", "城阳区", "即墨区"],
|
|
"烟台市": ["芝罘区", "福山区", "牟平区", "莱山区"]
|
|
},
|
|
"陕西省": {
|
|
"西安市": ["新城区", "碑林区", "莲湖区", "灞桥区", "未央区", "雁塔区", "阎良区", "长安区"],
|
|
"咸阳市": ["秦都区", "杨陵区", "渭城区"],
|
|
"宝鸡市": ["渭滨区", "金台区", "陈仓区"]
|
|
},
|
|
"河南省": {
|
|
"郑州市": ["中原区", "二七区", "管城回族区", "金水区", "上街区", "惠济区", "郑东新区"],
|
|
"洛阳市": ["老城区", "西工区", "瀍河回族区", "涧西区", "吉利区", "洛龙区"],
|
|
"开封市": ["龙亭区", "顺河回族区", "鼓楼区", "禹王台区", "祥符区"]
|
|
},
|
|
"天津市": {
|
|
"天津市": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "滨海新区", "东丽区"]
|
|
},
|
|
"重庆市": {
|
|
"重庆市": ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "渝北区"]
|
|
},
|
|
"辽宁省": {
|
|
"沈阳市": ["和平区", "沈河区", "大东区", "皇姑区", "铁西区", "苏家屯区", "浑南区"],
|
|
"大连市": ["中山区", "西岗区", "沙河口区", "甘井子区", "旅顺口区", "金州区"]
|
|
},
|
|
"黑龙江省": {
|
|
"哈尔滨市": ["道里区", "南岗区", "道外区", "平房区", "松北区", "香坊区", "呼兰区"],
|
|
"齐齐哈尔市": ["龙沙区", "建华区", "铁锋区", "昂昂溪区", "富拉尔基区"]
|
|
}
|
|
};
|
|
|
|
// ===== 初始化省市区选择器 =====
|
|
function initRegionSelectors() {
|
|
const provinceSelect = document.getElementById('select-province');
|
|
const citySelect = document.getElementById('select-city');
|
|
const districtSelect = document.getElementById('select-district');
|
|
|
|
// 填充省份
|
|
for (const province in regionData) {
|
|
const option = document.createElement('option');
|
|
option.value = province;
|
|
option.textContent = province;
|
|
provinceSelect.appendChild(option);
|
|
}
|
|
}
|
|
|
|
function onProvinceChange() {
|
|
const province = document.getElementById('select-province').value;
|
|
const citySelect = document.getElementById('select-city');
|
|
const districtSelect = document.getElementById('select-district');
|
|
|
|
// 重置城市和区县
|
|
citySelect.innerHTML = '<option value="" disabled selected>城市</option>';
|
|
districtSelect.innerHTML = '<option value="" disabled selected>区县</option>';
|
|
districtSelect.disabled = true;
|
|
|
|
if (province && regionData[province]) {
|
|
// 填充城市
|
|
for (const city in regionData[province]) {
|
|
const option = document.createElement('option');
|
|
option.value = city;
|
|
option.textContent = city;
|
|
citySelect.appendChild(option);
|
|
}
|
|
citySelect.disabled = false;
|
|
} else {
|
|
citySelect.disabled = true;
|
|
}
|
|
}
|
|
|
|
function onCityChange() {
|
|
const province = document.getElementById('select-province').value;
|
|
const city = document.getElementById('select-city').value;
|
|
const districtSelect = document.getElementById('select-district');
|
|
|
|
// 重置区县
|
|
districtSelect.innerHTML = '<option value="" disabled selected>区县</option>';
|
|
|
|
if (province && city && regionData[province] && regionData[province][city]) {
|
|
// 填充区县
|
|
regionData[province][city].forEach(district => {
|
|
const option = document.createElement('option');
|
|
option.value = district;
|
|
option.textContent = district;
|
|
districtSelect.appendChild(option);
|
|
});
|
|
districtSelect.disabled = false;
|
|
} else {
|
|
districtSelect.disabled = true;
|
|
}
|
|
}
|
|
|
|
// ===== 兴趣标签选择 =====
|
|
let selectedTags = [];
|
|
const MAX_TAGS = 5;
|
|
const MIN_TAGS = 3;
|
|
|
|
function toggleTag(tagEl) {
|
|
const tagId = tagEl.getAttribute('data-tag');
|
|
const isSelected = tagEl.classList.contains('selected');
|
|
|
|
if (isSelected) {
|
|
// 取消选中
|
|
tagEl.classList.remove('selected');
|
|
selectedTags = selectedTags.filter(t => t !== tagId);
|
|
} else {
|
|
// 选中
|
|
if (selectedTags.length >= MAX_TAGS) {
|
|
// 超过最大数量,轻微震动提示
|
|
tagEl.style.animation = 'none';
|
|
tagEl.offsetHeight; // trigger reflow
|
|
tagEl.style.animation = 'shake 0.4s ease';
|
|
return;
|
|
}
|
|
tagEl.classList.add('selected');
|
|
selectedTags.push(tagId);
|
|
}
|
|
|
|
updateTagCount();
|
|
}
|
|
|
|
function updateTagCount() {
|
|
const countEl = document.getElementById('tag-count');
|
|
countEl.textContent = `${selectedTags.length}/${MAX_TAGS}`;
|
|
|
|
// 数量变化时的微动画
|
|
countEl.style.transform = 'scale(1.15)';
|
|
countEl.style.transition = 'transform 0.2s ease';
|
|
setTimeout(() => {
|
|
countEl.style.transform = 'scale(1)';
|
|
}, 200);
|
|
}
|
|
|
|
// 添加震动动画
|
|
const styleSheet = document.createElement('style');
|
|
styleSheet.textContent = `
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
`;
|
|
document.head.appendChild(styleSheet);
|
|
|
|
|
|
// 初始化主题
|
|
})();
|
|
|
|
// 初始化省市区
|
|
initRegionSelectors();
|
|
|
|
// ===== 返回按钮 =====
|
|
function goBack() {
|
|
window.location.href = 'profile-2.html';
|
|
}
|
|
|
|
// ===== 完成按钮 =====
|
|
function handleComplete() {
|
|
const province = document.getElementById('select-province').value;
|
|
const city = document.getElementById('select-city').value;
|
|
const district = document.getElementById('select-district').value;
|
|
|
|
// 家乡可选,兴趣建议选3-5个
|
|
if (selectedTags.length > 0 && selectedTags.length < MIN_TAGS) {
|
|
if (!confirm(`已选择 ${selectedTags.length} 个兴趣,建议选择 ${MIN_TAGS}-${MAX_TAGS} 个以获得更好的匹配效果,确定继续吗?`)) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 保存到 localStorage
|
|
const profileData = JSON.parse(localStorage.getItem('youth-profile') || '{}');
|
|
profileData.hometown = { province, city, district };
|
|
profileData.interests = selectedTags;
|
|
localStorage.setItem('youth-profile', JSON.stringify(profileData));
|
|
|
|
// 显示成功动画
|
|
showSuccessAnimation();
|
|
}
|
|
|
|
function showSuccessAnimation() {
|
|
const overlay = document.getElementById('success-overlay');
|
|
overlay.classList.add('show');
|
|
|
|
// 1.5秒后跳转
|
|
setTimeout(() => {
|
|
window.location.href = 'register-success.html';
|
|
}, 1500);
|
|
}
|
|
|
|
// ===== 跳过 =====
|
|
function handleSkip() {
|
|
if (confirm('确定要跳过此步吗?完善兴趣标签可以帮你找到志同道合的小伙伴哦~')) {
|
|
window.location.href = 'register-success.html';
|
|
}
|
|
}</script>
|
|
</body>
|
|
</html>
|
|
|