yuzhilin

tab 样式优化

... ... @@ -263,10 +263,10 @@ export struct TopNavigationComponent {
if (this.currentTopNavSelectedIndex == 0) {
return item.name === '视频' ? Color.White : '#e5e0e0'
} else {
return this.currentTopNavSelectedIndex === index ? Color.Black : Color.Gray
return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
}
} else {
return this.currentTopNavSelectedIndex === index ? Color.Black : Color.Gray
return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
}
}
... ... @@ -274,30 +274,28 @@ export struct TopNavigationComponent {
tabBarBuilder(item: TopNavDTO, index: number) {
Column() {
Text(item.name)
.fontSize(this.currentTopNavSelectedIndex === index ? $r('app.float.selected_text_size') : $r('app.float.normal_text_size'))
.fontSize($r('app.float.selected_text_size'))
.fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
.fontColor(this.getFontColor(item, index))
.padding({ top: $r('app.float.top_tab_item_padding_top') })
.padding({ top: $r('app.float.top_tab_item_padding_top') , bottom: $r('app.float.top_tab_item_padding_bottom')})
.maxLines(this.MAX_LINE)
if (this.currentTopNavSelectedIndex === index) {
Row()
.width(20)
.height(3)
.backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Contain)
}
}
.hoverEffect(HoverEffect.Highlight)
.constraintSize({
minWidth: $r('app.float.top_tab_item_min_width'),
maxWidth: $r('app.float.top_tab_item_max_width')
})
// .margin({ right: 36 })
.backgroundColor(Color.Transparent)
.padding({
left: $r('app.float.top_tab_item_padding_horizontal'),
right: $r('app.float.top_tab_item_padding_horizontal'),
bottom: $r('app.float.top_tab_item_padding_bottom')
})
.id(`col_tabBar${index}`)
.margin({ right: this.myChannelList.length === index + 1 ? 36 : 0 })
... ...
... ... @@ -34,7 +34,7 @@
},
{
"name": "selected_text_size",
"value": "18fp"
"value": "17vp"
},
{
"name": "font_size_18",
... ... @@ -178,11 +178,11 @@
},
{
"name": "top_tab_item_padding_bottom",
"value": "5vp"
"value": "2vp"
},
{
"name": "top_tab_item_padding_top",
"value": "2vp"
"value": "5vp"
},
{
"name": "top_bar_height",
... ...