developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
f89ff44a 1 parent e8a1af5b

卡片组件样式优化

Inline Side-by-side
Showing 5 changed files with 48 additions and 21 deletions
@@ -25,7 +25,7 @@ export struct CarouselLayout01CardView { @@ -25,7 +25,7 @@ export struct CarouselLayout01CardView {
25 .width(CommonConstants.FULL_PARENT) 25 .width(CommonConstants.FULL_PARENT)
26 .height(CommonConstants.FULL_PARENT) 26 .height(CommonConstants.FULL_PARENT)
27 .objectFit(ImageFit.Cover) 27 .objectFit(ImageFit.Cover)
28 - .borderRadius($r("app.float.border_radius_6")) 28 + // .borderRadius($r("app.float.border_radius_6"))
29 .alignRules({ 29 .alignRules({
30 top: { anchor: '__container__', align: VerticalAlign.Top }, 30 top: { anchor: '__container__', align: VerticalAlign.Top },
31 left: { anchor: '__container__', align: HorizontalAlign.Start } 31 left: { anchor: '__container__', align: HorizontalAlign.Start }
@@ -45,7 +45,7 @@ export struct CarouselLayout01CardView { @@ -45,7 +45,7 @@ export struct CarouselLayout01CardView {
45 // .id('img_corner_top_Left') 45 // .id('img_corner_top_Left')
46 // } 46 // }
47 47
48 - Text(this.item.title) 48 + Text(this.item.newsTitle)
49 .width(CommonConstants.FULL_PARENT) 49 .width(CommonConstants.FULL_PARENT)
50 .height(39) 50 .height(39)
51 .padding({ left: 8, right: 69, bottom: 8 }) 51 .padding({ left: 8, right: 69, bottom: 8 })
@@ -49,6 +49,7 @@ export struct BannerComponent { @@ -49,6 +49,7 @@ export struct BannerComponent {
49 } 49 }
50 .margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin') }) 50 .margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin') })
51 .padding({ bottom: 14 }) 51 .padding({ bottom: 14 })
  52 + .borderRadius($r('app.float.image_border_radius'))
52 .displayCount(this.buildDisplayCount()) // 仅展示1个图片 53 .displayCount(this.buildDisplayCount()) // 仅展示1个图片
53 .cachedCount(2) 54 .cachedCount(2)
54 .index(1) // The default index of Swiper. 55 .index(1) // The default index of Swiper.
@@ -22,9 +22,18 @@ export struct CompStyle_09 { @@ -22,9 +22,18 @@ export struct CompStyle_09 {
22 .margin({ bottom: 19 }) 22 .margin({ bottom: 19 })
23 } 23 }
24 // 大图 24 // 大图
25 - Image(this.compDTO.operDataList[0].coverUrl)  
26 - .width('100%')  
27 - .borderRadius({topLeft: $r('app.float.image_border_radius'), topRight: $r('app.float.image_border_radius')}) 25 + Stack(){
  26 + Image(this.compDTO.operDataList[0].coverUrl)
  27 + .width('100%')
  28 + .borderRadius({topLeft: $r('app.float.image_border_radius'), topRight: $r('app.float.image_border_radius')})
  29 + Text('专题')
  30 + .fontSize($r('app.float.font_size_12'))
  31 + .padding({left: 8, right: 8, top: 3, bottom: 3})
  32 + .backgroundColor(Color.Red)
  33 + .fontColor(Color.White)
  34 + .borderRadius($r('app.float.button_border_radius'))
  35 + .margin({left: 5, bottom: 5})
  36 + }.alignContent(Alignment.BottomStart)
28 // 时间线--后端返回三个， 37 // 时间线--后端返回三个，
29 Column(){ 38 Column(){
30 ForEach(this.compDTO.operDataList[0].slideShows, (item:slideShows, index:number) => { 39 ForEach(this.compDTO.operDataList[0].slideShows, (item:slideShows, index:number) => {
@@ -68,20 +77,27 @@ export struct CompStyle_09 { @@ -68,20 +77,27 @@ export struct CompStyle_09 {
68 Column(){ 77 Column(){
69 Stack() { 78 Stack() {
70 if(index < this.compDTO.operDataList[0].slideShows.length - 1) { 79 if(index < this.compDTO.operDataList[0].slideShows.length - 1) {
71 - Line()  
72 - .width(1)  
73 - .startPoint([4, index > 0 ? 0 : 20])  
74 - .endPoint([4, 100])  
75 - .stroke($r('app.color.color_EDEDED')) 80 + Divider()
  81 + .vertical(true)
  82 + .color($r('app.color.color_EDEDED'))
76 .strokeWidth(1) 83 .strokeWidth(1)
77 - .strokeLineCap(LineCapStyle.Butt) 84 + .margin({top: index > 0 ? 0 : 16, left: 4})
78 } 85 }
  86 + if(index > 0 && index == this.compDTO.operDataList[0].slideShows.length - 1) {
  87 + Divider()
  88 + .vertical(true)
  89 + .color($r('app.color.color_EDEDED'))
  90 + .strokeWidth(1)
  91 + .height(16)
  92 + .margin({left: 4})
  93 + }
  94 +
79 Column(){ 95 Column(){
80 Row() { 96 Row() {
81 // 标题 97 // 标题
82 Image($r("app.media.point_icon")) 98 Image($r("app.media.point_icon"))
83 .width(9) 99 .width(9)
84 - .height(6) 100 + .height(9)
85 .margin({ right: 5 }) 101 .margin({ right: 5 })
86 Text(DateTimeUtils.formatDate(item.publishTime, "MM月dd日 HH:mm")) 102 Text(DateTimeUtils.formatDate(item.publishTime, "MM月dd日 HH:mm"))
87 .fontSize($r('app.float.font_size_12')) 103 .fontSize($r('app.float.font_size_12'))
@@ -90,6 +106,7 @@ export struct CompStyle_09 { @@ -90,6 +106,7 @@ export struct CompStyle_09 {
90 } 106 }
91 .width(CommonConstants.FULL_WIDTH) 107 .width(CommonConstants.FULL_WIDTH)
92 .height(32) 108 .height(32)
  109 + .alignItems(VerticalAlign.Center)
93 Row() { 110 Row() {
94 Text(item.newsTitle) 111 Text(item.newsTitle)
95 .fontSize($r('app.float.font_size_17')) 112 .fontSize($r('app.float.font_size_17'))
@@ -109,8 +126,9 @@ export struct CompStyle_09 { @@ -109,8 +126,9 @@ export struct CompStyle_09 {
109 } 126 }
110 } 127 }
111 } 128 }
112 - .alignContent(Alignment.Start) 129 + .alignContent(Alignment.TopStart)
113 } 130 }
114 .height(item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url ? 100 : 78) 131 .height(item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url ? 100 : 78)
  132 + .alignItems(HorizontalAlign.Start)
115 } 133 }
116 } 134 }
@@ -24,12 +24,21 @@ export struct CompStyle_10 { @@ -24,12 +24,21 @@ export struct CompStyle_10 {
24 .margin({ bottom: 19 }) 24 .margin({ bottom: 19 })
25 } 25 }
26 // 大图 26 // 大图
27 - Image(this.compDTO.operDataList[0] && this.compDTO.operDataList[0].coverUrl)  
28 - .width('100%')  
29 - .borderRadius({topLeft: $r('app.float.image_border_radius'), topRight: $r('app.float.image_border_radius')})  
30 - .onClick((event: ClickEvent) => {  
31 - ProcessUtils.processPage(this.compDTO?.operDataList[0])  
32 - }) 27 + Stack(){
  28 + Image(this.compDTO.operDataList[0] && this.compDTO.operDataList[0].coverUrl)
  29 + .width('100%')
  30 + .borderRadius({topLeft: $r('app.float.image_border_radius'), topRight: $r('app.float.image_border_radius')})
  31 + .onClick((event: ClickEvent) => {
  32 + ProcessUtils.processPage(this.compDTO?.operDataList[0])
  33 + })
  34 + Text('专题')
  35 + .fontSize($r('app.float.font_size_12'))
  36 + .padding({left: 8, right: 8, top: 3, bottom: 3})
  37 + .backgroundColor(Color.Red)
  38 + .fontColor(Color.White)
  39 + .borderRadius($r('app.float.button_border_radius'))
  40 + .margin({left: 5, bottom: 5})
  41 + }.alignContent(Alignment.BottomStart)
33 // 专题列表--后端返回三个， 42 // 专题列表--后端返回三个，
34 Column(){ 43 Column(){
35 ForEach(this.compDTO.operDataList[0].slideShows, (item:slideShows, index:number) => { 44 ForEach(this.compDTO.operDataList[0].slideShows, (item:slideShows, index:number) => {
@@ -10,8 +10,8 @@ export struct HeadPictureCardComponent { @@ -10,8 +10,8 @@ export struct HeadPictureCardComponent {
10 Stack() { 10 Stack() {
11 Image(this.compDTO.operDataList[0].coverUrl) 11 Image(this.compDTO.operDataList[0].coverUrl)
12 .width(CommonConstants.FULL_WIDTH) 12 .width(CommonConstants.FULL_WIDTH)
13 - .height(CommonConstants.FULL_HEIGHT)  
14 .autoResize(true) 13 .autoResize(true)
  14 + .borderRadius($r('app.float.image_border_radius'))
15 if (this.compDTO.operDataList[0].newsTitle) { 15 if (this.compDTO.operDataList[0].newsTitle) {
16 Row() 16 Row()
17 .width(CommonConstants.FULL_WIDTH) 17 .width(CommonConstants.FULL_WIDTH)
@@ -38,7 +38,6 @@ export struct HeadPictureCardComponent { @@ -38,7 +38,6 @@ export struct HeadPictureCardComponent {
38 } 38 }
39 .alignContent(Alignment.Bottom) 39 .alignContent(Alignment.Bottom)
40 .width(CommonConstants.FULL_WIDTH) 40 .width(CommonConstants.FULL_WIDTH)
41 - .height(200)  
42 .padding( 41 .padding(
43 { top: 16, bottom: 16, left: 14, right: 14 }) 42 { top: 16, bottom: 16, left: 14, right: 14 })
44 .onClick((event: ClickEvent) => { 43 .onClick((event: ClickEvent) => {