🎨 服务详情页 - Airbnb风格设计

基于你分享的参考图片设计 • 极简主义 • 大图片 • 大圆角

1. 大Banner图片

保持原有大图展示,支持网格布局和单图模式

豪华SPA按摩服务
豪华SPA按摩服务 - 图片 1
豪华SPA按摩服务 - 图片 2
豪华SPA按摩服务 - 图片 3
豪华SPA按摩服务 - 图片 4
豪华SPA按摩服务 - 图片 5
豪华SPA按摩服务 - 图片 6

商家信息展示

完整的商家资料,包含简介、亮点、照片、服务、营业信息、位置地图等

禅意SPA养生会所

禅意SPA养生会所

已认证
4.95(328条评价)
加入于 2020年
高端SPA专业按摩柬埔寨特色环境优雅

禅意SPA养生会所位于金边市中心,拥有超过15年的专业按摩经验。我们的团队由经过专业培训的按摩师组成,致力于为每位客人提供最优质的放松体验。会所环境优雅宁静,采用天然精油和传统柬埔寨按摩手法,帮助您缓解压力,恢复活力。我们提供多种套餐选择,从快速放松到深度理疗,满足不同客人的需求。

商家亮点

15年专业经验

我们的团队拥有超过15年的专业按摩经验

持证按摩师

所有按摩师均持有专业资格证书

天然精油

使用进口天然精油,安全健康

客户好评

98%的客户满意度,五星好评如潮

商家环境

商家照片 1
商家照片 2
商家照片 3
商家照片 4
商家照片 5
商家照片 6

提供的服务

泰式按摩

传统泰式按摩手法,缓解肌肉疲劳

精油SPA

使用天然精油,深度放松身心

足底按摩

专业足底穴位按摩,促进血液循环

头部按摩

缓解头部压力,改善睡眠质量

全身护理

全身深度护理,恢复肌肤活力

联系方式

位置与地图

金边市中心,独立大道123号

距离中央市场 500米 · 距离独立纪念碑 1公里 · 距离皇宫 2公里 · 距离河滨公园 1.5公里

我会前往你的所在地

金边市中心,独立大道123号

  • 距离中央市场 500米
  • 距离独立纪念碑 1公里
  • 距离皇宫 2公里
  • 距离河滨公园 1.5公里

⭐ 相关文章展示 - 平台核心

强化版文章展示:特色推荐 + 多列网格 + 丰富元信息

2. Airbnb风格套餐卡片

左侧大图 + 右侧详细信息,参考items.png设计

快速健身
推荐

快速健身

3,138TWD/ 人
原价 6,274 TWD

在短短 30 分钟内完成全身锻炼,以最短的时间获得最佳效果。

  • 30 分钟全身锻炼
  • 专业教练指导
  • 小班教学
  • 提供器材
  • 洗浴设施
舞蹈健身
热门

舞蹈健身

3,765TWD/ 人
原价 7,529 TWD

结合有氧运动的高能量舞蹈动作,为各种程度的参加者提供有趣且有效的锻炼。

  • 1小时舞蹈课程
  • 适合各种程度
  • 趣味互动
  • 音乐氛围
  • 燃脂效果显著
私人健身训练

私人健身训练

5,020TWD/ 人

一对一的训练课程,帮助你建立力量、自信,并达成目标。

  • 1小时私教课程
  • 量身定制计划
  • 营养指导
  • 进度追踪
  • 目标达成保障

4. 联系方式和注意事项

参考maps.png的注意事项设计风格

注意事项

客人条件

年满 16 岁可以参加,最多 5 人。

取消政策

在开始前至少 1 天取消,可以拿回全额退款。

了解详情

无障碍服务

无障碍服务与设施。传送讯息给房东/达人了解详情。

营业时间

周一09:00 - 21:00
周二09:00 - 21:00
周三09:00 - 21:00
周四09:00 - 21:00
周五09:00 - 22:00
周六10:00 - 22:00
周日10:00 - 20:00

📊 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:退出全屏或关闭灯箱