feat(广告)：绘制广告三图卡

+import { CompDTO } from 'wdBean/Index';
+
+/**
+ * @Description:    广告稿件 底部标签+删除按钮
+ * @Author:
+ * @Email:          liyubing@wondertek.com.cn
+ * @CreateDate:
+ * @UpdateRemark:   更新说明
+ * @Version:        1.0
+ */
+@Component
+export struct CardAdvBottom {
+  @State compDTO: CompDTO = {} as CompDTO;
+
+  build() {
+
+    Row() {
+      Text($r('app.string.comp_advertisement')).fontSize('12fp').fontColor($r('app.color.color_B0B0B0'))
+
+      Blank()
+
+      Stack() {
+        Image($r('app.media.comp_adv_close'))
+          .width(9)
+          .height(9)
+          .borderRadius({
+            topLeft: '4vp',
+            topRight: '4vp',
+            bottomLeft: '4vp',
+            bottomRight: '4vp'
+          })
+      }
+      .width(18)
+      .height(14)
+      .borderWidth(0.5)
+      .borderColor($r('app.color.color_EDEDED'))
+      .borderRadius(4)
+
+    }.width('100%')
+  }
+}

@@ -4,6 +4,7 @@ import { ProcessUtils } from 'wdRouter';
 
 
 import measure from '@ohos.measure';
 import measure from '@ohos.measure';
 import { DisplayUtils } from 'wdKit/Index';
 import { DisplayUtils } from 'wdKit/Index';
+import { CardAdvBottom } from './CardAdvBottom';
 
 
 const TAG: string = 'CardAdvSmallImageComponent';
 const TAG: string = 'CardAdvSmallImageComponent';
 
 
@@ -52,51 +53,32 @@ export struct CardAdvSmallImageComponent {
           left: { anchor: '__container__', align: HorizontalAlign.Start },
           left: { anchor: '__container__', align: HorizontalAlign.Start },
         })
         })
         .id("title_name")
         .id("title_name")
+
       // 广告图
       // 广告图
       Image(this.compDTO.matInfo.matImageUrl[0])
       Image(this.compDTO.matInfo.matImageUrl[0])
         .width('34%')
         .width('34%')
         .aspectRatio(3 / 2)
         .aspectRatio(3 / 2)
-        .borderRadius(4)
         .id('adv_imag')
         .id('adv_imag')
+        .borderWidth(0.5)
+        .borderColor($r('app.color.color_0D000000'))
+        .borderRadius(4)
         .alignRules({
         .alignRules({
           top: { anchor: 'title_name', align: VerticalAlign.Top },
           top: { anchor: 'title_name', align: VerticalAlign.Top },
           left: { anchor: 'title_name', align: HorizontalAlign.End },
           left: { anchor: 'title_name', align: HorizontalAlign.End },
-
         })
         })
         .margin({ left: 12 })
         .margin({ left: 12 })
 
 
-      Row() {
-        Text($r('app.string.comp_advertisement')).fontSize('12fp').fontColor($r('app.color.color_B0B0B0'))
-
-        Blank()
 
 
-        Stack() {
-          Image($r('app.media.comp_adv_close'))
-            .width(9)
-            .height(9)
-            .borderRadius({
-              topLeft: '4vp',
-              topRight: '4vp',
-              bottomLeft: '4vp',
-              bottomRight: '4vp'
-            })
-        }
-        .width(18)
-        .height(14)
-        .borderWidth(0.5)
-        .borderColor($r('app.color.color_EDEDED'))
-        .borderRadius(4)
-
-      }.width('62%').alignRules({
+      CardAdvBottom().width('62%').id('bottom_adv').alignRules({
         bottom: { anchor: this.isBigThreeLine ? '' : 'adv_imag', align: VerticalAlign.Bottom },
         bottom: { anchor: this.isBigThreeLine ? '' : 'adv_imag', align: VerticalAlign.Bottom },
         right: { anchor: this.isBigThreeLine ? '' : 'adv_imag', align: HorizontalAlign.Start },
         right: { anchor: this.isBigThreeLine ? '' : 'adv_imag', align: HorizontalAlign.Start },
-
         top: { anchor: this.isBigThreeLine ? 'title_name' : '', align: VerticalAlign.Bottom },
         top: { anchor: this.isBigThreeLine ? 'title_name' : '', align: VerticalAlign.Bottom },
         left: { anchor: this.isBigThreeLine ? 'title_name' : '', align: HorizontalAlign.Start },
         left: { anchor: this.isBigThreeLine ? 'title_name' : '', align: HorizontalAlign.Start },
-      }).id('bottom_adv').margin({
+      }).margin({
         right: this.isBigThreeLine ? 0 : 12,
         right: this.isBigThreeLine ? 0 : 12,
         top: this.isBigThreeLine ? 8 : 0,
         top: this.isBigThreeLine ? 8 : 0,
       })
       })
+
     }
     }
     .width("100%")
     .width("100%")
     .height(this.isBigThreeLine ? 127 : 106)
     .height(this.isBigThreeLine ? 127 : 106)

@@ -4,6 +4,7 @@ import { CommonConstants } from 'wdConstant/Index';
 import { ProcessUtils } from 'wdRouter';
 import { ProcessUtils } from 'wdRouter';
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
 import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
+import { CardAdvBottom } from './CardAdvBottom';
 
 
 const TAG: string = 'Card2Component';
 const TAG: string = 'Card2Component';
 
 
@@ -17,7 +18,6 @@ const TAG: string = 'Card2Component';
  */
  */
 @Component
 @Component
 export struct CardAdvThreeImageComponent {
 export struct CardAdvThreeImageComponent {
-
   @State compDTO: CompDTO = {} as CompDTO
   @State compDTO: CompDTO = {} as CompDTO
 
 
   aboutToAppear(): void {
   aboutToAppear(): void {
@@ -31,14 +31,49 @@ export struct CardAdvThreeImageComponent {
   }
   }
 
 
   build() {
   build() {
-
     Column() {
     Column() {
+      //body
+      Column() {
+        //新闻标题
         Text(this.compDTO.matInfo.advTitle)
         Text(this.compDTO.matInfo.advTitle)
-        .fontSize($r('app.float.font_size_17'))
+          .fontSize($r('app.float.font_size_18'))
           .fontColor($r('app.color.color_222222'))
           .fontColor($r('app.color.color_222222'))
           .maxLines(3)
           .maxLines(3)
-        .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
-        .align(Alignment.Start)
+          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+        //三图
+        Row() {
+          GridRow({ gutter: 2 }) {
+            ForEach(this.compDTO.matInfo.matImageUrl, (url: string, index: number) => {
+              if (index < 3) {
+                GridCol({ span: { xs: 4 } }) {
+                  Image(url)
+                    .width('100%')
+                    .aspectRatio(113 / 75)
+                    .borderRadius({
+                      topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
+                      topRight: index === 2 ? $r('app.float.image_border_radius') : 0,
+                      bottomLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
+                      bottomRight: index === 2 ? $r('app.float.image_border_radius') : 0,
+                    })
+                    .borderColor($r('app.color.color_0D000000'))
+                }
+              }
+            })
+          }
+        }
+        .width(CommonConstants.FULL_PARENT)
+        .margin({ top: 8 })
+
+        //  广告工具组件
+        CardAdvBottom().width('100%').margin({ top: 8 })
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .onClick((event: ClickEvent) => {
+        ProcessUtils.openAdvDetail(this.compDTO.matInfo)
+      })
+
     }
     }
     .width(CommonConstants.FULL_WIDTH)
     .width(CommonConstants.FULL_WIDTH)
     .padding({
     .padding({
@@ -47,9 +82,6 @@ export struct CardAdvThreeImageComponent {
       top: $r('app.float.card_comp_pagePadding_tb'),
       top: $r('app.float.card_comp_pagePadding_tb'),
       bottom: $r('app.float.card_comp_pagePadding_tb')
       bottom: $r('app.float.card_comp_pagePadding_tb')
     })
     })
-    .onClick((event: ClickEvent) => {
-      //ProcessUtils.processPage(this.contentDTO)
-    })
   }
   }
 }
 }