UI 风格规范

基于对 cnb.cool 的截图分析和 VLM 解析，定义纳雍万能墙的 UI 设计规范。

整体风格

科技商务风（Tech Business）：深色背景 + 橙色强调，平衡专业与亲和力。

配色方案

主色

用途	色值	使用场景
主背景	#0A192F	页面背景、导航栏
次背景	#111827	卡片背景、面板
卡片背景	#1E293B	内容卡片、输入框
强调色	#FF6B35	按钮、标签、链接、关键信息
强调色 Hover	#E55A2A	按钮悬停状态

文字色

用途	色值	使用场景
主文字	#E2E8F0	标题、正文
次文字	#94A3B8	描述、辅助信息
弱文字	#64748B	时间戳、版权信息
高亮文字	#FFFFFF	大标题、品牌名

功能色

用途	色值
成功	#10B981
警告	#F59E0B
危险	#EF4444
信息	#3B82F6

分类色（7 个分类各有专属色）

分类	图标	颜色
招聘求职	Briefcase	#3B82F6
房屋租售	Home	#10B981
二手交易	RefreshCw	#F59E0B
拼车出行	Car	#8B5CF6
寻人寻物	Search	#EF4444
店铺推广	Store	#EC4899
活动召集	Calendar	#06B6D4

字体

font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;

级别	大小	字重	行高
H1	2rem (32px)	700	1.3
H2	1.5rem (24px)	600	1.4
H3	1.25rem (20px)	600	1.4
Body	1rem (16px)	400	1.6
Small	0.875rem (14px)	400	1.5
Tiny	0.75rem (12px)	400	1.5

布局

间距系统

使用 4px 基数：

• xs: 4px
• sm: 8px
• md: 16px
• lg: 24px
• xl: 32px
• 2xl: 48px
• 3xl: 64px

响应式断点

断点	宽度	设备
sm	640px	大屏手机
md	768px	平板
lg	1024px	小屏笔记本
xl	1280px	桌面

容器宽度

• 移动端：100%，padding 16px
• 平板端：max-width 768px，居中
• 桌面端：max-width 1200px，居中

组件规范

按钮

/* 主按钮 */
.btn-primary {
  background: #FF6B35;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: #E55A2A;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* 次要按钮 */
.btn-secondary {
  background: transparent;
  color: #FF6B35;
  border: 1px solid #FF6B35;
  border-radius: 6px;
  padding: 10px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

卡片

.card {
  background: #1E293B;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.3s ease;
}
.card:hover {
  border-color: rgba(255, 107, 53, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

输入框

.input {
  background: #0F172A;
  border: 1px solid #1E293B;
  border-radius: 6px;
  padding: 10px 16px;
  color: #E2E8F0;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}
.input:focus {
  border-color: #FF6B35;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

标签

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.tag-blue { background: rgba(59,130,246,0.15); color: #60A5FA; }
.tag-green { background: rgba(16,185,129,0.15); color: #34D399; }
.tag-orange { background: rgba(255,107,53,0.15); color: #FF6B35; }

动效

过渡

/* 全局过渡 */
transition: all 0.3s ease;

滚动进入动画

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

交互反馈

• 按钮点击：scale(0.95)
• 卡片悬停：上浮 2px + 阴影增强
• 加载状态：橙色脉冲动画

页面布局参考

首页

┌───────────────────────────────────┐
│  🔍 纳雍万能墙          [发布] [我]│  顶栏
├───────────────────────────────────┤
│  全部 招聘 房屋 二手 拼车 寻人 店铺 活动│  分类横滑
│  ───── 雍熙 ▼ ─────              │  乡镇选择
├───────────────────────────────────┤
│  ┌─────────┐  ┌─────────┐       │
│  │ 招聘卡片 │  │ 房屋卡片 │       │  帖子列表
│  └─────────┘  └─────────┘       │  （双列/单列）
│  ┌─────────┐  ┌─────────┐       │
│  │ 二手卡片 │  │ 拼车卡片 │       │
│  └─────────┘  └─────────┘       │
├───────────────────────────────────┤
│  🏠首页  📂分类  ➕发布  💬消息  👤我的│  底栏（移动端）
└───────────────────────────────────┘

帖子详情页

┌───────────────────────────────────┐
│  ← 返回              分享  收藏   │
├───────────────────────────────────┤
│  [招聘求职] 🏷️ 全职  包吃         │  标签区
│  招奶茶店店员                      │  标题
│  薪资：3000-5000                   │  关键信息
│  ──────────────────────────────── │
│  详细描述文字...                    │  正文
│                                   │
│  [图片1] [图片2] [图片3]          │  图片区
│                                   │
│  📍 雍熙街道沿河路18号             │  地址
│  👤 茶百道（纳雍店）               │  来源
│  ──────────────────────────────── │
│  👤 张先生 · 2小时前 · 已认证     │  作者信息
│                                   │
│  [查看联系方式]                    │  联系按钮
│  ──────────────────────────────── │
│  💬 评论 (3)                       │  评论区
│  ┌─────────────────────────────┐  │
│  │ 用户A：请问还招吗？          │  │
│  │ 用户B：已报名，什么时候面试？  │  │
│  └─────────────────────────────┘  │
└───────────────────────────────────┘

参考

• cnb.cool 首页截图：见仓库 download/ 目录
• VLM 分析报告：见仓库 download/cnb-ui-analysis.json