🎨 服务详情页 - Airbnb风格设计
基于你分享的参考图片设计 • 极简主义 • 大图片 • 大圆角
1. 大Banner图片
保持原有大图展示，支持网格布局和单图模式
商家信息展示
完整的商家资料，包含简介、亮点、照片、服务、营业信息、位置地图等
禅意SPA养生会所
禅意SPA养生会所位于金边市中心，拥有超过15年的专业按摩经验。我们的团队由经过专业培训的按摩师组成，致力于为每位客人提供最优质的放松体验。会所环境优雅宁静，采用天然精油和传统柬埔寨按摩手法，帮助您缓解压力，恢复活力。我们提供多种套餐选择，从快速放松到深度理疗，满足不同客人的需求。
商家亮点
15年专业经验
我们的团队拥有超过15年的专业按摩经验
持证按摩师
所有按摩师均持有专业资格证书
天然精油
使用进口天然精油，安全健康
客户好评
98%的客户满意度，五星好评如潮
商家环境
提供的服务
泰式按摩
传统泰式按摩手法，缓解肌肉疲劳
精油SPA
使用天然精油，深度放松身心
足底按摩
专业足底穴位按摩，促进血液循环
头部按摩
缓解头部压力，改善睡眠质量
全身护理
全身深度护理，恢复肌肤活力
联系方式
位置与地图
金边市中心，独立大道123号
距离中央市场 500米 · 距离独立纪念碑 1公里 · 距离皇宫 2公里 · 距离河滨公园 1.5公里
我会前往你的所在地
金边市中心，独立大道123号
- 距离中央市场 500米
- 距离独立纪念碑 1公里
- 距离皇宫 2公里
- 距离河滨公园 1.5公里
⭐ 相关文章展示 - 平台核心
强化版文章展示：特色推荐 + 多列网格 + 丰富元信息
精选攻略与评测
来自真实用户的深度体验分享
我在禅意SPA的60分钟泰式按摩体验：值得吗？
作为一名长期受颈椎问题困扰的上班族，我尝试了禅意SPA的招牌泰式按摩。技师的手法专业，环境舒适，但价格偏高...
金边TOP 10高性价比SPA推荐（2025年更新）
经过三个月的实地探访，我整理出了金边最值得去的10家SPA会所。从$10的街边按摩到$100的奢华体验，总有一款适合你。
精油SPA初体验：如何选择适合自己的精油？
第一次做精油SPA时我完全不知道该选什么。薰衣草、茶树、玫瑰...这些精油有什么区别？让我来告诉你。
足底按摩真的能治病吗？医生和技师的不同看法
足底按摩声称能通过刺激穴位改善身体健康，但医学界对此持保留态度。我采访了三位医生和五位资深技师...
孕期可以做按摩吗？孕妇SPA安全指南
怀孕期间腰酸背痛，但又担心按摩会影响宝宝。咨询了多位专业技师和妇产科医生后，我总结了这份孕妇SPA安全指南。
SPA会员卡值得办吗？我花$500办卡后的真实感受
看着诱人的折扣和赠品，我办了一张年卡。三个月过去了，我来算算这笔账到底划不划算。
2. Airbnb风格套餐卡片
左侧大图 + 右侧详细信息，参考items.png设计
快速健身
在短短 30 分钟内完成全身锻炼，以最短的时间获得最佳效果。
- 30 分钟全身锻炼
- 专业教练指导
- 小班教学
- 提供器材
- 洗浴设施
舞蹈健身
结合有氧运动的高能量舞蹈动作，为各种程度的参加者提供有趣且有效的锻炼。
- 1小时舞蹈课程
- 适合各种程度
- 趣味互动
- 音乐氛围
- 燃脂效果显著
私人健身训练
一对一的训练课程，帮助你建立力量、自信，并达成目标。
- 1小时私教课程
- 量身定制计划
- 营养指导
- 进度追踪
- 目标达成保障
4. 联系方式和注意事项
参考maps.png的注意事项设计风格
注意事项
联系服务商
营业时间
📊 V3 Airbnb设计特点
🎨 视觉风格
- ✓ 大量留白，极简主义
- ✓ 大尺寸高质量图片
- ✓ 大圆角（16-24px）
- ✓ 无边框或极浅阴影
- ✓ 柔和中性色调
🖼️ 图片系统
- ✓ Hero Banner 大图展示
- ✓ 瀑布流灯箱浏览
- ✓ 点击图片全屏查看
- ✓ 无限循环导航
- ✓ 平滑滚动定位
📋 套餐卡片
- ✓ 左大图 + 右侧信息
- ✓ 清晰的价格层级
- ✓ 简洁的特性列表
- ✓ 悬停放大效果
- ✓ 响应式布局
🗺️ 位置与地图
- ✓ 地图与位置信息整合
- ✓ 大尺寸地图展示
- ✓ 懒加载节省流量
- ✓ 附近地标列表
- ✓ 集成在商家信息中
📚 使用指南
1. 引入CSS
// nuxt.config.ts
css: [
'~/assets/css/main.css',
'~/assets/css/airbnb-design.css', // 新增
// ...
]2. 使用组件
<!-- Hero Banner -->
<HeroBannerAirbnb
:images="serviceImages"
:title="serviceName"
@open-gallery="handleOpenGallery"
/>
<!-- 商家信息（包含地图） -->
<MerchantInfoAirbnb
:merchant="{
name: '商家名称',
address: '地址信息',
latitude: 11.5564,
longitude: 104.9282,
landmarks: ['地标1', '地标2'],
mapsApiKey: 'YOUR_API_KEY',
// ...其他商家信息
}"
@open-gallery="handleOpenGallery"
/>
<!-- 套餐卡片 -->
<PackageCardAirbnb
name="基础套餐"
:price="299"
:features="['特性1', '特性2']"
image="/images/package.jpg"
@select="handleSelect"
/>
<!-- 联系方式 -->
<ContactCardAirbnb
guest-requirements="客人条件"
cancellation-policy="取消政策"
phone="+855 12345678"
/>3. 灯箱使用
<!-- 支持双模式：瀑布流 + 全屏单图 -->
<ImageLightboxAirbnb
:images="allImages"
:initial-index="currentIndex"
initial-view="masonry"
@close="closeLightbox"
/>
// 功能：
// - 瀑布流模式：查看所有图片网格
// - 全屏单图模式：点击图片放大查看
// - 空格键：切换视图模式
// - 左右箭头：切换图片（无限循环）
// - ESC：退出全屏或关闭灯箱