直播回看 直播预约样式

+import { CompDTO, ContentDTO } from 'wdBean';
+
+const TAG = 'Zh_Grid_Layout-02';
+const FULL_PARENT: string = '100%';
+let listSize: number = 2;
+
+/**
+ * 双图卡
+ * 枚举值Zh_Grid_Layout-02
+ * Zh_Grid_Layout-02
+ *
+ */
+@Preview
+@Component
+export struct ZhGridLayout02 {
+  @State compDTO: CompDTO = {} as CompDTO
+
+  aboutToAppear() {
+    if (this.compDTO.operDataList) {
+      listSize = this.compDTO.operDataList.length > 5 ? 2 : this.compDTO.operDataList.length;
+    }
+  }
+
+  build() {
+    GridRow({
+      columns: { sm: listSize, md: 2 },
+      breakpoints: { value: ['320vp', '520vp', '840vp'] }
+    }) {
+      ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+        GridCol() {
+          this.buildItemCard(this.compDTO.operDataList[index]);
+        }
+      })
+    }
+  }
+
+  /**
+   * 组件项
+   *
+   * @param programmeBean item 组件项, 上面icon,下面标题
+   */
+  @Builder
+  buildItemCard(item: ContentDTO) {
+    Column() {
+      Image(item.coverUrl)
+        .width(44)
+        .aspectRatio(1 / 1)
+        .margin(16)
+      Text(item.newsTitle)
+        .fontSize(13)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .width('100%')
+  }
+}
+
+

+// 视频直播直播预约
+import { LiveVideoTypeComponent } from './LiveVideoTypeComponent'
+import { LiveHorizontalCardForOneComponent } from './LiveHorizontalCardForOneComponent'
+import { CompDTO, ContentDTO } from 'wdBean'
+import { CommonConstants } from 'wdConstant'
+import { StringUtils } from 'wdKit/Index'
+
+@Component
+export struct LiveHorizontalReservationComponent {
+  @State compDTO: CompDTO = {} as CompDTO
+
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image($r("app.media.redLine"))
+            .width(3)
+            .height(16)
+            .margin({ right: 4 })
+          Text(StringUtils.isNotEmpty(this?.compDTO?.objectTitle) ? this?.compDTO?.objectTitle : "直播预约")
+            .fontSize($r("app.float.font_size_17"))
+            .fontColor($r("app.color.color_222222"))
+            .fontWeight(600)
+        }
+
+        if (this.compDTO.operDataList.length > 10) {
+          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)
+          }
+        }
+      }.justifyContent(FlexAlign.SpaceBetween)
+      .padding({ left: 16, right: 16 })
+      .margin({ top: 8, bottom: 8 })
+      .width(CommonConstants.FULL_WIDTH)
+
+      // 多个
+      if (this.compDTO.operDataList.length >= 2) {
+        List({ space: 12 }) {
+          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+            ListItem() {
+              Column() {
+                Stack({ alignContent: Alignment.BottomEnd }) {
+                  Image(item.coverUrl)
+                    .aspectRatio(16 / 9)
+                    .width(this.compDTO.operDataList.length == 2 ? 210 : 150)
+                    .borderRadius(4)
+                    .objectFit(ImageFit.Cover)
+                  if (item.objectType === '2' && item.liveInfo && item.liveInfo.liveState === 'running') {
+                    LiveVideoTypeComponent({ nType: 0, name: '直播中' })
+                      .padding({
+                        bottom: 4,
+                        right: 4
+                      })
+                  } else if (item.objectType === '1' && item.videoInfo) {
+                    LiveVideoTypeComponent({ nType: 1, name: item.videoInfo.videoDuration + "" })
+                      .padding({
+                        bottom: 4,
+                        right: 4
+                      })
+                  }
+                }
+
+                Text(item.newsTitle)
+                  .fontSize($r("app.float.font_size_14"))
+                  .fontColor($r("app.color.color_212228"))
+                  .fontWeight(400)
+                  .maxLines(2)
+                  .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
+                  .textAlign(TextAlign.Start)
+                  .margin({ top: 8 })
+                  .width(this.compDTO.operDataList.length == 2 ? 210 : 150)
+              }
+            }
+            .padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 })
+            .onClick(() => {
+              if (item.objectType != '0') {
+                console.log(item.objectId)
+              }
+            })
+          })
+        }.listDirection(Axis.Horizontal)
+        .width(CommonConstants.FULL_WIDTH)
+        .height(this.compDTO.operDataList.length == 2 ? 180 : 136)
+      } else if (this.compDTO.operDataList.length) {
+        // 一个
+        LiveHorizontalCardForOneComponent({ contentDTO: this.compDTO.operDataList[0] })
+      }
+    }
+    .width(CommonConstants.FULL_WIDTH)
+    .padding({
+      top: 14,
+    })
+    .backgroundColor($r("app.color.white"))
+  }
+}