developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
4e991cc5 1 parent af3e02d4

style:本地精选卡样式优化

Inline Side-by-side
Showing 5 changed files with 90 additions and 56 deletions
1 import { CompDTO } from 'wdBean'; 1 import { CompDTO } from 'wdBean';
2 import { CommonConstants, CompStyle } from 'wdConstant'; 2 import { CommonConstants, CompStyle } from 'wdConstant';
3 -import { BannerComponent } from './view/BannerComponent';  
4 import { LabelComponent } from './view/LabelComponent'; 3 import { LabelComponent } from './view/LabelComponent';
5 import { LiveHorizontalCardComponent } from './view/LiveHorizontalCardComponent'; 4 import { LiveHorizontalCardComponent } from './view/LiveHorizontalCardComponent';
6 import { 5 import {
@@ -71,6 +71,7 @@ export struct AttentionListComponent { @@ -71,6 +71,7 @@ export struct AttentionListComponent {
71 }) 71 })
72 } 72 }
73 .listDirection(Axis.Horizontal) 73 .listDirection(Axis.Horizontal)
  74 + .scrollBar(BarState.Off)
74 .height(74) 75 .height(74)
75 } 76 }
76 .padding({ 77 .padding({
1 import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean'; 1 import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
2 import { RmhTitle } from '../cardCommon/RmhTitle' 2 import { RmhTitle } from '../cardCommon/RmhTitle'
3 import { ProcessUtils } from '../../utils/ProcessUtils'; 3 import { ProcessUtils } from '../../utils/ProcessUtils';
  4 +import { CommonConstants } from 'wdConstant/Index';
  5 +
4 const TAG = 'Card19Component'; 6 const TAG = 'Card19Component';
5 7
6 /** 8 /**
@@ -83,9 +85,16 @@ export struct Card19Component { @@ -83,9 +85,16 @@ export struct Card19Component {
83 .fontColor($r('app.color.color_222222')) 85 .fontColor($r('app.color.color_222222'))
84 .textOverflowStyle(2) 86 .textOverflowStyle(2)
85 .margin({ bottom: 8 }) 87 .margin({ bottom: 8 })
  88 + .width(CommonConstants.FULL_WIDTH)
  89 + .onClick((event: ClickEvent) => {
  90 + ProcessUtils.processPage(this.contentDTO)
  91 + })
86 } 92 }
87 // 图片-从无图到9图展示 93 // 图片-从无图到9图展示
88 createImg({ fullColumnImgUrls: this.contentDTO.fullColumnImgUrls }) 94 createImg({ fullColumnImgUrls: this.contentDTO.fullColumnImgUrls })
  95 + .onClick((event: ClickEvent) => {
  96 + ProcessUtils.processPage(this.contentDTO)
  97 + })
89 //TODO 底部的：分享、评论、点赞 功能；需要引用一个公共组件 98 //TODO 底部的：分享、评论、点赞 功能；需要引用一个公共组件
90 } 99 }
91 .padding({ 100 .padding({
@@ -94,9 +103,6 @@ export struct Card19Component { @@ -94,9 +103,6 @@ export struct Card19Component {
94 top: $r('app.float.card_comp_pagePadding_tb'), 103 top: $r('app.float.card_comp_pagePadding_tb'),
95 bottom: $r('app.float.card_comp_pagePadding_tb') 104 bottom: $r('app.float.card_comp_pagePadding_tb')
96 }) 105 })
97 - .onClick((event: ClickEvent) => {  
98 - ProcessUtils.processPage(this.contentDTO)  
99 - })  
100 } 106 }
101 } 107 }
102 108
1 -import { CompDTO, ContentDTO } from 'wdBean';  
2 -import { CommonConstants } from 'wdConstant';  
3 -import { DateTimeUtils } from 'wdKit'; 1 +import { CompDTO, ContentDTO } from 'wdBean';
  2 +import { CommonConstants } from 'wdConstant';
  3 +import { DateTimeUtils } from 'wdKit';
4 import { ProcessUtils } from '../../utils/ProcessUtils'; 4 import { ProcessUtils } from '../../utils/ProcessUtils';
5 5
6 /** 6 /**
@@ -12,12 +12,10 @@ import { ProcessUtils } from '../../utils/ProcessUtils'; @@ -12,12 +12,10 @@ import { ProcessUtils } from '../../utils/ProcessUtils';
12 export struct ZhSingleRow04 { 12 export struct ZhSingleRow04 {
13 @State compDTO: CompDTO = {} as CompDTO 13 @State compDTO: CompDTO = {} as CompDTO
14 14
15 - aboutToAppear() {}  
16 -  
17 build() { 15 build() {
18 - Column(){ 16 + Column() {
19 //顶部 17 //顶部
20 - Row(){ 18 + Row() {
21 Row() { 19 Row() {
22 Image($r("app.media.local_selection")) 20 Image($r("app.media.local_selection"))
23 .width(24) 21 .width(24)
@@ -28,6 +26,7 @@ export struct ZhSingleRow04 { @@ -28,6 +26,7 @@ export struct ZhSingleRow04 {
28 .fontColor($r("app.color.color_222222")) 26 .fontColor($r("app.color.color_222222"))
29 .fontWeight(600) 27 .fontWeight(600)
30 } 28 }
  29 +
31 Row() { 30 Row() {
32 Text("更多") 31 Text("更多")
33 .fontSize($r("app.float.font_size_14")) 32 .fontSize($r("app.float.font_size_14"))
@@ -41,64 +40,93 @@ export struct ZhSingleRow04 { @@ -41,64 +40,93 @@ export struct ZhSingleRow04 {
41 .justifyContent(FlexAlign.SpaceBetween) 40 .justifyContent(FlexAlign.SpaceBetween)
42 .margin({ top: 8, bottom: 8 }) 41 .margin({ top: 8, bottom: 8 })
43 .width('100%') 42 .width('100%')
  43 +
44 // 列表内容 44 // 列表内容
45 List({ space: 12 }) { 45 List({ space: 12 }) {
46 - ForEach(this.compDTO.operDataList, (item: ContentDTO) => { 46 + ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
47 ListItem() { 47 ListItem() {
48 - Row(){  
49 - if(item.coverUrl) {  
50 - Image(item.coverUrl)  
51 - .width(84)  
52 - .height(56)  
53 - .borderRadius(3)  
54 - .objectFit(ImageFit.Cover)  
55 - .padding({right: 6})  
56 - }  
57 - Column(){  
58 - Text(item.newsTitle)  
59 - .fontSize($r("app.float.font_size_16"))  
60 - .fontColor($r("app.color.color_212228"))  
61 - .fontWeight(400)  
62 - .maxLines(2)  
63 - .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。  
64 - .margin({ top: 8 })  
65 -  
66 - Row(){  
67 - Text(item.source)  
68 - .fontSize($r('app.float.font_size_12'))  
69 - .fontColor($r('app.color.color_B0B0B0'))  
70 - .textOverflow({overflow: TextOverflow.Ellipsis})  
71 - .maxLines(1)  
72 - .width(item.source.length > 10 ? '60%' : '')  
73 - Image($r("app.media.point"))  
74 - .width(16)  
75 - .height(16)  
76 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))  
77 - .fontSize($r("app.float.font_size_12"))  
78 - .fontColor($r("app.color.color_B0B0B0"))  
79 - }  
80 - .width('100%') 48 + localCard(
  49 + {
  50 + operDataListItem: item
81 } 51 }
82 - .width(200)  
83 - }  
84 - // .margin({right: 18})  
85 - .onClick(() =>{  
86 - ProcessUtils.processPage(item)  
87 - }) 52 + )
  53 + .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
  54 + .onClick(() => {
  55 + ProcessUtils.processPage(item)
  56 + })
88 } 57 }
89 }) 58 })
90 } 59 }
91 .listDirection(Axis.Horizontal) 60 .listDirection(Axis.Horizontal)
92 - .width('100%') 61 + .scrollBar(BarState.Off)
  62 + .width(CommonConstants.FULL_PARENT)
93 } 63 }
94 .width(CommonConstants.FULL_WIDTH) 64 .width(CommonConstants.FULL_WIDTH)
95 .padding({ 65 .padding({
96 - top: 14,  
97 - left: 16,  
98 - right: 16,  
99 - bottom: 14 66 + left: $r('app.float.card_comp_pagePadding_lf'),
  67 + top: $r('app.float.card_comp_pagePadding_tb'),
  68 + bottom: $r('app.float.card_comp_pagePadding_tb')
100 }) 69 })
101 .backgroundColor($r("app.color.white")) 70 .backgroundColor($r("app.color.white"))
102 .margin({ bottom: 8 }) 71 .margin({ bottom: 8 })
103 } 72 }
  73 +}
  74 +
  75 +
  76 +@Component
  77 +struct localCard {
  78 + @Prop operDataListItem: ContentDTO
  79 +
  80 + build() {
  81 + Flex({ direction: FlexDirection.Column }) {
  82 + Text(this.operDataListItem.source)
  83 + .fontSize($r('app.float.font_size_12'))
  84 + .fontColor($r('app.color.color_B0B0B0'))
  85 + .width('100%')
  86 + .margin({ bottom: 6 })
  87 + .flexShrink(0)
  88 +
  89 + Text(this.operDataListItem.newsTitle)
  90 + .width(CommonConstants.FULL_PARENT)
  91 + .height(CommonConstants.FULL_PARENT)
  92 + .fontSize($r('app.float.font_size_16'))
  93 + .fontColor('#000000')
  94 + .align(Alignment.TopStart)
  95 + .maxLines(3)
  96 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  97 + Row() {
  98 + Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.operDataListItem.publishTime)))
  99 + .fontSize($r("app.float.font_size_12"))
  100 + .fontColor($r("app.color.color_B0B0B0"))
  101 + .margin({ right: 5 })
  102 + // 这里需要外部查询评论接口后，写入字段
  103 + if(this.operDataListItem.interactData?.commentNum) {
  104 + Text(`${this.operDataListItem.interactData?.commentNum}评`)
  105 + .fontSize(12)
  106 + }
  107 + Blank()
  108 + Image($r('app.media.local_content_icon'))
  109 + .width(20)
  110 + .height(20)
  111 + .margin({
  112 + right: -4
  113 + })
  114 + }
  115 + .width('100%')
  116 + .padding({
  117 + top: 17
  118 + })
  119 + .flexShrink(0)
  120 + }
  121 + .width(182)
  122 + .height(146)
  123 + .padding(12)
  124 + .border({
  125 + radius: 2,
  126 + })
  127 + .shadow({ radius: 5, color: '#1A000000', offsetX: 0, offsetY: 2 })
  128 + .margin({
  129 + right: 10
  130 + })
  131 + }
104 } 132 }