完善功能

wwf

6 天以前 e794ed885a75be8ab5c789c2ea8db902ce338b0b

完善功能

 entry/src/main/ets/pages/MainPage.ets

@@ -1,4 +1,6 @@
import { Home } from './home/Home'
import { MessagePage } from './message/MessagePage'
import { SearchPage } from './search/SearchPage'

/**
 * @Description : 底部导航，APP模块
@@ -17,7 +19,7 @@
    { icon: 'tabs_message_icon', title: '消息' },
    { icon: 'tabs_account_icon', title: '我的' }
  ]
  @State selectIndex: number = 0
  @State selectIndex: number = 2
  private tabController: TabsController = new TabsController()

  @Builder tabItem(icon: ResourceStr,title: string,index: number){
@@ -39,18 +41,16 @@
      Tabs({barPosition: BarPosition.End,controller: this.tabController}){
        ForEach(this.tabBarList,(item: TabBarBase,index:number) => {
          TabContent(){
            if (index === 0) {
            if (this.selectIndex == 0) {
              Home()
            } else if (index === 1){
              // SearchPage()
            } else if (index === 2){
              // MessagePage()
            } else if (this.selectIndex == 1){
              SearchPage()
            } else if (this.selectIndex == 2){
              MessagePage()
            } else if (index === 3){
              // AccountPage()
            }
          }
          //调用自定义的样式
          // .tabBar(this.tabItem(item.icon,item.title,index))
        })
      }
      .barHeight(0)

 entry/src/main/ets/pages/home/ActiveDetail.ets

New file
@@ -0,0 +1,106 @@
import { router } from "@kit.ArkUI"

@Entry
@Component
export struct ActiveDetail {
  @State index: number = 0
  aboutToAppear(): void {
    interface Params {
      index: number
    }
    const params: Params = router.getParams() as Params
    this.index = params.index
  }


  getTagFontColor(statusText: string) {
    switch (statusText) {
      case '报名中':
        return '#10920e'
      case '进行中':
        return '#ffa100'
      default :
        return '#666666'
    }
  }

  getTagBgColor(statusText: string) {
    switch (statusText) {
      case '报名中':
        return '#d5f2db'
      case '进行中':
        return '#fff0cc'
      default :
        return '#ebebeb'
    }
  }

  build() {
    Column() {
      Row() {
        Image($r('app.media.left_icon'))
          .width(20)
          .height(20)
        Text('详情页')
          .fontSize(18)
          .fontWeight(700)
        Row()
      }
      .width('100%')
      .padding(10)
      .justifyContent(FlexAlign.SpaceBetween)

      Image($r('app.media.image1'))
        .width('100%')
        .height(150)

      Column({ space: 14 }) {
        Text('北京人工智能IE')
          .fontWeight(800)
          .width('100%')

        Row({ space: 10 }) {
          Text('报名中')
            .fontSize(10)
            .fontWeight(500)
            .padding({ left: 4, right: 4, top: 2, bottom: 2 })
            .borderRadius(10)
            .fontColor(this.getTagFontColor('报名中'))
            .backgroundColor(this.getTagBgColor('报名中'))
          Row() {
            Image($r('app.media.date_icon'))
              .width(12)
              .height(12)
            Text('20250520-20250620')
              .fontSize(10)
              .fontColor('#676767')
              .margin({ left: 4 })
          }
          Text(`80人已报名`)
            .fontSize(10)
            .fontColor('#676767')
        }
        .width('100%')
        .justifyContent(FlexAlign.Start)

        Text('课程介绍')
          .width('100%')
          .fontSize(14)
          .fontWeight(800)

        Text('本课程是计算机网络技术、通信技术等专业的专业核心课程，旨在培养学生的网络技术职业能力、职业素养和创新能力。' +
          '\n采用项目式实训教学，通过引入一个循序渐进的企业网络组建案例，让学生在模拟真实场景中掌握中小型企业网络组建的知识和能力' +
          '教材内容覆盖华为“1+X”证书考试要求，包含大量实操练习。')
          .width('100%')
          .fontSize(13)
          .lineHeight(20)
      }
      .padding(14)



    }
    .width('100%')
    .height('100%')
  }
}

 entry/src/main/ets/pages/home/BannerDetail.ets

New file
@@ -0,0 +1,62 @@
import { router } from "@kit.ArkUI";

@Entry
@Component
export struct BannerDetail {
  @State index: number = 0;
  aboutToAppear(): void {
    interface Params {
      index: number
    }
    const params: Params = router.getParams() as Params
    if (params) {
      this.index = params.index
    }
  }

  build() {
    Column() {
      Row() {
        Image($r('app.media.left_icon'))
          .width(20)
          .height(20)
        Text('详情页')
          .fontSize(18)
          .fontWeight(700)
        Row()
      }
      .width('100%')
      .padding(10)
      .justifyContent(FlexAlign.SpaceBetween)

      Image($r('app.media.image1'))
        .width('100%')
        .height(150)

      Column({ space: 10 }) {
        Text('华为[1+X]《网络系统建设与运维》')
          .fontWeight(800)
          .width('100%')

        Text('课程介绍')
          .width('100%')
          .fontSize(14)
          .fontWeight(800)
          .margin({ top: 10 })

        Text('本课程是计算机网络技术、通信技术等专业的专业核心课程，旨在培养学生的网络技术职业能力、职业素养和创新能力。' +
          '\n采用项目式实训教学，通过引入一个循序渐进的企业网络组建案例，让学生在模拟真实场景中掌握中小型企业网络组建的知识和能力' +
          '教材内容覆盖华为“1+X”证书考试要求，包含大量实操练习。')
          .width('100%')
          .fontSize(13)
          .lineHeight(20)
      }
      .padding(14)



    }
    .width('100%')
    .height('100%')
  }
}

 entry/src/main/ets/pages/home/ClassificationDetail.ets

New file
@@ -0,0 +1,54 @@
import { router } from "@kit.ArkUI"

@Entry
@Component
export struct ClassificationDetail {
  @State title: string = ''
  aboutToAppear(): void {
    interface Params {
      title: string
    }
    const params = router.getParams() as Params
    this.title = params.title
  }

  build() {
    Column() {
      Row() {
        Image($r('app.media.left_icon'))
          .width(20)
          .height(20)
        Text('详情页')
          .fontSize(18)
          .fontWeight(700)
        Row()
      }
      .width('100%')
      .padding(10)
      .justifyContent(FlexAlign.SpaceBetween)

      Image($r('app.media.image1'))
        .width('100%')
        .height(180)

      Column({ space: 10 }) {

        Text('详情介绍')
          .width('100%')
          .fontSize(14)
          .fontWeight(800)
          .margin({ top: 10 })

        Text('本课程是计算机网络技术、通信技术等专业的专业核心课程，旨在培养学生的网络技术职业能力、职业素养和创新能力。' +
          '\n采用项目式实训教学，通过引入一个循序渐进的企业网络组建案例，让学生在模拟真实场景中掌握中小型企业网络组建的知识和能力' +
          '教材内容覆盖华为“1+X”证书考试要求，包含大量实操练习。')
          .width('100%')
          .fontSize(13)
          .lineHeight(20)
      }
      .padding(14)
    }
    .width('100%')
    .height('100%')
  }
}

 entry/src/main/ets/pages/home/Home.ets

@@ -1,3 +1,5 @@
import { router } from "@kit.ArkUI"

class TabBarBase {
  title: string = ''
}
@@ -11,11 +13,19 @@
  signupCount: number = 0
  statusText: string = ''
}
class Course {
  title: string = ''
  desc: string = ''
  count: string = ''
  time: string = ''
  difficult: string = ''
}

@Entry
@Component
export struct Home {
  @State pageHeight: number = 0
  @State activeIndex:number = 0
  @State activeIndex:number = 1
  @State tabList: TabBarBase[] = [
    { title: '首页' },
    { title: '课程' }
@@ -46,6 +56,25 @@
    { title: '北京人工智能IE', timeScope: '20250520-20250620', signupCount: 80, statusText: '已结束' },
    { title: '北京人工智能IE', timeScope: '20250520-20250620', signupCount: 80, statusText: '报名中' },
    { title: '北京人工智能IE', timeScope: '20250520-20250620', signupCount: 80, statusText: '已结束' },
  ]
  @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: '简单' },

  ]

  @Builder tabBarItem(name:string,index: number){
@@ -94,7 +123,7 @@
      Tabs({controller:this.tabController}){
        ForEach(this.tabList, (item: TabBarBase, index: number) => {
          // 首页 ------------
          if (item.title == '首页') {
          if (this.activeIndex == 0) {
            TabContent() {
              Column({ space: 10 }){
                Swiper() {
@@ -103,6 +132,14 @@
                      .width('100%')
                      .height(120)
                      .backgroundColor(0xAFEEEE)
                      .onClick(() => {
                        this.getUIContext().getRouter().pushUrl({
                          url: 'pages/home/BannerDetail',
                          params: {
                            id: index
                          }
                        })
                      })
                  })
                }
                .borderRadius(10)
@@ -131,6 +168,14 @@
                          .fontSize(12)
                          .fontWeight(500)
                      }
                      .onClick(() => {
                        router.pushUrl({
                          url: 'pages/home/ClassificationDetail',
                          params: {
                            title: item.title
                          }
                        })
                      })
                    }
                  })
                }
@@ -191,6 +236,14 @@
                      .height(100)
                      .padding(10)
                      .justifyContent(FlexAlign.SpaceBetween)
                      .onClick(() => {
                        router.pushUrl({
                          url: 'pages/home/ActiveDetail',
                          params: {
                            index: index
                          }
                        })
                      })
                    }
                  }, (index: number) => index.toString())
                }
@@ -209,10 +262,93 @@
          }

          // 课程------------
          if (item.title == '课程') {
          if (this.activeIndex == 1) {
            TabContent() {
              Text('课程content')
              Column({ space: 10 }) {
                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%')

                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(530)

              }
              .height('100%')
            }.tabBar(this.tabBarItem(item.title, index))
          }
        })

 entry/src/main/ets/pages/message/MessagePage.ets

@@ -1,63 +1,49 @@
import { CommonConstantWX } from "../../common/CommonConstantWX"
import { WxUserInfoBase } from "../../data/WxUserInfoBase"

/*
 * Search({placeholder: '请输入您要搜索的内容',value: 'DeepSeek'})
        .width('90%')
        .backgroundColor(Color.White)
        .searchButton('搜索')
        .onChange((value: string) => {
          console.info(`输入的内容为：${value}`)
        })
        //提交方法
        .onSubmit((value:string) => {
          console.info(`提交的内容为：${value}`)
        })
 * */
class Message {
  avatar: string | Resource = ''
  name: string = ''
  company: string = ''
  desc: string = ''
}

@Entry
@Component
export struct MessagePage {
  @State userList:Array<WxUserInfoBase> = CommonConstantWX.mUser
  @State searchUser:Array<WxUserInfoBase> = []
  @State messageList: Message[] = [
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' }
  ]

  build() {
    Column({space: 10}) {
      Search({placeholder: '搜索'})
        .backgroundColor(Color.White)
        .width('90%')
        .borderRadius(5)
        .onChange((value: string) =>{
          //每次输入都要清空searchUser数组
          this.searchUser = []
          let searchCount = 0
          //进行遍历，在数组源头查找和value相关的数据
          for (let index = 0; index < this.userList.length; index++) {
            const element = this.userList[index];
            //判断每一条数据是否有和Value相关的内容
            if (element.name?.indexOf(value) != -1) {
              //找到相关的数据，添加到search数组当中，并且数据加一
              searchCount ++
              this.searchUser.push(element)
      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')
            }
          }
          //判断SearchCount是否为0
          if (searchCount === 0) {
            //表示查无此人
            this.searchUser.push({
              id: 999,
              name: '无此用户',
              img:$r('app.media.avatar_icon')
            })
          }
      .borderRadius(30)
      .padding({ left: 20, right: 20 })
      .backgroundColor('#f3f7fe')
      .width('100%')
      .margin({ top: 10 })

      List({ space: 10, initialIndex: 0 }){
        ForEach(this.messageList, (item: Message) => {

        })
      List({space: 20}){
        ForEach(this.searchUser.length === 0 ? this.userList: this.searchUser,(item: WxUserInfoBase) => {
          ListItem(){
            userInfoItem({item: item})
          }
        })
      }
      .height('90%')
      .height('100%')
      .padding({top:10})
      .margin({bottom: 30})
      .backgroundColor(Color.White)
@@ -65,30 +51,6 @@
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#ccc')
  }
}

@Component
struct userInfoItem {
  @Prop item: WxUserInfoBase
  build() {
    Row({space: 15}){
      Image(this.item.img)
        .width(40)
        .height(40)
        .objectFit(ImageFit.Cover)
      Text(this.item.name)
        .fontSize(20)
    }
    .onClick(() => {
      this.getUIContext().getRouter().pushUrl({
        url: 'pages/message/MessageDetailsPage',
        params:{
          userInfo: this.item
        }
      })
    })
    .padding(10)
    .padding({ left: 10, right: 10 })
  }
}

 entry/src/main/ets/pages/search/SearchPage.ets

@@ -1,82 +1,175 @@
import { AxiosResponse } from "@ohos/axios"
import { NewsBase, NewsBaseData } from "../../data/NewsBase"
import { TextBase } from "../../data/TextBase"
import { NewsApi, TextApi } from "../../http/AxiosAPI"
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 newsBase: NewsBase = new NewsBase()
  @State TextData: TextBase = new TextBase()
  async aboutToAppear() {
    let newsData:NewsBase = await NewsApi()
    this.newsBase =  newsData
    let textData:TextBase = await TextApi()
    this.TextData = textData
    console.info('textData ' + JSON.stringify(textData))
  }
  @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(JSON.stringify(this.TextData.text))
            .fontWeight(700)
            .fontSize(20)
                  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)

      }
      .width('95%')
      .height(50)
      .borderRadius(20)
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        console.info('TextData: ' + JSON.stringify(this.TextData.text))
      })
      List({space:15}){
        ForEach(this.newsBase.data,(item:NewsBaseData) =>{
          ListItem(){
           newsItem({newsData: item})
          }
        })
      }
      .alignListItem(ListItemAlign.Center)
                .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%')
    .backgroundColor("#ffececec")
              .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 })
}
//条目样式，自定义组件
@Component
struct newsItem {
  @Prop newsData: NewsBaseData
  build() {
    Row({space: 10}){
      Image(this.newsData.pic)
        //占位图
        .alt($r('app.media.app_logo_image'))
        .width(100)
        .height(70)
        .objectFit(ImageFit.Fill)
      Column({space: 10}){
        Text(this.newsData.title).SearchTextSty(18,700)
        Text(this.newsData.desc).SearchTextSty(15,400,Color.Black,2)
        Text(`热度： ${this.newsData.hot}`).SearchTextSty(10,400,Color.Red)
          .textAlign(TextAlign.End)
              .height(20)
              .margin({ top: 10 })
              .alignItems(VerticalAlign.Center)
              .onClick(() => {
                if (this.expandIndex == index) {
                  this.expandIndex = null
                } else {
                  this.expandIndex = index
      }
      .width('65%')
              })

              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)
    }
    .width('95%')


            }
    .padding(10)
            .border({ width: 1, style: BorderStyle.Solid, color: this.expandIndex == index ? '#1756f4' : '#f2f2f2' })
    .borderRadius(10)
    .backgroundColor(Color.White)
  }
        }, (index: number) => index.toString())
}
@Extend(Text) function SearchTextSty(mSize:number,mWeight?:FontWeight,mColor?: ResourceColor,mLines?: number){
  .fontSize(mSize)
  .fontWeight(mWeight? mWeight : 400)
  .fontColor(mColor? mColor : Color.Black)
  .maxLines(mLines? mLines : 1)
  .textOverflow({overflow: TextOverflow.Ellipsis})
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
  .width('100%')
      .height(560)

    }
    .padding({ left: 10, right: 10 })
    .height('100%')
  }
}

 entry/src/main/resources/base/media/company_icon.png

 entry/src/main/resources/base/media/down_icon.png

 entry/src/main/resources/base/media/left_icon.png

 entry/src/main/resources/base/media/person_icon.png

 entry/src/main/resources/base/media/search_icon.png

 entry/src/main/resources/base/media/up_icon.png

 entry/src/main/resources/base/media/video_icon.png

 entry/src/main/resources/base/profile/main_pages.json

@@ -4,6 +4,11 @@
    "pages/StartPage",
    "pages/login/LoginPage",
    "pages/login/SignInPage",
    "pages/MainPage"
    "pages/MainPage",
    "pages/home/BannerDetail",
    "pages/home/ClassificationDetail",
    "pages/home/ActiveDetail",
    "pages/search/SearchPage",
    "pages/message/MessagePage"
  ]
}

 oh-package-lock.json5

@@ -11,14 +11,14 @@
  },
  "packages": {
    "@ohos/hamock@1.0.0": {
      "name": "@ohos/hamock",
      "name": "",
      "version": "1.0.0",
      "integrity": "sha512-K6lDPYc6VkKe6ZBNQa9aoG+ZZMiwqfcR/7yAVFSUGIuOAhPvCJAo9+t1fZnpe0dBRBPxj2bxPPbKh69VuyAtDg==",
      "resolved": "https://ohpm.openharmony.cn/ohpm/@ohos/hamock/-/hamock-1.0.0.har",
      "registryType": "ohpm"
    },
    "@ohos/hypium@1.0.21": {
      "name": "@ohos/hypium",
      "name": "",
      "version": "1.0.21",
      "integrity": "sha512-iyKGMXxE+9PpCkqEwu0VykN/7hNpb+QOeIuHwkmZnxOpI+dFZt6yhPB7k89EgV1MiSK/ieV/hMjr5Z2mWwRfMQ==",
      "resolved": "https://ohpm.openharmony.cn/ohpm/@ohos/hypium/-/hypium-1.0.21.har",