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

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

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

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

+@Component
+export struct BottomComponent {
+  aboutToAppear(): void {
+  }
+
+  build() {
+    Row() {
+
+    }.backgroundColor(Color.Red)
+    .height('50vp')
+    .width('100%')
+  }
+
+  aboutToDisappear(): void {
+  }
+}

+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 })
+  }
+}

+@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 {
+  }
+}

+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 {
+  }
+}

+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 })
+  }
+}

+@Component
+export struct TabLiveComponent {
+  aboutToAppear(): void {
+  }
+
+  build() {
+  }
+
+  aboutToDisappear(): void {
+  }
+}

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