wangyong_wd

图卡集样式优化

1 import { Action, CompDTO, Params } from 'wdBean'; 1 import { Action, CompDTO, Params } from 'wdBean';
2 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'; 2 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
  3 +import { CommonConstants } from 'wdConstant/Index';
3 import { DateTimeUtils, Logger } from 'wdKit'; 4 import { DateTimeUtils, Logger } from 'wdKit';
4 import { WDRouterRule } from 'wdRouter'; 5 import { WDRouterRule } from 'wdRouter';
5 6
@@ -23,15 +24,12 @@ export struct AlbumCardComponent { @@ -23,15 +24,12 @@ export struct AlbumCardComponent {
23 .fontColor(0x222222) 24 .fontColor(0x222222)
24 .lineHeight(25) 25 .lineHeight(25)
25 .maxLines(3) 26 .maxLines(3)
26 - .margin({ top: 6,  
27 - left: 16,  
28 - right: 16 })  
29 - .width(343) 27 + .width(CommonConstants.FULL_WIDTH)
30 28
31 RelativeContainer() { 29 RelativeContainer() {
32 Image(this.compDTO.operDataList[0].fullColumnImgUrls[0].url) 30 Image(this.compDTO.operDataList[0].fullColumnImgUrls[0].url)
33 - .width(229)  
34 - .height(154) 31 + .width('66.6%')
  32 + .aspectRatio(16/9)
35 .alignRules({ 33 .alignRules({
36 top: { anchor: "__container__", align: VerticalAlign.Top }, 34 top: { anchor: "__container__", align: VerticalAlign.Top },
37 left: { anchor: "__container__", align: HorizontalAlign.Start } 35 left: { anchor: "__container__", align: HorizontalAlign.Start }
@@ -39,8 +37,8 @@ export struct AlbumCardComponent { @@ -39,8 +37,8 @@ export struct AlbumCardComponent {
39 .id('mainImage') 37 .id('mainImage')
40 38
41 Image(this.compDTO.operDataList[0].fullColumnImgUrls[1].url) 39 Image(this.compDTO.operDataList[0].fullColumnImgUrls[1].url)
42 - .width(112)  
43 - .height(76) 40 + .width('33%')
  41 + .aspectRatio(16/9)
44 .alignRules({ 42 .alignRules({
45 top: { anchor: "__container__", align: VerticalAlign.Top }, 43 top: { anchor: "__container__", align: VerticalAlign.Top },
46 right: { anchor: "__container__", align: HorizontalAlign.End } 44 right: { anchor: "__container__", align: HorizontalAlign.End }
@@ -48,14 +46,14 @@ export struct AlbumCardComponent { @@ -48,14 +46,14 @@ export struct AlbumCardComponent {
48 .id('subTopImage') 46 .id('subTopImage')
49 47
50 Image(this.compDTO.operDataList[0].fullColumnImgUrls[2].url) 48 Image(this.compDTO.operDataList[0].fullColumnImgUrls[2].url)
51 - .width(112)  
52 - .height(76) 49 + .width('33%')
  50 + .aspectRatio(16/9)
53 .alignRules({ 51 .alignRules({
54 right: { anchor: "__container__", align: HorizontalAlign.End }, 52 right: { anchor: "__container__", align: HorizontalAlign.End },
55 bottom: { anchor: "__container__", align: VerticalAlign.Bottom } 53 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
56 }) 54 })
57 .id('subBottomImage') 55 .id('subBottomImage')
58 - 56 + // 下面是渲染右下角图标
59 Shape() { 57 Shape() {
60 Rect().width(33).height(18) 58 Rect().width(33).height(18)
61 } 59 }
@@ -97,8 +95,8 @@ export struct AlbumCardComponent { @@ -97,8 +95,8 @@ export struct AlbumCardComponent {
97 .width(17) 95 .width(17)
98 .height(17) 96 .height(17)
99 } 97 }
100 - .width(343)  
101 - .height(154) 98 + .width(CommonConstants.FULL_WIDTH)
  99 + .aspectRatio(24/9)
102 .onClick((event: ClickEvent) => { 100 .onClick((event: ClickEvent) => {
103 let taskAction: Action = { 101 let taskAction: Action = {
104 type: 'JUMP_DETAIL_PAGE', 102 type: 'JUMP_DETAIL_PAGE',
@@ -134,13 +132,17 @@ export struct AlbumCardComponent { @@ -134,13 +132,17 @@ export struct AlbumCardComponent {
134 .margin({ 132 .margin({
135 left: 6 133 left: 6
136 }) 134 })
137 - }.margin({ left: 24 })  
138 - .width(375) 135 + }
  136 + .width(CommonConstants.FULL_WIDTH)
139 .height(16) 137 .height(16)
140 .id('label') 138 .id('label')
141 } 139 }
142 - .width(375)  
143 -  
144 - // .backgroundColor(0x000000) 140 + .width(CommonConstants.FULL_WIDTH)
  141 + .padding({
  142 + top: 14,
  143 + left: 16,
  144 + right: 16,
  145 + bottom: 14
  146 + })
145 } 147 }
146 } 148 }