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.
2051 lines
66 KiB
2051 lines
66 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-accent: var(--youth-accent);
|
|
--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-accent { background-color: var(--youth-accent); }
|
|
.text-accent { color: var(--youth-accent); }
|
|
.border-accent { border-color: var(--youth-accent); }
|
|
.ring-accent { --tw-ring-color: var(--youth-accent); }
|
|
.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>同时,为保障账号安全与服务质量,我们还会收集你的<span class="highlight">设备型号、操作系统版本、IP 地址、网络类型、应用版本号及崩溃日志</span>等技术信息。</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>
|
|
</section>
|
|
|
|
<section class="agreement-section">
|
|
<h2 class="section-title"><span class="section-number">3.</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">4.</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">5.</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">6.</span>信息共享与删除</h2>
|
|
<div class="section-body">
|
|
<p>未经你的同意,我们不会向任何第三方共享你的个人信息。仅在<span class="highlight">法律法规要求、司法机关依法调取、或为提供必要服务而委托的技术合作方</span>范围内,我们才会在最小必要原则下共享数据。</p>
|
|
<p>你可以通过<span class="highlight">注销账号</span>申请删除你的全部个人数据,我们将在完成身份核验后的合理期限内处理你的请求。</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>如果你对本隐私协议有任何疑问、意见或投诉,可以通过以下方式联系我们:</p>
|
|
<p>客服邮箱:<span class="highlight">privacy@youthome.cn</span></p>
|
|
<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;
|
|
height: 812px;
|
|
margin: 0 auto;
|
|
background: var(--youth-bg-page);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: var(--youth-shadow-lg);
|
|
}
|
|
|
|
@media (max-width: 375px) {
|
|
.app-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
}
|
|
|
|
/* 状态栏 */
|
|
.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);
|
|
}
|
|
|
|
/* 底部栏 */
|
|
.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>
|
|
|