import { router } from '@kit.ArkUI'
|
|
class Course {
|
title: string = ''
|
desc: string = ''
|
count: string = ''
|
time: string = ''
|
difficult: string = ''
|
}
|
@Entry
|
@Component
|
struct CourseCollection {
|
@State courseList: Course[] = [
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: 'Java高级：JVM深度调优与JVM深度调优', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
{ title: '零基础到企业级项目实战', 'desc': '针对零基础小白或想升级技术栈的前端从业者，从核心语法入手，逐步深入Vue3组件开发打件开发件开发', count: '800', time: '01:30:23', difficult: '简单' },
|
|
]
|
build() {
|
Column() {
|
Row() {
|
Image($r('app.media.left_icon'))
|
.width(20)
|
.height(20)
|
.onClick(() => {
|
router.back()
|
})
|
Text('课程收藏')
|
.fontSize(18)
|
.fontWeight(700)
|
Row()
|
}
|
.width('100%')
|
.padding(10)
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
Divider()
|
|
Column() {
|
List({ space: 10, initialIndex: 0 }) {
|
ForEach(this.courseList, (item: Course, index: number) => {
|
ListItem() {
|
Row({ space: 10 }) {
|
Column() {
|
Text(item.title)
|
.fontSize(14)
|
.fontWeight(800)
|
.maxLines(1)
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
Text(item.desc)
|
.fontSize(12)
|
.fontColor('#666666')
|
.maxLines(2)
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
Row() {
|
Row({ space: 2 }) {
|
Image($r('app.media.person_icon'))
|
.width(10)
|
.height(10)
|
Text(item.count)
|
.fontSize(10)
|
.fontColor('#666666')
|
}
|
Row({ space: 2 }) {
|
Image($r('app.media.video_icon'))
|
.width(10)
|
.height(10)
|
Text(item.time)
|
.fontSize(10)
|
.fontColor('#666666')
|
}
|
Text() {
|
Span('课程难度: ')
|
Span(item.difficult)
|
}
|
.fontSize(10)
|
.fontColor('#666666')
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
}
|
.layoutWeight(0)
|
.width(170)
|
.height('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
.alignItems(HorizontalAlign.Start)
|
Image($r('app.media.active_list_img'))
|
.aspectRatio(16/9)
|
.height('100%')
|
.layoutWeight(1)
|
}
|
.width('100%')
|
.height(100)
|
.padding(10)
|
.justifyContent(FlexAlign.SpaceBetween)
|
.border({ width: 1, style: BorderStyle.Solid, color: '#f2f2f2' })
|
.borderRadius(10)
|
}
|
}, (index: number) => index.toString())
|
}
|
.listDirection(Axis.Vertical) // 排列方向
|
.scrollBar(BarState.Off)
|
.friction(0.6)
|
.edgeEffect(EdgeEffect.Spring)
|
.width('100%')
|
.height('100%')
|
|
}
|
.padding(16)
|
|
|
|
}
|
.width('100%')
|
.height('100%')
|
}
|
}
|
