大图卡(compstyle-2)，三图卡(compstyle-4)UI

@@ -15,4 +15,8 @@ export { TopNavigationComponent } from "./components/TopNavigationComponent"
 
 
 export { LabelComponent } from "./components/LabelComponent"
 export { LabelComponent } from "./components/LabelComponent"
 
 
-export { SmallVideoCardComponent } from "./components/SmallVideoCardComponent"
+export { SmallVideoCardComponent } from "./components/SmallVideoCardComponent"
+
+export { TriPicCardComponent } from "./components/TriPicCardComponent"
+
+export { BigPicCardComponent } from "./components/BigPicCardComponent"

+//全标题 "compStyle":"2",
+import { CommonConstants } from 'wdConstant'
+import { CompDTO } from '../repository/bean/CompDTO'
+const TAG: string = 'BigPicCardComponent';
+
+/**
+ * 大图卡:
+ * compstyle:2
+ * 卡片结构：上下结构
+ * 卡片宽度:充满父窗口
+ * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
+ */
+// @Entry
+@Component
+export struct BigPicCardComponent {
+  @State compDTO: CompDTO = {} as CompDTO
+
+  build() {
+    Column() {
+
+      Column() {
+        //新闻标题
+        Text(this.compDTO.operDataList[0].newsTitle)
+          .fontSize(17)
+          .fontColor('#222222')
+          .maxLines(3)
+          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+          .align(Alignment.Start)
+        //大图
+        Stack() {
+          Image(this.compDTO.operDataList[0].coverUrl)
+            .borderRadius(4)
+
+
+          //播放状态+时长
+          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%')
+        .height(192)
+        .alignContent(Alignment.BottomEnd)
+        .margin({top:8})
+
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding({top:14})
+
+      //bottom
+      Row() {
+        Text(this.compDTO.operDataList[0].source)
+          .bottomTextStyle()
+        //间隔点
+        Image($r('app.media.point'))
+          .width(12)
+          .height(12)
+
+        Text(this.compDTO.operDataList[0].source)
+          .bottomTextStyle()
+        Text(' ')
+
+        Text(this.compDTO.operDataList[0].subtitle)
+          .bottomTextStyle()
+
+      }
+      .width('100%')
+      .height(18)
+      .justifyContent(FlexAlign.Start)
+        // .padding({bottom:14})
+        .margin({top:8})
+    }
+    .width('100%')
+    .padding({left:16,right:16})
+
+
+  }
+
+}
+
+
+
+/**
+ * 大图卡 中部
+ * 包括：视频图、视频时长
+ */
+@Component
+export struct myBigCard_body {
+  private newsSrc:string ="https://k.sinaimg.cn/n/default/crawl/190/w550h440/20240118/6772-7c2385bb2741c6f88906af3514d27343.png/w700d1q75cms.jpg";
+  private newsTitle:string ="时政微观察丨新征程金融工作怎么干？“新年第一课”这样讲";
+
+  build() {
+    Column() {
+      //新闻标题
+      Text(this.newsTitle)
+        .fontSize(17)
+        .fontColor('#222222')
+        .maxLines(3)
+        .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+      //大图
+      Stack() {
+        Image(this.newsSrc)
+          .borderRadius(4)
+
+
+        //播放状态+时长
+        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%')
+      .height(192)
+      .alignContent(Alignment.BottomEnd)
+      .margin({top:8})
+
+    }
+    .width('100%')
+    .justifyContent(FlexAlign.Start)
+  }
+
+}
+
+/**
+ * 大图卡 底部
+ * 包括：分享、评论、点赞 三个按钮
+ */
+
+@Component
+export struct myBigCard_bottom {
+  private  bottom_height:number = 18
+  private itemSubtitle1:string = "人民日报"
+  private itemSubtitle2:string = "25分钟前"
+  private itemSubtitle3:string = "786条评论"
+  build() {
+    //子标题
+    Row() {
+      Text(this.itemSubtitle1)
+        .bottomTextStyle()
+      //间隔点
+      Image($r('app.media.point'))
+        .width(12)
+        .height(12)
+
+      Text(this.itemSubtitle2)
+        .bottomTextStyle()
+      Text(' ')
+
+      Text(this.itemSubtitle3)
+        .bottomTextStyle()
+
+    }
+    .width('100%')
+    .height(this.bottom_height)
+    .justifyContent(FlexAlign.Start)
+
+  }
+
+}
+
+@Extend(Text) function bottomTextStyle() {
+  .fontSize(12)
+  .fontColor('#B0B0B0')
+}

@@ -8,6 +8,8 @@ import { LabelComponent } from './LabelComponent';
 import { LoadingComponent } from './LoadingComponent';
 import { LoadingComponent } from './LoadingComponent';
 import { TitleAbbrComponent } from './TitleAbbrComponent';
 import { TitleAbbrComponent } from './TitleAbbrComponent';
 import { TitleAllComponent } from './TitleAllComponent';
 import { TitleAllComponent } from './TitleAllComponent';
+import { BigPicCardComponent } from './BigPicCardComponent';
+import { TriPicCardComponent } from './TriPicCardComponent';
 
 
 const TAG = 'PageComponent';
 const TAG = 'PageComponent';
 
 
@@ -52,6 +54,10 @@ export struct PageComponent {
       TitleAbbrComponent({ compDTO: compDTO })
       TitleAbbrComponent({ compDTO: compDTO })
     } else if (compDTO.compStyle === CompStyle.Title_All_01) {
     } else if (compDTO.compStyle === CompStyle.Title_All_01) {
       TitleAllComponent({ compDTO: compDTO })
       TitleAllComponent({ compDTO: compDTO })
+    } else if (compDTO.compStyle === "2") {
+      BigPicCardComponent({ compDTO: compDTO })
+    } else if (compDTO.compStyle === "4") {
+      TriPicCardComponent({ compDTO: compDTO })
     } else {
     } else {
       // todo:组件未实现 / Component Not Implemented
       // todo:组件未实现 / Component Not Implemented
       Text(compDTO.compStyle)
       Text(compDTO.compStyle)

+//全标题 "compStyle":"4",
+import { CommonConstants } from 'wdConstant'
+import { CompDTO } from '../repository/bean/CompDTO'
+const TAG: string = 'TriPicCardComponent';
+
+/**
+ * 三图卡:
+ * compstyle:4
+ * 卡片结构：上下结构
+ * 卡片宽度:充满父窗口
+ * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
+ */
+// @Entry
+@Component
+export struct TriPicCardComponent {
+  @State compDTO: CompDTO = {} as CompDTO
+
+  build() {
+    Column() {
+
+
+      //body
+      Column() {
+        //新闻标题
+        Text(this.compDTO.operDataList[0].newsTitle)
+          .fontSize(17)
+          .fontColor('#222222')
+          .maxLines(3)
+          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+        //三图
+        Row() {
+          Image(this.compDTO.operDataList[0].fullColumnImgUrls[0].url)
+            .width('32%')
+
+            .height(75)
+            .borderRadius({ topLeft:4,bottomLeft:4 })
+
+          Image(this.compDTO.operDataList[0].fullColumnImgUrls[1].url)
+            .width('32%')
+            .height(75)
+
+          Image(this.compDTO.operDataList[0].fullColumnImgUrls[2].url)
+            .width('32%')
+            .height(75)
+            .borderRadius({ topRight:4,bottomRight:4 })
+
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width('100%')
+        .height(75)
+        .margin({top:8})
+        .borderRadius(8)
+
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding({top:14})
+
+
+      //bottom
+      Row() {
+        Text(this.compDTO.operDataList[0].source)
+          .bottomTextStyle()
+        //间隔点
+        Image($r('app.media.point'))
+          .width(12)
+          .height(12)
+
+        Text(this.compDTO.operDataList[0].publishTime+"分钟前")
+          .bottomTextStyle()
+        Text(' ')
+
+        Text(this.compDTO.operDataList[0].openLikes.toString()+"条评论")
+          .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')
+}

+import { FullColumnImgUrlsDTO } from './FullColumnImgUrlsDTO';
 export interface ContentDTO {
 export interface ContentDTO {
   cityCode: string;
   cityCode: string;
   coverSize: string;
   coverSize: string;
@@ -34,4 +35,7 @@ export interface ContentDTO {
   vImageUrl: string;
   vImageUrl: string;
   screenType: string;
   screenType: string;
   source:string;
   source:string;
+  newsTitle:string;
+  publishTime:string;
+  fullColumnImgUrls:FullColumnImgUrlsDTO[];
 }
 }

+export interface FullColumnImgUrlsDTO {
+  format: number;
+  height: number;
+  weight: number;
+  landscape: number;
+  size: number;
+  url: string;
+}

@@ -14,7 +14,7 @@ const TAG = 'PageViewModel';
  * mock数据开关，默认关。
  * mock数据开关，默认关。
  * mock数据是本地json数据，可自行修改内容（‘entry\src\main\resources\rawfile\’目录）
  * mock数据是本地json数据，可自行修改内容（‘entry\src\main\resources\rawfile\’目录）
  */
  */
-const mock_switch = true;
+const mock_switch = false;
 
 
 /**
 /**
  * 处理返回后的数据
  * 处理返回后的数据