# 广告位轮播实现方案

## 项目概述
在银龄智慧首页的银龄图标上方添加一个广告位轮播图，保持与现有水墨风格界面设计一致。

## 技术实现方案

### 1. 组件设计
- **组件名称**: AdBannerCarousel
- **位置**: src/client/mobile/components/AdBannerCarousel.tsx
- **样式风格**: 延续中国水墨风格，使用现有色彩方案

### 2. 数据结构
```typescript
interface AdBannerItem {
  id: number;
  title: string;
  description: string;
  image: string;
  link: string;
  sortOrder: number;
}
```

### 3. 样式规范
- **背景色**: 使用宣纸背景色 `#f5f3f0`
- **边框**: 淡墨色 `#d4c4a8` 
- **文字**: 墨色文字 `#2f1f0f`
- **圆角**: 匹配现有设计，使用 `border-radius: 6px`
- **阴影**: `shadow-sm transition-all duration-300 hover:shadow-md`

### 4. 组件特性
- 自动轮播（每4秒切换）
- 手动控制（左右箭头）
- 指示器（底部小圆点）
- 响应式设计
- 图片懒加载
- 错误图片回退机制

### 5. 位置布局
- **垂直位置**: 服务分类区域上方（银龄图标网格上方）
- **水平位置**: 全宽展示，左右边距16px
- **高度**: 120px（适合移动设备展示）

### 6. 图片资源
- 使用现有banner图片：`/images/banner1.jpg`, `/images/banner2.jpg`
- 添加示例广告图片到 `/public/images/ad-banner-*.jpg`
- 备用图片：`/images/placeholder-banner.jpg`

### 7. 集成步骤
1. 创建AdBannerCarousel组件
2. 修改NewHomePage.tsx，在服务分类区域上方插入广告轮播
3. 添加示例广告数据
4. 测试轮播功能
5. 优化移动端体验

### 8. 响应式处理
- **移动端**: 全宽展示，高度120px
- **平板**: 保持相同设计，适配更大屏幕
- **桌面**: 在移动视图内保持一致体验

### 9. 性能优化
- 图片懒加载
- 自动轮播暂停（用户悬停时）
- 内存管理（组件卸载时清理定时器）

### 10. 错误处理
- 图片加载失败时显示占位图
- 无广告数据时隐藏组件
- 网络异常时的优雅降级

## 实现代码结构

### AdBannerCarousel组件
```typescript
// 基础的自动轮播组件
const AdBannerCarousel: React.FC<{
  ads: AdBannerItem[];
  autoPlayInterval?: number;
}> = ({ ads, autoPlayInterval = 4000 }) => {
  // 轮播逻辑
}
```

### 样式配置
```css
.ad-banner-container {
  background-color: rgba(255,255,255,0.7);
  border: 1px solid #d4c4a8;
  border-radius: 12px;
  margin: 16px;
  overflow: hidden;
}
```

## 测试方案
1. 手动切换测试
2. 自动轮播测试
3. 图片加载测试
4. 响应式适配测试
5. 性能测试

## 部署计划
1. 开发环境测试
2. 生产环境部署
3. 监控用户反馈
4. 性能监控