import { IconType } from "@kit.ArkUI"
|
|
class JobItem {
|
title: string = ''
|
payment: string = ''
|
tagList: string[] = []
|
company: string = ''
|
address: string = ''
|
detail: string = ''
|
}
|
|
@Entry
|
@Component
|
export struct SearchPage {
|
@State jobList: JobItem[] = [
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k-40k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k-40k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
{ title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
|
]
|
@State expandIndex: number | null = 0
|
|
build() {
|
Column({ space: 10 }) {
|
Text('岗位推荐')
|
.width('100%')
|
.textAlign(TextAlign.Start)
|
.fontWeight(800)
|
.fontSize(18)
|
.margin({ left: 16 })
|
|
Row() {
|
Image($r('app.media.search_icon'))
|
.width(14)
|
.height(14)
|
TextInput({ placeholder: '搜索想要查找的岗位' })
|
.placeholderFont({ size: 14})
|
.placeholderColor('#999999')
|
.backgroundColor('#f3f7fe')
|
}
|
.borderRadius(30)
|
.padding({ left: 20, right: 20 })
|
.backgroundColor('#f3f7fe')
|
.width('100%')
|
.margin({ top: 10 })
|
|
List({ space: 10, initialIndex: 0 }) {
|
ForEach(this.jobList, (item: JobItem, index: number) => {
|
ListItem() {
|
Column() {
|
Row({ space: 10 }) {
|
Column() {
|
Text(item.title)
|
.fontSize(14)
|
.fontWeight(800)
|
Row({ space: 10 }) {
|
ForEach(item.tagList, (tag: string) => {
|
Text(tag)
|
.padding(4)
|
.borderRadius(4)
|
.fontSize(10)
|
.fontColor('#999999')
|
.backgroundColor('#f5f5f5')
|
})
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.Start)
|
|
Row({ space: 8 }) {
|
Image($r('app.media.company_icon'))
|
.width(16)
|
.height(16)
|
|
Text(item.company)
|
.fontSize(10)
|
|
}
|
}
|
.layoutWeight(0)
|
.width(200)
|
.height('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
.alignItems(HorizontalAlign.Start)
|
|
Column() {
|
Text(item.payment)
|
.fontColor('#1756f4')
|
.fontSize(14)
|
.fontWeight(800)
|
Text(item.address)
|
.fontColor('#a6a6a6')
|
.fontSize(10)
|
}
|
.height('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
.alignItems(HorizontalAlign.End)
|
}
|
.width('100%')
|
.height(100)
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
|
Row() {
|
Text() {
|
Span(this.expandIndex == index ? '收起' : '展开')
|
Span('岗位要求')
|
}
|
.fontSize(10)
|
.fontColor('#666666')
|
Image(this.expandIndex == index ? $r('app.media.down_icon') : $r('app.media.up_icon'))
|
.width(14)
|
.height(14)
|
.margin({ left: 4 })
|
}
|
.height(20)
|
.margin({ top: 10 })
|
.alignItems(VerticalAlign.Center)
|
.onClick(() => {
|
if (this.expandIndex == index) {
|
this.expandIndex = null
|
} else {
|
this.expandIndex = index
|
}
|
})
|
|
if (this.expandIndex == index) {
|
Divider()
|
.color('#f0f0f0')
|
.margin({ top: 5, bottom: 5 })
|
|
Text('岗位要求:')
|
.fontSize(13)
|
.fontWeight(500)
|
.margin({ top: 10 })
|
.width('100%')
|
.textAlign(TextAlign.Start)
|
Text('1.学历要求：本科及以上学历，计算机科学与技术、软件工程等相关专业优先，优秀大专学历者' +
|
'1.学历要求：本科及以上学历，计算机科学与技术、软件工程等相关专业优先，优秀大专学历者')
|
.fontSize(10)
|
.margin({ top: 6 })
|
.fontColor('#666666')
|
.lineHeight(15)
|
.width('100%')
|
.textAlign(TextAlign.Start)
|
}
|
|
|
}
|
.padding(10)
|
.border({ width: 1, style: BorderStyle.Solid, color: this.expandIndex == index ? '#1756f4' : '#f2f2f2' })
|
.borderRadius(10)
|
}
|
}, (index: number) => index.toString())
|
}
|
.listDirection(Axis.Vertical) // 排列方向
|
.scrollBar(BarState.Off)
|
.friction(0.6)
|
.edgeEffect(EdgeEffect.Spring)
|
.width('100%')
|
.height(560)
|
|
}
|
.padding({ left: 10, right: 10 })
|
.height('100%')
|
}
|
}
|
