5. 双城记游记（对应：「2」 我多想去看看）

功能介绍：
配合《我多想去看看》的地理认知应用。界面分为两个标签页：“北京”和“新疆”。点击“北京”展示天安门升旗动画，点击“新疆”展示天山雪景和骏马。通过Tabs组件切换，让学生直观感受祖国首都的庄严和边疆的美丽，激发对祖国的热爱。

应用功能：

1. 双城记游记：

• 主题：《我多想去看看》地理认知
• 标签页：北京和新疆
• 教育价值：让学生直观感受祖国首都的庄严和边疆的美丽，激发对祖国的热爱

2. 北京标签页：

• 标题：北京 - 祖国的首都
• 天安门：使用Column组件创建城楼和城门
• 升旗动画：点击"观看升旗仪式"按钮，旗子从底部升到顶部
• 动画效果：3秒的线性动画，模拟真实升旗仪式
• 描述：祖国的首都，有天安门、长城等著名景点

3. 新疆标签页：

• 标题：新疆 - 祖国的边疆
• 天山雪景：使用Column组件创建雪山、山峰和山顶积雪
• 骏马：使用emoji展示骏马在草原上奔跑
• 描述：祖国的边疆，有天山、喀纳斯等美丽风景

4. 技术实现：

• Tabs组件：实现北京和新疆的切换
• Stack组件：实现天安门和旗子的叠加
• 状态管理：使用@State管理旗子高度和升旗状态
• 动画效果：使用animation属性实现旗子上升动画
• 响应式布局：使用Column和Row实现合理的布局

5. 交互功能：

• 标签切换：点击标签页切换北京和新疆
• 升旗按钮：点击"观看升旗仪式"按钮触发升旗动画
• 视觉反馈：旗子平滑上升，动画结束后保持在顶部

6. 动画效果：

1. 点击"观看升旗仪式"按钮
2. 旗子从底部开始上升
3. 3秒后旗子到达顶部
4. 升旗状态结束，旗子保持在顶部
5. 

interface CityData {
  id: string;
  name: string;
  description: string;
  landmark: string;
  color: string;
}

@Entry
@Component
struct CityTravel {
  @State selectedIndex: number = 0;
  @State flagHeight: number = 0;
  @State isRaising: boolean = false;
  
  private cities: CityData[] = [
    {
      id: 'beijing',
      name: '北京',
      description: '祖国的首都，有天安门、长城等著名景点',
      landmark: '天安门',
      color: '#E53935'
    },
    {
      id: 'xinjiang',
      name: '新疆',
      description: '祖国的边疆，有天山、喀纳斯等美丽风景',
      landmark: '天山',
      color: '#43A047'
    }
  ];

  raiseFlag() {
    this.isRaising = true;
    this.flagHeight = 0;
    
    // 模拟升旗动画
    setTimeout(() => {
      this.flagHeight = 1;
      
      setTimeout(() => {
        this.isRaising = false;
      }, 3000);
    }, 100);
  }

  build() {
    Column() {
      Text('双城记游记')
        .fontSize(36)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')
        .margin({ top: 30 })

      // 标签页
      Tabs() {
        // 北京标签页
        TabContent() {
          Column({ space: 20 }) {
            Text('北京 - 祖国的首都')
              .fontSize(24)
              .fontWeight(FontWeight.Bold)
              .fontColor(this.cities[0].color)
              .margin({ top: 20 })

            // 天安门和升旗动画
            Stack() {
              // 天安门
              Text('🏛️')
                .fontSize(200)
              // 旗杆和旗子
              Stack() {
                // 旗杆
                Column()
                  .width(5)
                  .height(200)
                  .backgroundColor('#757575')
                
                // 旗子
                if (this.isRaising) {
                  Column()
                    .width(80)
                    .height(50)
                    .backgroundColor('#E53935')
                    .position({ x: 30, y: 200 * (1 - this.flagHeight) })
                    .animation({ duration: 3000, curve: Curve.Linear })
                } else {
                  Column()
                    .width(80)
                    .height(50)
                    .backgroundColor('#E53935')
                    .position({ x: 30, y: 0 })
                }
              }
              .position({ x: '50%', y: 20 })
            }
            .width('100%')
            .height(300)

            // 升旗按钮
            Button('观看升旗仪式')
              .fontSize(16)
              .width('60%')
              .height(40)
              .backgroundColor(this.cities[0].color)
              .onClick(() => {
                this.raiseFlag();
              })

            // 描述
            Text(this.cities[0].description)
              .fontSize(18)
              .fontColor('#666666')
              .width('90%')
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }
          .width('100%')
          .height('100%')
        }
        .tabBar(this.cities[0].name)

        // 新疆标签页
        TabContent() {
          Column({ space: 20 }) {
            Text('新疆 - 祖国的边疆')
              .fontSize(24)
              .fontWeight(FontWeight.Bold)
              .fontColor(this.cities[1].color)
              .margin({ top: 20 })

            // 天山雪景
            Stack() {
              // 雪山背景
              Column()
                .width('100%')
                .height(200)
                .backgroundColor('#E3F2FD')

              // 山峰
              Column()
                .width('100%')
                .height(150)
                .backgroundColor('#B3E5FC')
                .position({ y: 50 })
              // 山顶积雪
              Column()
                .width('100%')
                .height(80)
                .backgroundColor('#FFFFFF')
                .position({ y: 50 })
              Text('🏔️')
                .fontSize(200)
              // 骏马
              Text('🐎')
                .fontSize(40)
                .position({ x: '20%', y: 220 })
              Text('🐎')
                .fontSize(40)
                .position({ x: '40%', y: 230 })
              Text('🐎')
                .fontSize(40)
                .position({ x: '60%', y: 225 })
            }
            .width('90%')
            .height(280)
            .borderRadius(10)

            // 描述
            Text(this.cities[1].description)
              .fontSize(18)
              .fontColor('#666666')
              .width('90%')
              .textAlign(TextAlign.Center)
          }
          .width('100%')
          .height('100%')
        }
        .tabBar(this.cities[1].name)
      }
      .width('90%')
      .height(500)
      .backgroundColor('#F5F5F5')
      .borderRadius(10)

      // 提示信息
      Text('点击标签页，了解祖国的不同地方')
        .fontSize(16)
        .fontColor('#999999')
        .margin({ top: 20, bottom: 30 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}