Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool

@@ -253,6 +253,13 @@ export class HttpUrlUtils {
    * 早晚报获取PAGEID
    * 早晚报获取PAGEID
    * */
    * */
   static readonly DAILY_PAPER_TOPIC: string = "/api/rmrb-bff-display-zh/display/zh/c/dailyPaperTopic";
   static readonly DAILY_PAPER_TOPIC: string = "/api/rmrb-bff-display-zh/display/zh/c/dailyPaperTopic";
+
+  /**
+   * app启动页 兴趣偏好
+   */
+  static readonly INTERESTS_HOTS_DATA_PATH: string = "/api/rmrb-user-center/user/zh/c/tag/queryTags";
+
+
   private static _hostUrl: string = HttpUrlUtils.HOST_PRODUCT;
   private static _hostUrl: string = HttpUrlUtils.HOST_PRODUCT;
   /**
   /**
    * 推荐列表
    * 推荐列表
@@ -650,6 +657,12 @@ export class HttpUrlUtils {
     return url
     return url
   }
   }
 
 
+  static getInterestsUrl() {
+    let url = HttpUrlUtils._hostUrl + HttpUrlUtils.INTERESTS_HOTS_DATA_PATH;
+    return url;
+
+  }
+
   static getLiveDetailsUrl() {
   static getLiveDetailsUrl() {
     let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_DETAILS_PATH
     let url = HttpUrlUtils._hostUrl + HttpUrlUtils.LIVE_DETAILS_PATH
     return url
     return url

@@ -88,6 +88,9 @@ export class WDRouterPage {
   static launchAdvertisingPage = new WDRouterPage("phone", "ets/pages/launchPage/LaunchAdvertisingPage");
   static launchAdvertisingPage = new WDRouterPage("phone", "ets/pages/launchPage/LaunchAdvertisingPage");
   //主页
   //主页
   static mainPage = new WDRouterPage("phone", "ets/pages/MainPage");
   static mainPage = new WDRouterPage("phone", "ets/pages/MainPage");
+
+  static launchInterestsPage = new WDRouterPage("phone", "ets/pages/launchPage/LaunchInterestsHobbiesPage");
+
   // static loginProtocolPage = new WDRouterPage("wdLogin", "ets/pages/login/LoginProtocolWebview");
   // static loginProtocolPage = new WDRouterPage("wdLogin", "ets/pages/login/LoginProtocolWebview");
 
 
   //播报页面
   //播报页面

@@ -72,5 +72,6 @@ export interface ContentDTO {
   corner: string;
   corner: string;
   rmhPlatform: number;
   rmhPlatform: number;
   newTags: string;
   newTags: string;
+  titleShow?: number;
   isSearch?: boolean; // 是否是搜索的结果，区分搜索和主页的数据
   isSearch?: boolean; // 是否是搜索的结果，区分搜索和主页的数据
 }
 }

@@ -167,7 +167,7 @@ export interface LiveDetailsBean {
 }
 }
 
 
 export interface LiveInfo {
 export interface LiveInfo {
-  //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
+  //直播新闻-直播状态  wait 待开播 running 直播中 end 已结束cancel已取消paused暂停
   liveState: string
   liveState: string
   //2024-04-12 15:00:00 直播开始时间
   //2024-04-12 15:00:00 直播开始时间
   planStartTime: string
   planStartTime: string

@@ -58,9 +58,9 @@ export struct CardParser {
     }
     }
     else {
     else {
       // todo:组件未实现 / Component Not Implemented
       // todo:组件未实现 / Component Not Implemented
-      Text(contentDTO.appStyle)
-        .width(CommonConstants.FULL_PARENT)
-        .padding(10)
+      // Text(contentDTO.appStyle)
+      //   .width(CommonConstants.FULL_PARENT)
+      //   .padding(10)
       // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
       // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
     }
     }
   }
   }

@@ -66,9 +66,9 @@ export struct CompParser {
     }
     }
     else {
     else {
       // todo:组件未实现 / Component Not Implemented
       // todo:组件未实现 / Component Not Implemented
-      Text(compDTO.compStyle)
-        .width(CommonConstants.FULL_PARENT)
-        .padding(10)
+      // Text(compDTO.compStyle)
+      //   .width(CommonConstants.FULL_PARENT)
+      //   .padding(10)
       // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
       // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
     }
     }
   }
   }

@@ -35,63 +35,63 @@ export struct DynamicDetailComponent {
         //logo、日期
         //logo、日期
         Row() {
         Row() {
           Image($r('app.media.ic_article_rmh'))
           Image($r('app.media.ic_article_rmh'))
-            .width(80)
-            .height(28)
-            .margin({ left: 16 })
+            .width($r('app.float.margin_80'))
+            .height($r('app.float.margin_28'))
+            .margin({ left: $r('app.float.margin_16') })
           Blank()
           Blank()
           Text("2023年03月14日 08:16")
           Text("2023年03月14日 08:16")
             .fontColor($r('app.color.color_B0B0B0'))
             .fontColor($r('app.color.color_B0B0B0'))
-            .fontSize(12)
-            .lineHeight(28)
-            .margin({ right: 16 })
+            .fontSize($r('app.float.font_size_12'))
+            .lineHeight($r('app.float.margin_28'))
+            .margin({ right: $r('app.float.margin_16') })
         }
         }
-        .height(48)
+        .height($r('app.float.margin_48'))
         .width('100%')
         .width('100%')
         //分割线
         //分割线
         Image($r('app.media.ic_news_detail_division'))
         Image($r('app.media.ic_news_detail_division'))
             .width('100%')
             .width('100%')
-            .height(7)
-            .margin({left: 16, right: 16} )
+            .height($r('app.float.margin_7'))
+            .margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
         //号主信息
         //号主信息
         Row() {
         Row() {
           //头像
           //头像
           Stack() {
           Stack() {
             Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
             Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
               .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
               .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
-              .width('32')
-              .height('32')
+              .width($r('app.float.margin_32'))
+              .height($r('app.float.margin_32'))
               .objectFit(ImageFit.Cover)
               .objectFit(ImageFit.Cover)
-              .borderRadius(16)
+              .borderRadius($r('app.float.margin_16'))
             Image($r('app.media.icon_border_test'))
             Image($r('app.media.icon_border_test'))
-              .width('48')
-              .height('48')
+              .width($r('app.float.margin_48'))
+              .height($r('app.float.margin_48'))
               .objectFit(ImageFit.Cover)
               .objectFit(ImageFit.Cover)
-              .borderRadius(24)
+              .borderRadius($r('app.float.margin_24'))
           }
           }
-          .width(48)
-          .height(48)
+          .width($r('app.float.margin_48'))
+          .height($r('app.float.margin_48'))
           .alignContent(Alignment.Center)
           .alignContent(Alignment.Center)
           Column(){
           Column(){
             //昵称
             //昵称
             Text("this.contentDetailData.rmhInfo?.rmhName")
             Text("this.contentDetailData.rmhInfo?.rmhName")
-              .fontSize(14)
+              .fontSize($r('app.float.font_size_14'))
               .fontColor($r('app.color.color_222222'))
               .fontColor($r('app.color.color_222222'))
               .fontWeight(FontWeight.Medium)
               .fontWeight(FontWeight.Medium)
-              .margin({ left: 5 })
+              .margin({ left: $r('app.float.margin_5') })
             //简介
             //简介
             Text("this.contentDetailData.rmhInfo?.rmhDesc")
             Text("this.contentDetailData.rmhInfo?.rmhDesc")
-              .fontSize(14)
+              .fontSize($r('app.float.font_size_14'))
               .fontColor($r('app.color.color_B0B0B0'))
               .fontColor($r('app.color.color_B0B0B0'))
               .fontWeight(FontWeight.Medium)
               .fontWeight(FontWeight.Medium)
-              .margin({ left: 5 })
+              .margin({ left: $r('app.float.margin_5') })
           }
           }
           if (!this.followStatus) {
           if (!this.followStatus) {
             Text('关注')
             Text('关注')
               .width(60)
               .width(60)
-              .height(24)
+              .height($r('app.float.margin_48'))
               .textAlign(TextAlign.Center)
               .textAlign(TextAlign.Center)
               .fontSize($r('app.float.font_size_12'))
               .fontSize($r('app.float.font_size_12'))
-              .borderRadius($r('app.float.button_border_radius'))
+              .borderRadius($r('app.float.vp_3'))
               .backgroundColor($r('app.color.color_ED2800'))
               .backgroundColor($r('app.color.color_ED2800'))
               .fontColor($r('app.color.color_fff'))
               .fontColor($r('app.color.color_fff'))
               .onClick(() => {
               .onClick(() => {
@@ -99,12 +99,12 @@ export struct DynamicDetailComponent {
               })
               })
           } else {
           } else {
             Text('已关注')
             Text('已关注')
-              .width(60)
-              .height(24)
+              .width($r('app.float.margin_60'))
+              .height($r('app.float.margin_48'))
               .borderWidth(1)
               .borderWidth(1)
               .textAlign(TextAlign.Center)
               .textAlign(TextAlign.Center)
               .fontSize($r('app.float.font_size_12'))
               .fontSize($r('app.float.font_size_12'))
-              .borderRadius($r('app.float.button_border_radius'))
+              .borderRadius($r('app.float.vp_3'))
               .borderColor($r('app.color.color_CCCCCC'))
               .borderColor($r('app.color.color_CCCCCC'))
               .fontColor($r('app.color.color_CCCCCC'))
               .fontColor($r('app.color.color_CCCCCC'))
               .onClick(() => {
               .onClick(() => {
@@ -113,6 +113,53 @@ export struct DynamicDetailComponent {
           }
           }
         }
         }
         .width('100%')
         .width('100%')
+        //内容
+        Text("这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里")
+          .fontColor($r('app.color.color_222222'))
+          .fontSize($r('app.float.font_size_18'))
+          .lineHeight($r('app.float.margin_25'))
+          .margin({ top: $r('app.float.margin_6')
+          ,left: $r('app.float.margin_16')
+          ,right: $r('app.float.margin_16') })
+        //特别声明
+        Text("特别声明：本文为人民日报新媒体平台“人民号”作者上传并发布，仅代表作者观点。人民日报仅提供信息发布平台。")
+          .fontColor($r('app.color.color_CCCCCC'))
+          .fontSize($r('app.float.font_size_12'))
+          .lineHeight($r('app.float.margin_16'))
+          .margin({ top: $r('app.float.margin_16')
+          ,left: $r('app.float.margin_16')
+          ,right: $r('app.float.margin_16') })
+        //微信/朋友圈/微博
+        Row(){
+          Image($r('app.media.xxhdpi_pic_wechat'))
+            .width($r('app.float.margin_116'))
+            .height($r('app.float.margin_36'))
+            .objectFit(ImageFit.Cover)
+          Image($r('app.media.xxhdpi_pic_pyq'))
+            .width($r('app.float.margin_116'))
+            .height($r('app.float.margin_36'))
+            .margin({ left: $r('app.float.margin_4_negative')})
+            .objectFit(ImageFit.Cover)
+          Image($r('app.media.xxhdpi_pic_wb'))
+            .width($r('app.float.margin_116'))
+            .height($r('app.float.margin_36'))
+            .margin({ left: $r('app.float.margin_4_negative')})
+            .objectFit(ImageFit.Cover)
+        }
+        .margin({ top: $r('app.float.margin_24')})
+        //点赞
+        Row(){
+          Image($r('app.media.icon_like_selected_redheart'))
+            .width($r('app.float.margin_24'))
+            .height($r('app.float.margin_24'))
+            .objectFit(ImageFit.Cover)
+          Text("2.6万")
+            .fontColor($r('app.color.color_999999'))
+            .fontSize($r('app.float.font_size_16'))
+            .lineHeight($r('app.float.margin_20'))
+            .margin({ left: $r('app.float.margin_2')})
+        }
+        //评论组件/底部组件
       }
       }
     }
     }
     .backgroundColor('#FFFFFFFF')
     .backgroundColor('#FFFFFFFF')

@@ -20,12 +20,18 @@ export struct CardSourceInfo {
           .fontColor($r("app.color.color_B0B0B0"))
           .fontColor($r("app.color.color_B0B0B0"))
           .maxLines(1)
           .maxLines(1)
           .textOverflow({ overflow: TextOverflow.Ellipsis })
           .textOverflow({ overflow: TextOverflow.Ellipsis })
+        Image($r("app.media.point"))
+          .width(16)
+          .height(16)
       } else if (this.contentDTO.source) {
       } else if (this.contentDTO.source) {
         Text(`${this.contentDTO.source}`)
         Text(`${this.contentDTO.source}`)
           .fontSize($r("app.float.font_size_12"))
           .fontSize($r("app.float.font_size_12"))
           .fontColor($r("app.color.color_B0B0B0"))
           .fontColor($r("app.color.color_B0B0B0"))
           .maxLines(1)
           .maxLines(1)
           .textOverflow({ overflow: TextOverflow.Ellipsis })
           .textOverflow({ overflow: TextOverflow.Ellipsis })
+        Image($r("app.media.point"))
+          .width(16)
+          .height(16)
       }
       }
       // 新闻tab下的卡片，2天之前的不显示时间。但是如果是搜索情况下展示的卡片，显示时间
       // 新闻tab下的卡片，2天之前的不显示时间。但是如果是搜索情况下展示的卡片，显示时间
       if (this.contentDTO.isSearch || !this.contentDTO.isSearch && DateTimeUtils.getCommentTime
       if (this.contentDTO.isSearch || !this.contentDTO.isSearch && DateTimeUtils.getCommentTime
@@ -34,9 +40,6 @@ export struct CardSourceInfo {
           .contentDTO.publishTime))
           .contentDTO.publishTime))
         .indexOf
         .indexOf
         ('-') === -1) {
         ('-') === -1) {
-        Image($r("app.media.point"))
-          .width(16)
-          .height(16)
         Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
         Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
           .fontSize($r("app.float.font_size_12"))
           .fontSize($r("app.float.font_size_12"))
           .fontColor($r("app.color.color_B0B0B0"))
           .fontColor($r("app.color.color_B0B0B0"))

@@ -17,7 +17,7 @@ export struct Card10Component {
   build() {
   build() {
     Column() {
     Column() {
       // 顶部标题，最多两行
       // 顶部标题，最多两行
-      if (this.contentDTO.newsTitle) {
+      if (this.contentDTO.titleShow === 1 && this.contentDTO.newsTitle) {
         Text(this.contentDTO.newsTitle)
         Text(this.contentDTO.newsTitle)
           .width(CommonConstants.FULL_WIDTH)
           .width(CommonConstants.FULL_WIDTH)
           .fontSize($r('app.float.font_size_17'))
           .fontSize($r('app.float.font_size_17'))

@@ -42,16 +42,15 @@ export struct Card6Component {
       .alignItems(HorizontalAlign.Start)
       .alignItems(HorizontalAlign.Start)
       .justifyContent(FlexAlign.Start)
       .justifyContent(FlexAlign.Start)
       .width('58%')
       .width('58%')
-      if (this.contentDTO.coverUrl) {
-        Stack() {
-          Image(this.contentDTO.coverUrl)
-            .borderRadius(5)
-            .aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
-            .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 90 : 180)
-          CardMediaInfo({ contentDTO: this.contentDTO })
-        }
-        .alignContent(Alignment.BottomEnd)
+      Stack() {
+        Image(this.contentDTO.coverUrl)
+          .backgroundColor($r('app.color.color_B0B0B0'))
+          .borderRadius(5)
+          .aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
+          .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 90 : 180)
+        CardMediaInfo({ contentDTO: this.contentDTO })
       }
       }
+      .alignContent(Alignment.BottomEnd)
     }
     }
     .onClick((event: ClickEvent) => {
     .onClick((event: ClickEvent) => {
       ProcessUtils.processPage(this.contentDTO)
       ProcessUtils.processPage(this.contentDTO)

@@ -15,7 +15,7 @@ export struct Card9Component {
   build() {
   build() {
     Column() {
     Column() {
       // 顶部标题，最多两行
       // 顶部标题，最多两行
-      if (this.contentDTO.newsTitle) {
+      if (this.contentDTO.titleShow === 1 && this.contentDTO.newsTitle) {
         Text(this.contentDTO.newsTitle)
         Text(this.contentDTO.newsTitle)
           .width(CommonConstants.FULL_WIDTH)
           .width(CommonConstants.FULL_WIDTH)
           .fontSize($r('app.float.font_size_17'))
           .fontSize($r('app.float.font_size_17'))

+import { CompDTO, ContentDTO, Params } from 'wdBean';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { HttpUrlUtils } from 'wdNetwork/Index';
+import { postInteractAccentionOperateParams } from 'wdBean';
+import { PageRepository } from '../../repository/PageRepository';
+import { CommonConstants } from 'wdConstant/Index';
+
+/**
+ * 小视频横划卡
+ * Zh_Single_Row-02
+ */
+const TAG = 'Zh_Single_Row-02'
+
+@Entry
+@Component
+export struct ZhSingleRow02 {
+  @State compDTO: CompDTO = {
+    objectTitle: '大标题',
+    operDataList: [
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+    ]
+  } as CompDTO
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader(this.compDTO)
+      Row(){
+        // 列表内容
+        List() {
+          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+            CreatorItem({
+              item
+            })
+              .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
+          })
+        }
+        .listDirection(Axis.Horizontal)
+      }
+      .width(CommonConstants.FULL_WIDTH)
+      .height(208)
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      // right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+    .backgroundColor($r('app.color.white'))
+    .margin({ bottom: 8 })
+  }
+
+  @Builder
+  CompHeader(item: CompDTO) {
+    Row() {
+      Row() {
+        Image($r("app.media.redLine"))
+          .width(3)
+          .height(16)
+          .margin({ right: 4 })
+        Text(item.objectTitle)
+          .fontSize($r("app.float.font_size_17"))
+          .fontColor($r("app.color.color_222222"))
+          .fontWeight(600)
+      }
+
+      Row() {
+        Text("更多")
+          .fontSize($r("app.float.font_size_14"))
+          .fontColor($r("app.color.color_999999"))
+          .margin({ right: 1 })
+        Image($r("app.media.more"))
+          .width(14)
+          .height(14)
+          .onClick(() => {
+            // TODO 跳转的页面，定义的入参可能不合理。推荐id: 41
+            let params: Params = {
+              pageID: "1"
+            }
+            WDRouterRule.jumpWithPage(WDRouterPage.followListPage, params)
+          })
+      }
+      .padding({
+        right: $r('app.float.card_comp_pagePadding_lf'),
+      })
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .margin({ top: 8, bottom: 8 })
+    .width('100%')
+  }
+}
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
+
+@Component
+struct CreatorItem {
+  @Prop item: ContentDTO
+  @State rmhIsAttention: number = 0
+  build() {
+    ListItem() {
+      Column() {
+        Stack({ alignContent: Alignment.Bottom }) {
+          Image('')
+            .width(156)
+            .height(208)
+          Row()
+            .width(156)
+            .height(80)
+            .linearGradient({
+              direction: GradientDirection.Bottom,
+              colors: [[0xffffff, 0.0], [0x000000, 1.0]]
+            })
+            .opacity(0.3)
+          Text('这里显示卡片标题这里显示卡片标题这里显示卡片标题这里显示卡片标题这里显示卡片标题')
+            .fontColor(0xffffff)
+            .fontSize(14)
+            .maxLines(2)
+            .textOverflow({overflow: TextOverflow.Ellipsis})
+            .width(140)
+            .height(40)
+            .margin({bottom: 8})
+        }
+
+      }
+      .width(156)
+      .height(208)
+      .margin({ right: 11 })
+      .borderWidth(1)
+      .borderColor($r('app.color.color_EDEDED'))
+      .borderRadius($r('app.float.image_border_radius'))
+    }
+    .onClick(() => {
+      console.log('跳转到rmh');
+    })
+  }
+
+  /**
+   * 关注号主 TODO 这里后面需要抽离
+   */
+  handleAccention(item: ContentDTO, status: number) {
+    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
+    return
+    // 未登录，跳转登录
+    if (!HttpUrlUtils.getUserId()) {
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+
+    const params: postInteractAccentionOperateParams = {
+      attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
+      attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
+      attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
+      // userType: 1,
+      // userId: '1', // TODO 用户id需要从本地获取
+      status: status,
+    }
+    PageRepository.postInteractAccentionOperate(params).then(res => {
+      console.log(TAG, '关注号主==', JSON.stringify(res.data))
+      if (status === 1) {
+        this.rmhIsAttention = 0
+      } else {
+        this.rmhIsAttention = 1
+      }
+    })
+  }
+}

+import { CompDTO, ContentDTO, Params } from 'wdBean';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { HttpUrlUtils } from 'wdNetwork/Index';
+import { postInteractAccentionOperateParams } from 'wdBean';
+import { PageRepository } from '../../repository/PageRepository';
+import { CommonConstants } from 'wdConstant/Index';
+
+/**
+ * 精选评论卡
+ * Zh_Single_Row-06
+ */
+const TAG = 'Zh_Single_Row-06'
+
+@Entry
+@Component
+export struct ZhSingleRow06 {
+  @State compDTO: CompDTO = {
+    objectTitle: '大标题',
+    operDataList: [
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+    ]
+  } as CompDTO
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader(this.compDTO)
+      Row(){
+        // 列表内容
+        List() {
+          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+            CreatorItem({
+              item
+            })
+              .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
+          })
+        }
+        .listDirection(Axis.Horizontal)
+      }
+      .width(CommonConstants.FULL_WIDTH)
+      .height(208)
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      // right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+    .backgroundColor($r('app.color.white'))
+    .margin({ bottom: 8 })
+  }
+
+  @Builder
+  CompHeader(item: CompDTO) {
+    Row() {
+      Row() {
+        Image($r("app.media.icon_elite_comment"))
+          .width(24)
+          .height(24)
+          .margin({ right: 4 })
+        Text('精选评论')
+          .fontSize($r("app.float.font_size_17"))
+          .fontColor($r("app.color.color_222222"))
+          .fontWeight(600)
+      }
+
+      Row() {
+        Text("更多")
+          .fontSize($r("app.float.font_size_14"))
+          .fontColor($r("app.color.color_999999"))
+          .margin({ right: 1 })
+        Image($r("app.media.more"))
+          .width(14)
+          .height(14)
+          .onClick(() => {
+            // TODO 跳转的页面，定义的入参可能不合理。推荐id: 41
+            let params: Params = {
+              pageID: "1"
+            }
+            WDRouterRule.jumpWithPage(WDRouterPage.followListPage, params)
+          })
+      }
+      .padding({
+        right: $r('app.float.card_comp_pagePadding_lf'),
+      })
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .margin({ top: 8, bottom: 8 })
+    .width('100%')
+  }
+}
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
+
+@Component
+struct CreatorItem {
+  @Prop item: ContentDTO
+  @State rmhIsAttention: number = 0
+  build() {
+    ListItem() {
+      Column() {
+        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
+          Column() {
+            Row() {
+              Image('')
+                .width(20)
+                .height(20)
+                .margin({right: 4})
+                .border({width: 1, color: 0xcccccc, radius: 10})
+              Text('立志之间')
+                .fontColor(0x212228)
+                .fontSize(12)
+            }
+          }
+
+          Column() {
+            Row() {
+              Image($r('app.media.icon_like_no'))
+                .width(16)
+                .height(16)
+                .margin({right: 4})
+              Text('3835')
+                .fontSize(14)
+                .fontColor(0x999999)
+            }
+          }
+        }
+        .margin({top: 10, left: 10, right: 10, bottom: 8})
+
+        Text('就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，')
+          .maxLines(2)
+          .textOverflow({overflow: TextOverflow.Ellipsis})
+          .margin({left: 10, right: 10, bottom: 8})
+          .fontSize(17)
+          .fontColor(0x212228)
+          .lineHeight(25)
+
+        Row() {
+          Image('')
+            .width(66)
+            .height(44)
+            .borderRadius({topLeft: 3, topRight: 0, bottomLeft: 3, bottomRight: 0})
+          Text('原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制')
+            .margin({left: 8})
+            .width(172)
+            .maxLines(2)
+            .textOverflow({overflow: TextOverflow.Ellipsis})
+        }
+        .linearGradient({
+          direction: GradientDirection.Right,
+          colors: [[0xffffff, 0.0],[0xffffff, 0.8], [0xf9f9f9, 1.0]]
+        })
+      }
+      .width(276)
+      .height(150)
+      .margin({ right: 10 })
+      .borderWidth(1)
+      .borderColor($r('app.color.color_EDEDED'))
+      .borderRadius($r('app.float.image_border_radius'))
+      .backgroundColor(0xf9f9f9)
+    }
+    .onClick(() => {
+      console.log('跳转到rmh');
+    })
+  }
+
+  /**
+   * 关注号主 TODO 这里后面需要抽离
+   */
+  handleAccention(item: ContentDTO, status: number) {
+    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
+    return
+    // 未登录，跳转登录
+    if (!HttpUrlUtils.getUserId()) {
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+
+    const params: postInteractAccentionOperateParams = {
+      attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
+      attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
+      attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
+      // userType: 1,
+      // userId: '1', // TODO 用户id需要从本地获取
+      status: status,
+    }
+    PageRepository.postInteractAccentionOperate(params).then(res => {
+      console.log(TAG, '关注号主==', JSON.stringify(res.data))
+      if (status === 1) {
+        this.rmhIsAttention = 0
+      } else {
+        this.rmhIsAttention = 1
+      }
+    })
+  }
+}

+import { CompDTO, ContentDTO, Params } from 'wdBean';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { HttpUrlUtils } from 'wdNetwork/Index';
+import { postInteractAccentionOperateParams } from 'wdBean';
+import { PageRepository } from '../repository/PageRepository';
+import { CommonConstants } from 'wdConstant/Index';
+
+/**
+ * 精选评论卡
+ * Zh_Single_Row-06
+ */
+const TAG = 'Zh_Single_Row-06'
+
+@Entry
+@Component
+export struct ZhSingleRow06 {
+  @State compDTO: CompDTO = {} as CompDTO
+  @State list: Array<string> = ['社会', '三个字', '是四个字', '时事', '社会', '三个字', '是四个字', '时事']
+  @State activeIndexs: Array<number> = []
+
+  getItemWidth(index: number) {
+    if (index % 4 === 0 || index % 4 === 3) {
+      return 80
+    } else {
+      return 96
+    }
+  }
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader(this.compDTO)
+      Grid() {
+        ForEach(this.list, (item: string, index: number) => {
+          GridItem() {
+            Text(item)
+              .fontSize(14)
+              .fontColor(this.activeIndexs.includes(index) ? 0x222222 : 0x666666)
+              .fontWeight(this.activeIndexs.includes(index) ? 600 : 400)
+              .textAlign(TextAlign.Center)
+          }
+          .onClick(() => {
+            if (this.activeIndexs.includes(index)) {
+              const ind = this.activeIndexs.indexOf(index);
+              this.activeIndexs.splice(ind, 1)
+            } else {
+              this.activeIndexs.push(index)
+            }
+          })
+        })
+      }
+      .height(70)
+      .columnsTemplate('1fr 1fr 1fr 1fr')
+      .rowsTemplate('1fr 1fr')
+      .margin({bottom: 10})
+
+
+      Text('选中标签，为您推荐更多您感兴趣的内容')
+        .fontSize(12)
+        .fontColor(0xB0B0B0)
+        .textAlign(TextAlign.Center)
+        .margin({bottom: 10})
+
+      Row() {
+        Text('选好了')
+          .fontSize(14)
+          .fontColor(0x000000)
+          .width('100%')
+          .textAlign(TextAlign.Center)
+      }
+      .height(40)
+      .backgroundColor(0xf9f9f9)
+      .width('100%')
+      .borderRadius(3)
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+    .backgroundColor($r('app.color.white'))
+    .margin({ bottom: 8 })
+
+  }
+
+  @Builder
+  CompHeader(item: CompDTO) {
+    Row() {
+      Row() {
+        Image($r("app.media.icon_interest_ask"))
+          .width(24)
+          .height(24)
+          .margin({ right: 4 })
+        Text('以下是否有您感兴趣？')
+          .fontSize($r("app.float.font_size_17"))
+          .fontColor(0x000000)
+          .fontWeight(600)
+      }
+
+      Row() {
+        Image($r("app.media.close_button"))
+          .width(14)
+          .height(14)
+          .onClick(() => {
+          })
+      }
+      .padding({
+        right: $r('app.float.card_comp_pagePadding_lf'),
+      })
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .margin({ top: 8, bottom: 8 })
+    .width('100%')
+  }
+}
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
+
+@Component
+struct CreatorItem {
+  @Prop item: ContentDTO
+  @State rmhIsAttention: number = 0
+  build() {
+    ListItem() {
+      Column() {
+        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
+          Column() {
+            Row() {
+              Image('')
+                .width(20)
+                .height(20)
+                .margin({right: 4})
+                .border({width: 1, color: 0xcccccc, radius: 10})
+              Text('立志之间')
+                .fontColor(0x212228)
+                .fontSize(12)
+            }
+          }
+
+          Column() {
+            Row() {
+              Image($r('app.media.icon_like_no'))
+                .width(16)
+                .height(16)
+                .margin({right: 4})
+              Text('3835')
+                .fontSize(14)
+                .fontColor(0x999999)
+            }
+          }
+        }
+        .margin({top: 10, left: 10, right: 10, bottom: 8})
+
+        Text('就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，')
+          .maxLines(2)
+          .textOverflow({overflow: TextOverflow.Ellipsis})
+          .margin({left: 10, right: 10, bottom: 8})
+          .fontSize(17)
+          .fontColor(0x212228)
+          .lineHeight(25)
+
+        Row() {
+          Image('')
+            .width(66)
+            .height(44)
+            .borderRadius({topLeft: 3, topRight: 0, bottomLeft: 3, bottomRight: 0})
+          Text('原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制')
+            .margin({left: 8})
+            .width(172)
+            .maxLines(2)
+            .textOverflow({overflow: TextOverflow.Ellipsis})
+        }
+        .linearGradient({
+          direction: GradientDirection.Right,
+          colors: [[0xffffff, 0.0],[0xffffff, 0.8], [0xf9f9f9, 1.0]]
+        })
+      }
+      .width(276)
+      .height(150)
+      .margin({ right: 10 })
+      .borderWidth(1)
+      .borderColor($r('app.color.color_EDEDED'))
+      .borderRadius($r('app.float.image_border_radius'))
+      .backgroundColor(0xf9f9f9)
+    }
+    .onClick(() => {
+      console.log('跳转到rmh');
+    })
+  }
+
+  /**
+   * 关注号主 TODO 这里后面需要抽离
+   */
+  handleAccention(item: ContentDTO, status: number) {
+    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
+    return
+    // 未登录，跳转登录
+    if (!HttpUrlUtils.getUserId()) {
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+
+    const params: postInteractAccentionOperateParams = {
+      attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
+      attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
+      attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
+      // userType: 1,
+      // userId: '1', // TODO 用户id需要从本地获取
+      status: status,
+    }
+    PageRepository.postInteractAccentionOperate(params).then(res => {
+      console.log(TAG, '关注号主==', JSON.stringify(res.data))
+      if (status === 1) {
+        this.rmhIsAttention = 0
+      } else {
+        this.rmhIsAttention = 1
+      }
+    })
+  }
+}

@@ -447,5 +447,8 @@ export struct PaperSingleColumn999CardView {
     .backgroundColor(Color.White)
     .backgroundColor(Color.White)
     .margin({ bottom: 5, left: 12, right: 12 })
     .margin({ bottom: 5, left: 12, right: 12 })
     .borderRadius(4)
     .borderRadius(4)
+    .onClick(()=>{
+      ProcessUtils.processPage(this.item)
+    })
   }
   }
 }
 }

+/**
+ * 频道骨架屏
+ */
+
+@Entry
+@Component
+export struct channelSkeleton {
+  @State quantity: Array<number> = [1, 2, 3,]
+
+  build() {
+    Row() {
+      Column() {
+
+        ForEach(this.quantity, () => {
+          Row() {
+            Column() {
+              textArea('60%', 12)
+              textArea('60%', 12)
+              textArea('40%', 12)
+            }
+            .RightStyle()
+
+
+            Column() {
+              textArea('35%', 78)
+            }
+            .margin({ right: 0 })
+          }
+          .height(100)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .SkeletonStyle()
+        })
+
+
+        Column() {
+          textArea('100%', 204)
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .SkeletonStyle()
+
+        ForEach([1, 2], () => {
+          Row() {
+            Column() {
+              textArea('60%', 12)
+              textArea('60%', 12)
+              textArea('40%', 12)
+            }
+            .RightStyle()
+
+            Column() {
+              textArea('35%', 78)
+            }
+            .margin({ right: 0 })
+          }
+          .height(100)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .SkeletonStyle()
+        })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+
+@Builder
+function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
+  Row()
+    .width(width)
+    .height(height)
+    .backgroundColor('#FFF2F3F4')
+    .margin({ top: 10 })
+  // .borderRadius(5)
+}
+
+// 全局公共样式
+@Styles
+function SkeletonStyle() {
+  .padding({ right: 18, left: 18 })
+  .width('100%')
+  .margin({ top: 10 })
+}
+
+@Extend(Column)
+function RightStyle() {
+  .alignItems(HorizontalAlign.Start)
+  .justifyContent(FlexAlign.SpaceAround)
+  .height('100%')
+}
+

+/**
+ * 详情骨架屏
+ */
+
+@Entry
+@Component
+export struct detailedSkeleton {
+  @State quantity: Array<number> = [1, 2, 3, 4, 5, 6, 7]
+
+  build() {
+    Row() {
+      Column() {
+        Column() {
+          textArea('100%', 20)
+          textArea('50%', 20)
+        }
+        .SkeletonStyle()
+        .alignItems(HorizontalAlign.Start)
+
+        Column() {
+          textArea('40%', 12)
+          textArea('40%', 12)
+        }
+        .SkeletonStyle()
+        .alignItems(HorizontalAlign.Start)
+
+
+        Column() {
+          textArea('100%', 12)
+          textArea('100%', 12)
+          textArea('90%', 12)
+        }
+        .SkeletonStyle()
+        .alignItems(HorizontalAlign.Start)
+
+        Column() {
+          textArea('100%', 180)
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .SkeletonStyle()
+
+        ForEach(this.quantity, () => {
+          Column() {
+            textArea('100%', 12)
+            textArea('90%', 12)
+          }
+          .SkeletonStyle()
+          .alignItems(HorizontalAlign.Start)
+        })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+
+@Builder
+function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
+  Row()
+    .width(width)
+    .height(height)
+    .backgroundColor('#FFF2F3F4')
+    .margin({ top: 10 })
+  // .borderRadius(5)
+}
+
+// 全局公共样式
+@Styles
+function SkeletonStyle() {
+  .padding({ right: 18, left: 18 })
+  .width('100%')
+  .margin({ top: 10 })
+}

+/**
+ * 电子报骨架屏
+ */
+
+@Entry
+@Component
+export struct detailedSkeleton {
+  @State quantity: Array<number> = [1, 2, 3,]
+
+  build() {
+    Row() {
+      Column() {
+        Row() {
+          Column() {
+            Row() {
+              Column() {
+                Image($rawfile('apph5/image/peopleSeleton.svg')).width('100%').height(47)// 后缀名不能省略
+                  .interpolation(ImageInterpolation.High)
+                textArea('100%', 9)
+              }.width('72.00%').alignItems(HorizontalAlign.Start).margin({ right: 5 })
+
+              Column() {
+                textArea(27, 25)
+                textArea(27, 4)
+                textArea(27, 20)
+              }
+              .border({ width: 1 })
+              .borderColor('#FFF5F5F5')
+              .padding({ right: 2, left: 2, top: 0, bottom: 2 })
+              .justifyContent(FlexAlign.SpaceEvenly)
+              .alignItems(HorizontalAlign.Start)
+            }
+            .justifyContent(FlexAlign.SpaceBetween)
+            .width('98%')
+
+            // .height(64)
+
+            BoxAndLine().width('100%')
+            BoxAndBox({ firstBoxNumber: '65%', boxHeight: 100 })
+            Column() {
+              textArea('100%', 79)
+            }
+
+            BoxAndBox({ firstBoxNumber: '30%', boxHeight: 51 })
+
+          }.width('45%')
+          .opacity(1)
+          .align(Alignment.Start)
+          .alignItems(HorizontalAlign.Start)
+
+          Column() {
+            Column() {
+              textArea('100%', 13)
+            }.width('100%')
+
+            BoxAndLine()
+
+            Column() {
+              textArea('95%', 126)
+            }
+
+            Column() {
+              textArea('95%', 13)
+            }
+
+            Row() {
+              Column() {
+                textArea('100%', 30)
+              }.width('50%').margin({ right: 5 })
+
+              Column() {
+                textArea('100%', 30)
+              }.layoutWeight(1)
+            }.width('95%').justifyContent(FlexAlign.SpaceBetween)
+
+            Column() {
+              textArea('95%', 100)
+            }
+          }.width('45%')
+        }.justifyContent(FlexAlign.SpaceBetween)
+      }
+      .width('100%')
+
+    }
+    .height('100%')
+  }
+}
+
+@Component
+struct BoxAndLine {
+  build() {
+    Column() {
+      textArea('100%', 130)
+      textArea('100%', 13)
+      textArea('80%', 13)
+    }.width('98%').alignItems(HorizontalAlign.Start)
+  }
+}
+
+
+@Component
+struct BoxAndBox {
+  @Prop firstBoxNumber: number | Resource | string
+  @Prop boxHeight: number | Resource | string
+
+  build() {
+    Row() {
+      Column() {
+        textArea('100%', this.boxHeight)
+      }.width(this.firstBoxNumber).margin({ right: 5 })
+
+      Column() {
+        textArea('100%', this.boxHeight)
+      }.layoutWeight(1)
+    }.width('100%').justifyContent(FlexAlign.SpaceBetween)
+  }
+}
+
+@Builder
+function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
+  Row()
+    .width(width)
+    .height(height)
+    .backgroundColor('#FFF5F5F5')
+    .margin({ top: 5 })
+  // .borderRadius(5)
+}
+
+// 全局公共样式
+@Styles
+function SkeletonStyle() {
+  .padding({ right: 14, left: 14 })
+  .width('100%')
+  .margin({ top: 5 })
+}
+
+@Extend(Column)
+function RightStyle() {
+  .alignItems(HorizontalAlign.Start)
+  .justifyContent(FlexAlign.SpaceAround)
+  .height('100%')
+}
+

-import { CommonConstants } from 'wdConstant'
-import { CompDTO } from 'wdBean'
+import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
+import { WDRouterRule } from 'wdRouter/Index'
+import { Logger } from 'wdKit/Index'
+import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
 
 
 @Component
 @Component
 export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
 export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
@@ -57,5 +59,23 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
     })
     })
     .backgroundColor($r("app.color.white"))
     .backgroundColor($r("app.color.white"))
     .margin({ bottom: 8 })
     .margin({ bottom: 8 })
+    .onClick(()=>{
+      this.gotoLive(this.compDTO?.operDataList[0])
+    })
+  }
+  gotoLive(content: ContentDTO) {
+    let taskAction: Action = {
+      type: 'JUMP_DETAIL_PAGE',
+      params: {
+        detailPageType: 2,
+        contentID: content?.objectId,
+        extra: {
+          relType: content?.relType,
+          relId: content?.relId,
+        } as ExtraDTO
+      } as Params,
+    };
+    WDRouterRule.jumpWithAction(taskAction)
+    Logger.debug(`gotoLive, ${content.objectId}`);
   }
   }
 }
 }

@@ -4,6 +4,9 @@ import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
 import { CommonConstants } from 'wdConstant'
 import { CommonConstants } from 'wdConstant'
 import { WDRouterRule } from 'wdRouter/Index'
 import { WDRouterRule } from 'wdRouter/Index'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
+import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
+import { Logger } from 'wdKit/Index'
+
 @Component
 @Component
 export struct LiveHorizontalCardComponent {
 export struct LiveHorizontalCardComponent {
   @State compDTO: CompDTO = {} as CompDTO
   @State compDTO: CompDTO = {} as CompDTO
@@ -79,6 +82,7 @@ export struct LiveHorizontalCardComponent {
             .onClick(() => {
             .onClick(() => {
               if (item.objectType != '0') {
               if (item.objectType != '0') {
                 console.log(item.objectId)
                 console.log(item.objectId)
+                this.gotoLive(item)
               }
               }
             })
             })
           })
           })
@@ -96,4 +100,19 @@ export struct LiveHorizontalCardComponent {
     })
     })
     .backgroundColor($r("app.color.white"))
     .backgroundColor($r("app.color.white"))
   }
   }
+  gotoLive(content: ContentDTO) {
+    let taskAction: Action = {
+      type: 'JUMP_DETAIL_PAGE',
+      params: {
+        detailPageType: 2,
+        contentID: content?.objectId,
+        extra: {
+          relType: content?.relType,
+          relId: content?.relId,
+        } as ExtraDTO
+      } as Params,
+    };
+    WDRouterRule.jumpWithAction(taskAction)
+    Logger.debug(`gotoLive, ${content.objectId}`);
+  }
 }
 }

 // 视频直播直播预约
 // 视频直播直播预约
 import { LiveHorizontalCardForOneComponent } from './LiveHorizontalCardForOneComponent'
 import { LiveHorizontalCardForOneComponent } from './LiveHorizontalCardForOneComponent'
-import { CompDTO, ContentDTO } from 'wdBean'
+import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
 import { CommonConstants } from 'wdConstant'
 import { CommonConstants } from 'wdConstant'
-import { StringUtils } from 'wdKit/Index'
+import { Logger, StringUtils } from 'wdKit/Index'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
+import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
+import { WDRouterRule } from 'wdRouter/Index'
+
 @Component
 @Component
 export struct LiveHorizontalReservationComponent {
 export struct LiveHorizontalReservationComponent {
   @State compDTO: CompDTO = {} as CompDTO
   @State compDTO: CompDTO = {} as CompDTO
@@ -70,6 +73,7 @@ export struct LiveHorizontalReservationComponent {
             .onClick(() => {
             .onClick(() => {
               if (item.objectType != '0') {
               if (item.objectType != '0') {
                 console.log(item.objectId)
                 console.log(item.objectId)
+                this.gotoLive(item)
               }
               }
             })
             })
           })
           })
@@ -87,4 +91,20 @@ export struct LiveHorizontalReservationComponent {
     })
     })
     .backgroundColor($r("app.color.white"))
     .backgroundColor($r("app.color.white"))
   }
   }
+
+  gotoLive(content: ContentDTO) {
+    let taskAction: Action = {
+      type: 'JUMP_DETAIL_PAGE',
+      params: {
+        detailPageType: 2,
+        contentID: content?.objectId,
+        extra: {
+          relType: content?.relType,
+          relId: content?.relId,
+        } as ExtraDTO
+      } as Params,
+    };
+    WDRouterRule.jumpWithAction(taskAction)
+    Logger.debug(`gotoLive, ${content.objectId}`);
+  }
 }
 }

@@ -37,6 +37,10 @@
       "value": "18fp"
       "value": "18fp"
     },
     },
     {
     {
+      "name": "font_size_18",
+      "value": "18fp"
+    },
+    {
       "name": "font_size_24",
       "name": "font_size_24",
       "value": "24fp"
       "value": "24fp"
     },
     },
@@ -49,6 +53,10 @@
       "value": "36fp"
       "value": "36fp"
     },
     },
     {
     {
+      "name": "margin_4_negative",
+      "value": "-4vp"
+    },
+    {
       "name": "main_margin",
       "name": "main_margin",
       "value": "14vp"
       "value": "14vp"
     },
     },
@@ -77,6 +85,46 @@
       "value": "160vp"
       "value": "160vp"
     },
     },
     {
     {
+      "name": "margin_80",
+      "value": "80vp"
+    },
+    {
+      "name": "margin_2",
+      "value": "2vp"
+    },
+    {
+      "name": "margin_5",
+      "value": "5vp"
+    },
+    {
+      "name": "margin_7",
+      "value": "7vp"
+    },
+    {
+      "name": "margin_20",
+      "value": "20vp"
+    },
+    {
+      "name": "margin_24",
+      "value": "24vp"
+    },
+    {
+      "name": "margin_25",
+      "value": "25vp"
+    },
+    {
+      "name": "margin_28",
+      "value": "28vp"
+    },
+    {
+      "name": "margin_48",
+      "value": "48vp"
+    },
+    {
+      "name": "margin_60",
+      "value": "60vp"
+    },
+    {
       "name": "single_row_03_img_height",
       "name": "single_row_03_img_height",
       "value": "88vp"
       "value": "88vp"
     },
     },
@@ -133,6 +181,10 @@
       "value": "24vp"
       "value": "24vp"
     },
     },
     {
     {
+      "name": "margin_6",
+      "value": "6vp"
+    },
+    {
       "name": "margin_16",
       "name": "margin_16",
       "value": "16vp"
       "value": "16vp"
     },
     },
@@ -141,6 +193,14 @@
       "value": "20vp"
       "value": "20vp"
     },
     },
     {
     {
+      "name": "margin_32",
+      "value": "32vp"
+    },
+    {
+      "name": "margin_36",
+      "value": "36vp"
+    },
+    {
       "name": "vp_3",
       "name": "vp_3",
       "value": "3vp"
       "value": "3vp"
     },
     },
@@ -167,6 +227,10 @@
     {
     {
       "name": "card_comp_pagePadding_tb",
       "name": "card_comp_pagePadding_tb",
       "value": "14fp"
       "value": "14fp"
+    },
+    {
+      "name": "margin_116",
+      "value": "116vp"
     }
     }
   ]
   ]
 }
 }

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713249268044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2925" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M884.736 546.88c-1.792-5.12-7.04-9.728-12.8-7.232-3.2 1.344-10.496 12.544-11.072 9.6-2.752-14.08 16.704-18.048 19.52-25.344 3.008-8-4.224-11.52-10.24-13.888a47.232 47.232 0 0 1-16.192-11.072c-4.928-4.992-17.024-12.352-21.568-3.2-1.28 4.352-0.512 12.608-2.176 17.92-1.92 6.272-9.088 6.72-13.44 11.328-6.208 6.848 0.64 9.216 4.8 14.464 3.84 4.992 1.216 40.384-5.248 52.48-3.2 6.016-86.336 72.064-100.032 75.52-15.744 3.84-15.68 20.48-8.96 29.696 8.576 11.712 27.008 6.272 36.16-0.448 5.76-4.352 44.288-45.056 53.44-53.44 3.712-3.392 18.688-22.976 19.84-10.432a46.912 46.912 0 0 1-1.728 16.96c-1.856 5.888-5.568 14.848-5.12 21.248 0.768 10.24 19.2 24.32 28.8 20.096 6.208-2.816 6.72-12.096 6.08-18.816-0.576-7.04 0.768-49.024 2.24-62.72a46.08 46.08 0 0 1 5.952-20.8c5.248-8.768 36.928-27.072 31.744-41.92z m-226.88 26.624c-2.816 6.08-14.272-3.84-17.152-6.528-2.88-2.56-6.464-4.48-6.016-8.896 0.576-4.48 5.76-5.12 5.76-5.12 1.792-0.32 17.792-0.96 18.88 1.856a55.296 55.296 0 0 1-1.472 18.688z m14.72-97.28c-10.816-1.408-23.296 9.472-31.616 14.72-4.096 2.56-27.52 14.4-24 20.48 2.432 4.096 17.024 0.576 21.76-0.512 13.44-3.072 20.48-12.032 23.872-9.792 2.88 1.92 1.024 32.64-4.48 32.064-12.032-1.152-19.2-10.624-32.064-15.872-3.968-1.6-11.776-4.608-9.088 2.624 0.768 2.176 3.648 5.056 4.672 7.168 2.368 4.8 4.48 21.504 2.368 25.152-4.224 6.976-8.704-5.376-9.792-8.064-2.048-5.12-3.328-10.368-5.12-15.552-1.536-4.736-5.568-16.96-10.944-16.256-6.208 0.832-1.664 27.968-2.816 33.728-3.84 19.456-5.504 25.216-6.144 37.952-0.512 10.304 0 27.392 11.84 30.528 15.808 4.224 18.048-9.344 19.456-18.56 0.32-2.176 0.832-6.784 1.92-8.64 1.664-2.752 3.84-3.2 5.888-0.512 1.664 2.304 0.96 5.696 3.456 7.936 2.496 2.304 5.312 1.92 8.576 2.56 5.056 0.96 11.328-0.96 14.464 3.84 3.2 5.12 2.176 10.56 8.32 14.016 13.44 7.36 19.84-7.168 20.864-16.896 1.216-11.648 1.792-22.592 2.368-34.176 0.576-11.712 1.088-24.448 4.096-35.776a244.48 244.48 0 0 1 5.248-17.024 22.72 22.72 0 0 0 0.768-16.256c-3.776-9.728-19.648-18.368-23.936-18.88z m-165.312 2.304c4.48-4.16 12.032-9.664 10.88-16.32-4.352-25.92-44.672-8.384-59.968-0.768-22.208 11.136-11.52 5.824-50.432 24.96-5.888 2.816-3.2 7.04-2.304 9.6 3.2 9.216 17.664 13.632 23.808 9.728 5.12-3.264 54.08-37.76 56.704-34.112 4.032 5.504-20.8 24.512-32.32 29.056-5.12 2.048-13.184 9.408-14.784 15.04a12.992 12.992 0 0 0 0.192 8.96l-0.64-0.256c-1.856 0.64-6.848-0.192-8.512 0.96-1.536 1.024 1.728 20.928 8.128 33.28 2.304 4.352 4.288 8.32-1.088 11.008-6.208 3.072-17.088 15.68-4.928 16.832 2.624 0.256 5.44 0.384 7.68-0.896 1.728-1.024 4.992-2.944 7.488-2.24 2.56 0.768 4.736 8.32 6.4 10.944 5.312 8.064 24.576 43.328 33.728 45.632 8 2.048 21.312-1.152 24-9.984 1.408-4.416 2.56-36.864 2.496-41.664-0.064-4.288 0.256-9.856-0.896-13.76-1.088-3.648-3.84-9.152-8.448-7.872-4.928 1.28-5.184 8.832-6.016 12.8-1.024 4.8-2.24 26.304-7.232 26.368-3.52 0-20.16-26.624-22.016-30.336-1.92-3.776-3.52-7.36-0.96-11.008 4.48-6.464 19.2-14.976 11.264-23.68-6.272-6.784-20.48-4.992-22.592 3.584-0.64 2.56 0.896 12.608-4.416 8.96-3.072-2.112-8.704-17.088-6.656-19.2 0.832-0.832 4.224-1.472 7.296-1.792h3.2c10.88-0.96 26.496-6.72 29.952-15.296 1.152-2.88 2.56-6.592 0.064-8.576-1.984-1.664-2.624-1.92-3.2-4.16-0.64-2.688 19.52-21.504 24.128-25.792z m472.064 56.128c16.384-7.808 49.408-7.424 44.096-39.04-1.088-6.528-4.352-20.032-13.568-19.52-8 0.448-14.272 12.8-17.792 18.816-8.96 15.36-26.496 30.4-38.912 43.264-15.68 16.256-41.088 60.992-43.84 60.992-7.296-0.064 3.264-29.248 4.992-33.536 10.176-25.28 42.88-104.256 47.808-113.28 9.152-16.832 15.808-25.792 26.112-41.664 20.352-31.36-14.848-30.336-14.848-30.336-9.92 0.768-16.256 7.296-21.952 11.776-6.272 4.8-12.8 8.064-19.712 11.904-6.784 3.84-15.36 7.872-9.472 16.128 4.992 7.04 10.752 7.744 18.24 8.512a38.72 38.72 0 0 0 7.36 0.512c-1.216 7.232-25.28 50.112-30.848 66.752-11.392 34.24-20.224 98.368-36.8 128a29.888 29.888 0 0 0-3.392 23.68c2.112 6.912 14.272 11.52 21.952 5.376 6.144-4.864 6.976-29.312 28.48-67.072 6.016-10.496 9.6-6.144 14.592 3.584 4.544 8.768 8.512 31.104 14.592 39.296 19.52 26.176 41.408 18.688 44.352 9.472 4.48-13.632-3.84-23.872-9.792-29.824-16.896-16.704-59.712-28.992-49.152-48 7.872-14.08 28.544-21.504 37.504-25.792zM260.544 386.816c-0.576-9.856-6.912-17.472-16.064-22.72-4.288-2.496-19.52-9.664-23.04-6.144l1.472-0.32c-6.016 2.688-1.92 21.312-2.496 26.688-1.024 9.984-6.336 22.208-9.792 31.872-7.232 20.032-13.888 37.824-21.056 57.856a576.64 576.64 0 0 1-26.944 61.312c-9.984 19.84-19.712 40.256-29.888 59.84-5.76 11.2-11.84 22.272-19.2 32.32-6.848 9.152-14.464 20.352-22.784 28.416-6.848 6.592-15.872 12.8-24.512 16.064-10.496 4.032-20.032 4.864-30.72 6.912-4.928 0.896-26.24 2.304-31.04 4.096-13.696 4.992 7.872 11.648 13.952 11.584 21.76 0 44.992 1.536 64.64-5.568 18.944-6.912 35.84-21.12 47.936-36.736 13.44-17.344 37.632-61.76 46.976-81.216 11.52-23.808 58.24-112.64 62.912-125.312 6.08-16.64 20.544-41.408 19.648-59.008z m550.144 102.4a24.512 24.512 0 0 0 16.96-1.472 25.6 25.6 0 0 1 16.448-2.176c4.736 0.64 8.832 1.28 13.76 0.448 6.08-0.96 7.808-2.112 12.8-5.12 4.864-2.944 9.408-2.496 14.784-3.328a20.8 20.8 0 0 0 11.584-6.912c6.784-7.04 12.16-18.624 3.648-25.728-3.968-3.328-15.552-9.664-27.712-4.736a265.216 265.216 0 0 0-25.664 16.64c-9.728 6.912-21.568 9.472-31.488 15.36-3.84 2.24-9.152 5.248-11.648 8.96-3.264 4.672 1.92 6.784 6.528 8.064zM437.952 595.712c-11.008-4.672-14.912 2.624-21.632 6.464-3.264-5.12 0.128-12.416 0.96-17.856 0.96-6.4 6.72-38.4-17.92-51.008-1.984-1.024-5.568-1.472-5.568 1.408l-2.24 18.24c-5.632 43.2-9.728 53.76-10.112 60.864-0.256 6.848-0.704 16.576 3.712 21.952 3.648 4.288 9.472 7.488 15.488 5.824 5.76-1.472 24.128-17.472 29.056-22.208 5.056-4.8 19.008-19.2 8.256-23.68z m378.88-166.208c4.48 1.472 21.312 1.344 19.008 7.68-1.344 3.776-6.272 6.4-9.088 9.088-1.664 1.664-8.448 7.872-7.68 10.112 1.408 4.544 21.376-7.616 25.344-10.624 4.288-3.328 8.704-6.208 13.696-8.448 4.928-2.304 18.56-7.168 28.736-15.36 10.048-8.256 45.312-69.312 45.888-74.304 1.152-10.368-10.432-23.488-20.928-27.456-4.48-1.728-9.792 7.808-11.072 10.624-2.304 5.12-15.552 30.72-19.712 39.36a61.504 61.504 0 0 1-19.136 23.872c-8.96 6.08-18.56 8.896-28.8 11.904-5.248 1.6-26.688 6.656-28.8 9.792-2.88 4.224 8.192 12.352 12.544 13.76z m-489.088 219.136c-5.248 1.536-35.2 8.96-40.512 7.808-28.928-5.888-30.272-32.832-79.04-75.904-1.664-1.536-19.584-12.032-18.176-4.48 0 0 15.424 26.624 18.816 31.552 3.712 5.312 20.032 42.88 22.592 48.192 2.432 5.056 4.992 10.368 7.68 15.232 5.44 9.344 15.68 22.272 27.072 24.832 5.76 1.28 24.512-4.352 30.144-7.104 11.328-5.632 22.528-12.8 32.192-21.312 3.84-3.328 8.64-7.744 10.112-12.672 2.304-7.808-5.248-7.808-10.88-6.144z" p-id="2926" fill="#f6f6f6"></path></svg>

@@ -13,6 +13,7 @@
     "wdKit": "file:../../commons/wdKit",
     "wdKit": "file:../../commons/wdKit",
     "wdBean": "file:../../features/wdBean",
     "wdBean": "file:../../features/wdBean",
     "wdConstant": "file:../../commons/wdConstant",
     "wdConstant": "file:../../commons/wdConstant",
-    "wdDetailPlayApi": "file:../../features/wdDetailPlayApi"
+    "wdDetailPlayApi": "file:../../features/wdDetailPlayApi",
+    "wdRouter": "file:../../commons/wdRouter"
   }
   }
 }
 }

@@ -10,11 +10,12 @@ import router from '@ohos.router';
 export struct DetailPlayLivePage {
 export struct DetailPlayLivePage {
   TAG: string = 'DetailPlayLivePage';
   TAG: string = 'DetailPlayLivePage';
   liveViewModel: LiveViewModel = new LiveViewModel()
   liveViewModel: LiveViewModel = new LiveViewModel()
-  @State relId: string = '500005302448'
-  @State contentId: string = '20000016340'
-  @State relType: string = '1'
+  @State relId: string = ''
+  @State contentId: string = ''
+  @State relType: string = ''
   @Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
   @Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
   @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
   @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
+  @State tabs: string[] = ['直播间', '大家聊']
 
 
   aboutToAppear(): void {
   aboutToAppear(): void {
     //https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340
     //https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340
@@ -30,7 +31,7 @@ export struct DetailPlayLivePage {
   build() {
   build() {
     Column() {
     Column() {
       TopPlayComponent()
       TopPlayComponent()
-      TabComponent()
+      TabComponent({ tabs: this.tabs })
       BottomComponent()
       BottomComponent()
     }
     }
     .height('100%')
     .height('100%')
@@ -46,6 +47,9 @@ export struct DetailPlayLivePage {
       .then(
       .then(
         (data) => {
         (data) => {
           if (data.length > 0) {
           if (data.length > 0) {
+            if (data[0].liveInfo?.liveState == 'wait') {
+              this.tabs = ['简介', '直播间', '大家聊']
+            }
             this.liveDetailsBean = data[0]
             this.liveDetailsBean = data[0]
           }
           }
         },
         },

@@ -170,10 +170,10 @@ export class LiveModel {
    * @param isSubscribe
    * @param isSubscribe
    * @returns
    * @returns
    */
    */
-  liveAppointment(relationId: string, mLiveId: string, isSubscribe: boolean) {
+  liveAppointment(relationId: string, liveId: string, isSubscribe: boolean) {
     let params: Record<string, string> = {};
     let params: Record<string, string> = {};
     params['relationId'] = relationId
     params['relationId'] = relationId
-    params['liveId'] = mLiveId
+    params['liveId'] = liveId
     params['isSubscribe'] = `${isSubscribe}`
     params['isSubscribe'] = `${isSubscribe}`
     let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
     let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
     return new Promise<ResponseDTO<string>>((success, fail) => {
     return new Promise<ResponseDTO<string>>((success, fail) => {

@@ -67,9 +67,9 @@ export class LiveViewModel {
   }
   }
 
 
   //直播预约/取消预约
   //直播预约/取消预约
-  liveAppointment(relationId: string, mLiveId: string, isSubscribe: boolean) {
+  liveAppointment(relationId: string, liveId: string, isSubscribe: boolean) {
     return new Promise<ResponseDTO<string>>((success, fail) => {
     return new Promise<ResponseDTO<string>>((success, fail) => {
-      this.liveModel.liveAppointment(relationId, mLiveId, isSubscribe).then((data) => {
+      this.liveModel.liveAppointment(relationId, liveId, isSubscribe).then((data) => {
         success(data)
         success(data)
       }).catch((message: string) => {
       }).catch((message: string) => {
         fail(message)
         fail(message)

@@ -2,10 +2,12 @@ import font from '@ohos.font'
 import { LiveDetailsBean } from 'wdBean/Index'
 import { LiveDetailsBean } from 'wdBean/Index'
 import { DateTimeUtils, StringUtils } from 'wdKit/Index'
 import { DateTimeUtils, StringUtils } from 'wdKit/Index'
 import { LiveViewModel } from '../../viewModel/LiveViewModel'
 import { LiveViewModel } from '../../viewModel/LiveViewModel'
+import { HttpUrlUtils } from 'wdNetwork/Index'
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
 
 
 @Component
 @Component
 export struct LiveCountdownComponent {
 export struct LiveCountdownComponent {
-  @Consume @Watch('calculateDataStatus') liveDetailsBean: LiveDetailsBean
+  @State liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
   textTimerController: TextTimerController = new TextTimerController()
   textTimerController: TextTimerController = new TextTimerController()
   @State format: string = 'HH:mm:ss'
   @State format: string = 'HH:mm:ss'
   @State month: string = ''
   @State month: string = ''
@@ -26,7 +28,8 @@ export struct LiveCountdownComponent {
     })
     })
     setTimeout(() => {
     setTimeout(() => {
       this.textTimerController.start()
       this.textTimerController.start()
-    }, 2000)
+    }, 0)
+    this.updateData()
   }
   }
 
 
   build() {
   build() {
@@ -100,7 +103,7 @@ export struct LiveCountdownComponent {
 
 
   @Builder
   @Builder
   showAppointment() {
   showAppointment() {
-    Text('我要预约')
+    Text(this.isAppointmentLive ? '取消预约' : '我要预约')
       .width('100%')
       .width('100%')
       .height(42)
       .height(42)
       .textAlign(TextAlign.Center)
       .textAlign(TextAlign.Center)
@@ -113,13 +116,17 @@ export struct LiveCountdownComponent {
       .border({ radius: 4 })
       .border({ radius: 4 })
       .backgroundColor(this.isAppointmentLive ? '#CCCCCC' : '#ED2800')
       .backgroundColor(this.isAppointmentLive ? '#CCCCCC' : '#ED2800')
       .onClick(() => {
       .onClick(() => {
+        if (!HttpUrlUtils.getUserId()) {
+          WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+          return
+        }
         if (this.liveDetailsBean && this.liveDetailsBean.liveInfo) {
         if (this.liveDetailsBean && this.liveDetailsBean.liveInfo) {
           this.liveAppointment()
           this.liveAppointment()
         }
         }
       })
       })
   }
   }
 
 
-  calculateDataStatus() {
+  updateData() {
     if (!this.liveDetailsBean) {
     if (!this.liveDetailsBean) {
       return
       return
     }
     }

-import { LiveDetailsBean } from 'wdBean/Index'
 import { TabChatComponent } from './TabChatComponent'
 import { TabChatComponent } from './TabChatComponent'
 import { TabInfoComponent } from './TabInfoComponent'
 import { TabInfoComponent } from './TabInfoComponent'
 import { TabLiveComponent } from './TabLiveComponent'
 import { TabLiveComponent } from './TabLiveComponent'
@@ -9,7 +8,7 @@ export struct TabComponent {
   @State selectedFontColor: string = '#222222'
   @State selectedFontColor: string = '#222222'
   @State currentIndex: number = 0
   @State currentIndex: number = 0
   private controller: TabsController = new TabsController()
   private controller: TabsController = new TabsController()
-  tabs: string[] = ['简介', '直播间', '大家聊']
+  @Prop tabs: string[] = []
 
 
   aboutToAppear(): void {
   aboutToAppear(): void {
 
 
@@ -19,12 +18,21 @@ export struct TabComponent {
     Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
     Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
       ForEach(this.tabs, (item: string, index: number) => {
       ForEach(this.tabs, (item: string, index: number) => {
         TabContent() {
         TabContent() {
-          if (0 == index) {
-            TabInfoComponent()
-          } else if (1 == index) {
-            TabLiveComponent()
-          } else {
-            TabChatComponent()
+          if (this.tabs.length == 3) {
+            if (0 == index) {
+              TabInfoComponent()
+            } else if (1 == index) {
+              TabLiveComponent()
+            } else {
+              TabChatComponent()
+            }
+          }
+          else {
+            if (0 == index) {
+              TabLiveComponent()
+            } else {
+              TabChatComponent()
+            }
           }
           }
         }.tabBar(this.tabBuilder(index, item))
         }.tabBar(this.tabBuilder(index, item))
         .backgroundColor('#F5F5F5')
         .backgroundColor('#F5F5F5')

@@ -12,7 +12,7 @@ export struct TabInfoComponent {
     Column() {
     Column() {
       this.showLiveTitle()
       this.showLiveTitle()
       this.showLiveDetails()
       this.showLiveDetails()
-      LiveCountdownComponent()
+      LiveCountdownComponent({liveDetailsBean:this.liveDetailsBean})
     }.margin({
     }.margin({
       top: 13,
       top: 13,
       left: 16,
       left: 16,

@@ -8,12 +8,16 @@ import { TabLiveItemComponent } from './TabLiveItemComponent'
 export struct TabLiveComponent {
 export struct TabLiveComponent {
   liveViewModel: LiveViewModel = new LiveViewModel()
   liveViewModel: LiveViewModel = new LiveViewModel()
   @State liveList: Array<LiveRoomItemBean> = []
   @State liveList: Array<LiveRoomItemBean> = []
-  @Consume liveDetailsBean: LiveDetailsBean
+  @Consume @Watch('updateDate') liveDetailsBean: LiveDetailsBean
 
 
-  aboutToAppear(): void {
+  updateDate() {
     this.getLiveList()
     this.getLiveList()
   }
   }
 
 
+  aboutToAppear(): void {
+
+  }
+
   build() {
   build() {
     Stack() {
     Stack() {
       if (this.liveList.length == 0) {
       if (this.liveList.length == 0) {

@@ -51,14 +51,18 @@ export struct PlayUIComponent {
           .margin({
           .margin({
             right: 10
             right: 10
           })
           })
-        Text(this.liveDetailsBean.newsTitle)
-          .maxLines(1)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
-          .fontSize('16fp')
-          .fontWeight(500)
-          .fontColor(Color.White)
-          .textAlign(TextAlign.Start)
-          .layoutWeight(1)
+        if (this.liveDetailsBean.liveInfo?.liveState != 'wait') {
+          Text(this.liveDetailsBean.newsTitle)
+            .maxLines(1)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+            .fontSize('16fp')
+            .fontWeight(500)
+            .fontColor(Color.White)
+            .textAlign(TextAlign.Start)
+            .layoutWeight(1)
+        } else {
+          Blank()
+        }
         Image($r('app.media.icon_share'))
         Image($r('app.media.icon_share'))
           .width(24)
           .width(24)
           .aspectRatio(1)
           .aspectRatio(1)
@@ -86,8 +90,25 @@ export struct PlayUIComponent {
   getLiveStatusView() {
   getLiveStatusView() {
     // 直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
     // 直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
     // 预约
     // 预约
+    if (this.liveDetailsBean.liveInfo?.liveState == 'wait') {
+      Row() {
+        Image($r('app.media.icon_live_status_wait'))
+          .width(22)
+          .height(18)
+        Text('预约')
+          .fontSize('11fp')
+          .fontWeight(400)
+          .fontColor(Color.White)
+      }
+      .backgroundColor('#4D000000')
+      .padding({
+        top: 1,
+        right: 4,
+        bottom: 1
+      })
+    }
     // 直播中
     // 直播中
-    if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
+    else if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
       Row() {
       Row() {
         Image($r('app.media.icon_live_status_running'))
         Image($r('app.media.icon_live_status_running'))
           .width(22)
           .width(22)

@@ -6,6 +6,8 @@ import { PlayUIComponent } from './PlayUIComponent';
 export struct TopPlayComponent {
 export struct TopPlayComponent {
   @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
   @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
   playerController: WDPlayerController = new WDPlayerController();
   playerController: WDPlayerController = new WDPlayerController();
+  @State imgUrl: string = ''
+  @State isWait: boolean = false
 
 
   aboutToAppear(): void {
   aboutToAppear(): void {
     this.playerController.onCanplay = () => {
     this.playerController.onCanplay = () => {
@@ -15,6 +17,10 @@ export struct TopPlayComponent {
 
 
   updateData() {
   updateData() {
     //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
     //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
+    if (this.liveDetailsBean.fullColumnImgUrls && this.liveDetailsBean.fullColumnImgUrls.length > 0) {
+      this.imgUrl = this.liveDetailsBean.fullColumnImgUrls[0].url
+    }
+    this.isWait = this.liveDetailsBean?.liveInfo?.liveState == 'wait'
     if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
     if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
       let playUrl = ''
       let playUrl = ''
       if (this.liveDetailsBean.liveInfo.liveState == 'running') {
       if (this.liveDetailsBean.liveInfo.liveState == 'running') {
@@ -35,6 +41,10 @@ export struct TopPlayComponent {
       })
       })
         .height('100%')
         .height('100%')
         .width('100%')
         .width('100%')
+        .visibility(this.isWait ? Visibility.None : Visibility.Visible)
+      Image(this.imgUrl)
+        .objectFit(ImageFit.Contain)
+        .visibility(this.isWait ? Visibility.Visible : Visibility.None)
       PlayUIComponent({ playerController: this.playerController })
       PlayUIComponent({ playerController: this.playerController })
     }
     }
     .height(211)
     .height(211)
@@ -43,5 +53,7 @@ export struct TopPlayComponent {
 
 
   aboutToDisappear(): void {
   aboutToDisappear(): void {
     this.playerController.pause()
     this.playerController.pause()
+    this.playerController.stop()
+    this.playerController.release()
   }
   }
 }
 }

@@ -59,7 +59,9 @@ struct GuidePages {
         .onClick(() => {
         .onClick(() => {
           if (index == 3) {
           if (index == 3) {
             // 跳转到首页
             // 跳转到首页
-            WDRouterRule.jumpWithReplacePage(WDRouterPage.mainPage)
+            //WDRouterRule.jumpWithReplacePage(WDRouterPage.mainPage)
+            //跳转到兴趣偏好选择页
+            WDRouterRule.jumpWithReplacePage(WDRouterPage.launchInterestsPage)
           }
           }
         })
         })
         .id('index')
         .id('index')

+import {InterestsHobbiesModel, InterestsList} from '../viewModel/InterestsHobbiesModel'
+import { WDRouterRule } from 'wdRouter';
+import { WDRouterPage } from 'wdRouter';
+
+@Entry
+@Component
+struct LaunchInterestsHobbiesPage {
+  @State message: string = 'Hello World'
+  @State dataArray: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+  @State selectCount: number = 0
+  @State interestsArray: InterestsList[] = []
+
+
+  aboutToAppear(){
+    //请求接口，获取兴趣偏好数据
+    this.requestInterestsData()
+  }
+
+
+  build() {
+    Column() {
+      Row(){
+        Blank()
+        Text('跳过')
+          .fontSize('27lpx')
+          .fontColor('#333333')
+          .width('54lpx')
+          .height('35lpx')
+          .margin({top:'27lpx',right:'46lpx'})
+          .onClick(()=>{
+            //直接跳过到首页
+            //跳转首页
+            WDRouterRule.jumpWithReplacePage(WDRouterPage.mainPage)
+          })
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.End)
+
+      Text('选择感兴趣的内容')
+        .fontSize('46lpx')
+        .fontWeight(FontWeight.Bold)
+        .textAlign(TextAlign.Center)
+        .fontColor('#333333')
+        .width('100%')
+        .height('61lpx')
+        .margin({top:'84lpx'})
+      Text('完善信息，将为您推荐个性化的内容')
+        .fontSize('27lpx')
+        .textAlign(TextAlign.Center)
+        .fontColor('#9E9E9E')
+        .width('100%')
+        .height('35lpx')
+        .margin({top:'12lpx'})
+
+      Grid( ){
+        ForEach(this.interestsArray,(item:InterestsList,index:number)=>{
+          GridItem(){
+            Stack({alignContent:Alignment.TopStart}){
+
+              Image(item.pic)
+                .width('100%')
+                .height('100%')
+                .backgroundColor(Color.White)
+                .borderRadius(5)
+              Stack(){
+                Column({}){
+                  Text(item.name)
+                    .fontSize('35lpx')
+                    .fontColor('#FFFFFF')
+                    .margin({top:'21lpx',left:'19lpx'})
+                    .width('100%')
+                    .height('46lpx')
+                    .fontWeight(FontWeight.Bold)
+                  Text(item.title)
+                    .fontSize('23lpx')
+                    .fontColor('#FFFFFF')
+                    .margin({top:'2lpx',left:'19lpx'})
+                    .width('100%')
+                    .height('31lpx')
+                }.justifyContent(FlexAlign.Start)
+              }
+
+              Stack(){
+                Image('')
+                  .width('100%')
+                  .height('100%')
+                  .backgroundColor(Color.White)
+                  .opacity(item.choose?0:0.7)
+                  .borderRadius(5)
+              }
+            }
+          }
+          .width('192lpx')
+          .height('230lpx')
+          .borderRadius('8lpx')
+          .onClick(()=>{
+            //选择后改变已选择属性
+            item.choose = !item.choose
+            this.interestsArray.splice(index,1,item)
+            this.selectCount = this.interestsArray.filter(item => item.choose).length
+          })
+
+        })
+
+      }
+      .width('90%')
+      .height('70%')
+      .margin({top:'61lpx'})
+      .columnsTemplate('1fr 1fr 1fr')
+      // .rowsTemplate('1fr 1fr 1fr 1fr')
+      .columnsGap('23lpx')
+      .rowsGap('23lpx')
+
+      Stack({alignContent:Alignment.Center}){
+        Button(this.selectCount == 0?'选好了':'选好了(' + this.selectCount + ')')
+          .fontSize('35lpx')
+          .fontColor('#FFFFFF')
+          .backgroundColor('#ED2800')
+          .type(ButtonType.Normal)
+          .borderRadius('10lpx')
+          .width('662lpx')
+          .height('84lpx')
+          .onClick(()=>{
+            //跳转首页
+            WDRouterRule.jumpWithReplacePage(WDRouterPage.mainPage)
+          })
+      }
+      .width('100%')
+      .height('108lpx')
+      // .position({y:})
+      // .margin({bottom:'1',top:'1'})
+      .backgroundColor('#FFFFFF')
+
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+
+  requestInterestsData() {
+    //请求隐私协议接口
+    let interestsModel = new InterestsHobbiesModel()
+    interestsModel.getInterestsHobbiesData()
+      .then((value:InterestsList[])=>{
+        this.interestsArray = value
+      })
+      .catch((err:Error)=>{
+        console.log('获取兴趣偏好数据出错' + err)
+      })
+  }
+
+}

+import HashMap from '@ohos.util.HashMap';
+import { HttpRequest } from 'wdNetwork/src/main/ets/http/HttpRequest';
+import { HttpUrlUtils, ResponseDTO } from 'wdNetwork/Index';
+import { Logger, SPHelper } from 'wdKit/Index';
+import data from '@ohos.telephony.data';
+
+
+export interface InterestsBean {
+
+  // code : string
+  // message : string
+  // success : boolean
+  // timestamp : number
+  data : InterestsList[]
+
+}
+
+
+export interface InterestsList{
+
+  id : number
+  title : string
+  pic : string
+  name : string
+  choose : boolean
+
+}
+
+
+export class InterestsHobbiesModel {
+
+
+  getInterestsHobbiesData() {
+    let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
+    return new Promise<InterestsList[]>((success, fail) => {
+      HttpRequest.get<ResponseDTO<InterestsList[]>>(HttpUrlUtils.getInterestsUrl(), headers).then((data: ResponseDTO<InterestsList[]>) => {
+        if (!data || !data.data) {
+          fail("数据为空")
+          return
+        }
+        if (data.code != 0) {
+          fail(data.message)
+          return
+        }
+        Logger.debug("InterestsHobbiesModel兴趣偏好数据获取成功:success ", JSON.stringify(data))
+        success(data.data);
+
+
+        //保存数据
+        // for (let i = 0; i < data.data.length; i++) {
+        //   if (data.data[i].type == 1) {
+        //     SPHelper.default.save(SpConstants.USER_PROTOCOL, data.data[i].linkUrl)
+        //   } else if (data.data[i].type == 2) {
+        //     SPHelper.default.save(SpConstants.PRIVATE_PROTOCOL, data.data[i].linkUrl)
+        //   }
+        // }
+
+      }, (error: Error) => {
+        Logger.debug("InterestsHobbiesModel兴趣偏好数据获取失败:error ", error.toString())
+        fail(error.message)
+      })
+    })
+
+
+  }
+
+
+}

@@ -11,6 +11,7 @@
     "pages/launchPage/LaunchPage",
     "pages/launchPage/LaunchPage",
     "pages/launchPage/LaunchAdvertisingPage",
     "pages/launchPage/LaunchAdvertisingPage",
     "pages/broadcast/BroadcastPage",
     "pages/broadcast/BroadcastPage",
+    "pages/launchPage/LaunchInterestsHobbiesPage",
     "pages/SpacialTopicPage"
     "pages/SpacialTopicPage"
   ]
   ]
-}
+}