wangyujian_wd

feat:新增小视频卡comp组件样式(UI)

@@ -13,4 +13,6 @@ export { BottomNavigationComponent } from "./components/BottomNavigationComponen @@ -13,4 +13,6 @@ export { BottomNavigationComponent } from "./components/BottomNavigationComponen
13 13
14 export { TopNavigationComponent } from "./components/TopNavigationComponent" 14 export { TopNavigationComponent } from "./components/TopNavigationComponent"
15 15
16 -export { LabelComponent } from "./components/LabelComponent"  
  16 +export { LabelComponent } from "./components/LabelComponent"
  17 +
  18 +export { SmallVideoCardComponent } from "./components/SmallVideoCardComponent"
  1 +import { CommonConstants } from 'wdConstant/src/main/ets/constants/CommonConstants'
  2 +
  3 +@Entry
  4 +@Component
  5 +export struct SmallVideoCardComponent {
  6 + build() {
  7 + Row() {
  8 + Column() {
  9 + Text('“畅享亚运”新模式活动打卡,看杭州打开“金角银边活动启动 跟着体育明星云打卡,看杭州打开“金角银边')
  10 + .fontWeight(400)
  11 + .fontSize($r('app.float.font_size_17'))
  12 + .maxLines(4)
  13 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  14 + .fontColor($r('app.color.color_222222'))
  15 + .lineHeight(25)
  16 + Row() {
  17 + Text('人民日报')
  18 + .labelTextStyle()
  19 + Image($r('app.media.point'))
  20 + .width(16)
  21 + .height(16)
  22 + Text('20分钟前')
  23 + .labelTextStyle()
  24 + .margin({
  25 + right: 6
  26 + })
  27 + Text('2000评')
  28 + .labelTextStyle()
  29 + }
  30 + }
  31 + .height(156)
  32 + .layoutWeight(1)
  33 + .justifyContent(FlexAlign.SpaceBetween)
  34 + .alignItems(HorizontalAlign.Start)
  35 + .margin({ right: 12 })
  36 +
  37 + Stack({ alignContent: Alignment.BottomEnd }) {
  38 + Image('https://www.harmonyos.com/resource/image/partner/harmonyos-connect/pic_shengtai_connect_qudao_xianxia.jpg')
  39 + .width(117)
  40 + .aspectRatio(117 / 156)
  41 + .border({ radius: 4 })
  42 + Row() {
  43 + Image($r('app.media.iv_card_play_yellow_flag'))
  44 + .width(22)
  45 + .height(18)
  46 + Text('10:00')
  47 + .fontSize($r('app.float.font_size_13'))
  48 + .fontWeight(400)
  49 + .fontColor($r('app.color.color_fff'))
  50 + }
  51 + .height(18)
  52 + .padding({ right: 4 })
  53 + .margin({
  54 + right: 4,
  55 + bottom: 4
  56 + })
  57 + .backgroundColor($r('app.color.color_4d000000'))
  58 + }
  59 + }
  60 + .width(CommonConstants.FULL_WIDTH)
  61 + .height(184)
  62 + .padding({
  63 + top: 14,
  64 + bottom: 14,
  65 + left: 16,
  66 + right: 16
  67 + })
  68 + }
  69 +}
  70 +
  71 +@Extend(Text) function labelTextStyle() {
  72 + .fontSize($r('app.float.font_size_12'))
  73 + .fontWeight(400)
  74 + .fontColor($r('app.color.color_B0B0B0'))
  75 +}
@@ -31,6 +31,14 @@ @@ -31,6 +31,14 @@
31 { 31 {
32 "name": "color_B0B0B0", 32 "name": "color_B0B0B0",
33 "value": "#B0B0B0" 33 "value": "#B0B0B0"
  34 + },
  35 + {
  36 + "name": "color_fff",
  37 + "value": "#ffffff"
  38 + },
  39 + {
  40 + "name": "color_4d000000",
  41 + "value": "#4d000000"
34 } 42 }
35 ] 43 ]
36 } 44 }
@@ -10,7 +10,11 @@ @@ -10,7 +10,11 @@
10 }, 10 },
11 { 11 {
12 "name": "font_size_12", 12 "name": "font_size_12",
13 - "value": "11fp" 13 + "value": "12fp"
  14 + },
  15 + {
  16 + "name": "font_size_13",
  17 + "value": "13fp"
14 }, 18 },
15 { 19 {
16 "name": "font_size_14", 20 "name": "font_size_14",
@@ -21,6 +25,10 @@ @@ -21,6 +25,10 @@
21 "value": "16fp" 25 "value": "16fp"
22 }, 26 },
23 { 27 {
  28 + "name": "font_size_17",
  29 + "value": "17fp"
  30 + },
  31 + {
24 "name": "normal_text_size", 32 "name": "normal_text_size",
25 "value": "16fp" 33 "value": "16fp"
26 }, 34 },