refactor(ui): 去 AI 味,重做为报刊赛程版视觉

- 色板收敛为纸白/暖墨/印报红三色,移除默认 Tailwind 蓝
- 队名彩色哈希块、shimmer/ping/fade-up 动效、圆角卡片阵全部移除
- 报头改为双线+居中宋体刊名+报眉日期行
- 赛程列表表格化:细线分行,联赛改为文字版面切换
- 预测版:方正墨线框,大号宋体比分,胜平负改文字行,专家意见改汉字编号折叠行,终裁改红竖线引文
- 修复:桌面状态列 sm:contents 错位;移动端对阵未同行
This commit is contained in:
2026-09-15 19:56:23 +08:00
parent e3cacc35e4
commit d847f4f3f4
4 changed files with 397 additions and 495 deletions
+35 -57
View File
@@ -4,79 +4,57 @@ export default {
theme: {
extend: {
colors: {
// 品牌主色:偏冷的蓝,比默认 blue-600 更沉稳,适合数据产品
brand: {
50: '#EFF6FF',
100: '#DBEAFE',
200: '#BFDBFE',
300: '#93C5FD',
400: '#60A5FA',
500: '#3B82F6',
600: '#2563EB',
700: '#1D4ED8',
800: '#1E40AF',
900: '#1E3A8A',
950: '#172554',
// 纸白:微暖底色,像新闻纸而不是纯白画布
paper: {
50: '#FDFCF8',
100: '#F7F4EC',
200: '#EDE9DE',
300: '#DDD7C7',
},
// 中性色:带一点冷调,避免纯灰显得脏
// 墨色:暖黑灰阶,替代冷调 slate
ink: {
50: '#F8FAFC',
100: '#F1F5F9',
200: '#E2E8F0',
300: '#CBD5E1',
400: '#94A3B8',
500: '#64748B',
600: '#475569',
700: '#334155',
800: '#1E293B',
900: '#0F172A',
50: '#FAF9F7',
100: '#F0EEE9',
200: '#E2DFD7',
300: '#C9C4B8',
400: '#9C9587',
500: '#6E675B',
600: '#524C42',
700: '#3B362E',
800: '#282420',
900: '#17140F',
},
// 印报红:全站唯一强调色,克制使用
press: {
DEFAULT: '#9E1B1B',
dark: '#7C1414',
wash: '#F7E9E4',
},
// 语义色:状态徽章 / 提示条统一走这套
win: { bg: '#ECFDF5', fg: '#047857', line: '#A7F3D0' },
draw: { bg: '#FFFBEB', fg: '#B45309', line: '#FDE68A' },
loss: { bg: '#FEF2F2', fg: '#B91C1C', line: '#FECACA' },
},
fontFamily: {
// 标题与比分:宋体血统,报纸版面的骨架
serif: [
'Georgia',
'"Times New Roman"',
'"Songti SC"',
'STSong',
'SimSun',
'"Noto Serif CJK SC"',
'serif',
],
// 正文:中文黑体栈
sans: [
'ui-sans-serif',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'"PingFang SC"',
'"Hiragino Sans GB"',
'"Microsoft YaHei"',
'"Noto Sans CJK SC"',
'sans-serif',
],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Consolas', 'monospace'],
},
fontSize: {
// 多一档 2xs,给徽章/元信息用
'2xs': ['11px', { lineHeight: '16px' }],
},
borderRadius: {
card: '12px',
pill: '9999px',
},
boxShadow: {
// 卡片阴影:极浅,靠层次而非重影提升
card: '0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06)',
raise: '0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.04)',
focus: '0 0 0 3px rgb(37 99 235 / 0.15)',
},
keyframes: {
'fade-up': {
'0%': { opacity: '0', transform: 'translateY(4px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
shimmer: {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' },
},
},
animation: {
'fade-up': 'fade-up 0.22s ease-out both',
shimmer: 'shimmer 1.4s linear infinite',
},
},
},
plugins: [],