wonder/hormony-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: 首页内容框架

Browse Source
This commit is contained in:
wonder
2025-12-23 16:56:08 +08:00
parent c08e628b38
commit a6a0d26737
40 changed files with 2046 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
entry/src/main/ets/home/view/Module1.ets
+253
View File
@@ -0,0 +1,253 @@
@Component
export struct Module1 {
build() {
Column() {
Row() {
Column() {
Text('卡路里')
.maxFontSize(14)
.margin(2)
.minFontSize(8)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
Text('117')
.maxFontSize(20)
.margin(2)
.minFontSize(8)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
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)
Text('1889')
.maxFontSize(20)
.margin(2)
.minFontSize(8)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
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)
Text('13')
.maxFontSize(20)
.margin(2)
.minFontSize(8)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
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)
Text('8时27分')
.maxFontSize(20)
.margin(2)
.minFontSize(8)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
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)
Text('96次/分')
.maxFontSize(20)
.margin(2)
.minFontSize(8)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
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)
Text('97%')
.maxFontSize(20)
.margin(2)
.minFontSize(8)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
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)
Text('58.50KG')
.maxFontSize(20)
.margin(2)
.minFontSize(8)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
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)
}
}