When the user wants to create,…

# 美食博客列表页设计方案（仿下厨房风格）

一、页面整体结构

• 顶部导航栏：博客Logo + 分类Tab（全部 / 川菜 / 粤菜 / 烘焙）+ 搜索框
• Hero横幅区：一句话简介（如“过去一年，50道家常美味”）+ 统计数字（50篇菜谱）
• 分类分区：三大板块纵向排列，每板块带标题 + “查看全部”链接
• 底部：分页或“加载更多”按钮

二、分类板块设计

• 川菜区：建议展示18-20篇卡片，主打麻辣鲜香视觉（红色系标签）
• 粤菜区：15-18篇卡片，清淡雅致风（暖黄色系标签）
• 烘焙区：12-15篇卡片，甜美风（马卡龙色系标签）

三、卡片设计要点（参考下厨房）

• 卡片构成：
• 顶部：菜品实拍图（比例建议4:3或1:1），圆角处理
• 图上悬浮：难度标签（简单/中等/进阶）
• 中部：菜名（加粗）+ 一句话描述
• 底部：作者头像 + 发布时间 + 浏览/收藏量图标
• 布局方式：桌面端3-4列网格，移动端双列瀑布流
• 交互效果：悬停时卡片轻微上浮 + 图片放大 + 显示“查看菜谱”按钮

四、排序与筛选建议

• 每个分类内支持按“最新发布 / 最热门 / 难度”排序
• 筛选器：食材（肉类/素食/海鲜）、耗时（30分钟内/1小时内）

五、技术实现要点

• 前端框架：HTML+CSS 可用 Bootstrap/Tailwind 快速搭建；或用 Vue/React 组件化
• 数据结构：文章对象包含 {标题、分类、图片URL、摘要、发布时间、难度、链接}
• 响应式：媒体查询适配移动端，卡片宽度用百分比 + flex/grid 布局
• 图片优化：懒加载（loading="lazy"），提升页面速度

六、视觉风格参考

• 主色调：暖白背景 + 橙红点缀（下厨房经典配色）
• 字体：正文用系统默认无衬线，菜名可适当加大字号
• 卡片阴影：轻投影（如 box-shadow: 0 2px 8px rgba(0,0,0,0.08)），保持清爽感

如需具体代码模板（HTML/CSS 或 Vue 组件），可以告诉我，我可以直接为你生成。