按钮
Warm dashboard button with soft shadow and rounded corners
- 基础骨架
font-medium rounded-xl shadow-lg transition-all duration-200- 变体
- 主要、次要、珊瑚、金色
- 状态
- hover、active、disabled
暖色仪表盘组件配方
font-medium rounded-xl shadow-lg transition-all duration-200 bg-[#4a9d9a] text-white shadow-lg shadow-[#4a9d9a]/25 hover:shadow-xl hover:-translate-y-0.5 active:scale-[0.98]卡片
Cream-colored card with soft shadow for dashboard data display
- 基础骨架
bg-[#faf8f5] rounded-2xl md:rounded-3xl shadow-xl shadow-black/8 transition-all duration-300- 变体
- 默认、统计
- 状态
- hover
输入框
Clean input with subtle border and teal focus ring
- 基础骨架
w-full bg-white border border-gray-200 rounded-xl text-gray-800 placeholder:text-gray-400 focus:outline-none transition-all duration-200- 变体
- 默认
- 状态
- focus、disabled
侧边栏
Semi-transparent white sidebar with blur effect
- 基础骨架
w-60 h-screen bg-white/80 backdrop-blur-xl border border-gray-200/50 p-6 flex flex-col- 变体
- 默认
- 状态
- 静态
统计卡片
Dashboard statistic card with label, value and trend
- 基础骨架
bg-[#faf8f5] rounded-2xl p-6 shadow-xl shadow-black/8- 变体
- 默认、带指示器
- 状态
- 静态
导航项
Sidebar navigation item with active state
- 基础骨架
flex items-center gap-3 px-4 py-3 rounded-xl transition-colors duration-200- 变体
- 默认、激活
- 状态
- hover
渠道卡片
Bottom channel statistics card with gradient background
- 基础骨架
bg-gradient-to-r from-[#e8f4f4] to-[#f0f7f7] rounded-2xl md:rounded-3xl p-5 md:p-6 shadow-lg shadow-black/5- 变体
- 默认
- 状态
- 静态