七、综合案例（携程口碑榜、QQ音乐排行榜、支付宝首页、网易云音乐推荐页面、小米商城首页）-CSDN博客

本文链接：https://blog.csdn.net/FXNup/article/details/143349847

1. 携程口碑榜

// 基础
// 241028 12：58完成
// 241029 老师讲解后修改

interface SelectMenu {
  title: string,
  isClicked: boolean,
}

interface ScenicSpot {
  img: ResourceStr,
  name: string,
  hot: number,
  score: number,
  comment: number,
  price?: number,
  reason: string,
  label: string[],
  address: string,
  distance: number
}

@Entry
@Component
struct Index {
  // 商业选择菜单
  @State
  menu: SelectMenu[] = [
    { title: '酒店', isClicked: false },
    { title: '景点', isClicked: false },
    { title: '夜游', isClicked: false },
    { title: '美食', isClicked: false },
  ]
  // 热门项目选项
  @State
  selectItem: string[] = ['必打卡', '滑雪', '亲子', '自然风光', '测试']
  // 热门景点列表
  @State
  scenic: ScenicSpot [] = [
    {
      img: $r('app.media.universal'),
      name: '北京环球度假区',
      hot: 9.8,
      score: 4.5,
      comment: 1.8,
      price: 308,
      reason: '这个冬天来环球影城，一起沉浸在冬日独有的浪漫，漫步在雪花飞舞的雪天，创造专属于这个冬天来环球影城，一起沉浸在冬日独有的浪漫，漫步在雪花飞舞的雪天，创造专属于',
      label: ['嗨玩乐园', '游乐园'],
      address: '北京 · 果园环岛/通州区',
      distance: 36.7
    },
    {
      img: $r('app.media.imperial'),
      name: '故宫博物院',
      hot: 10,
      score: 4.8,
      comment: 14.6,
      reason: '城墙建筑，院落布局，屋脊小兽，都包含着古代人民的巧夺天工，带小朋友穿梭明清时空,带小朋友穿梭明清时空',
      label: ['探秘展馆', '文化古迹', '博物馆', '场馆展馆'],
      address: '北京 · 天安门/王府井',
      distance: 16.5
    }
  ]

  // 携程口碑榜
  build() {
    Scroll() {
      Column() {
        // banner区域
        Column() {
          // logo
          Image($r('app.media.log'))
            .width(203)
            .position({ x: 77, y: 70 })
          // 底部 装饰线
          Image($r('app.media.banner_line'))
            .width('100%')
            .position({ y: 226 })
            .zIndex(1)
          // 右边 评选规则
          Text('评选规则')
            .width(54)
            .height(20)
            .fontColor('#f6dfc8')
            .fontSize(10)
            .textAlign(TextAlign.Center)
            .backgroundColor('#4dffe0d0')
            .position({ x: 305, y: 120 })
            .borderRadius({ topLeft: 50, bottomLeft: 50 })
          // 下方三个图片 推荐景点
          Row() {
            Image($r('app.media.ski'))
              .width(120)
            Image($r('app.media.hot'))
              .width(120)
            Image($r('app.media.rank'))
              .width(120)
          }
          .position({ y: 162 })
        }
        .width('100%')
        .height(267)
        .backgroundImage($r('app.media.banner'))
        .margin({ bottom: 12 })

        // 选择城市和目的地
        Row() {
          // 左边 选择城市
          Row({ space: 4 }) {
            Text('北京')
              .fontWeight(600)
              .fontColor('#5f2b0e')
            Image($r('app.media.ic_public_arrow_down_0'))
              .width(12)
              .fillColor('#fff')
              .backgroundColor('#5f2b0e')
              .borderRadius(6)
          }
          .width(163)
          .height('100%')
          .borderRadius(16)
          .linearGradient({
            angle: 90,
            colors: [['#ffe2c8', 0], ['#e6af8a', 1]]
          })
          .justifyContent(FlexAlign.Center)

          // 右边 口碑目的地
          Text('口碑目的地')
            .fontWeight(500)
            .fontColor('#99532e')
            .width(163)
            .height('100%')
            .backgroundColor('#f8d5b8')
            .borderRadius(16)
            .textAlign(TextAlign.Center)
        }
        .width('100%')
        .height(36)
        .margin({ top: 12, bottom: 12 })
        .padding({ left: 12, right: 12 })
        .justifyContent(FlexAlign.SpaceBetween)

        // 商业选项菜单
        Row() {
          ForEach(this.menu, (item: SelectMenu, index: number) => {
            Text(item.title)
              .fontColor(this.menu[index].isClicked ? '#ffffffff' : '#ff000000')
              .backgroundColor(this.menu[index].isClicked ? '#cccc9466' : '#ffffffff')
              .textAlign(TextAlign.Center)
              .width(78)
              .height('100%')
              .borderRadius(4)// 阴影
              .shadow({
                radius: 4,
                color: '#122f1b0e',
                offsetX: 1,
                offsetY: 1
              })
              .onClick(() => {
                this.menu[index] = {
                  title: this.menu[index].title,
                  isClicked: !this.menu[index].isClicked
                }
                console.log('索引' + index + ' 是否点击' + this.menu[index].isClicked);
              })
          })
        }
        .width('100%')
        .height(36)
        // .backgroundColor(Color.Yellow)
        .margin({ top: 12, bottom: 12 })
        .padding({ left: 12, right: 12 })
        .justifyContent(FlexAlign.SpaceBetween)

        // 热门项目选项 selectItem
        Row({ space: 25 }) {
          // 1. 近期热门
          Row() {
            Image($r('app.media.ic_hot'))
              .width(17)
              .fillColor('#99db935c')
            Text('近期热门')
              .fontWeight(600)
              .fontColor('#ff673915')
              .fontSize(14)
            // 亦可用背景图做
            /*Image($r('app.media.select'))
              .width(71)
              .height(5)
              .borderRadius(3)
              .linearGradient({
                colors: [['rgba(255, 226, 200, 0.4)', 0], ['rgba(230, 175, 138, 0.4)', 1]]
              })
              .position({ x: 0, y: '100%' })
              .translate({ x: 3, y: '-100%' })*/
          }
          .width(85)
          .height(18)
          .backgroundImage($r('app.media.select'))
          .backgroundImagePosition(Alignment.BottomStart)

          Scroll() {
            Row({ space: 25 }) {
              ForEach(this.selectItem, (item: string) => {
                Text(item)
                  .fontColor('#666666')
                  .fontSize(14)
              })
            }
          }
          .layoutWeight(1)
          .scrollable(ScrollDirection.Horizontal)
          .scrollBar(BarState.Off)
        }
        .width('100%')
        .height(18)
        .margin({ bottom: 12 })
        .padding({ left: 12 })

        // 热门榜标题
        Text('北京近期热门景点榜')
          .height(34)
          .fontWeight(600)
          .fontColor('#3d1a07')
          .fontSize(24)

        // 热门景点列表
        Column({ space: 12 }) {
          ForEach(this.scenic, (item: ScenicSpot, index: number) => {
            Row({ space: 8 }) {
              // 左边主图
              Image(item.img)
                .width(88)
                .height(175)
                .borderRadius(5)
              // 左上角排行定位区域
              Text(`NO.${index + 1}`)
                .width(50)
                .height(28)
                .fontWeight(700)
                .fontColor('#ff000000')
                .fontSize(11)
                .textAlign(TextAlign.Center)
                .backgroundImage($r('app.media.no_icon'))
                .position({ x: -4, y: 0 })
              // 右边
              Column({ space: 6 }) {
                // 景点名字
                Row({ space: 4 }) {
                  Text(item.name)
                    .fontWeight(600)
                    .fontColor('#ff333333')
                  Text('5A')
                    .height(16)
                    .backgroundColor('#eef1f6')
                    .borderRadius(4)
                    .fontSize(11)
                    .fontColor('#5678a8')
                    .padding({ left: 4, right: 4 })
                }
                .height(20)

                // 右上 喜欢收藏图标
                Image($r('app.media.ic_xihuan'))
                  .width(18)
                  .fillColor('#444444')
                  .position({ x: 198, y: 6 })
                // 第二行
                Row({ space: 9 }) {
                  Row() {
                    Image($r('app.media.ic_huo'))
                      .width(9)
                      .fillColor(Color.White)
                    Text(item.hot.toString())
                      .fontSize(14)
                      .fontColor(Color.White)
                  }
                  .height(18)
                  .borderRadius(4)
                  .linearGradient({
                    angle: 90,
                    colors: [['#ffff856e', 0], ['#ffff902a', 1]]
                  })
                  .padding({ left: 4, right: 4 })

                  Row({ space: 8 }) {
                    Text(`${item.score}分 ${item.comment}w条点评`)
                      .fontColor('#ff666666')
                      .fontSize(12)
                    if (item.price) {
                      Text(`¥${item.price}起`)
                        .fontColor('#ff666666')
                        .fontSize(12)
                    }
                  }
                  .height(18)
                }

                Text() {
                  ImageSpan($r('app.media.dianzan'))
                    .width(14)
                  Span('上榜理由:')
                    .fontWeight(600)
                  Span(item.reason)
                }
                .fontColor('#ff5f2b0e')
                .fontSize(13)
                .lineHeight(18)
                .width('100%')
                .height(72)
                .backgroundColor('#fffff7f1')
                .padding(8)
                .maxLines(3)
                .textOverflow({ overflow: TextOverflow.Ellipsis })

                Row({ space: 4 }) {
                  ForEach(item.label, (item: string) => {
                    Text(item)
                      .fontColor('#99aeca')
                      .fontSize(10)
                      .height(17)
                      .border({
                        width: 1,
                        color: '#ff99aeca',
                        radius: 4
                      })
                      .padding({ left: 4, right: 4 })
                  })
                }
                .height(17)

                Row({ space: 5 }) {
                  Image($r('app.media.ic_daohangdizhi'))
                    .width(12)
                    .fillColor('#999999')
                  Row() {
                    Text(item.address)
                      .fontColor('#999999')
                      .fontSize(12)
                    Blank()
                    Text(`距您${item.distance}km`)
                      .fontColor('#999999')
                      .fontSize(12)
                  }
                  .layoutWeight(1)
                  .height('100%')
                }
                .width('100%')
                .height(16)

              }
              .width(216)
              .height(175)
              .alignItems(HorizontalAlign.Start)

            }
            .width(336)
            .height(200)
            .padding(12)
            .backgroundColor('#FFFFFF')
            .shadow({
              offsetX: 0,
              offsetY: 2,
              radius: 8,
              color: '#1a000000'
            })
          })

        }
        .padding(12)
      }
      .width('100%')
      .backgroundColor('#FFFFFF')
    }
    .width('100%')
    .scrollBar(BarState.Off)
  }
}

2. QQ音乐排行榜

@Entry
@Component
struct Index {
  build() {
    Column() {
      // QQ音乐
      Column() {
        Column() {
          // 1. 头部区域 软件图标名称等
          Row({ space: 6 }) {
            Image($r('app.media.logo'))
              .width(33)
              .aspectRatio(1)
              .padding(4)
            Column() {
              Text('QQ音乐')
                .height(24)
              Text('打开APP收藏下载')
                .height(18)
                .fontSize(12)
                .fontColor('#858585')
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)

            Button('下载APP')
              .width(86)
              .height(25)
              .fontSize(13)
              .fontColor('#575656')
              .border({
                width: 1,
                color: '#d8d8d8'
              })
              .backgroundColor('#FFFFFF')
          }
          .width('100%')
          .height(54)
          .padding({ left: 16, right: 14 })

          // 2. 功能选择区（选择/推荐）
          Row() {
            Text('推荐')
              .fontColor('rgba(26,26,26,0.5)')
            Column() {
              Text('排行')
                .fontColor('rgb(34,213,156)')
                .layoutWeight(1)
              Text()
                .width(20)
                .height(3)
                .backgroundColor('rgb(34,213,156)')
                /*.position({ y: '100%' })
                .translate({ x: 6, y: '-100%' })*/
            }
            .height('100%')
            .justifyContent(FlexAlign.Center)
          }
          .width('100%')
          .height(42)
          .justifyContent(FlexAlign.SpaceAround)
        }
        .width('100%')
        .height(96)


        // 3. 排行榜区域
        Column(){
          Scroll() {
            List({ space: 12 }) {
              ListItem() {
                Row({ space: 12 }) {
                  // 左边榜单
                  Column({ space: 4 }) {
                    Text('飙升榜')
                      .fontWeight(700)
                    List() {
                      ListItem() {
                        Text() {
                          Span('1.')
                            .fontWeight(700)
                          Span('Love wins all-')
                            .fontColor('rgb(26,26,26)')
                          Span('IU')
                            .fontColor('rgba(26,26,26,0.5)')
                        }
                        .fontSize(12)
                      }
                    }
                  }
                  .layoutWeight(1)
                  .height('100%')
                  .padding(12)
                  .backgroundColor(Color.Pink)
                  .alignItems(HorizontalAlign.Start)

                  // 右边图片
                  Column() {
                    Text('每日更新')
                      .fontSize(12)
                      .fontColor(Color.White)
                      .margin({ top: 6, right: 6 })
                    Row() {
                      Image($r('app.media.ic_play'))
                        .width(12)
                        .fillColor(Color.White)
                      Text('1000万')
                        .fontSize(12)
                        .fontColor(Color.White)
                    }
                    .padding({ left: 10, right: 10 })
                    .height(18)
                    // .backgroundColor(Color.Orange)
                    .borderRadius(9)
                  }
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.SpaceBetween)
                  .backgroundImage($r('app.media.list_01'))
                  .backgroundImageSize(ImageSize.Cover)
                  .width(107)
                  .aspectRatio(1)

                }
                .width('100%')
              }
              .width('100%')
              .height(107)
              .backgroundColor('#FFFFFF')
              .borderRadius({ topRight: 10, bottomRight: 10 })
              .clip(true)

              ListItem() {
                Row({ space: 12 }) {
                  // 左边榜单
                  Column({ space: 4 }) {
                    Text('飙升榜')
                      .fontWeight(700)
                    List() {
                      ListItem() {
                        Text() {
                          Span('1.')
                            .fontWeight(700)
                          Span('Love wins all-')
                            .fontColor('rgb(26,26,26)')
                          Span('IU')
                            .fontColor('rgba(26,26,26,0.5)')
                        }
                        .fontSize(12)
                      }
                    }
                  }
                  .layoutWeight(1)
                  .height('100%')
                  .padding(12)
                  .backgroundColor(Color.Pink)
                  .alignItems(HorizontalAlign.Start)

                  // 右边图片
                  Column() {
                    Text('每日更新')
                      .fontSize(12)
                      .fontColor(Color.White)
                      .margin({ top: 6, right: 6 })
                    Row() {
                      Image($r('app.media.ic_play'))
                        .width(12)
                        .fillColor(Color.White)
                      Text('1000万')
                        .fontSize(12)
                        .fontColor(Color.White)
                    }
                    .padding({ left: 10, right: 10 })
                    .height(18)
                    // .backgroundColor(Color.Orange)
                    .borderRadius(9)
                  }
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.SpaceBetween)
                  .backgroundImage($r('app.media.list_01'))
                  .backgroundImageSize(ImageSize.Cover)
                  .width(107)
                  .aspectRatio(1)

                }
                .width('100%')
              }
              .width('100%')
              .height(107)
              .backgroundColor('#FFFFFF')
              .borderRadius({ topRight: 10, bottomRight: 10 })
              .clip(true)

              ListItem() {
                Row({ space: 12 }) {
                  // 左边榜单
                  Column({ space: 4 }) {
                    Text('飙升榜')
                      .fontWeight(700)
                    List() {
                      ListItem() {
                        Text() {
                          Span('1.')
                            .fontWeight(700)
                          Span('Love wins all-')
                            .fontColor('rgb(26,26,26)')
                          Span('IU')
                            .fontColor('rgba(26,26,26,0.5)')
                        }
                        .fontSize(12)
                      }
                    }
                  }
                  .layoutWeight(1)
                  .height('100%')
                  .padding(12)
                  .backgroundColor(Color.Pink)
                  .alignItems(HorizontalAlign.Start)

                  // 右边图片
                  Column() {
                    Text('每日更新')
                      .fontSize(12)
                      .fontColor(Color.White)
                      .margin({ top: 6, right: 6 })
                    Row() {
                      Image($r('app.media.ic_play'))
                        .width(12)
                        .fillColor(Color.White)
                      Text('1000万')
                        .fontSize(12)
                        .fontColor(Color.White)
                    }
                    .padding({ left: 10, right: 10 })
                    .height(18)
                    // .backgroundColor(Color.Orange)
                    .borderRadius(9)
                  }
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.SpaceBetween)
                  .backgroundImage($r('app.media.list_01'))
                  .backgroundImageSize(ImageSize.Cover)
                  .width(107)
                  .aspectRatio(1)

                }
                .width('100%')
              }
              .width('100%')
              .height(107)
              .backgroundColor('#FFFFFF')
              .borderRadius({ topRight: 10, bottomRight: 10 })
              .clip(true)

              ListItem() {
                Row({ space: 12 }) {
                  // 左边榜单
                  Column({ space: 4 }) {
                    Text('飙升榜')
                      .fontWeight(700)
                    List() {
                      ListItem() {
                        Text() {
                          Span('1.')
                            .fontWeight(700)
                          Span('Love wins all-')
                            .fontColor('rgb(26,26,26)')
                          Span('IU')
                            .fontColor('rgba(26,26,26,0.5)')
                        }
                        .fontSize(12)
                      }
                    }
                  }
                  .layoutWeight(1)
                  .height('100%')
                  .padding(12)
                  .backgroundColor(Color.Pink)
                  .alignItems(HorizontalAlign.Start)

                  // 右边图片
                  Column() {
                    Text('每日更新')
                      .fontSize(12)
                      .fontColor(Color.White)
                      .margin({ top: 6, right: 6 })
                    Row() {
                      Image($r('app.media.ic_play'))
                        .width(12)
                        .fillColor(Color.White)
                      Text('1000万')
                        .fontSize(12)
                        .fontColor(Color.White)
                    }
                    .padding({ left: 10, right: 10 })
                    .height(18)
                    // .backgroundColor(Color.Orange)
                    .borderRadius(9)
                  }
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.SpaceBetween)
                  .backgroundImage($r('app.media.list_01'))
                  .backgroundImageSize(ImageSize.Cover)
                  .width(107)
                  .aspectRatio(1)

                }
                .width('100%')
              }
              .width('100%')
              .height(107)
              .backgroundColor('#FFFFFF')
              .borderRadius({ topRight: 10, bottomRight: 10 })
              .clip(true)

              ListItem() {
                Row({ space: 12 }) {
                  // 左边榜单
                  Column({ space: 4 }) {
                    Text('飙升榜')
                      .fontWeight(700)
                    List() {
                      ListItem() {
                        Text() {
                          Span('1.')
                            .fontWeight(700)
                          Span('Love wins all-')
                            .fontColor('rgb(26,26,26)')
                          Span('IU')
                            .fontColor('rgba(26,26,26,0.5)')
                        }
                        .fontSize(12)
                      }
                    }
                  }
                  .layoutWeight(1)
                  .height('100%')
                  .padding(12)
                  .backgroundColor(Color.Pink)
                  .alignItems(HorizontalAlign.Start)

                  // 右边图片
                  Column() {
                    Text('每日更新')
                      .fontSize(12)
                      .fontColor(Color.White)
                      .margin({ top: 6, right: 6 })
                    Row() {
                      Image($r('app.media.ic_play'))
                        .width(12)
                        .fillColor(Color.White)
                      Text('1000万')
                        .fontSize(12)
                        .fontColor(Color.White)
                    }
                    .padding({ left: 10, right: 10 })
                    .height(18)
                    // .backgroundColor(Color.Orange)
                    .borderRadius(9)
                  }
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.SpaceBetween)
                  .backgroundImage($r('app.media.list_01'))
                  .backgroundImageSize(ImageSize.Cover)
                  .width(107)
                  .aspectRatio(1)

                }
                .width('100%')
              }
              .width('100%')
              .height(107)
              .backgroundColor('#FFFFFF')
              .borderRadius({ topRight: 10, bottomRight: 10 })
              .clip(true)

              ListItem() {
                Row({ space: 12 }) {
                  // 左边榜单
                  Column({ space: 4 }) {
                    Text('飙升榜')
                      .fontWeight(700)
                    List() {
                      ListItem() {
                        Text() {
                          Span('1.')
                            .fontWeight(700)
                          Span('Love wins all-')
                            .fontColor('rgb(26,26,26)')
                          Span('IU')
                            .fontColor('rgba(26,26,26,0.5)')
                        }
                        .fontSize(12)
                      }
                    }
                  }
                  .layoutWeight(1)
                  .height('100%')
                  .padding(12)
                  .backgroundColor(Color.Pink)
                  .alignItems(HorizontalAlign.Start)

                  // 右边图片
                  Column() {
                    Text('每日更新')
                      .fontSize(12)
                      .fontColor(Color.White)
                      .margin({ top: 6, right: 6 })
                    Row() {
                      Image($r('app.media.ic_play'))
                        .width(12)
                        .fillColor(Color.White)
                      Text('1000万')
                        .fontSize(12)
                        .fontColor(Color.White)
                    }
                    .padding({ left: 10, right: 10 })
                    .height(18)
                    // .backgroundColor(Color.Orange)
                    .borderRadius(9)
                  }
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.SpaceBetween)
                  .backgroundImage($r('app.media.list_01'))
                  .backgroundImageSize(ImageSize.Cover)
                  .width(107)
                  .aspectRatio(1)

                }
                .width('100%')
              }
              .width('100%')
              .height(107)
              .backgroundColor('#FFFFFF')
              .borderRadius({ topRight: 10, bottomRight: 10 })
              .clip(true)

              ListItem() {
                Row({ space: 12 }) {
                  // 左边榜单
                  Column({ space: 4 }) {
                    Text('飙升榜')
                      .fontWeight(700)
                    List() {
                      ListItem() {
                        Text() {
                          Span('1.')
                            .fontWeight(700)
                          Span('Love wins all-')
                            .fontColor('rgb(26,26,26)')
                          Span('IU')
                            .fontColor('rgba(26,26,26,0.5)')
                        }
                        .fontSize(12)
                      }
                    }
                  }
                  .layoutWeight(1)
                  .height('100%')
                  .padding(12)
                  .backgroundColor(Color.Pink)
                  .alignItems(HorizontalAlign.Start)

                  // 右边图片
                  Column() {
                    Text('每日更新')
                      .fontSize(12)
                      .fontColor(Color.White)
                      .margin({ top: 6, right: 6 })
                    Row() {
                      Image($r('app.media.ic_play'))
                        .width(12)
                        .fillColor(Color.White)
                      Text('1000万')
                        .fontSize(12)
                        .fontColor(Color.White)
                    }
                    .padding({ left: 10, right: 10 })
                    .height(18)
                    // .backgroundColor(Color.Orange)
                    .borderRadius(9)
                  }
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.SpaceBetween)
                  .backgroundImage($r('app.media.list_01'))
                  .backgroundImageSize(ImageSize.Cover)
                  .width(107)
                  .aspectRatio(1)

                }
                .width('100%')
              }
              .width('100%')
              .height(107)
              .backgroundColor('#FFFFFF')
              .borderRadius({ topRight: 10, bottomRight: 10 })
              .clip(true)

            }
            .width('100%')
            .backgroundColor('#EFEFEF')
          }
          .layoutWeight(1)
          .scrollBar(BarState.Off)
        }
        // 占用主轴方向上父级剩余尺寸
        .layoutWeight(1)
        .width('100%')
        .padding({ left: 16, right: 16, top: 20 })
        .shadow({
          radius: 10,
          offsetX: 0,
          offsetY: 1,
          color: '#d8d8d8'
        })

        // .backgroundColor('#EFEFEF')

        // 4. 弹出浮窗区域
        Row({ space: 10 }) {
          Image($r('app.media.logo'))
            .width(22)
          Text('安装QQ音乐 发现更多精彩')
            .fontSize(10)
        }
        .height(45)
        .padding({ left: 15, right: 15 })
        .backgroundColor(Color.White)
        .borderRadius(30)
        .position({x:'50%',y:'100%'})
        .translate({x:'-50%',y:-65})
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#F9F9F9')
    }
    .width('100%')
    .height('100%')
  }
}

3. 支付宝首页

// 241029 16:57
// 20:48完成

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 1. 头部 蓝色区域
      Row({ space: 12 }) {
        Column({ space: 2 }) {
          Row({ space: 3 }) {
            Text('北京')
              .fontSize(20)
              .fontColor(Color.White)
            Image($r('app.media.zfb_head_down'))
              .fillColor(Color.White)
              .width(14)
          }

          Text('晴 2℃')
            .fontColor(Color.White)
            .fontSize(16)
        }
        .alignItems(HorizontalAlign.Start)

        Row({ space: 5 }) {
          Image($r('app.media.zfb_head_search'))
            .width(20)
          Text('北京交通一卡通')
            .layoutWeight(1)
          Text('搜索')
            .fontColor(Color.Blue)
            .width(55)
            .textAlign(TextAlign.Center)
            .border({
              width: { left: 1 },
              color: Color.Gray
            })
        }
        .backgroundColor(Color.White)
        .layoutWeight(1)
        .height(32)
        .padding(6)
        .borderRadius(5)

        Image($r('app.media.zfb_head_plus'))
          .width(30)
          .fillColor(Color.White)
      }
      .width('100%')
      .height(60)
      .backgroundColor('#5573E3')
      .padding({
        left: 10,
        right: 10
      })

      Scroll() {
        // 支付宝首页
        Column() {

          Row() {
            Column({ space: 5 }) {
              Image($r('app.media.zfb_top_scan'))
                .width(36)
                .fillColor(Color.White)
              Text('扫一扫')
                .fontColor(Color.White)
            }

            Column({ space: 5 }) {
              Image($r('app.media.zfb_top_scan'))
                .width(36)
                .fillColor(Color.White)
              Text('扫一扫')
                .fontColor(Color.White)
            }

            Column({ space: 5 }) {
              Image($r('app.media.zfb_top_scan'))
                .width(36)
                .fillColor(Color.White)
              Text('扫一扫')
                .fontColor(Color.White)
            }

            Column({ space: 5 }) {
              Image($r('app.media.zfb_top_scan'))
                .width(36)
                .fillColor(Color.White)
              Text('扫一扫')
                .fontColor(Color.White)
            }
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceAround)
          .backgroundColor('#5573E3')
          .padding({
            left: 10,
            right: 10,
            top: 10,
            bottom: 25
          })

          Column() {
            // 2. 中间区域 弹性布局
            Flex({ wrap: FlexWrap.Wrap }) {
              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })

              Column({ space: 8 }) {
                Image($r('app.media.zfb_nav1'))
                  .width(28)
                Text('滴滴出行')
                  .fontSize(14)
                  .fontColor(Color.Grey)
              }
              .width('20%')
              .margin({ bottom: 10 })
            }
            .width('100%')

            // 3. 卡片
            Row({ space: 5 }) {
              Image($r('app.media.zfb_pro_pic1'))
                .width('32%')
              Image($r('app.media.zfb_pro_pic2'))
                .width('32%')
              Image($r('app.media.zfb_pro_pic3'))
                .width('32%')
            }
            .width('100%')
            .margin({ bottom: 10 })

            // 4. 市民中心/消费圈
            Image($r('app.media.zfb_pro_list1'))
              .width('100%')
              .borderRadius(10)
              .margin({ bottom: 10 })
            Image($r('app.media.zfb_pro_list2'))
              .width('100%')
              .borderRadius(10)
          }
          .backgroundColor('#F5F5F5')
          // .backgroundColor(Color.Pink)
          .padding({ top: 10, left: 10, right: 10 })
          .borderRadius({ topLeft: 10, topRight: 10 })
          .translate({ y: -10 })
        }
        .width('100%')
      }
      .layoutWeight(1)
      .scrollBar(BarState.Off)

      // 5. 底部导航栏
      Row() {
        Image($r('app.media.zfb_tab_home'))
          .width(35)
        Column({ space: 2 }) {
          Image($r('app.media.zfb_tab_money'))
            .width(28)
          Text('理财')
        }

        Column({ space: 2 }) {
          Image($r('app.media.zfb_tab_money'))
            .width(28)
          Text('理财')
        }

        Column({ space: 2 }) {
          Image($r('app.media.zfb_tab_money'))
            .width(28)
          Text('理财')
        }

        Column({ space: 2 }) {
          Image($r('app.media.zfb_tab_money'))
            .width(28)
          Text('理财')
        }
      }
      .width('100%')
      .height(60)
      .backgroundColor('#fbfcfe')
      .justifyContent(FlexAlign.SpaceAround)
      .position({ y: '100%' })
      .translate({ y: '-100%' })
    }
    // .height('100%')
    .width('100%')
  }
}

4. 网易云音乐推荐页面

// 241029 17:15
// 19:18完成

@Entry
@Component
struct Index {

  build() {
    Column(){
      // 网易云音乐
      Scroll(){
        Column({space:20}) {
          // 第一行 搜索区域
          Row({space:20}){
            Row({space:10}){
              Image($r('app.media.sanxian'))
                .width(30)
              Row(){
                Image($r('app.media.sousuo'))
                  .width(20)
                Text('梦幻的拥抱 梅艳芳')
                  .fontColor('#ccc')
              }
              .border({
                width:1,
                color:'#ccc',
                radius:20
              })
              .padding(10)
              .layoutWeight(1)
            }
            .layoutWeight(1)

            Image($r('app.media.miaofei'))
              .width(30)
            Image($r('app.media.maikefeng'))
              .width(30)
          }
          .width('100%')

          Image($r('app.media.m1'))
            .width('100%')
            .borderRadius(20)
            .height(190)

          // 功能区 日推等
          Row(){
            Column({space:5}){
              Image($r('app.media.meirituijian'))
                .width(40)
              Text('每日推荐')
            }
            Column({space:5}){
              Image($r('app.media.meirituijian'))
                .width(40)
              Text('每日FM')
            }
            Column({space:5}){
              Image($r('app.media.meirituijian'))
                .width(40)
              Text('歌单')
            }
            Column({space:5}){
              Image($r('app.media.meirituijian'))
                .width(40)
              Text('排行榜')
            }
            Column({space:5}){
              Image($r('app.media.meirituijian'))
                .width(40)
              Text('每日推')
            }
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding({left:5,right:5})
          // .backgroundColor(Color.Pink)

          // 推荐歌单
          Column({space:10}){
            Row(){
              Text('推荐歌单 >')
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
              Blank()
              Image($r('app.media.sandian'))
                .width(20)
            }
            .width('100%')

            Scroll(){
              Row({space:10}){
                Column({space:5}){
                  Image($r('app.media.music1'))
                    .width('100%')
                    .borderRadius(10)
                  Text('纪念一代歌后梅艳芳60周年')
                    .maxLines(2)
                    .textOverflow({overflow:TextOverflow.Ellipsis})
                }
                .width(120)
                Column({space:5}){
                  Image($r('app.media.music1'))
                    .width('100%')
                    .borderRadius(10)
                  Text('纪念一代歌后梅艳芳60周年纪念一代歌后梅艳芳60周年')
                    .maxLines(2)
                    .textOverflow({overflow:TextOverflow.Ellipsis})
                }
                .width(120)
                Column({space:5}){
                  Image($r('app.media.music1'))
                    .width('100%')
                    .borderRadius(10)
                  Text('纪念一代歌后梅艳芳60周年')
                    .maxLines(2)
                    .textOverflow({overflow:TextOverflow.Ellipsis})
                }
                .width(120)
              }
            }
            .scrollable(ScrollDirection.Horizontal)
            .scrollBar(BarState.Off)
          }

          Column({space:10}){
            // 歌曲推荐
            Row({space:10}){
              Image($r('app.media.refresh'))
                .width(20)
              Text('一秒沦陷 华语经典')
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
              Row(){
                Image($r('app.media.bo'))
                  .width(12)
                  .fillColor(Color.Black)
                Text('播放')
              }
              .padding(5)
              .borderRadius(6)
              .backgroundColor('#ebedf2')
              Blank()
              Image($r('app.media.sandian'))
                .width(20)
            }
            .width('100%')

            // 歌曲列表
            Scroll(){
              Row({space:30}){
                Column({space:20}){
                  Row({space:10}){
                    Image($r('app.media.listitem1'))
                      .width(70)
                      .borderRadius(10)
                    Column({space:5}){
                      Text('富士山下')
                        .fontSize(18)
                      Row({space:10}){
                        Text('超70%人播放')
                          .fontSize(12)
                          .padding(5)
                          .fontColor('#e65f58')
                          .backgroundColor('#f4e7e8')
                          .borderRadius(5)
                        Text('陈奕迅')
                          .fontSize(12)
                      }
                    }
                    .alignItems(HorizontalAlign.Start)
                    .margin({right:20})
                    Image($r('app.media.bofang'))
                      .width(30)
                  }
                  Row({space:10}){
                    Image($r('app.media.listitem1'))
                      .width(70)
                      .borderRadius(10)
                    Column({space:5}){
                      Text('富士山下')
                        .fontSize(18)
                      Row({space:10}){
                        Text('超70%人播放')
                          .fontSize(12)
                          .padding(5)
                          .fontColor('#e65f58')
                          .backgroundColor('#f4e7e8')
                          .borderRadius(5)
                        Text('陈奕迅')
                          .fontSize(12)
                      }
                    }
                    .alignItems(HorizontalAlign.Start)
                    .margin({right:20})
                    Image($r('app.media.bofang'))
                      .width(30)
                  }
                }
                Column({space:20}){
                  Row({space:10}){
                    Image($r('app.media.listitem1'))
                      .width(70)
                      .borderRadius(10)
                    Column({space:5}){
                      Text('富士山下')
                        .fontSize(18)
                      Row({space:10}){
                        Text('超70%人播放')
                          .fontSize(12)
                          .padding(5)
                          .fontColor('#e65f58')
                          .backgroundColor('#f4e7e8')
                          .borderRadius(5)
                        Text('陈奕迅')
                          .fontSize(12)
                      }
                    }
                    .alignItems(HorizontalAlign.Start)
                    .margin({right:20})
                    Image($r('app.media.bofang'))
                      .width(30)
                  }
                  Row({space:10}){
                    Image($r('app.media.listitem1'))
                      .width(70)
                      .borderRadius(10)
                    Column({space:5}){
                      Text('富士山下')
                        .fontSize(18)
                      Row({space:10}){
                        Text('超70%人播放')
                          .fontSize(12)
                          .padding(5)
                          .fontColor('#e65f58')
                          .backgroundColor('#f4e7e8')
                          .borderRadius(5)
                        Text('陈奕迅')
                          .fontSize(12)
                      }
                    }
                    .alignItems(HorizontalAlign.Start)
                    .margin({right:20})
                    Image($r('app.media.bofang'))
                      .width(30)
                  }
                }
                Column({space:20}){
                  Row({space:10}){
                    Image($r('app.media.listitem1'))
                      .width(70)
                      .borderRadius(10)
                    Column({space:5}){
                      Text('富士山下')
                        .fontSize(18)
                      Row({space:10}){
                        Text('超70%人播放')
                          .fontSize(12)
                          .padding(5)
                          .fontColor('#e65f58')
                          .backgroundColor('#f4e7e8')
                          .borderRadius(5)
                        Text('陈奕迅')
                          .fontSize(12)
                      }
                    }
                    .alignItems(HorizontalAlign.Start)
                    .margin({right:20})
                    Image($r('app.media.bofang'))
                      .width(30)
                  }
                  Row({space:10}){
                    Image($r('app.media.listitem1'))
                      .width(70)
                      .borderRadius(10)
                    Column({space:5}){
                      Text('富士山下')
                        .fontSize(18)
                      Row({space:10}){
                        Text('超70%人播放')
                          .fontSize(12)
                          .padding(5)
                          .fontColor('#e65f58')
                          .backgroundColor('#f4e7e8')
                          .borderRadius(5)
                        Text('陈奕迅')
                          .fontSize(12)
                      }
                    }
                    .alignItems(HorizontalAlign.Start)
                    .margin({right:20})
                    Image($r('app.media.bofang'))
                      .width(30)
                  }
                }
              }
            }
            .scrollable(ScrollDirection.Horizontal)
            .scrollBar(BarState.Off)
          }
          // .backgroundColor(Color.Pink)


        }
        .padding(10)
        // .height('100%')
        .width('100%')
        /*.linearGradient({
          colors:[['#ebe5fa',0],['#f8f9fc',1]]
        })*/
      }
      .width('100%')
      .layoutWeight(1)
      .scrollBar(BarState.Off)
    }
    .width('100%')
    .height('100%')
  }
}

5. 小米商城首页

// 小米 Scroll控制滚动 tabBar自定义导航栏高亮切换等
// 241031 15:32完成外层Tabs

// TabContent内嵌Tabs
// 241031 15:55完成

interface PhoneCard {
  img: ResourceStr,
  phoneName: string,
  introduction: string,
  price: number
}

@Entry
@Component
struct Index {
  // 1. 创建控制器对象 new + Scroller 的方式创建
  scroller: Scroller = new Scroller()
  @State menu: ResourceStr[] = [
    $r('app.media.caidan1'),
    $r('app.media.caidan2'),
    $r('app.media.caidan3'),
    $r('app.media.caidan4'),
    $r('app.media.caidan5'),
    $r('app.media.caidan6'),
    $r('app.media.caidan7'),
    $r('app.media.caidan8'),
    $r('app.media.caidan9'),
    $r('app.media.caidan10'),
  ]
  @State phonecard: PhoneCard[] = [
    {
      img: $r('app.media.pro1'),
      phoneName: '小米14',
      introduction: '全新第二代骁龙8|徕卡专全新第二代骁龙8|徕卡专',
      price: 4000
    },
    {
      img: $r('app.media.pro1'),
      phoneName: '小米13',
      introduction: '小米13小米13小米13小米13小米13小米13小米13',
      price: 3000
    },
    {
      img: $r('app.media.pro1'),
      phoneName: '小米12',
      introduction: '小米12小米12小米12小米12小米12小米12',
      price: 2500
    },
    {
      img: $r('app.media.pro1'),
      phoneName: '小米11',
      introduction: '小米11小米11小米11小米11小米11小米11小米11',
      price: 2000
    },
    {
      img: $r('app.media.pro1'),
      phoneName: '小米11',
      introduction: '小米11小米11小米11小米11小米11小米11小米11',
      price: 2000
    },
    {
      img: $r('app.media.pro1'),
      phoneName: '小米11',
      introduction: '小米11小米11小米11小米11小米11小米11小米11',
      price: 2000
    },
    {
      img: $r('app.media.pro1'),
      phoneName: '小米11',
      introduction: '小米11小米11小米11小米11小米11小米11小米11',
      price: 2000
    },
    {
      img: $r('app.media.pro1'),
      phoneName: '小米11',
      introduction: '小米11小米11小米11小米11小米11小米11小米11',
      price: 2000
    },
  ]
  @State selectedIndex: number = 0
  @State scOffsetY: number = 0
  @State isClose: boolean = false

  @Builder
  mytabbar(index: number, title: string, img: ResourceStr) {
    Column() {
      Image(img)
        .width(18)
      Text(title)
        .fontSize(10)
        .fontColor(this.selectedIndex == index ? Color.Orange : Color.Black)
    }
    .height(43)
    .justifyContent(FlexAlign.SpaceEvenly)
  }

  build() {
    Column() {

      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {

          Column() {
            // 头部
            Row() {
              Image($r('app.media.logo'))
                .width(26)
              Row({ space: 5 }) {
                Image($r('app.media.sousuo'))
                  .width(14)
                Text('搜索商品名称')
                  .fontColor(Color.Gray)
              }
              .height(30)
              .backgroundColor('#FCFCFC')
              .padding({ left: 5 })
              .layoutWeight(1)
              .margin({ left: 12, right: 16 })

              Image($r('app.media.user'))
                .width(14)
            }
            .padding({
              left: 10,
              right: 18,
              top: 3,
              bottom: 3
            })

            Tabs() {
              TabContent() {
                // 总布局
                Stack() {
                  Scroll(this.scroller) {
                    Column() {
                      // 轮播图
                      Swiper() {
                        Image($r('app.media.mi1'))
                          .width('100%')
                        Image($r('app.media.mi2'))
                          .width('100%')
                        Image($r('app.media.mi3'))
                          .width('100%')
                      }
                      .width('100%')
                      .indicator(
                        Indicator.dot()
                          .itemWidth(10)
                          .itemHeight(10)
                          .selectedItemWidth(10)
                          .selectedItemHeight(10)
                          .color('#5efcfcfc')
                          .selectedColor(Color.White)
                      )
                      .autoPlay(true)

                      // .margin({ top: 46 })

                      // 第三部分
                      Flex({
                        wrap: FlexWrap.Wrap,
                      }) {
                        ForEach(this.menu, (item: ResourceStr) => {
                          Image(item)
                            .width('20%')
                        })
                      }
                      .margin({ bottom: 10 })

                      // 第四部分
                      Flex({
                        wrap: FlexWrap.Wrap,
                        justifyContent: FlexAlign.SpaceEvenly
                      }) {
                        ForEach(this.phonecard, (item: PhoneCard, index: number) => {
                          Column() {
                            Image(item.img)
                              .width('100%')
                            Column({ space: 2 }) {
                              Text(item.phoneName)
                                .fontSize(13)
                              Text(item.introduction)
                                .maxLines(1)
                                .textOverflow({ overflow: TextOverflow.Ellipsis })
                                .fontColor(Color.Grey)
                                .fontSize(11)
                              Text() {
                                Span(`￥${item.price}`)
                                  .fontSize(12)
                                Span('起')
                                  .fontSize(10)
                              }
                              .fontColor(Color.Red)

                              Text('立即购买')
                                .width(100)
                                .height(28)
                                .fontSize(13)
                                .fontColor(Color.White)
                                .fontWeight(600)
                                .backgroundColor('#EA625B')
                                .borderRadius(3)
                                .textAlign(TextAlign.Center)
                            }
                            .padding({ top: 10, bottom: 20 })
                          }
                          .width(170)
                        })
                      }
                      .width('100%')
                    }
                    .width('100%')
                    .backgroundColor('#FCFCFC')
                  }
                  .scrollBar(BarState.Off)
                  .layoutWeight(1)
                  .onWillScroll(() => {
                    this.scOffsetY = this.scroller.currentOffset().yOffset
                  })

                  if (this.scOffsetY > 350 && this.isClose == false) {
                    Row({ space: 5 }) {
                      Image($r('app.media.logo'))
                        .width(26)
                        .border({ width: 1, color: Color.White, radius: 8 })
                      Text('来APP领新人礼包')
                        .fontColor(Color.White)
                      Image($r('app.media.ic_close'))
                        .width(14)
                        .fillColor(Color.White)
                        .onClick(() => {
                          this.isClose = true
                        })
                    }
                    .backgroundColor('#FD6800')
                    .padding({
                      left: 10,
                      right: 10,
                      top: 5,
                      bottom: 5
                    })
                    .borderRadius(50)
                    .position({ x: '50%', y: '90%' })
                    .translate({ x: '-50%' })
                  }
                }
                .layoutWeight(1)
              }.tabBar('推荐')

              TabContent() {
                Text('智能内容')
              }.tabBar('智能')

              TabContent() {
                Text('电视内容')
              }.tabBar('电视')

              TabContent() {
                Text('家电内容')
              }.tabBar('家电')

              TabContent() {
                Text('笔记本内容')
              }.tabBar('笔记本')
            }
            .layoutWeight(1)
            .barHeight(36)
            .barBackgroundColor('#F1F3F1')

          }
        }
        .tabBar(this.mytabbar(0, '首页', $r('app.media.tab1')))

        TabContent() {
          Text('分类内容')
        }
        .tabBar(this.mytabbar(1, '分类', $r('app.media.tab2')))

        TabContent() {
          Text('米圈内容')
        }
        .tabBar(this.mytabbar(2, '米圈', $r('app.media.tab3')))

        TabContent() {
          Text('购物车内容')
        }
        .tabBar(this.mytabbar(3, '购物车', $r('app.media.tab4')))

        TabContent() {
          Text('我的内容')
        }
        .tabBar(this.mytabbar(4, '我的', $r('app.media.tab5')))
      }
      .animationDuration(0)
      .onChange((index) => {
        this.selectedIndex = index
      })
    }
  }
}