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.
 
 

2077 lines
67 KiB

<!DOCTYPE html>
<html lang="zh-CN" class="light">
<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>
<style id="theme-vars">
/* ============================================================
* 青核 Youthome Design System - Design Tokens
* 设计令牌基础样式 - 所有页面共用
* ============================================================
* 品牌主色:青青色 #26C2BB
* 前缀规范:--youth-xxx
* 主题模式:浅色/深色双主题(Light/Dark)
* ============================================================ */
/* ============================================================
* 1. 浅色主题变量(默认)
* ============================================================ */
:root {
/* ----------------------------------------------------------
* 1.1 青青色主色色阶(Teal Primary Scale)
* 主色:#26C2BB
* ---------------------------------------------------------- */
--youth-teal-50: #E6FAF9;
--youth-teal-100: #C8F3F1;
--youth-teal-200: #9AE7E4;
--youth-teal-300: #6BDBD7;
--youth-teal-400: #3FCFCA;
--youth-teal-500: #26C2BB; /* 主色 Primary */
--youth-teal-600: #1FA39E;
--youth-teal-700: #18827E;
--youth-teal-800: #11615E;
--youth-teal-900: #0B403E;
/* 主色别名 */
--youth-primary: var(--youth-teal-500);
--youth-primary-light: var(--youth-teal-400);
--youth-primary-dark: var(--youth-teal-600);
--youth-primary-bg: var(--youth-teal-50);
--youth-primary-border: var(--youth-teal-200);
/* ----------------------------------------------------------
* 1.2 辅助色 - 浅薄荷青(Mint Accent)
* 主色:#5ED2C7
* ---------------------------------------------------------- */
--youth-mint-50: #E8F8F6;
--youth-mint-100: #C9EEEB;
--youth-mint-200: #A5E3DF;
--youth-mint-300: #81D8D3;
--youth-mint-400: #68CFC9;
--youth-mint-500: #5ED2C7; /* 浅薄荷青 */
--youth-mint-600: #4DB8AE;
--youth-mint-700: #3C9E95;
--youth-mint-800: #2B847C;
--youth-mint-900: #1A6A63;
/* 警告色别名(功能色) */
--youth-warning: var(--youth-orange-500);
--youth-warning-light: var(--youth-orange-400);
--youth-warning-bg: var(--youth-orange-50);
/* ----------------------------------------------------------
* 1.2 辅助色 - 橙黄/暖橙(Orange Accent)
* 主色:#FF9F45
* ---------------------------------------------------------- */
--youth-orange-50: #FFFBE6;
--youth-orange-100: #FFF1B8;
--youth-orange-200: #FFE58F;
--youth-orange-300: #FFD666;
--youth-orange-400: #FFC53D;
--youth-orange-500: #FAAD14; /* 暖橙 */
--youth-orange-600: #D48806;
--youth-orange-700: #AD6800;
--youth-orange-800: #874D00;
--youth-orange-900: #613400;
/* ----------------------------------------------------------
* 1.3 辅助色 - 蓝紫(Purple Accent)
* 主色:#7B61FF
* ---------------------------------------------------------- */
--youth-purple-50: #F0EEFF;
--youth-purple-100: #DED9FF;
--youth-purple-200: #BCB3FF;
--youth-purple-300: #9B8DFF;
--youth-purple-400: #8B77FF;
--youth-purple-500: #7B61FF; /* 蓝紫 */
--youth-purple-600: #6348E6;
--youth-purple-700: #4C35CC;
--youth-purple-800: #3A2699;
--youth-purple-900: #281966;
/* ----------------------------------------------------------
* 1.4 辅助色 - 粉紫(Pink Accent)
* 主色:#FF6B9D
* ---------------------------------------------------------- */
--youth-pink-50: #FFEBF2;
--youth-pink-100: #FFD1E0;
--youth-pink-200: #FFA8C7;
--youth-pink-300: #FF8AAE;
--youth-pink-400: #FF7AA6;
--youth-pink-500: #FF6B9D; /* 粉紫 */
--youth-pink-600: #E64F85;
--youth-pink-700: #CC376E;
--youth-pink-800: #992852;
--youth-pink-900: #661A37;
/* ----------------------------------------------------------
* 1.5 功能色 - 成功绿(Success Green)
* 主色:#34C759
* ---------------------------------------------------------- */
--youth-success-50: #F6FFED;
--youth-success-100: #D9F7BE;
--youth-success-200: #B7EB8F;
--youth-success-300: #95DE64;
--youth-success-400: #73D13D;
--youth-success-500: #52C41A; /* 成功绿 */
--youth-success-600: #389E0D;
--youth-success-700: #237804;
--youth-success-800: #135200;
--youth-success-900: #092B00;
/* ----------------------------------------------------------
* 1.6 功能色 - 危险红(Danger Red)
* 主色:#FF3B30
* ---------------------------------------------------------- */
--youth-danger-50: #FFF1F0;
--youth-danger-100: #FFCCC7;
--youth-danger-200: #FFA39E;
--youth-danger-300: #FF7875;
--youth-danger-400: #FF4D4F;
--youth-danger-500: #F5222D; /* 危险红 */
--youth-danger-600: #CF1322;
--youth-danger-700: #A8071A;
--youth-danger-800: #820014;
--youth-danger-900: #5C0011;
/* ----------------------------------------------------------
* 1.7 中性色色阶(Neutral Gray Scale)
* ---------------------------------------------------------- */
--youth-gray-50: #FAFAFA;
--youth-gray-100: #F5F5F5;
--youth-gray-200: #EBEBEB;
--youth-gray-300: #DCDCDC;
--youth-gray-400: #BFBFBF;
--youth-gray-500: #999999;
--youth-gray-600: #737373;
--youth-gray-700: #525252;
--youth-gray-800: #333333;
--youth-gray-900: #1A1A1A;
--youth-gray-950: #0D0D0D;
/* 纯白/纯黑 */
--youth-white: #FFFFFF;
--youth-black: #000000;
/* ----------------------------------------------------------
* 1.8 背景色(Background Colors)
* ---------------------------------------------------------- */
--youth-bg-page: #F7F8FA; /* 页面背景 */
--youth-bg-card: #FFFFFF; /* 卡片背景 */
--youth-bg-input: #F5F6F8; /* 输入框背景 */
--youth-bg-hover: #F0F1F3; /* 悬停背景 */
--youth-bg-active: #E8E9EB; /* 激活背景 */
--youth-bg-disabled: #F0F0F0; /* 禁用背景 */
--youth-bg-overlay: rgba(0, 0, 0, 0.5); /* 遮罩层 */
--youth-bg-glass: rgba(255, 255, 255, 0.72); /* 毛玻璃背景 */
--youth-bg-glass-strong: rgba(255, 255, 255, 0.88); /* 毛玻璃加强 */
/* ----------------------------------------------------------
* 1.9 文字色(Text Colors)
* ---------------------------------------------------------- */
--youth-text-primary: #1F1F1F; /* 主文字 */
--youth-text-secondary: #595959; /* 次文字 */
--youth-text-tertiary: #8C8C8C; /* 辅助文字 */
--youth-text-quaternary:#BFBFBF; /* 最弱文字 */
--youth-text-disabled: #C9C9C9; /* 禁用文字 */
--youth-text-placeholder: #B0B0B0; /* 占位符文字 */
--youth-text-inverse: #FFFFFF; /* 反白文字 */
--youth-text-link: var(--youth-teal-600); /* 链接文字 */
--youth-text-link-hover: var(--youth-teal-700); /* 链接悬停 */
/* ----------------------------------------------------------
* 1.10 边框与分割线(Border & Divider Colors)
* ---------------------------------------------------------- */
--youth-border: #E8E8E8; /* 默认边框 */
--youth-border-light: #F0F1F3; /* 浅边框 */
--youth-border-lighter: #F5F6F8; /* 更浅边框 */
--youth-border-dark: #D0D2D7; /* 深边框 */
--youth-border-focus: var(--youth-teal-500); /* 聚焦边框 */
--youth-divider: #E8E8E8; /* 分割线 */
--youth-divider-strong: #E0E2E6; /* 强调分割线 */
/* ----------------------------------------------------------
* 1.11 阴影色(Shadow Colors)
* ---------------------------------------------------------- */
--youth-shadow-color: rgba(0, 0, 0, 0.06); /* 基础阴影色 */
--youth-shadow-soft: rgba(38, 194, 187, 0.12); /* 主色柔光阴影 */
--youth-shadow-card: rgba(0, 0, 0, 0.04); /* 卡片阴影 */
--youth-shadow-modal: rgba(0, 0, 0, 0.12); /* 弹窗阴影 */
/* 兼容别名 - 老页面变量名映射 */
--youth-background: var(--youth-bg-page);
--youth-foreground: var(--youth-text-primary);
--youth-surface: var(--youth-bg-card);
--youth-text: var(--youth-text-secondary);
--youth-text-light: var(--youth-text-tertiary);
--youth-accent: var(--youth-primary);
--youth-accent-light: var(--youth-primary-bg);
--youth-accent-dark: var(--youth-primary-dark);
/* 语义化别名 - Traework 设计系统标准映射 */
--youth-card: var(--youth-bg-card);
--youth-muted: var(--youth-text-tertiary);
}
/* ============================================================
* 3. 渐变变量(Gradients)
* ============================================================ */
:root {
/* 主色渐变 - 青青色 */
--youth-gradient-primary: linear-gradient(135deg, #3FCFCA 0%, #26C2BB 50%, #1FA39E 100%);
--youth-gradient-primary-soft: linear-gradient(135deg, rgba(38, 194, 187, 0.15) 0%, rgba(31, 163, 158, 0.1) 100%);
--youth-gradient-primary-vertical: linear-gradient(180deg, #3FCFCA 0%, #26C2BB 100%);
/* 橙色渐变 */
--youth-gradient-orange: linear-gradient(135deg, #FFB96B 0%, #FF9F45 50%, #E68A2E 100%);
--youth-gradient-orange-soft: linear-gradient(135deg, rgba(255, 159, 69, 0.15) 0%, rgba(230, 138, 46, 0.1) 100%);
/* 紫色渐变 */
--youth-gradient-purple: linear-gradient(135deg, #9B8DFF 0%, #7B61FF 50%, #6348E6 100%);
--youth-gradient-purple-soft: linear-gradient(135deg, rgba(123, 97, 255, 0.15) 0%, rgba(99, 72, 230, 0.1) 100%);
/* 粉色渐变 */
--youth-gradient-pink: linear-gradient(135deg, #FF8AAE 0%, #FF6B9D 50%, #E64F85 100%);
--youth-gradient-pink-soft: linear-gradient(135deg, rgba(255, 107, 157, 0.15) 0%, rgba(230, 79, 133, 0.1) 100%);
/* 成功渐变 */
--youth-gradient-success: linear-gradient(135deg, #67E188 0%, #34C759 50%, #28A847 100%);
--youth-gradient-success-soft: linear-gradient(135deg, rgba(52, 199, 89, 0.15) 0%, rgba(40, 168, 71, 0.1) 100%);
/* 危险渐变 */
--youth-gradient-danger: linear-gradient(135deg, #FF665F 0%, #FF3B30 50%, #E62A1F 100%);
--youth-gradient-danger-soft: linear-gradient(135deg, rgba(255, 59, 48, 0.15) 0%, rgba(230, 42, 31, 0.1) 100%);
/* 哑光微渐变 - 立体质感常用 */
--youth-gradient-matte-light: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
--youth-gradient-matte-card: linear-gradient(180deg, #FFFFFF 0%, #F7F7F8 100%);
--youth-gradient-matte-dark: linear-gradient(180deg, #2A2A2A 0%, #1F1F1F 100%);
/* 彩虹渐变 - 装饰用 */
--youth-gradient-rainbow: linear-gradient(135deg, #FF6B9D 0%, #FF9F45 25%, #34C759 50%, #26C2BB 75%, #7B61FF 100%);
/* 玻璃态渐变边框 */
--youth-gradient-glass-border: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 100%);
}
/* ============================================================
* 4. 圆角变量(Border Radius)
* ============================================================ */
:root {
--youth-radius-xs: 4px; /* 极小 - 复选框、标签 */
--youth-radius-sm: 8px; /* 按钮、输入框 */ /* 小型 - 按钮、输入框 */
--youth-radius-md: 12px; /* 卡片 */ /* 中型 - 卡片、弹窗 */
--youth-radius-lg: 16px; /* 标签、弹窗 */ /* 大型 - 大卡片、面板 */
--youth-radius-xl: 20px; /* 大弹窗、底部面板 */ /* 超大 - 容器 */
--youth-radius-2xl: 24px; /* 特大 - 大容器 */
--youth-radius-3xl: 32px; /* 圆形 - 头像、大按钮 */
--youth-radius-full: 9999px; /* 全圆 - 胶囊按钮、头像 */
}
/* ============================================================
* 5. 阴影变量(Shadows)
* ============================================================ */
:root {
/* 柔和弥散投影 - 小/中/大 */
--youth-shadow-sm: 0 2px 8px 0 var(--youth-shadow-color);
--youth-shadow-md: 0 4px 16px 0 var(--youth-shadow-color);
--youth-shadow-lg: 0 8px 32px 0 var(--youth-shadow-color);
--youth-shadow-xl: 0 16px 48px 0 var(--youth-shadow-color);
/* 主色柔光阴影 */
--youth-shadow-glow-sm: 0 2px 12px 0 var(--youth-shadow-soft);
--youth-shadow-glow-md: 0 4px 20px 0 var(--youth-shadow-soft);
--youth-shadow-glow-lg: 0 8px 32px 0 var(--youth-shadow-soft);
/* 卡片投影 */
--youth-shadow-card: 0 2px 12px 0 var(--youth-shadow-card);
--youth-shadow-card-hover: 0 6px 24px 0 var(--youth-shadow-color);
/* 按钮投影 */
--youth-shadow-btn: 0 2px 8px 0 rgba(38, 194, 187, 0.25);
--youth-shadow-btn-hover: 0 4px 16px 0 rgba(38, 194, 187, 0.35);
--youth-shadow-btn-active: 0 1px 4px 0 rgba(38, 194, 187, 0.2);
/* 内阴影 - 浮雕效果 */
--youth-shadow-inset-light: inset 0 1px 2px 0 rgba(255, 255, 255, 0.8);
--youth-shadow-inset-dark: inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--youth-shadow-inset-deep: inset 0 2px 4px 0 rgba(0, 0, 0, 0.08);
/* 弹窗/抽屉投影 */
--youth-shadow-modal: 0 20px 60px 0 var(--youth-shadow-modal);
--youth-shadow-drawer: -4px 0 24px 0 var(--youth-shadow-color);
/* 下拉菜单投影 */
--youth-shadow-dropdown: 0 8px 24px 0 var(--youth-shadow-color), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
}
/* ============================================================
* 6. 毛玻璃效果变量(Glass Effect)
* ============================================================ */
:root {
/* backdrop-filter 值 */
--youth-glass-blur: blur(20px);
--youth-glass-blur-strong: blur(40px);
--youth-glass-blur-light: blur(10px);
/* 背景透明度 */
--youth-glass-opacity: 0.72;
--youth-glass-opacity-strong: 0.88;
--youth-glass-opacity-light: 0.55;
/* 边框色 */
--youth-glass-border: rgba(255, 255, 255, 0.3);
--youth-glass-border-light: rgba(255, 255, 255, 0.18);
--youth-glass-border-strong: rgba(255, 255, 255, 0.45);
/* 饱和度 */
--youth-glass-saturate: saturate(180%);
}
/* ============================================================
* 7. 字体系统(Typography)
* ============================================================ */
:root {
/* ----------------------------------------------------------
* 7.1 字体族
* ---------------------------------------------------------- */
--youth-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
sans-serif;
--youth-font-serif: "Songti SC", "SimSun", "STSong", serif;
--youth-font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Mono",
"Droid Sans Mono", "Source Code Pro", monospace;
--youth-font-base: var(--youth-font-sans);
/* ----------------------------------------------------------
* 7.2 字号层级(Font Sizes)
* ---------------------------------------------------------- */
--youth-text-10: 10px; /* 辅助标签 */
--youth-text-12: 12px; /* 小字、辅助文字 */
--youth-text-13: 13px; /* 辅助内容 */
--youth-text-14: 14px; /* 正文(基准) */
--youth-text-15: 15px; /* 正文强调 */
--youth-text-16: 16px; /* 正文大 */
--youth-text-17: 17px; /* 小标题 */
--youth-text-18: 18px; /* 三级标题 */
--youth-text-20: 20px; /* 二级标题 */
--youth-text-22: 22px; /* 标题 */
--youth-text-24: 24px; /* 一级标题 */
--youth-text-28: 28px; /* 大标题 */
--youth-text-32: 32px; /* 特大标题 */
--youth-text-40: 40px; /* 超级标题 */
/* 字号别名 */
--youth-font-size-xs: var(--youth-text-12);
--youth-font-size-sm: var(--youth-text-13);
--youth-font-size-base: var(--youth-text-14);
--youth-font-size-md: var(--youth-text-15);
--youth-font-size-lg: var(--youth-text-16);
--youth-font-size-xl: var(--youth-text-18);
--youth-font-size-2xl: var(--youth-text-20);
--youth-font-size-3xl: var(--youth-text-24);
--youth-font-size-4xl: var(--youth-text-28);
--youth-font-size-5xl: var(--youth-text-32);
--youth-font-size-6xl: var(--youth-text-40);
/* ----------------------------------------------------------
* 7.3 字重(Font Weights)
* ---------------------------------------------------------- */
--youth-font-weight-regular: 400; /* 常规 */
--youth-font-weight-medium: 500; /* 中等 */
--youth-font-weight-semibold: 600; /* 半粗 */
--youth-font-weight-bold: 700; /* 粗体 */
/* 别名 */
--youth-fw-regular: var(--youth-font-weight-regular);
--youth-fw-medium: var(--youth-font-weight-medium);
--youth-fw-semibold: var(--youth-font-weight-semibold);
--youth-fw-bold: var(--youth-font-weight-bold);
/* ----------------------------------------------------------
* 7.4 行高(Line Heights)
* ---------------------------------------------------------- */
--youth-leading-tight: 1.25; /* 紧凑 - 标题 */
--youth-leading-normal: 1.5; /* 正常 - 正文 */
--youth-leading-relaxed: 1.75; /* 宽松 - 长文本 */
--youth-leading-loose: 2; /* 极松 */
/* 数字行高(固定值) */
--youth-line-height-xs: 18px;
--youth-line-height-sm: 20px;
--youth-line-height-base: 22px;
--youth-line-height-md: 24px;
--youth-line-height-lg: 28px;
--youth-line-height-xl: 32px;
--youth-line-height-2xl: 40px;
--youth-line-height-3xl: 48px;
/* ----------------------------------------------------------
* 7.5 字间距(Letter Spacing)
* ---------------------------------------------------------- */
--youth-tracking-tighter: -0.05em;
--youth-tracking-tight: -0.025em;
--youth-tracking-normal: 0;
--youth-tracking-wide: 0.025em;
--youth-tracking-wider: 0.05em;
--youth-tracking-widest: 0.1em;
}
/* 组件高度 */
--youth-height-btn: 44px;
--youth-height-input: 44px;
--youth-height-nav-bottom: 64px;
/* ============================================================
* 8. 间距系统(Spacing)
* ============================================================ */
:root {
--youth-spacing-0: 0;
--youth-spacing-1: 4px; /* 0.25rem */
--youth-spacing-2: 8px; /* 0.5rem */
--youth-spacing-3: 12px; /* 0.75rem */
--youth-spacing-4: 16px; /* 1rem - 基准 */
--youth-spacing-5: 20px; /* 1.25rem */
--youth-spacing-6: 24px; /* 1.5rem */
--youth-spacing-8: 32px; /* 2rem */
--youth-spacing-10: 40px; /* 2.5rem */
--youth-spacing-12: 48px; /* 3rem */
--youth-spacing-16: 64px; /* 4rem */
--youth-spacing-20: 80px; /* 5rem */
/* 别名 */
--youth-space-xs: var(--youth-spacing-1); /* 4px */
--youth-space-sm: var(--youth-spacing-2); /* 8px */
--youth-space-md: var(--youth-spacing-3); /* 12px */
--youth-space-base: var(--youth-spacing-4); /* 16px */
--youth-space-lg: var(--youth-spacing-5); /* 20px */
--youth-space-xl: var(--youth-spacing-6); /* 24px */
--youth-space-2xl: var(--youth-spacing-8); /* 32px */
--youth-space-3xl: var(--youth-spacing-10); /* 40px */
--youth-space-4xl: var(--youth-spacing-12); /* 48px */
--youth-space-5xl: var(--youth-spacing-16); /* 64px */
/* 容器内边距 */
--youth-container-padding-x: var(--youth-spacing-4);
--youth-container-padding-y: var(--youth-spacing-6);
/* 安全区域(移动端) */
--youth-safe-top: env(safe-area-inset-top, 0);
--youth-safe-bottom: env(safe-area-inset-bottom, 0);
--youth-safe-left: env(safe-area-inset-left, 0);
--youth-safe-right: env(safe-area-inset-right, 0);
}
/* 移动端间距微调 */
@media (max-width: 768px) {
:root {
--youth-container-padding-x: var(--youth-spacing-3);
}
}
/* ============================================================
* 9. 全局基础样式(Base Styles)
* ============================================================ */
/* 重置盒模型 */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* HTML 基础 */
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
}
/* Body 默认样式 */
body {
font-family: var(--youth-font-base);
font-size: var(--youth-font-size-base);
font-weight: var(--youth-fw-regular);
line-height: var(--youth-leading-normal);
color: var(--youth-text-primary);
background-color: var(--youth-bg-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
/* 图片与媒体 */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
/* 表单元素 */
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
/* 按钮重置 */
button {
background: none;
border: none;
cursor: pointer;
outline: none;
}
/* 链接 */
a {
color: var(--youth-text-link);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--youth-text-link-hover);
}
/* 列表重置 */
ul,
ol {
list-style: none;
}
/* 标题层级 */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--youth-fw-semibold);
line-height: var(--youth-leading-tight);
color: var(--youth-text-primary);
}
h1 { font-size: var(--youth-text-32); }
h2 { font-size: var(--youth-text-24); }
h3 { font-size: var(--youth-text-20); }
h4 { font-size: var(--youth-text-18); }
h5 { font-size: var(--youth-text-16); }
h6 { font-size: var(--youth-text-14); }
/* 段落 */
p {
line-height: var(--youth-leading-normal);
}
/* 文字截断 */
.youth-text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.youth-text-ellipsis-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.youth-text-ellipsis-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================
* 10. 工具类(Utility Classes)
* ============================================================ */
/* ----------------------------------------------------------
* 10.1 毛玻璃效果(Glass)
* ---------------------------------------------------------- */
.youth-glass {
background-color: var(--youth-bg-glass);
backdrop-filter: var(--youth-glass-blur) var(--youth-glass-saturate);
-webkit-backdrop-filter: var(--youth-glass-blur) var(--youth-glass-saturate);
border: 1px solid var(--youth-glass-border);
}
.youth-glass-strong {
background-color: var(--youth-bg-glass-strong);
backdrop-filter: var(--youth-glass-blur-strong) var(--youth-glass-saturate);
-webkit-backdrop-filter: var(--youth-glass-blur-strong) var(--youth-glass-saturate);
border: 1px solid var(--youth-glass-border-strong);
}
.youth-glass-light {
background-color: rgba(255, 255, 255, var(--youth-glass-opacity-light));
backdrop-filter: var(--youth-glass-blur-light) var(--youth-glass-saturate);
-webkit-backdrop-filter: var(--youth-glass-blur-light) var(--youth-glass-saturate);
border: 1px solid var(--youth-glass-border-light);
}
/* ----------------------------------------------------------
* 10.2 卡片(Card)
* ---------------------------------------------------------- */
.youth-card {
background-color: var(--youth-bg-card);
border-radius: var(--youth-radius-lg);
box-shadow: var(--youth-shadow-card);
padding: var(--youth-space-xl);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.youth-card:hover {
box-shadow: var(--youth-shadow-card-hover);
}
.youth-card-flat {
background-color: var(--youth-bg-card);
border-radius: var(--youth-radius-lg);
border: 1px solid var(--youth-border);
padding: var(--youth-space-xl);
}
.youth-card-ghost {
background-color: transparent;
border-radius: var(--youth-radius-lg);
border: 1px solid var(--youth-border-light);
padding: var(--youth-space-xl);
}
/* ----------------------------------------------------------
* 10.3 按钮基础(Button Base)
* ---------------------------------------------------------- */
.youth-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--youth-space-xs);
padding: 0 var(--youth-space-lg);
height: 44px;
border-radius: var(--youth-radius-full);
font-size: var(--youth-font-size-base);
font-weight: var(--youth-fw-medium);
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
user-select: none;
border: none;
outline: none;
}
.youth-btn:active {
transform: scale(0.97);
}
.youth-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* 主按钮 */
.youth-btn-primary {
background: var(--youth-gradient-primary);
color: var(--youth-white);
box-shadow: var(--youth-shadow-btn);
}
.youth-btn-primary:hover {
box-shadow: var(--youth-shadow-btn-hover);
filter: brightness(1.05);
}
.youth-btn-primary:active {
box-shadow: var(--youth-shadow-btn-active);
filter: brightness(0.98);
}
/* 次要按钮 */
.youth-btn-secondary {
background-color: var(--youth-bg-input);
color: var(--youth-text-primary);
}
.youth-btn-secondary:hover {
background-color: var(--youth-bg-hover);
}
/* 描边按钮 */
.youth-btn-outline {
background-color: transparent;
color: var(--youth-primary);
border: 1.5px solid var(--youth-primary);
}
.youth-btn-outline:hover {
background-color: var(--youth-primary-bg);
}
/* 文字按钮 */
.youth-btn-ghost {
background-color: transparent;
color: var(--youth-text-primary);
padding: 0 var(--youth-space-sm);
height: auto;
}
.youth-btn-ghost:hover {
background-color: var(--youth-bg-hover);
}
/* 按钮尺寸 */
.youth-btn-sm {
height: 36px;
padding: 0 var(--youth-space-md);
font-size: var(--youth-font-size-sm);
}
.youth-btn-lg {
height: 52px;
padding: 0 var(--youth-space-xl);
font-size: var(--youth-font-size-lg);
}
.youth-btn-block {
width: 100%;
}
/* ----------------------------------------------------------
* 10.4 Flex 布局工具类
* ---------------------------------------------------------- */
.youth-flex {
display: flex;
}
.youth-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.youth-flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.youth-flex-col {
display: flex;
flex-direction: column;
}
.youth-flex-1 {
flex: 1;
}
.youth-items-center {
align-items: center;
}
.youth-justify-center {
justify-content: center;
}
.youth-justify-between {
justify-content: space-between;
}
.youth-wrap {
flex-wrap: wrap;
}
.youth-gap-xs { gap: var(--youth-space-xs); }
.youth-gap-sm { gap: var(--youth-space-sm); }
.youth-gap-md { gap: var(--youth-space-md); }
.youth-gap-base { gap: var(--youth-space-base); }
.youth-gap-lg { gap: var(--youth-space-lg); }
.youth-gap-xl { gap: var(--youth-space-xl); }
/* ----------------------------------------------------------
* 10.5 文字工具类
* ---------------------------------------------------------- */
.youth-text-center { text-align: center; }
.youth-text-left { text-align: left; }
.youth-text-right { text-align: right; }
.youth-fw-regular { font-weight: var(--youth-fw-regular); }
.youth-fw-medium { font-weight: var(--youth-fw-medium); }
.youth-fw-semibold { font-weight: var(--youth-fw-semibold); }
.youth-fw-bold { font-weight: var(--youth-fw-bold); }
.youth-text-primary { color: var(--youth-text-primary); }
.youth-text-secondary { color: var(--youth-text-secondary); }
.youth-text-tertiary { color: var(--youth-text-tertiary); }
.youth-text-disabled { color: var(--youth-text-disabled); }
.youth-text-white { color: var(--youth-white); }
/* ----------------------------------------------------------
* 10.6 显示/隐藏
* ---------------------------------------------------------- */
.youth-hidden { display: none !important; }
.youth-invisible { visibility: hidden; }
.youth-block { display: block; }
.youth-inline-block { display: inline-block; }
/* ----------------------------------------------------------
* 10.7 溢出处理
* ---------------------------------------------------------- */
.youth-overflow-hidden { overflow: hidden; }
.youth-overflow-auto { overflow: auto; }
.youth-overflow-scroll { overflow: scroll; }
/* ----------------------------------------------------------
* 10.8 定位
* ---------------------------------------------------------- */
.youth-relative { position: relative; }
.youth-absolute { position: absolute; }
.youth-fixed { position: fixed; }
.youth-sticky { position: sticky; }
.youth-inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* ----------------------------------------------------------
* 10.9 宽度与高度
* ---------------------------------------------------------- */
.youth-w-full { width: 100%; }
.youth-h-full { height: 100%; }
.youth-w-screen { width: 100vw; }
.youth-h-screen { height: 100vh; }
.youth-max-w-full { max-width: 100%; }
.youth-min-h-screen { min-height: 100vh; }
/* ----------------------------------------------------------
* 10.10 边框工具类
* ---------------------------------------------------------- */
.youth-border { border: 1px solid var(--youth-border); }
.youth-border-t { border-top: 1px solid var(--youth-border); }
.youth-border-b { border-bottom: 1px solid var(--youth-border); }
.youth-border-l { border-left: 1px solid var(--youth-border); }
.youth-border-r { border-right: 1px solid var(--youth-border); }
.youth-border-none { border: none; }
.youth-rounded-xs { border-radius: var(--youth-radius-xs); }
.youth-rounded-sm { border-radius: var(--youth-radius-sm); }
.youth-rounded-md { border-radius: var(--youth-radius-md); }
.youth-rounded-lg { border-radius: var(--youth-radius-lg); }
.youth-rounded-xl { border-radius: var(--youth-radius-xl); }
.youth-rounded-full { border-radius: var(--youth-radius-full); }
/* ----------------------------------------------------------
* 10.11 指针事件
* ---------------------------------------------------------- */
.youth-pointer-events-none { pointer-events: none; }
.youth-pointer-events-auto { pointer-events: auto; }
.youth-cursor-pointer { cursor: pointer; }
.youth-cursor-default { cursor: default; }
/* ----------------------------------------------------------
* 10.12 选择控制
* ---------------------------------------------------------- */
.youth-select-none {
-webkit-user-select: none;
user-select: none;
}
.youth-select-all {
-webkit-user-select: all;
user-select: all;
}
/* ============================================================
* 11. 响应式断点(Breakpoints)
* ============================================================ */
:root {
--youth-breakpoint-sm: 640px;
--youth-breakpoint-md: 768px;
--youth-breakpoint-lg: 1024px;
--youth-breakpoint-xl: 1280px;
--youth-breakpoint-2xl: 1536px;
}
/* 移动端适配 - 小屏 */
@media (max-width: 640px) {
html {
font-size: 15px;
}
h1 { font-size: var(--youth-text-28); }
h2 { font-size: var(--youth-text-22); }
h3 { font-size: var(--youth-text-18); }
}
/* 移动端适配 - 超小屏 */
@media (max-width: 375px) {
html {
font-size: 14px;
}
}
/* ============================================================
* 12. 过渡动画变量(Transitions & Animations)
* ============================================================ */
:root {
/* 过渡时长 */
--youth-transition-fast: 0.15s ease;
--youth-transition-normal: 0.25s ease;
--youth-transition-slow: 0.4s ease;
--youth-transition-slower: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
/* 缓动函数 */
--youth-ease-linear: linear;
--youth-ease-in: cubic-bezier(0.4, 0, 1, 1);
--youth-ease-out: cubic-bezier(0, 0, 0.2, 1);
--youth-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--youth-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Z-index 层级 */
--youth-z-base: 0;
--youth-z-dropdown: 100;
--youth-z-sticky: 200;
--youth-z-fixed: 300;
--youth-z-modal: 500;
--youth-z-popover: 600;
--youth-z-toast: 700;
--youth-z-tooltip: 800;
--youth-z-max: 9999;
}
/* ============================================================
* 13. 滚动条样式
* ============================================================ */
/* Webkit 内核浏览器 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--youth-gray-300);
border-radius: var(--youth-radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--youth-gray-400);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--youth-gray-300) transparent;
}
/* ============================================================
* 14. 选中文本样式
* ============================================================ */
::selection {
background-color: var(--youth-teal-200);
color: var(--youth-teal-900);
}
/* ============================================================
* 15. 标准组件样式(Traework Design System)
* ============================================================ */
/* ----------------------------------------------------------
* 15.1 标准卡片 - 柔和弥散阴影
* ---------------------------------------------------------- */
.youth-card-standard {
background: var(--youth-bg-card);
border-radius: var(--youth-radius-md);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
padding: var(--youth-space-4);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.youth-card-standard:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
/* ----------------------------------------------------------
* 15.2 标准输入框 - 浅浮雕效果
* ---------------------------------------------------------- */
.youth-input {
width: 100%;
height: 44px;
padding: 0 16px;
background: var(--youth-bg-input);
border: 1px solid var(--youth-border);
border-radius: var(--youth-radius-sm);
font-size: var(--youth-text-14);
color: var(--youth-text-primary);
outline: none;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
transition: all 0.2s ease;
}
.youth-input::placeholder {
color: var(--youth-text-placeholder);
}
.youth-input:focus {
border-color: var(--youth-primary);
box-shadow: inset 0 1px 3px rgba(38, 194, 187, 0.06), 0 0 0 3px rgba(38, 194, 187, 0.1);
background: var(--youth-bg-card);
}
/* ----------------------------------------------------------
* 15.3 标准按钮 - 44px 高度 / 8px 圆角
* ---------------------------------------------------------- */
.youth-btn-primary {
height: 44px;
padding: 0 20px;
background: linear-gradient(135deg, var(--youth-teal-400), var(--youth-primary));
color: #fff;
border: none;
border-radius: var(--youth-radius-sm);
font-size: var(--youth-text-15);
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 8px rgba(38, 194, 187, 0.25);
transition: all 0.2s ease;
}
.youth-btn-primary:hover {
box-shadow: 0 4px 16px rgba(38, 194, 187, 0.35);
filter: brightness(1.05);
}
.youth-btn-primary:active {
transform: scale(0.98);
box-shadow: 0 1px 4px rgba(38, 194, 187, 0.2);
}
.youth-btn-secondary {
height: 44px;
padding: 0 20px;
background: var(--youth-bg-card);
color: var(--youth-text-primary);
border: 1px solid var(--youth-border);
border-radius: var(--youth-radius-sm);
font-size: var(--youth-text-15);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.youth-btn-secondary:hover {
background: var(--youth-bg-hover);
border-color: var(--youth-border-dark);
}
/* ----------------------------------------------------------
* 15.4 标签 / Chip - 16px 圆角
* ---------------------------------------------------------- */
.youth-tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: var(--youth-bg-input);
color: var(--youth-text-secondary);
font-size: var(--youth-text-12);
border-radius: var(--youth-radius-lg);
line-height: 1.5;
transition: all 0.2s ease;
cursor: pointer;
}
.youth-tag.active {
background: var(--youth-primary-bg);
color: var(--youth-primary);
font-weight: 500;
}
/* ----------------------------------------------------------
* 15.5 底部导航 - 64px 高度
* ---------------------------------------------------------- */
.youth-bottom-nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 64px;
background: var(--youth-bg-card);
border-top: 1px solid var(--youth-divider);
display: flex;
align-items: center;
justify-content: space-around;
padding-bottom: env(safe-area-inset-bottom);
z-index: var(--youth-z-fixed);
}
.youth-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
flex: 1;
height: 100%;
color: var(--youth-text-tertiary);
font-size: var(--youth-text-10);
cursor: pointer;
transition: color 0.2s ease;
}
.youth-nav-item.active {
color: var(--youth-primary);
}
.youth-nav-item .nav-icon {
font-size: 22px;
line-height: 1;
}
/* ----------------------------------------------------------
* 15.6 毛玻璃浮层
* ---------------------------------------------------------- */
.youth-glass-layer {
background: var(--youth-glass-bg);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--youth-glass-border);
}
/* ----------------------------------------------------------
* 15.7 分组表单 - iOS 风格分组列表
* ---------------------------------------------------------- */
.youth-form-group {
background: var(--youth-bg-card);
border-radius: var(--youth-radius-md);
margin: 0 16px 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}
.youth-form-row {
display: flex;
align-items: center;
padding: 0 16px;
height: 48px;
position: relative;
gap: 12px;
}
.youth-form-row + .youth-form-row::before {
content: '';
position: absolute;
top: 0;
left: 16px;
right: 16px;
height: 1px;
background: var(--youth-divider);
}
.youth-form-label {
font-size: var(--youth-text-14);
color: var(--youth-text-primary);
flex-shrink: 0;
width: 80px;
}
.youth-form-value {
flex: 1;
text-align: right;
font-size: var(--youth-text-14);
color: var(--youth-text-secondary);
}
.youth-form-value.placeholder {
color: var(--youth-text-placeholder);
}
/* ============================================================
* 16. 深色主题(Dark Mode)
* ============================================================ */
[data-theme="dark"] {
/* 主色 - 深色模式下适当提亮 */
--youth-teal-50: #0D2B29;
--youth-teal-100: #143D3A;
--youth-teal-200: #1E5753;
--youth-teal-300: #2A7A74;
--youth-teal-400: #3AAFA8;
--youth-teal-500: #34C9C2;
--youth-teal-600: #5ED8D2;
--youth-teal-700: #8DE4E0;
--youth-teal-800: #BEEFED;
--youth-teal-900: #E0F8F7;
--youth-primary: var(--youth-teal-500);
--youth-primary-light: var(--youth-teal-400);
--youth-primary-dark: var(--youth-teal-600);
--youth-primary-bg: var(--youth-teal-50);
--youth-primary-border: var(--youth-teal-200);
/* 薄荷青 - 深色 */
--youth-mint-50: #0F2E2B;
--youth-mint-100: #18443F;
--youth-mint-200: #25635C;
--youth-mint-300: #368A81;
--youth-mint-400: #4DB3A8;
--youth-mint-500: #6DD8CC;
--youth-mint-600: #8FE3DA;
--youth-mint-700: #B1EDE7;
--youth-mint-800: #D3F6F3;
--youth-mint-900: #EBFAF9;
/* 暖橙 - 深色 */
--youth-orange-50: #2E1F00;
--youth-orange-100: #4D3400;
--youth-orange-200: #7A5200;
--youth-orange-300: #A67100;
--youth-orange-400: #D49400;
--youth-orange-500: #FAB814;
--youth-orange-600: #FFCE3D;
--youth-orange-700: #FFDE66;
--youth-orange-800: #FFE98F;
--youth-orange-900: #FFF3B8;
/* 蓝紫 - 深色 */
--youth-purple-50: #1A1440;
--youth-purple-100: #281F5E;
--youth-purple-200: #3A2E85;
--youth-purple-300: #5344B0;
--youth-purple-400: #7261E0;
--youth-purple-500: #8B77FF;
--youth-purple-600: #A799FF;
--youth-purple-700: #C2B8FF;
--youth-purple-800: #DED9FF;
--youth-purple-900: #F0EEFF;
/* 粉紫 - 深色 */
--youth-pink-50: #2E0F1E;
--youth-pink-100: #4D1A31;
--youth-pink-200: #7A2A4D;
--youth-pink-300: #A63D69;
--youth-pink-400: #D4578A;
--youth-pink-500: #FF7AA6;
--youth-pink-600: #FF9DBE;
--youth-pink-700: #FFBFD6;
--youth-pink-800: #FFD9E6;
--youth-pink-900: #FFEBF2;
/* 成功绿 - 深色 */
--youth-success-50: #0D2900;
--youth-success-100: #174008;
--youth-success-200: #236610;
--youth-success-300: #328C1A;
--youth-success-400: #45B326;
--youth-success-500: #5CD936;
--youth-success-600: #7FE65C;
--youth-success-700: #A3F085;
--youth-success-800: #C7F7B0;
--youth-success-900: #E3FBDA;
/* 危险红 - 深色 */
--youth-danger-50: #2B0708;
--youth-danger-100: #471012;
--youth-danger-200: #6E1C1F;
--youth-danger-300: #992A2E;
--youth-danger-400: #C73A3F;
--youth-danger-500: #FF5252;
--youth-danger-600: #FF7875;
--youth-danger-700: #FFA39E;
--youth-danger-800: #FFCCC7;
--youth-danger-900: #FFF1F0;
/* 中性色 - 深色 */
--youth-gray-50: #1A1A1A;
--youth-gray-100: #262626;
--youth-gray-200: #333333;
--youth-gray-300: #4D4D4D;
--youth-gray-400: #666666;
--youth-gray-500: #8C8C8C;
--youth-gray-600: #A6A6A6;
--youth-gray-700: #BFBFBF;
--youth-gray-800: #D9D9D9;
--youth-gray-900: #F0F0F0;
--youth-gray-950: #FAFAFA;
--youth-white: #1A1A1A;
--youth-black: #FFFFFF;
/* 背景色 - 深色 */
--youth-bg-page: #141414; /* 页面背景 - 炭灰 */
--youth-bg-card: #1E1E1E; /* 卡片背景 - 深炭灰 */
--youth-bg-input: #262626; /* 输入框背景 */
--youth-bg-hover: #2D2D2D; /* 悬停背景 */
--youth-bg-active: #363636; /* 激活背景 */
--youth-bg-disabled: #2A2A2A; /* 禁用背景 */
--youth-bg-overlay: rgba(0, 0, 0, 0.7);
--youth-bg-glass: rgba(30, 30, 30, 0.72);
--youth-bg-glass-strong: rgba(30, 30, 30, 0.88);
/* 文字色 - 深色 */
--youth-text-primary: #F0F0F0;
--youth-text-secondary: #BFBFBF;
--youth-text-tertiary: #8C8C8C;
--youth-text-quaternary:#595959;
--youth-text-disabled: #4D4D4D;
--youth-text-placeholder: #595959;
--youth-text-inverse: #1A1A1A;
--youth-text-link: var(--youth-teal-400);
--youth-text-link-hover: var(--youth-teal-300);
/* 边框与分割线 - 深色 */
--youth-border: #2D2D2D;
--youth-border-light: #262626;
--youth-border-lighter: #1E1E1E;
--youth-border-dark: #3D3D3D;
--youth-border-focus: var(--youth-teal-500);
--youth-divider: #2D2D2D;
--youth-divider-strong: #363636;
/* 语义化别名 - 深色 */
--youth-card: var(--youth-bg-card);
--youth-muted: var(--youth-text-tertiary);
/* 阴影色 - 深色 */
--youth-shadow-color: rgba(0, 0, 0, 0.3);
--youth-shadow-soft: rgba(38, 194, 187, 0.15);
--youth-shadow-card: rgba(0, 0, 0, 0.2);
--youth-shadow-modal: rgba(0, 0, 0, 0.4);
/* 渐变 - 深色模式调整 */
--youth-gradient-primary: linear-gradient(135deg, #34C9C2 0%, #26C2BB 50%, #1FA39E 100%);
--youth-gradient-matte-light: linear-gradient(180deg, #262626 0%, #1E1E1E 100%);
--youth-gradient-matte-card: linear-gradient(180deg, #262626 0%, #1E1E1E 100%);
--youth-gradient-matte-dark: linear-gradient(180deg, #1A1A1A 0%, #141414 100%);
/* 毛玻璃 - 深色 */
--youth-glass-bg: rgba(30, 30, 30, 0.72);
--youth-glass-border: rgba(255, 255, 255, 0.08);
--youth-glass-border-light: rgba(255, 255, 255, 0.05);
--youth-glass-border-strong: rgba(255, 255, 255, 0.12);
/* 内阴影 - 深色浮雕 */
--youth-shadow-inset-light: inset 0 1px 2px 0 rgba(255, 255, 255, 0.04);
--youth-shadow-inset-deep: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
/* 深色模式下的卡片标准样式 */
[data-theme="dark"] .youth-card-standard {
background: var(--youth-bg-card);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
border: 1px solid var(--youth-border);
}
[data-theme="dark"] .youth-input {
background: var(--youth-bg-input);
border-color: var(--youth-border);
color: var(--youth-text-primary);
}
[data-theme="dark"] .youth-input:focus {
background: var(--youth-bg-card);
border-color: var(--youth-primary);
box-shadow: inset 0 1px 3px rgba(38, 194, 187, 0.08), 0 0 0 3px rgba(38, 194, 187, 0.15);
}
[data-theme="dark"] .youth-btn-secondary {
background: var(--youth-bg-card);
border-color: var(--youth-border-dark);
color: var(--youth-text-primary);
}
[data-theme="dark"] .youth-btn-secondary:hover {
background: var(--youth-bg-hover);
}
[data-theme="dark"] .youth-tag {
background: var(--youth-bg-input);
color: var(--youth-text-secondary);
}
[data-theme="dark"] .youth-tag.active {
background: var(--youth-primary-bg);
color: var(--youth-primary);
}
[data-theme="dark"] .youth-form-group {
background: var(--youth-bg-card);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .youth-form-row + .youth-form-row::before {
background: var(--youth-divider);
}
/* ============================================================
* End of Youthome Design Tokens
* ============================================================ */
</style>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.1/dist/index.global.js"></script>
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
<style type="text/tailwindcss">
@theme inline {
--color-background: var(--youth-background);
--color-foreground: var(--youth-foreground);
--color-card: var(--youth-card);
--color-primary: var(--youth-primary);
--color-muted: var(--youth-muted);
--color-border: var(--youth-border);
--radius-sm: var(--youth-radius-sm);
--radius-md: var(--youth-radius-md);
--radius-lg: var(--youth-radius-lg);
--radius-xl: var(--youth-radius-xl);
}
@layer base {
body { background: var(--youth-background); color: var(--youth-foreground); }
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
th { @apply whitespace-nowrap; }
}
</style>
<style id="semantic-token-fallback">
.bg-background { background-color: var(--youth-background); }
.text-background { color: var(--youth-background); }
.border-background { border-color: var(--youth-background); }
.ring-background { --tw-ring-color: var(--youth-background); }
.bg-foreground { background-color: var(--youth-foreground); }
.text-foreground { color: var(--youth-foreground); }
.border-foreground { border-color: var(--youth-foreground); }
.ring-foreground { --tw-ring-color: var(--youth-foreground); }
.bg-card { background-color: var(--youth-card); }
.text-card { color: var(--youth-card); }
.border-card { border-color: var(--youth-card); }
.ring-card { --tw-ring-color: var(--youth-card); }
.bg-primary { background-color: var(--youth-primary); }
.text-primary { color: var(--youth-primary); }
.border-primary { border-color: var(--youth-primary); }
.ring-primary { --tw-ring-color: var(--youth-primary); }
.bg-muted { background-color: var(--youth-muted); }
.text-muted { color: var(--youth-muted); }
.border-muted { border-color: var(--youth-muted); }
.ring-muted { --tw-ring-color: var(--youth-muted); }
.bg-border { background-color: var(--youth-border); }
.text-border { color: var(--youth-border); }
.border-border { border-color: var(--youth-border); }
.ring-border { --tw-ring-color: var(--youth-border); }
</style>
<style>
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: currentColor;
}
</style>
</head>
<body>
<div class="app-container">
<!-- 状态栏 -->
<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">
<span class="nav-title">用户协议</span>
</div>
<!-- 协议内容滚动区 -->
<div class="content-scroll">
<div class="page-header">
<h1 class="page-title">用户协议</h1>
<p class="page-subtitle">共建真实、友善的校园社交环境</p>
</div>
<div class="agreement-card">
<section class="agreement-section">
<h2 class="section-title"><span class="section-number">1.</span>账号注册规则</h2>
<div class="section-body">
<p>使用青核前,你需要使用<span class="highlight">本人真实有效的手机号码</span>完成注册。一个手机号码仅限绑定一个账号,禁止借用、盗用或批量注册账号。</p>
<p>注册成功后,你应及时完善个人资料,并妥善保管账号密码与验证码。因你个人原因导致的账号泄露或被盗,青核不承担相应责任。</p>
</div>
</section>
<section class="agreement-section">
<h2 class="section-title"><span class="section-number">2.</span>实名认证要求</h2>
<div class="section-body">
<p>为保障校园社区的真实性与安全性,青核要求用户完成<span class="highlight">在校学生实名认证</span>。认证方式包括学信网授权、校园邮箱验证或学生证人工审核。</p>
<p>认证信息仅用于身份核验,不会向其他用户公开展示。严禁使用伪造、冒用或他人身份信息进行认证。</p>
</div>
<div class="tip-card">
<div class="tip-title">重要提示</div>
<p>未完成实名认证的用户将无法使用组局、发布动态、参与活动及部分社交功能。</p>
</div>
</section>
<section class="agreement-section">
<h2 class="section-title"><span class="section-number">3.</span>用户行为规范</h2>
<div class="section-body">
<p>你在青核发布的内容、参与的活动及与其他用户的互动,应当遵守法律法规与社会公德,尊重他人合法权益。</p>
<p>平台禁止以下行为:<span class="highlight">发布违法违规、淫秽色情、暴力恐怖、虚假诈骗、人身攻击、歧视诽谤、广告骚扰、诱导交易</span>等内容,以及利用平台从事任何欺诈、刷单、引流等违规活动。</p>
</div>
</section>
<section class="agreement-section">
<h2 class="section-title"><span class="section-number">4.</span>内容发布规则</h2>
<div class="section-body">
<p>你发布的动态、评论、图片、视频等内容须为<span class="highlight">原创或已获得合法授权</span>,不得侵犯他人知识产权、肖像权、隐私权等合法权益。</p>
<p>青核有权根据社区规范与法律法规对违规内容进行<span class="highlight">删除、屏蔽、限制传播或下架</span>处理,并视情节对账号采取相应措施。</p>
</div>
<div class="tip-card">
<div class="tip-title">内容安全</div>
<p>发布不实信息、诱导分享或涉及金钱交易的内容,将被优先审核并可能触发账号处罚。</p>
</div>
</section>
<section class="agreement-section">
<h2 class="section-title"><span class="section-number">5.</span>活动参与与报名规则</h2>
<div class="section-body">
<p>你可以在青核浏览、报名或发起校园组局活动。报名成功后,请遵守活动时间、地点及发起人公布的规则,避免无故缺席或迟到。</p>
<p>发起人应对活动信息的真实性负责,严禁发布<span class="highlight">虚假活动、非法集资、商业推广、校外高风险活动</span>。参与者应提高安全意识,注意人身与财产安全。</p>
</div>
</section>
<section class="agreement-section">
<h2 class="section-title"><span class="section-number">6.</span>青豆与商城使用规则</h2>
<div class="section-body">
<p>青豆是青核平台内的虚拟积分,可用于参与平台活动、兑换虚拟礼物或商城权益。青豆<span class="highlight">不可提现、不可转让、不可反向兑换为法定货币</span>。</p>
<p>商城商品或权益的兑换、发货、售后规则以具体商品页面说明为准。通过违规手段获取的青豆将被清零,相关账号可能受到处罚。</p>
</div>
<div class="tip-card">
<div class="tip-title">虚拟资产</div>
<p>青豆仅限本人账号使用,账号注销后未消耗青豆将自动失效且不予退还。</p>
</div>
</section>
<section class="agreement-section">
<h2 class="section-title"><span class="section-number">7.</span>账号封禁与注销规则</h2>
<div class="section-body">
<p>对于违反本协议或社区规范的用户,青核有权根据违规程度采取<span class="highlight">警告、限制功能、短期封禁、永久封禁</span>等措施。</p>
<p>你可以随时申请注销账号。注销后,你的个人资料、动态、好友关系等数据将被删除或匿名化处理,且无法恢复。</p>
</div>
</section>
<section class="agreement-section">
<h2 class="section-title"><span class="section-number">8.</span>协议更新方式</h2>
<div class="section-body">
<p>青核可能根据法律法规变化或产品功能调整,对本协议进行修订。修订后的协议将在 APP 内公示,并在公示期满后生效。</p>
<p>如你不同意修订后的协议内容,可以选择停止使用青核服务;继续使用将视为你已接受修订后的协议。</p>
</div>
</section>
</div>
<!-- 底部留白,避免内容被底部栏遮挡 -->
<div style="height: 8px;"></div>
</div>
<!-- 底部同意栏 -->
<div class="bottom-bar">
<label class="agree-row" for="agree-check">
<input type="checkbox" id="agree-check" data-dom-id="checkbox-agree">
<span class="checkbox">
<i data-lucide="check"></i>
</span>
<span class="agree-text">我已阅读并同意用户协议</span>
</label>
<button class="btn-confirm" data-dom-id="btn-confirm" disabled onclick="confirmAgreement()">确认并继续</button>
</div>
</div>
<!-- Toast 提示 -->
<div id="toast" style="
position: fixed;
top: 100px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
padding: 10px 20px;
background: var(--youth-bg-overlay);
color: var(--youth-text-inverse);
border-radius: var(--youth-radius-full);
font-size: var(--youth-text-14);
font-weight: var(--youth-fw-medium);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
white-space: nowrap;
">提示信息</div>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
lucide.createIcons();
const agreeCheck = document.getElementById('agree-check');
const confirmBtn = document.querySelector('[data-dom-id="btn-confirm"]');
const themeToggle = document.getElementById('theme-toggle');
const toastEl = document.getElementById('toast');
let toastTimer = null;
let isDark = false;
// 主题切换
themeToggle.addEventListener('click', () => {
isDark = !isDark;
document.documentElement.dataset.theme = isDark ? 'dark' : '';
themeToggle.setAttribute('aria-label', isDark ? '切换浅色模式' : '切换深色模式');
themeToggle.setAttribute('title', isDark ? '切换浅色模式' : '切换深色模式');
const icon = themeToggle.querySelector('i');
icon.setAttribute('data-lucide', isDark ? 'sun' : 'moon');
lucide.createIcons();
});
// 同意勾选控制按钮状态
agreeCheck.addEventListener('change', () => {
if (agreeCheck.checked) {
confirmBtn.disabled = false;
confirmBtn.classList.add('enabled');
} else {
confirmBtn.disabled = true;
confirmBtn.classList.remove('enabled');
}
});
// 返回
function goBack() {
if (window.history.length > 1) {
window.history.back();
} else {
showToast('返回上一页');
}
}
// 确认并继续
function confirmAgreement() {
if (!agreeCheck.checked) return;
const params = new URLSearchParams(window.location.search);
const returnUrl = params.get('return');
if (returnUrl) {
window.location.href = decodeURIComponent(returnUrl);
} else if (window.history.length > 1) {
window.history.back();
} else {
showToast('已同意用户协议,进入下一步');
}
}
// Toast 提示
function showToast(message) {
toastEl.textContent = message;
toastEl.style.opacity = '1';
toastEl.style.visibility = 'visible';
toastEl.style.transform = 'translateX(-50%) translateY(0)';
if (toastTimer) clearTimeout(toastTimer);
toastTimer = setTimeout(() => {
toastEl.style.opacity = '0';
toastEl.style.visibility = 'hidden';
toastEl.style.transform = 'translateX(-50%) translateY(-20px)';
}, 2000);
}
</script>
<style>
:root {
--agreement-title-size: var(--youth-text-22);
--agreement-subtitle-size: var(--youth-text-13);
--agreement-section-size: var(--youth-text-15);
--agreement-body-size: var(--youth-text-13);
--agreement-line-height: 1.75;
}
html, body {
font-family: var(--youth-font-base);
background-color: var(--youth-bg-page);
color: var(--youth-text-primary);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
.app-container {
width: 375px;
min-height: 100vh;
margin: 0 auto;
background: var(--youth-bg-page);
position: relative;
display: flex;
flex-direction: column;
}
@media (max-width: 375px) {
.app-container {
width: 100%;
}
}
/* 状态栏 */
.status-bar {
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: var(--youth-text-14);
font-weight: var(--youth-fw-semibold);
color: var(--youth-text-primary);
flex-shrink: 0;
}
.status-bar .right-icons {
display: flex;
align-items: center;
gap: 6px;
}
.status-bar svg {
width: 16px;
height: 16px;
color: currentColor;
}
/* 导航栏 */
.nav-bar {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--youth-space-base);
position: relative;
flex-shrink: 0;
}
.nav-title {
font-size: var(--youth-text-17);
font-weight: var(--youth-fw-semibold);
color: var(--youth-text-primary);
letter-spacing: -0.01em;
}
.nav-btn {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--youth-radius-sm);
background: var(--youth-bg-card);
border: 1px solid var(--youth-border-light);
box-shadow: var(--youth-shadow-sm);
color: var(--youth-text-primary);
cursor: pointer;
transition: all 0.2s ease;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.nav-btn:hover {
background: var(--youth-bg-hover);
}
.nav-btn:active {
transform: translateY(-50%) scale(0.95);
}
.nav-btn i {
width: 20px;
height: 20px;
}
.nav-btn-left {
left: var(--youth-space-base);
}
.nav-btn-right {
right: var(--youth-space-base);
}
.theme-toggle {
position: absolute;
right: 58px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--youth-radius-sm);
background: transparent;
color: var(--youth-text-tertiary);
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.theme-toggle:hover {
color: var(--youth-text-primary);
background: var(--youth-bg-hover);
}
.theme-toggle i {
width: 18px;
height: 18px;
}
/* 内容滚动区 */
.content-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--youth-space-base);
}
.content-scroll::-webkit-scrollbar {
width: 0;
}
/* 页面标题 */
.page-header {
margin-bottom: var(--youth-space-base);
}
.page-title {
font-size: var(--agreement-title-size);
font-weight: var(--youth-fw-bold);
color: var(--youth-text-primary);
line-height: var(--youth-leading-tight);
margin-bottom: var(--youth-space-xs);
}
.page-subtitle {
font-size: var(--agreement-subtitle-size);
color: var(--youth-text-secondary);
line-height: var(--youth-leading-normal);
}
/* 协议卡片 */
.agreement-card {
background: var(--youth-bg-card);
border-radius: var(--youth-radius-md);
box-shadow: var(--youth-shadow-sm);
padding: var(--youth-space-base);
margin-bottom: var(--youth-space-base);
}
.agreement-section {
margin-bottom: var(--youth-space-lg);
}
.agreement-section:last-child {
margin-bottom: 0;
}
.section-title {
font-size: var(--agreement-section-size);
font-weight: var(--youth-fw-semibold);
color: var(--youth-text-primary);
line-height: var(--youth-leading-tight);
margin-bottom: var(--youth-space-xs);
}
.section-number {
color: var(--youth-primary);
margin-right: 4px;
}
.section-body {
font-size: var(--agreement-body-size);
color: var(--youth-text-secondary);
line-height: var(--agreement-line-height);
}
.section-body p {
margin-bottom: var(--youth-space-xs);
}
.section-body p:last-child {
margin-bottom: 0;
}
.highlight {
color: var(--youth-primary);
font-weight: var(--youth-fw-medium);
}
/* 重要规则提示卡片 */
.tip-card {
margin-top: var(--youth-space-sm);
padding: var(--youth-space-md);
background: var(--youth-teal-50);
border-left: 3px solid var(--youth-primary);
border-radius: var(--youth-radius-sm);
}
.tip-card .tip-title {
font-size: var(--youth-text-13);
font-weight: var(--youth-fw-semibold);
color: var(--youth-primary);
margin-bottom: var(--youth-space-1);
line-height: var(--youth-leading-tight);
}
.tip-card p {
font-size: var(--youth-text-12);
color: var(--youth-text-secondary);
line-height: var(--youth-leading-normal);
margin: 0;
}
/* 底部栏 */
.bottom-bar {
flex-shrink: 0;
padding: var(--youth-space-3) var(--youth-space-base);
padding-bottom: calc(var(--youth-space-3) + var(--youth-safe-bottom));
background: var(--youth-bg-card);
border-top: 1px solid var(--youth-border-light);
box-shadow: 0 -2px 12px var(--youth-shadow-color);
}
.agree-row {
display: flex;
align-items: center;
gap: var(--youth-space-xs);
margin-bottom: var(--youth-space-3);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.agree-row input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.checkbox {
width: 20px;
height: 20px;
border-radius: var(--youth-radius-xs);
border: 1.5px solid var(--youth-border-dark);
background: var(--youth-bg-card);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.checkbox i {
width: 14px;
height: 14px;
color: var(--youth-text-inverse);
opacity: 0;
transition: opacity 0.2s ease;
}
.agree-row input:checked + .checkbox {
background: var(--youth-primary);
border-color: var(--youth-primary);
box-shadow: var(--youth-shadow-btn);
}
.agree-row input:checked + .checkbox i {
opacity: 1;
}
.agree-text {
font-size: var(--youth-text-13);
color: var(--youth-text-secondary);
line-height: var(--youth-leading-normal);
}
/* 确认按钮 */
.btn-confirm {
width: 100%;
height: 44px;
border-radius: var(--youth-radius-sm);
font-size: var(--youth-text-15);
font-weight: var(--youth-fw-semibold);
color: var(--youth-text-disabled);
background: var(--youth-bg-disabled);
border: none;
cursor: not-allowed;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-confirm.enabled {
color: var(--youth-white);
background: var(--youth-gradient-primary);
box-shadow: var(--youth-shadow-btn);
cursor: pointer;
}
.btn-confirm.enabled:hover {
box-shadow: var(--youth-shadow-btn-hover);
filter: brightness(1.03);
}
.btn-confirm.enabled:active {
transform: scale(0.98);
box-shadow: var(--youth-shadow-btn-active);
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
* {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</body>
</html>