Changes图集卡

+@Component
+export struct AlbumCard {
+  // @Link isRefreshData: boolean; // Timer to fresh
+  // @State title: Resource = $r('app.string.title_default');
+
+  build() {
+    Column({ space: 8 }) {
+      Text('测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
+      '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
+      '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字')
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+        .fontSize(17)
+        .fontColor(0x222222)
+        .lineHeight(25)
+        .maxLines(3)
+        .margin({ top: 6,
+          left: 16,
+          right: 16 })
+        .width(343)
+        .height(75)
+
+      RelativeContainer() {
+          Image($r('app.media.icon'))
+            .width(229)
+            .height(154)
+            .alignRules({
+              top: {anchor: "__container__", align: VerticalAlign.Top},
+              left: {anchor: "__container__", align: HorizontalAlign.Start}
+            })
+            .id('mainImage')
+
+          Image($r('app.media.icon'))
+            .width(112)
+            .height(76)
+            .alignRules({
+              top: {anchor: "__container__", align: VerticalAlign.Top},
+              right: {anchor: "__container__", align: HorizontalAlign.End}
+            })
+            .id('subTopImage')
+
+          Image($r('app.media.icon'))
+            .width(112)
+            .height(76)
+            .alignRules({
+              right: {anchor: "__container__", align: HorizontalAlign.End},
+              bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
+            })
+            .id('subBottomImage')
+
+          Shape() {
+            Rect().width(33).height(18)
+          }
+          // .viewPort({ x: -2, y: -2, width: 304, height: 130 })
+          .fill(0x000000)
+          .fillOpacity(0.3)
+          // .strokeDashArray([20])
+          // .strokeDashOffset(10)
+          .strokeLineCap(LineCapStyle.Round)
+          .strokeLineJoin(LineJoinStyle.Round)
+          .antiAlias(true)
+        .id('shape')
+        .alignRules({
+          right: {anchor: "__container__", align: HorizontalAlign.End},
+          bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
+        })
+        .margin({right:4 ,
+        bottom:4})
+
+        Image($r('app.media.album_card_shape'))
+          .width(22)
+          .height(18)
+          .alignRules({
+            left: {anchor: "shape", align: HorizontalAlign.Start},
+            top: {anchor: "shape", align: VerticalAlign.Top}
+          })
+          .id('shapeSubImage')
+
+        Text('6')
+          .fontSize(13)
+          .fontColor(0xFFFFFF)
+          .id('pageIndex')
+          .alignRules({
+            right: {anchor: "shape", align: HorizontalAlign.End},
+            top: {anchor: "shape", align: VerticalAlign.Top}
+          })
+          .margin({right:2})
+          .textAlign(TextAlign.Center)
+          .width(17)
+          .height(17)
+      }
+      .width(343)
+      .height(154)
+
+      Row() {
+        Text('人民日报')
+          .fontSize(13)
+          .fontColor(0xB0B0B0)
+          .margin({
+            left:16
+          })
+
+        Image($r('app.media.album_card_divide'))
+          .width(16)
+          .height(16)
+
+        Text('46分钟前')
+          .fontSize(13)
+          .fontColor(0xB0B0B0)
+
+        Text('328评')
+          .fontSize(13)
+          .fontColor(0xB0B0B0)
+          .margin({
+            left:6
+          })
+      }
+      .width(375)
+      .height(16)
+      .id('label')
+    }
+    .width(375)
+    .height(289)
+    // .backgroundColor(0x000000)
+  }
+}