Recreates website designs from…

# Airbnb 风格界面复刻指南

由于我这边未能接收到图片文件，以下基于 Airbnb 官网通用设计规范给出还原方案。

一、顶部导航栏

• 整体结构：三层布局——顶部细条（Logo + 右侧功能入口）、中部搜索条、下方分类筛选栏。
• 左上角：品牌 Logo（图形 + 小写字体），高度约 32px。
• 中部搜索条：圆角胶囊形设计（圆角约 32px），内部分为三段式：「位置 | 入住日期 | 退房日期 | 房客数」，段间用竖线分隔，最右端为圆形粉色搜索按钮（品牌色 #FF385C）。
• 右侧：「Airbnb 你的房源」文字链接、地球图标（语言切换）、菜单汉堡图标 + 用户头像组合（圆角边框）。
• 分类栏：横向滚动的图标 + 文字标签（如“惊艳的泳池”“乡村豪宅”），选中项带下划线，两端有左右切换箭头。

二、房源卡片

• 布局：响应式网格排列，桌面端通常一行 4–6 张卡片，间距约 16–24px。
• 图片区：顶部大图，圆角约 12px，左上角悬浮“房客最爱”标签（半透明白底），右上角心形收藏图标。
• 图片轮播：多图切换用左右箭头 + 底部圆点指示器。
• 信息区（图片下方）：
• 第一行：地理位置（加粗）+ 右侧评分（星形图标 + 数字）；
• 第二行：房屋类型与房间数描述（灰色副标题）；
• 第三行：设施亮点说明；
• 第四行：价格「每晚 ¥xxx」，可含总价提示。
• 交互细节：卡片 hover 时图片轻微缩放、阴影加深；点击收藏图标变红色填充。

三、实现建议

• 技术栈：HTML + Tailwind CSS 或 React + 组件库均可快速搭建。
• 配色：主色玫红 #FF385C，辅助深灰 #222222，文字灰 #717171。
• 字体：系统默认无衬线字体即可，标题加粗。

如你能重新上传截图，我可以针对性比对差异并给出更精确的还原方案。