feat：1）添加直播详情页基本组件（直播预约信息tab页面）

 import ArrayList from '@ohos.util.ArrayList';
-import { Action } from 'wdBean'
-import { WDRouterPage } from './WDRouterPage'
+import { Action } from 'wdBean';
+import { WDRouterPage } from './WDRouterPage';
 
 interface HandleObject {
   handle: (action: Action) => (WDRouterPage | undefined)
@@ -75,6 +75,8 @@ export function registerRouter() {
       return WDRouterPage.imageTextDetailPage
     } else if (action.params?.pageID == "BroadcastPage") {
       return WDRouterPage.broadcastPage
+    } else if (action.params?.pageID == "LIVE_DETAILS_PAGER") {
+      return WDRouterPage.detailPlayLivePage
     }
     return undefined
   })

@@ -134,6 +134,15 @@ export struct TopNavigationComponent {
     };
     WDRouterRule.jumpWithAction(taskAction)
   }
+  jumpToLiveDetailsPaper() {
+    let taskAction: Action = {
+      type: 'JUMP_INNER_NEW_PAGE',
+      params: {
+        pageID: 'LIVE_DETAILS_PAGER'
+      } as Params,
+    };
+    WDRouterRule.jumpWithAction(taskAction)
+  }
 
   build() {
     Column() {

+import { BottomComponent } from '../widgets/details/BottomComponent';
+import { TabComponent } from '../widgets/details/TabComponent';
+import { TopPlayComponent } from '../widgets/details/TopPlayComponet';
+
 @Entry
 @Component
 export struct DetailPlayLivePage {
-  @State message: string = 'Detail Play Live Page';
+  TAG: string = 'DetailPlayLivePage';
+
+  aboutToAppear(): void {
+
+  }
 
   build() {
-    Row() {
     Column() {
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
+      TopPlayComponent()
+      TabComponent()
+      BottomComponent()
     }
+    .height('100%')
     .width('100%')
   }
-    .height('100%')
+
+  aboutToDisappear(): void {
   }
 }
\ No newline at end of file

+@Component
+export struct BottomComponent {
+  aboutToAppear(): void {
+  }
+
+  build() {
+    Row() {
+
+    }.backgroundColor(Color.Red)
+    .height('50vp')
+    .width('100%')
+  }
+
+  aboutToDisappear(): void {
+  }
+}
\ No newline at end of file

+import font from '@ohos.font'
+
+@Component
+export struct LiveCountdownComponent {
+  textTimerController: TextTimerController = new TextTimerController()
+  @State format: string = 'HH:mm:ss'
+
+  aboutToAppear(): void {
+    //注册字体
+    font.registerFont({
+      familyName: 'BebasNeue_Regular',
+      familySrc: $rawfile('font/BebasNeue_Regular.otf')
+    })
+    setTimeout(() => {
+      this.textTimerController.start()
+    }, 2000)
+  }
+
+  build() {
+    Column() {
+      this.showTitle()
+      this.showCountDown()
+      this.showAppointment()
+    }.padding({
+      top: 20,
+      left: 20,
+      right: 20,
+      bottom: 24
+    })
+    .backgroundColor(Color.White)
+    .border({ radius: 6 })
+    .margin({ top: 16 })
+  }
+
+  aboutToDisappear(): void {
+    this.textTimerController.pause()
+  }
+
+  @Builder
+  showTitle() {
+    Text('距离直播开始还有')
+      .maxLines(2)
+      .textOverflow({ overflow: TextOverflow.Ellipsis })
+      .fontSize('14fp')
+      .fontWeight(400)
+      .fontColor('#222222')
+  }
+
+  @Builder
+  showCountDown() {
+    Row() {
+      this.showTimeStyle('10', true, 0)
+      this.showTimeStyle('月', false, 3)
+      this.showTimeStyle('8', true, 3)
+      this.showTimeStyle('日', false, 3)
+      this.showTimeStyle('16', true, 10)
+      this.showTimeStyle(':', true, 0)
+      this.showTimeStyle('05', true, 0)
+    }
+    .margin({ top: 10 })
+    .visibility(Visibility.None)
+
+    TextTimer({ isCountDown: true, count: 24 * 60 * 60 * 1000 - 1000, controller: this.textTimerController })
+      .format(this.format)
+      .fontSize('40fp')
+      .fontWeight(FontWeight.Bold)
+      .fontColor('#222222')
+      .fontFamily('BebasNeue_Regular')
+      .onTimer((utc: number, elapsedTime: number) => {
+        console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
+      })
+      .margin({ top: 10 })
+  }
+
+  @Builder
+  showAppointment() {
+    Text('我要预约')
+      .width('100%')
+      .height(42)
+      .textAlign(TextAlign.Center)
+      .fontSize('16fp')
+      .fontWeight(400)
+      .fontColor(Color.White)
+      .margin({
+        top: 16
+      })
+      .border({ radius: 4 })
+      .backgroundColor('#ED2800')
+    // .backgroundColor('#CCCCCC')
+  }
+
+  @Builder
+  showTimeStyle(value: string, isBold: boolean, left: number) {
+    Text(value)
+      .fontSize(isBold ? '40fp' : '16fp')
+      .fontFamily(isBold ? 'BebasNeue_Regular' : '')
+      .fontWeight(isBold ? FontWeight.Bold : 500)
+      .fontColor('#222222')
+      .margin({ left: left })
+  }
+}
\ No newline at end of file

+@Component
+export struct TabChatComponent {
+  arr: string[] = []
+  aboutToAppear(): void {
+    for (let index = 0; index < 80; index++) {
+      this.arr.push(index + '')
+    }
+  }
+
+  build() {
+    List() {
+      ForEach(this.arr, (item: string) => {
+        ListItem() {
+          Column() {
+            Text(item)
+            Divider().height(10).width('100%')
+          }
+          .backgroundColor(Color.Gray)
+        }
+      })
+    }
+  }
+
+  aboutToDisappear(): void {
+  }
+}
\ No newline at end of file

+import { TabChatComponent } from './TabChatComponent'
+import { TabInfoComponent } from './TabInfoComponent'
+import { TabLiveComponent } from './TabLiveComponent'
+
+@Component
+export struct TabComponent {
+  @State fontColor: string = '#999999'
+  @State selectedFontColor: string = '#222222'
+  @State currentIndex: number = 0
+  private controller: TabsController = new TabsController()
+  tabs: string[] = ['简介', '直播间', '大家聊']
+
+  aboutToAppear(): void {
+
+  }
+
+  build() {
+    Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
+      ForEach(this.tabs, (item: string, index: number) => {
+        TabContent() {
+          if (0 == index) {
+            TabInfoComponent()
+          } else if (1 == index) {
+            TabLiveComponent()
+          } else {
+            TabChatComponent()
+          }
+        }.tabBar(this.tabBuilder(index, item))
+        .backgroundColor('#F5F5F5')
+      }, (item: string, index: number) => {
+        return item + index
+      })
+    }
+    .layoutWeight(1)
+    .vertical(false)
+    .barMode(BarMode.Fixed)
+    .barWidth(200)
+    .barHeight(48)
+    .animationDuration(100)
+    .onChange((index: number) => {
+      this.currentIndex = index
+    })
+    .backgroundColor(Color.White)
+  }
+
+  @Builder
+  tabBuilder(index: number, name: string) {
+    Column() {
+      Text(name)
+        .margin({ top: 6 })
+        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
+        .fontSize('18fp')
+        .fontWeight(this.currentIndex === index ? 600 : 400)
+      Divider()
+        .strokeWidth(2)
+        .margin({ top: 6 })
+        .width(15)
+        .color('#CB0000')
+        .visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden)
+    }.width('100%')
+  }
+
+  aboutToDisappear(): void {
+  }
+}
\ No newline at end of file

+import { LiveCountdownComponent } from './LiveCountdownComponent'
+
+@Entry
+@Component
+export struct TabInfoComponent {
+  aboutToAppear(): void {
+  }
+
+  build() {
+    Column() {
+      this.showLiveTitle()
+      this.showLiveDetails()
+      LiveCountdownComponent()
+    }.padding({
+      top: 13,
+      left: 16,
+      right: 16
+    })
+    .height('100%')
+  }
+
+  aboutToDisappear(): void {
+  }
+
+  @Builder
+  showLiveTitle() {
+    Text('国新办发布会丨介绍防汛抗旱工国新办发布会丨介绍防汛抗旱工作情况国新办发布会丨介绍防汛抗旱工作情况作情况国新办发布会丨介绍防汛抗旱工作情况')
+      .maxLines(2)
+      .textOverflow({ overflow: TextOverflow.Ellipsis })
+      .fontSize('18fp')
+      .fontWeight(500)
+      .fontColor('#222222')
+  }
+
+  @Builder
+  showLiveDetails() {
+    Text('国务院新闻办公室将于7月25日上午10时举行国务院政策例行吹风会，请应急管理部副部长、水利部副部长王道席和自然资源部、水利部、应急管理部、中国气象局、国家消防救援局有关负责人介绍防汛抗旱工作情况，并答记者问。')
+      .maxLines(5)
+      .textOverflow({ overflow: TextOverflow.Ellipsis })
+      .fontSize('14fp')
+      .fontWeight(400)
+      .fontColor('#666666')
+      .margin({ top: 8 })
+  }
+}
\ No newline at end of file

+@Component
+export struct TabLiveComponent {
+  aboutToAppear(): void {
+  }
+
+  build() {
+  }
+
+  aboutToDisappear(): void {
+  }
+}
\ No newline at end of file

+@Component
+export struct TopPlayComponent {
+  aspectRatioPlayer: number = 375 / 211
+
+  aboutToAppear(): void {
+
+  }
+
+  build() {
+    Stack()
+      .height(211)
+      .aspectRatio(this.aspectRatioPlayer)
+      .backgroundColor(Color.Black)
+  }
+
+  aboutToDisappear(): void {
+  }
+}
\ No newline at end of file