人民号动态图文卡样式优化

@@ -39,46 +39,72 @@ export struct Card19Component {
   }
   }
 }
 }
 
 
+interface radiusType {
+  topLeft: number | Resource;
+  topRight: number | Resource;
+  bottomLeft: number | Resource;
+  bottomRight: number | Resource;
+}
+
 @Component
 @Component
 struct createArticleListItem {
 struct createArticleListItem {
   @Prop appStyleImages: appStyleImagesDTO[]
   @Prop appStyleImages: appStyleImagesDTO[]
 
 
-  build() {
+  caclImageRadius(index: number) {
+    let radius: radiusType = {
+      topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
+      topRight: 0,
+      bottomLeft: 0,
+      bottomRight: 0,
+    }
     if (this.appStyleImages.length === 1) {
     if (this.appStyleImages.length === 1) {
-      Image(this.appStyleImages[0].fullUrl)
-        .width('66%')
-        .alignSelf(ItemAlign.Start)
-    } else if (this.appStyleImages.length > 4 || this.appStyleImages.length === 2 || this
-      .appStyleImages.length === 3) {
-      Flex({ wrap: FlexWrap.Wrap }) {
-        ForEach(this.appStyleImages, (item: appStyleImagesDTO, index: number) => {
-          Image(item.fullUrl)
-            .width('32%')
-            .aspectRatio(1)
-            .margin({ right: (index + 1) % 3 === 0 ? 0 : 2, bottom: 2 })
-        })
-      }
+      radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
+      radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
+      radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
     } else if (this.appStyleImages.length === 4) {
     } else if (this.appStyleImages.length === 4) {
-      Flex({ wrap: FlexWrap.Wrap }) {
-        ForEach(this.appStyleImages.slice(0, 2), (item: appStyleImagesDTO, index: number) => {
-          Image(item.fullUrl)
-            .width('32%')
-            .aspectRatio(1)
-            .margin({ right: (index + 1) % 3 === 0 ? 0 : 2, bottom: 2 })
-        })
-        Rect()
-          .width('32%')
-          .aspectRatio(1)
-          .fill($r('app.color.color_transparent'))
-        ForEach(this.appStyleImages.slice(2, 4), (item: appStyleImagesDTO, index: number) => {
-          Image(item.fullUrl)
-            .width('32%')
-            .aspectRatio(1)
-            .margin({ right: (index + 1) % 3 === 0 ? 0 : 2, bottom: 2 })
-        })
-      }
+      radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
+      radius.bottomLeft = index === 2 ? $r('app.float.image_border_radius') : 0
+      radius.bottomRight = index === 3 ? $r('app.float.image_border_radius') : 0
+    } else {
+      radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
+      radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
+      radius.bottomRight = index === 8 ? $r('app.float.image_border_radius') : 0
     }
     }
+    return radius
+  }
 
 
+  build() {
+    GridRow({
+      gutter: { x: 2, y: 2 }
+    }) {
+      ForEach(this.appStyleImages, (item: appStyleImagesDTO, index: number) => {
+        if (this.appStyleImages.length === 1) {
+          GridCol({
+            span: { xs: 8 }
+          }) {
+            Image(item.fullUrl)
+              .width('100%')
+              .borderRadius(this.caclImageRadius(index))
+          }
+        } else if (this.appStyleImages.length === 4) {
+          GridCol({
+            span: { xs: 5 }
+          }) {
+            Image(item.fullUrl)
+              .aspectRatio(1)
+              .borderRadius(this.caclImageRadius(index))
+          }
+        } else {
+          GridCol({
+            span: { sm: 4, lg: 3 }
+          }) {
+            Image(item.fullUrl)
+              .aspectRatio(1)
+              .borderRadius(this.caclImageRadius(index))
+          }
+        }
+      })
+    }
   }
   }
 }
 }
 
 

@@ -17,12 +17,12 @@ interface RmhInfo extends RmhInfoDTO {
 @Component
 @Component
 export struct rmhTitle {
 export struct rmhTitle {
   // TODO 这里需要传入rmh信息及是否显示关注，是否已关注
   // TODO 这里需要传入rmh信息及是否显示关注，是否已关注
-  @State isAttentionShow: Boolean = false
+  @State isAttentionShow: Boolean = true
   @State rmhInfo: RmhInfo = {
   @State rmhInfo: RmhInfo = {
     authIcon: "https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png",
     authIcon: "https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png",
     authTitle: "四川农业大学",
     authTitle: "四川农业大学",
     headPhotoUrl: "https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20221208/a_785146000057561088.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg",
     headPhotoUrl: "https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20221208/a_785146000057561088.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg",
-    introduction: "四川农业四川",
+    introduction: "四川农业大学",
     userId: "554708665557894",
     userId: "554708665557894",
     userName: "四川农业大学",
     userName: "四川农业大学",
     userType: "2",
     userType: "2",