fix card gradients and AI Pick tag alignment

Use a theme-qualified tab gradient start color in both AI Pick and market ranking so the fade no longer introduces a white tint in dark mode.

Add light and dark resource variants, and wrap AI Pick strategy tags in a fixed-height centered container while preserving single-line ellipsis behavior.
This commit is contained in:
clz
2026-07-27 19:34:13 +08:00
parent 10dc2787df
commit f57a0c3ebb
4 changed files with 18 additions and 7 deletions
+9 -6
View File
@@ -442,7 +442,7 @@ export struct AiPickNodeComponent {
.linearGradient({
angle: 90,
colors: [
[$r('app.color.transparent_white'), 0],
[$r('app.color.tab_gradient_start'), 0],
[$r('app.color.surface_layer1_foreground'), 1],
],
})
@@ -479,11 +479,13 @@ export struct AiPickNodeComponent {
ForEach(
this.cardData.tabs[$$.tabIdx].strategy.tagList,
(tag: string) => {
Text(tag)
.fontSize(11)
.lineHeight(18)
.fontColor($r('app.color.elements_text_primary_01'))
.maxLines(1)
Row() {
Text(tag)
.fontSize(11)
.fontColor($r('app.color.elements_text_primary_01'))
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.height(18)
.padding({ left: 3, right: 3 })
.borderRadius(2)
@@ -491,6 +493,7 @@ export struct AiPickNodeComponent {
width: 0.5,
color: $r('app.color.elements_text_primary_01'),
})
.alignItems(VerticalAlign.Center)
.onClick(() => {
this.jumpToLabel(
this.cardData.tabs[$$.tabIdx].strategy,
@@ -499,7 +499,7 @@ export struct MarketRankingNodeComponent {
.height(30)
.linearGradient({
angle: 90,
colors: [[$r('app.color.transparent_white'), 0],
colors: [[$r('app.color.tab_gradient_start'), 0],
[$r('app.color.surface_layer1_foreground'), 1]],
})
.hitTestBehavior(HitTestMode.None)
@@ -52,6 +52,10 @@
"name": "transparent_white",
"value": "#00FFFFFF"
},
{
"name": "tab_gradient_start",
"value": "#00FFFFFF"
},
{
"name": "color_333333",
"value": "#333333"
@@ -7,6 +7,10 @@
{
"name": "solid_grey_900",
"value": "#3B3B3B"
},
{
"name": "tab_gradient_start",
"value": "#00000000"
}
]
}