class accountListItem {
|
title: string = ''
|
icon: string | Resource = ''
|
}
|
|
@Entry
|
@Component
|
export struct AccountPage {
|
@State ListItems: accountListItem[] = [
|
{ title: '隐私设置', icon: $r('app.media.account_setting') },
|
{ title: '消息通知', icon: $r('app.media.account_message') },
|
{ title: '帮助中心', icon: $r('app.media.account_help') },
|
{ title: '关于我们', icon: $r('app.media.account_info') },
|
]
|
build() {
|
Column() {
|
Text('个人中心')
|
.fontSize(20)
|
.fontWeight(700)
|
.textAlign(TextAlign.Center)
|
.width('100%')
|
.backgroundColor(Color.White)
|
.padding({ top: 10, bottom: 10 })
|
|
Column({ space: 10 }) {
|
Row() {
|
Image($r('app.media.me_icon'))
|
.width(50)
|
.height(50)
|
Column() {
|
Text('李强')
|
.fontSize(16)
|
.width('100%')
|
.fontWeight(600)
|
.fontColor(Color.Black)
|
.textAlign(TextAlign.Start)
|
Text('男 | 28岁 | 前端开发工程师')
|
.fontColor('#333333')
|
.fontSize(14)
|
.width('100%')
|
.textAlign(TextAlign.Start)
|
}
|
.width(100)
|
.height(40)
|
.margin({ left: 10 })
|
.justifyContent(FlexAlign.SpaceBetween)
|
.layoutWeight(1)
|
Image($r('app.media.chevron_right'))
|
.width(18)
|
.height(18)
|
}
|
.width('100%')
|
|
Column({ space: 16 }) {
|
Row() {
|
Text('学习记录')
|
.fontSize(16)
|
.fontColor(Color.White)
|
.fontWeight(700)
|
Text('去应聘 > ')
|
.fontSize(13)
|
.borderRadius(20)
|
.fontWeight(500)
|
.backgroundColor(Color.White)
|
.padding({ left: 10, right: 10, top: 4, bottom: 4 })
|
.fontColor('#1756f4')
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
Text('当前学习级别：青铜')
|
.width('100%')
|
.fontColor(Color.White)
|
.fontSize(14)
|
Row() {
|
Column({ space: 4 }) {
|
Text('学习时长')
|
.fontColor(Color.White)
|
.fontSize(12)
|
.width('100%')
|
Text() {
|
Span('10').fontWeight(700).fontSize(14)
|
Span('分钟').fontSize(12)
|
}
|
.width('100%')
|
.fontColor(Color.White)
|
}
|
.width(80)
|
Column({ space: 4 }) {
|
Text('学习最长的课程')
|
.fontColor(Color.White)
|
.fontSize(12)
|
.width('100%')
|
Text('全栈开发：前后端打通实战')
|
.fontWeight(700)
|
.fontSize(14)
|
.width('100%')
|
.fontColor(Color.White)
|
}
|
}
|
.width('100%')
|
}
|
.width('100%')
|
.padding(16)
|
.borderRadius(14)
|
.linearGradient({
|
direction: GradientDirection.Right,
|
colors: [['#36BCFF', 0.0], ['#2D74FF', 1.0]]
|
})
|
}
|
.backgroundColor(Color.White)
|
.padding(16)
|
.margin({ top: 1 })
|
|
Row() {
|
Column({ space: 6 }) {
|
Image($r('app.media.account_learning'))
|
.width(40)
|
.height(40)
|
Text('学习记录')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
Column({ space: 6 }) {
|
Image($r('app.media.account_course'))
|
.width(40)
|
.height(40)
|
Text('课程收藏')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
Column({ space: 6 }) {
|
Image($r('app.media.account_jianli'))
|
.width(40)
|
.height(40)
|
Text('个人简历')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
Column({ space: 6 }) {
|
Image($r('app.media.account_communicated'))
|
.width(40)
|
.height(40)
|
Text('已沟通')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
}
|
.width('100%')
|
.backgroundColor(Color.White)
|
.padding({ bottom: 10 })
|
.justifyContent(FlexAlign.SpaceEvenly)
|
|
Column() {
|
List({ space: 10, initialIndex: 0 }){
|
ForEach(this.ListItems, (item: accountListItem) => {
|
ListItem() {
|
Row() {
|
Image(item.icon)
|
.width(20)
|
.height(20)
|
Text(item.title)
|
.fontSize(13)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
.layoutWeight(1)
|
.margin({ left: 8 })
|
|
Image($r('app.media.chevron_right'))
|
.width(12)
|
.height(12)
|
}
|
.width('100%')
|
.padding(8)
|
}
|
})
|
}
|
.listDirection(Axis.Vertical) // 排列方向
|
.scrollBar(BarState.Off)
|
.friction(0.6)
|
.edgeEffect(EdgeEffect.Spring)
|
.width('100%')
|
.divider({strokeWidth: 1,color: '#f0f0f0'})
|
}
|
.padding(16)
|
.backgroundColor(Color.White)
|
.margin({ top: 1 })
|
|
Column() {
|
Button('退出应用')
|
.fontSize(14)
|
.height(36)
|
.type(ButtonType.Normal)
|
.borderRadius(6)
|
.width('100%')
|
.fontColor(Color.White)
|
.backgroundColor('#1761f4')
|
}
|
.padding(16)
|
.width('100%')
|
.background(Color.White)
|
.height(300)
|
|
}
|
.backgroundColor('#f5f5f7')
|
.height('100%')
|
.width('100%')
|
}
|
}
|
