sladro
37db6c7a6c
- BigScreenPortrait.vue: 添加控制面板、返回按钮，统一字体大小为xl - Dashboard.vue: 为学生角色添加"资料上传"功能卡片 - Home.vue: 为教师角色添加"学生能力画像"导航按钮 - mockData.js: 更新教师姓名为"刘澜涛"，修改能力矩阵维度名称 - variables.css: 新增gray-alpha颜色变量系统 - common.css: 添加Element Plus下拉列表全局样式 - ReportMonitor.vue: 移除重复的getCSSVariable函数定义 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
146 lines
5.0 KiB
CSS
146 lines
5.0 KiB
CSS
:root {
|
|
/* 教学平台专业配色 */
|
|
--primary: #1e3a8a;
|
|
--primary-light: #3b82f6;
|
|
--primary-lighter: #dbeafe;
|
|
--secondary: #06b6d4;
|
|
--secondary-light: #67e8f9;
|
|
--success: #10b981;
|
|
--success-light: #6ee7b7;
|
|
--warning: #f59e0b;
|
|
--warning-light: #fcd34d;
|
|
--danger: #ef4444;
|
|
--danger-light: #fca5a5;
|
|
--purple: #8b5cf6;
|
|
|
|
/* 状态评分颜色 */
|
|
--status-default: #ddd;
|
|
--status-excellent: #67C23A;
|
|
--status-good: #E6A23C;
|
|
--status-fair: #F56C6C;
|
|
--status-poor: #909399;
|
|
|
|
/* 中性色 */
|
|
--dark: #1f2937;
|
|
--dark-light: #374151;
|
|
--gray: #6b7280;
|
|
--gray-light: #9ca3af;
|
|
--gray-lighter: #d1d5db;
|
|
--light: #f3f4f6;
|
|
--lighter: #f9fafb;
|
|
--white: #ffffff;
|
|
|
|
/* 文本颜色 */
|
|
--text-primary: var(--dark);
|
|
--text-secondary: var(--gray);
|
|
--text-muted: var(--gray-light);
|
|
--text-inverse: var(--white);
|
|
|
|
/* 背景色 */
|
|
--bg-primary: var(--white);
|
|
--bg-secondary: var(--lighter);
|
|
--bg-dark: var(--dark);
|
|
--bg-sidebar: var(--dark);
|
|
|
|
/* 边框色 */
|
|
--border: var(--gray-lighter);
|
|
--border-light: #e5e7eb;
|
|
--border-dark: var(--gray-light);
|
|
|
|
/* 间距 */
|
|
--spacing-xs: 0.5rem;
|
|
--spacing-sm: 0.75rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--spacing-xxl: 3rem;
|
|
|
|
/* 圆角 */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
|
|
/* 阴影系统 */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
|
|
|
|
/* 字体 */
|
|
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-size-xs: 0.75rem;
|
|
--font-size-sm: 0.875rem;
|
|
--font-size-md: 1rem;
|
|
--font-size-lg: 1.125rem;
|
|
--font-size-xl: 1.25rem;
|
|
--font-size-xxl: 1.5rem;
|
|
|
|
/* 页面布局 */
|
|
--header-height: 72px;
|
|
--sidebar-width: 280px;
|
|
--container-max-width: 1200px;
|
|
|
|
/* 渐变色 */
|
|
--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
--gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
|
--gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
|
|
--gradient-sidebar: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
|
|
--gradient-card-primary: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
|
|
--gradient-card-secondary: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
|
|
--gradient-card-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
|
--gradient-card-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
|
|
--gradient-mesh: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
|
|
|
|
/* 毛玻璃效果 */
|
|
--glass-bg: rgba(255, 255, 255, 0.1);
|
|
--glass-border: rgba(255, 255, 255, 0.2);
|
|
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
|
|
--glass-blur: blur(10px);
|
|
|
|
/* 透明度级别 */
|
|
--opacity-lighter: 0.02;
|
|
--opacity-light: 0.05;
|
|
--opacity-medium: 0.1;
|
|
--opacity-heavy: 0.2;
|
|
--opacity-strong: 0.3;
|
|
|
|
/* 主题色透明度变体 */
|
|
--primary-alpha-lighter: rgba(30, 58, 138, var(--opacity-lighter));
|
|
--primary-alpha-light: rgba(30, 58, 138, var(--opacity-light));
|
|
--primary-alpha-medium: rgba(30, 58, 138, var(--opacity-medium));
|
|
--primary-alpha-heavy: rgba(30, 58, 138, var(--opacity-heavy));
|
|
--primary-alpha-strong: rgba(30, 58, 138, var(--opacity-strong));
|
|
|
|
--success-alpha-light: rgba(16, 185, 129, var(--opacity-light));
|
|
--success-alpha-medium: rgba(16, 185, 129, var(--opacity-medium));
|
|
--success-alpha-heavy: rgba(16, 185, 129, var(--opacity-heavy));
|
|
|
|
--danger-alpha-light: rgba(239, 68, 68, var(--opacity-light));
|
|
--danger-alpha-heavy: rgba(239, 68, 68, var(--opacity-heavy));
|
|
|
|
--secondary-alpha-heavy: rgba(6, 182, 212, var(--opacity-heavy));
|
|
|
|
--gray-alpha-light: rgba(107, 114, 128, var(--opacity-light));
|
|
--gray-alpha-medium: rgba(107, 114, 128, var(--opacity-medium));
|
|
--gray-alpha-heavy: rgba(107, 114, 128, var(--opacity-heavy));
|
|
|
|
--white-alpha-high: rgba(255, 255, 255, 0.98);
|
|
--white-alpha-medium: rgba(255, 255, 255, 0.9);
|
|
--white-alpha-light: rgba(255, 255, 255, 0.6);
|
|
--white-alpha-lighter: rgba(255, 255, 255, 0.1);
|
|
|
|
--black-alpha-light: rgba(0, 0, 0, 0.08);
|
|
--black-alpha-medium: rgba(0, 0, 0, 0.15);
|
|
|
|
/* 动画 */
|
|
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-spring: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--animation-float: float 3s ease-in-out infinite;
|
|
--animation-glow: glow 2s ease-in-out infinite;
|
|
} |