横滑卡3:2 UI

+import { CommonConstants } from 'wdConstant'
+import { CompDTO } from '../repository/bean/CompDTO'
+
+@Component
+export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
+  @State compDTO: CompDTO = {} as CompDTO
+  private arr: number[] = [0, 1, 2]
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image($r("app.media.redLine"))
+            .width(3)
+            .height(16)
+            .margin({ right: 4 })
+          Text("大标题")
+            .fontSize($r("app.float.font_size_17"))
+            .fontColor($r("app.color.color_222222"))
+            .fontWeight(600)
+        }
+
+        Row() {
+          Text("更多")
+            .fontSize($r("app.float.font_size_14"))
+            .fontColor($r("app.color.color_999999"))
+            .margin({ right: 1 })
+          Image($r("app.media.more"))
+            .width(14)
+            .height(14)
+        }
+      }.justifyContent(FlexAlign.SpaceBetween)
+      .padding({left:16,right:16})
+      .margin({top:8 ,bottom:8})
+      .width('100%')
+      // .backgroundColor($r("app.color.white"))
+      List({ space: 12 }) {
+
+        ForEach(this.arr, (item: number) => {
+          ListItem() {
+            Column() {
+              Image($r("app.media.setting"))
+                .aspectRatio(1.5)
+                .width(150)
+                .borderRadius(4)
+                .objectFit(ImageFit.Cover)
+
+              Text("大发大法师法师打发大水发生发大水发大水发大发大法师法师打发大水发生发大水发大水发大发大法师法师打发大水发生发大水发大水发")
+                .fontSize($r("app.float.font_size_14"))
+                .fontColor($r("app.color.color_212228"))
+                .fontWeight(400)
+                .maxLines(2)
+                .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+                .textAlign(TextAlign.Start)
+                .margin({ top: 8 })
+                .width(150)
+            }
+          }
+          .padding({left:(item == 0)? 16:0, right:(item == this.arr.length - 1) ? 16:0})
+          // .offset({x:16})
+        }, item => item)
+
+      }.listDirection(Axis.Horizontal)
+      .width('100%')
+      // .backgroundColor($r("app.color.color_FE4B05"))
+      // .padding({left:16,right:16})
+      // .margin({left:16,right:16})
+
+    }
+    .width("100%")
+    .padding({
+      top: 14,
+      left: 0,
+      right: 0,
+      bottom: 14
+    })
+    .backgroundColor($r("app.color.white"))
+    // .backgroundColor($r("app.color.color_FE4B05"))
+    .margin({ bottom: 8 })
+  }
+}
+

+import { CommonConstants } from 'wdConstant'
+import { CompDTO } from '../repository/bean/CompDTO'
+
+@Component
+export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
+  @State compDTO: CompDTO = {} as CompDTO
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image($r("app.media.redLine"))
+            .width(3)
+            .height(16)
+            .margin({ right: 4 })
+          Text("大标题")
+            .fontSize($r("app.float.font_size_17"))
+            .fontColor($r("app.color.color_222222"))
+            .fontWeight(600)
+        }
+
+        Row() {
+          Text("更多")
+            .fontSize($r("app.float.font_size_14"))
+            .fontColor($r("app.color.color_999999"))
+            .margin({ right: 1 })
+          Image($r("app.media.more"))
+            .width(14)
+            .height(14)
+        }
+      }.justifyContent(FlexAlign.SpaceBetween)
+      .margin({ top: 8 ,bottom: 8})
+      .width('100%')
+
+
+      Image($r("app.media.setting"))
+        .aspectRatio(1.5)
+        .width('100%')
+        .borderRadius(4)
+        .objectFit(ImageFit.Cover)
+
+      Text("大发大法师法师打发大水发生发大水发大水发大发大法师法师打发大水发生发大水发大水发大发大法师法师打发大水发生发大水发大水发")
+        .fontSize($r("app.float.font_size_14"))
+        .fontColor($r("app.color.color_212228"))
+        .fontWeight(400)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+        .textAlign(TextAlign.Start)
+        .margin({ top: 8 })
+        .width('100%')
+
+    }.width("100%")
+    .padding({
+      top: 14,
+      left: 16,
+      right: 16,
+      bottom: 14
+    })
+    .backgroundColor($r("app.color.white"))
+    .margin({ bottom: 8 })
+  }
+}

+import { CommonConstants } from 'wdConstant'
+import { CompDTO } from '../repository/bean/CompDTO'
+
+@Component
+export struct HorizontalStrokeCardThreeTwoRadioForTwoComponent {
+  @State compDTO: CompDTO = {} as CompDTO
+  private arr: number[] = [0, 1, 2]
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image($r("app.media.redLine"))
+            .width(3)
+            .height(16)
+            .margin({ right: 4 })
+          Text("大标题")
+            .fontSize($r("app.float.font_size_17"))
+            .fontColor($r("app.color.color_222222"))
+            .fontWeight(600)
+        }
+
+        Row() {
+          Text("更多")
+            .fontSize($r("app.float.font_size_14"))
+            .fontColor($r("app.color.color_999999"))
+            .margin({ right: 1 })
+          Image($r("app.media.more"))
+            .width(14)
+            .height(14)
+        }
+      }.justifyContent(FlexAlign.SpaceBetween)
+      .padding({left:16,right:16})
+      .margin({top:8 ,bottom:8})
+      .width('100%')
+      // .backgroundColor($r("app.color.white"))
+      List({ space: 12 }) {
+
+            ForEach(this.arr, (item: number) => {
+              ListItem() {
+                Column() {
+                  Image($r("app.media.setting"))
+                    .aspectRatio(1.5)
+                    .width(210)
+                    .borderRadius(4)
+                    .objectFit(ImageFit.Cover)
+
+                  Text("大发大法师法师打发大水发生发大水发大水发大发大法师法师打发大水发生发大水发大水发大发大法师法师打发大水发生发大水发大水发")
+                    .fontSize($r("app.float.font_size_14"))
+                    .fontColor($r("app.color.color_212228"))
+                    .fontWeight(400)
+                    .maxLines(2)
+                    .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+                    .textAlign(TextAlign.Start)
+                    .margin({ top: 8 })
+                    .width(210)
+                }
+              }
+              .padding({left:(item == 0)? 16:0, right:(item == this.arr.length - 1) ? 16:0})
+              // .offset({x:16})
+            }, item => item)
+
+      }.listDirection(Axis.Horizontal)
+      .width('100%')
+      // .backgroundColor($r("app.color.color_FE4B05"))
+      // .padding({left:16,right:16})
+      // .margin({left:16,right:16})
+
+    }
+    .width("100%")
+    .padding({
+      top: 14,
+      left: 0,
+      right: 0,
+      bottom: 14
+    })
+    .backgroundColor($r("app.color.white"))
+    // .backgroundColor($r("app.color.color_FE4B05"))
+    .margin({ bottom: 8 })
+  }
+}
+

@@ -8,6 +8,10 @@ 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 { HorizontalStrokeCardThreeTwoRadioForOneComponent } from './HorizontalStrokeCardThreeTwoRadioForOneComponent';
+import { HorizontalStrokeCardThreeTwoRadioForTwoComponent } from './HorizontalStrokeCardThreeTwoRadioForTwoComponent';
+import { HorizontalStrokeCardThreeTwoRadioForMoreComponent } from './HorizontalStrokeCardThreeTwoRadioForMoreComponent';
+
 
 
 const TAG = 'PageComponent';
 const TAG = 'PageComponent';
 
 

@@ -31,6 +31,11 @@
     {
     {
       "name": "color_B0B0B0",
       "name": "color_B0B0B0",
       "value": "#B0B0B0"
       "value": "#B0B0B0"
-    }
+    },
+    {
+      "name": "color_212228",
+      "value": "#212228"
+    },
+
   ]
   ]
 }
 }

@@ -21,6 +21,10 @@
       "value": "16fp"
       "value": "16fp"
     },
     },
     {
     {
+      "name": "font_size_17",
+      "value": "17fp"
+    },
+    {
       "name": "normal_text_size",
       "name": "normal_text_size",
       "value": "16fp"
       "value": "16fp"
     },
     },