新增卡片组件解析模块

+import { CommonConstants } from 'wdConstant';
+import { ContentDTO } from '../repository/bean/ContentDTO';
+import { Card11Component } from './cardview/Card11Component';
+import { Card3Component } from './cardview/Card3Component';
+import { Card2Component } from './cardview/Card2Component';
+import { Card4Component } from './cardview/Card4Component';
+
+/**
+ * card适配器，卡片样式汇总，依据ContentDTO#appStyle
+ * 卡片样式，最小单元样式布局
+ */
+@Component
+export struct CardParser {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    this.contentBuilder(this.contentDTO);
+  }
+
+  @Builder
+  contentBuilder(contentDTO: ContentDTO) {
+    if (contentDTO.appStyle === '11') {
+      Card11Component({ contentDTO })
+    } else if (contentDTO.appStyle === '3') {
+      Card3Component({ contentDTO })
+    } else if (contentDTO.appStyle === "2") {
+      Card2Component({ contentDTO })
+    } else if (contentDTO.appStyle === "4") {
+      Card4Component({ contentDTO })
+    }
+    else {
+      // todo:组件未实现 / Component Not Implemented
+      Text(contentDTO.appStyle)
+        .width(CommonConstants.FULL_PARENT)
+        .padding(10)
+      // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
+    }
+  }
+}
\ No newline at end of file

@@ -22,6 +22,7 @@ import { SmallVideoCardHorComponent } from './view/SmallVideoCardHorComponent';
 
 /**
  * comp适配器.
+ * 首页楼层comp解析器
  */
 @Component
 export struct CompParser {

+//缩略标题
+import { CommonConstants } from 'wdConstant'
+import { DateTimeUtils } from 'wdKit'
+import { ContentDTO } from '../../repository/bean/ContentDTO';
+
+@Component
+export struct Card11Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+  @State @Watch('isPoint') source: boolean = false; //来源是否为空 publishTime 字段是否为空
+  @State isPo: number = Visibility.Visible;
+
+  isPoint() {
+    if (this.source) {
+      this.isPo = Visibility.None
+    }
+  }
+
+  build() {
+    Column() {
+      Text(this.contentDTO.newsTitle)
+        .fontSize($r("app.float.font_size_17"))
+        .fontColor($r("app.color.color_222222"))
+        .maxLines(3)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+        .width(CommonConstants.FULL_WIDTH)
+        .fontWeight(400)
+      Row() {
+        Text(this.contentDTO.corner)
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_ED2800"))
+          .fontWeight(400)
+        Text(this.contentDTO.source)
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_B0B0B0"))
+          .margin({ left: 6 })
+          .fontWeight(400)
+        Image($r("app.media.point"))
+          .width(16)
+          .height(16)
+          .visibility(this.isPo)
+
+        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_B0B0B0"))
+          .fontWeight(400)
+
+      }.width(CommonConstants.FULL_WIDTH)
+      .justifyContent(FlexAlign.Start)
+      .margin({ top: 8 })
+
+    }.width(CommonConstants.FULL_WIDTH)
+    .padding({
+      top: 14,
+      left: 16,
+      right: 16,
+      bottom: 14
+    })
+    .backgroundColor($r("app.color.white"))
+    .margin({ bottom: 8 })
+  }
+
+  aboutToAppear() {
+    if (this.contentDTO.source == "") {
+      this.source = true;
+    }
+    if (this.contentDTO.publishTime == "") {
+      this.source = true;
+    }
+  }
+}
\ No newline at end of file

+//全标题 "compStyle":"2",
+import { ContentDTO } from '../../repository/bean/ContentDTO';
+
+const TAG: string = 'BigPicCardComponent';
+
+/**
+ * 大图卡:
+ * compstyle:2
+ * 卡片结构：上下结构
+ * 卡片宽度:充满父窗口
+ * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
+ */
+// @Entry
+@Component
+export struct Card2Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    Column() {
+
+      Column() {
+        //新闻标题
+        Text(this.contentDTO.newsTitle)
+          .fontSize(17)
+          .fontColor('#222222')
+          .maxLines(3)
+          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+          .align(Alignment.Start)
+        //大图
+        Stack() {
+          Image(this.contentDTO.coverUrl)
+            .backgroundColor('#888888')
+            .borderRadius(4)
+            .width('100%')
+            .aspectRatio(343 / 192)
+
+
+          //播放状态+时长
+          Row() {
+            Image($r('app.media.icon_live'))
+              .width(22)
+              .height(18)
+
+            Stack() {
+              Text('直播中')
+                .fontColor('#FFFFFF')
+                .fontSize(11)
+            }
+            .width(44)
+            .height(18)
+            .backgroundColor('#4d000000')
+          }.margin({ right: 8, bottom: 8 })
+
+        }
+        .width('100%')
+        .alignContent(Alignment.BottomEnd)
+        .margin({ top: 8 })
+
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding({ top: 14 })
+
+      //bottom
+      Row() {
+        Text(this.contentDTO.source)
+          .bottomTextStyle()
+        //间隔点
+        Image($r('app.media.point'))
+          .width(12)
+          .height(12)
+
+        Text(this.contentDTO.source)
+          .bottomTextStyle()
+        Text(' ')
+
+        Text(this.contentDTO.subtitle)
+          .bottomTextStyle()
+
+      }
+      .width('100%')
+      .height(18)
+      .justifyContent(FlexAlign.Start)
+      // .padding({bottom:14})
+      .margin({ top: 8 })
+    }
+    .width('100%')
+    .padding({ left: 16, right: 16 })
+  }
+}
+
+@Extend(Text) function bottomTextStyle() {
+  .fontSize(12)
+  .fontColor('#B0B0B0')
+}
\ No newline at end of file

+//全标题 "compStyle":"3",
+import { CommonConstants } from 'wdConstant'
+import { DateTimeUtils } from 'wdKit/src/main/ets/utils/DateTimeUtils'
+import { ContentDTO } from '../../repository/bean/ContentDTO'
+
+@Component
+export struct Card3Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+  @State @Watch('isPoint') source: boolean = false; //来源是否为空 publishTime 字段是否为空
+  @State isPo: number = Visibility.Visible;
+
+  isPoint() {
+    if (this.source) {
+      this.isPo = Visibility.None
+    }
+  }
+
+  build() {
+    Column() {
+      Text(this.contentDTO.newsTitle)
+        .fontSize($r("app.float.font_size_17"))
+        .fontColor($r("app.color.color_222222"))
+        .width(CommonConstants.FULL_WIDTH)
+        .fontWeight(400)
+      Row() {
+        Text(this.contentDTO.corner)
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_ED2800"))
+          .fontWeight(400)
+        Text(this.contentDTO.source)
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_B0B0B0"))
+          .margin({ left: 6 })
+          .fontWeight(400)
+        Image($r("app.media.point"))
+          .width(16)
+          .height(16)
+          .visibility(this.isPo)
+
+        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_B0B0B0"))
+          .fontWeight(400)
+
+      }.width(CommonConstants.FULL_WIDTH)
+      .justifyContent(FlexAlign.Start)
+      .margin({ top: 8 })
+
+    }.width("100%")
+    .padding({
+      top: 14,
+      left: 16,
+      right: 16,
+      bottom: 14
+    })
+    .backgroundColor($r("app.color.white"))
+    .margin({ bottom: 8 })
+  }
+
+  aboutToAppear() {
+    // Logger.info("ssx",JSON.stringify(this.compDTO.operDataList[0]))
+    if (this.contentDTO.source == "") {
+      this.source = true;
+    }
+    if (this.contentDTO.publishTime == "") {
+      this.source = true;
+    }
+
+  }
+}
\ No newline at end of file

+//全标题 "compStyle":"4",
+import { DateTimeUtils } from 'wdKit';
+import { ContentDTO } from '../../repository/bean/ContentDTO';
+
+const TAG: string = 'TriPicCardComponent';
+
+/**
+ * 三图卡:
+ * compstyle:4
+ * 卡片结构：上下结构
+ * 卡片宽度:充满父窗口
+ * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
+ */
+@Entry
+@Component
+export struct Card4Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    Column() {
+
+
+      //body
+      Column() {
+        //新闻标题
+        Text(this.contentDTO.newsTitle)
+          .fontSize(17)
+          .fontColor('#222222')
+          .maxLines(3)
+          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+        //三图
+        Row() {
+          Image(this.contentDTO.fullColumnImgUrls[0]?.url)
+            .width('32%')
+            .aspectRatio(113 / 75)
+            .borderRadius({ topLeft: 4, bottomLeft: 4 })
+
+          Image(this.contentDTO.fullColumnImgUrls[1]?.url)
+            .width('32%')
+            .aspectRatio(113 / 75)
+
+          Image(this.contentDTO.fullColumnImgUrls[2]?.url)
+            .width('32%')
+            .aspectRatio(113 / 75)
+            .borderRadius({ topRight: 4, bottomRight: 4 })
+
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width('100%')
+        .margin({ top: 8 })
+        .borderRadius(8)
+
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding({ top: 14 })
+
+
+      //bottom
+      Row() {
+        Text(this.contentDTO.source)
+          .bottomTextStyle()
+        //间隔点
+        Image($r('app.media.point'))
+          .width(12)
+          .height(12)
+
+        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
+          .bottomTextStyle()
+        Text(' ')
+
+        Text('518条评论')
+          .bottomTextStyle()
+
+      }
+      .width('100%')
+
+      .justifyContent(FlexAlign.Start)
+      // .padding({bottom:14})
+      .margin({ top: 8 })
+      .padding({ bottom: 14 })
+
+    }
+    .width('100%')
+    .padding({ top: 8, left: 16, right: 16 })
+
+  }
+}
+
+
+@Extend(Text) function bottomTextStyle() {
+  .fontSize(12)
+  .fontColor('#B0B0B0')
+}
\ No newline at end of file

 //全标题 "compStyle":"2",
 import { CommonConstants } from 'wdConstant'
 import { CompDTO } from '../../repository/bean/CompDTO'
+import { ContentDTO } from '../../repository/bean/ContentDTO';
+import { CardParser } from '../CardParser';
+
 const TAG: string = 'BigPicCardComponent';
 
 /**
@@ -14,8 +17,21 @@ const TAG: string = 'BigPicCardComponent';
 @Component
 export struct BigPicCardComponent {
   @State compDTO: CompDTO = {} as CompDTO
+  contentDTO: ContentDTO = {} as ContentDTO;
 
   build() {
+    // this.cardBuild();
+    this.originalBuild();
+  }
+
+  async aboutToAppear() {
+    // 取第一个数据
+    this.contentDTO = this.compDTO.operDataList[0];
+    this.contentDTO.appStyle = "2";
+  }
+
+  @Builder
+  originalBuild() {
     Column() {
 
       Column() {
@@ -49,18 +65,18 @@ export struct BigPicCardComponent {
             .width(44)
             .height(18)
             .backgroundColor('#4d000000')
-          }.margin({right:8,bottom:8})
+          }.margin({ right: 8, bottom: 8 })
 
         }
         .width('100%')
         .alignContent(Alignment.BottomEnd)
-        .margin({top:8})
+        .margin({ top: 8 })
 
       }
       .width('100%')
       .justifyContent(FlexAlign.Start)
       .alignItems(HorizontalAlign.Start)
-      .padding({top:14})
+      .padding({ top: 14 })
 
       //bottom
       Row() {
@@ -82,15 +98,17 @@ export struct BigPicCardComponent {
       .width('100%')
       .height(18)
       .justifyContent(FlexAlign.Start)
-        // .padding({bottom:14})
-        .margin({top:8})
+      // .padding({bottom:14})
+      .margin({ top: 8 })
     }
     .width('100%')
-    .padding({left:16,right:16})
-
-
+    .padding({ left: 16, right: 16 })
   }
 
+  @Builder
+  cardBuild() {
+    CardParser({ contentDTO: this.contentDTO });
+  }
 }
 
 @Extend(Text) function bottomTextStyle() {

 import { FullColumnImgUrlsDTO } from './FullColumnImgUrlsDTO';
 import { InteractDataDTO } from './InteractDataDTO';
-import  { LiveInfo } from './LiveInfo'
-import  { VideoInfo } from './VideoInfo'
+import  { LiveInfo } from './LiveInfo';
+import  { VideoInfo } from './VideoInfo';
 
 export interface ContentDTO {
+  appStyle: string;
   cityCode: string;
   coverSize: string;
   coverType: number;