hormony-app/entry/src/main/ets/home/view/Module1.ets

@Component
export struct Module1 {
  build() {
    Column() {
      Row() {
        Column() {
          Text('卡路里')
            .maxFontSize(14)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .fontColor('#2E86C1')
          Text('117')
            .maxFontSize(20)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .fontColor('#3498DB')
          Text('/500千卡')
            .maxFontSize(12)
            .fontColor('#888888')
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
        }
        .alignItems(HorizontalAlign.Center)
        .padding({ left: '10.0px', right: '10.0px' })
        .layoutWeight(1)

        Blank()
        Column() {
          Text('步数')
            .maxFontSize(14)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .fontColor('#28B463')
          Text('1889')
            .maxFontSize(20)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .fontColor('#2ECC71')
          Text('/8000步')
            .maxFontSize(12)
            .fontColor('#888888')
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
        }
        .alignItems(HorizontalAlign.Center)
        .padding({ left: '10.0px', right: '10.0px' })
        .layoutWeight(1)

        Blank()
        Column() {
          Text('中高强度')
            .maxFontSize(14)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .fontColor('#7D3C98')
          Text('13')
            .maxFontSize(20)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .fontColor('#9B59B6')
          Text('/30分钟')
            .maxFontSize(12)
            .fontColor('#888888')
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
        }
        .alignItems(HorizontalAlign.Center)
        .padding({ left: '10.0px', right: '10.0px' })
        .layoutWeight(1)
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ top: '10.0px', bottom: '10.0px' })

      Row() {
        Column() {
          Text('活动次数 4 次')
            .maxFontSize(14)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
        }
        .alignItems(HorizontalAlign.Center)
        .padding({ left: '10.0px', right: '10.0px' })
        .layoutWeight(1)

        Blank()
        Column() {
          Text('睡眠')
            .maxFontSize(14)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .fontColor('#D35400')
          Text('8时27分')
            .maxFontSize(20)
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .fontColor('#E67E22')
          Text('12月23日 睡眠质量良好')
            .maxFontSize(12)
            .fontColor('#888888')
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
          Text('有待提高')
            .maxFontSize(12)
            .fontColor('#888888')
            .margin(2)
            .minFontSize(8)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
        }
        .alignItems(HorizontalAlign.Center)
        .padding({ left: '10.0px', right: '10.0px' })
        .layoutWeight(1)
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ top: '10.0px', bottom: '10.0px' })

      Grid() {
        GridItem() {
          Column() {
            Text('心率')
              .maxFontSize(14)
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
              .fontColor('#C0392B')
            Text('96次/分')
              .maxFontSize(20)
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
              .fontColor('#E74C3C')
            Text('12月23日 16:29')
              .maxFontSize(12)
              .fontColor('#888888')
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
          }
          .alignItems(HorizontalAlign.Center)
          .padding({ left: '10.0px', right: '10.0px' })
        }
        .padding({
          top: 5,
          left: 3,
          bottom: 5,
          right: 3
        })

        GridItem() {
          Column() {
            Text('血氧饱和度')
              .maxFontSize(14)
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
              .fontColor('#16A085')
            Text('97%')
              .maxFontSize(20)
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
              .fontColor('#1ABC9C')
            Text('12月23日 16:29')
              .maxFontSize(12)
              .fontColor('#888888')
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
          }
          .alignItems(HorizontalAlign.Center)
          .padding({ left: '10.0px', right: '10.0px' })
        }
        .padding({
          top: 5,
          left: 3,
          bottom: 5,
          right: 3
        })

        GridItem() {
          Column() {
            Text('体重')
              .maxFontSize(14)
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
              .fontColor('#8E44AD')
            Text('58.50KG')
              .maxFontSize(20)
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
              .fontColor('#A569BD')
            Text('9月11日 16:12')
              .maxFontSize(12)
              .fontColor('#888888')
              .margin(2)
              .minFontSize(8)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
          }
          .alignItems(HorizontalAlign.Center)
          .padding({ left: '10.0px', right: '10.0px' })
        }
        .padding({
          top: 5,
          left: 3,
          bottom: 5,
          right: 3
        })
      }
      .borderRadius(20)
      .backgroundColor('#ffffff')
      .width('95%')
      .margin({ bottom: 10 })
      .clip(true)
      .columnsTemplate(('1fr ').repeat(2))
      .maxCount(3)
      .alignSelf(ItemAlign.Center)
    }
    .width('95%')
    .borderRadius(20)
    .backgroundColor('#ffffff')
    .alignItems(HorizontalAlign.Center)
    .padding({ top: '10.0px', bottom: '10.0px' })
    .margin({ bottom: 10 })
    .clip(true)
  }
}