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
+5 -2
View File
@@ -442,7 +442,7 @@ export struct AiPickNodeComponent {
.linearGradient({ .linearGradient({
angle: 90, angle: 90,
colors: [ colors: [
[$r('app.color.transparent_white'), 0], [$r('app.color.tab_gradient_start'), 0],
[$r('app.color.surface_layer1_foreground'), 1], [$r('app.color.surface_layer1_foreground'), 1],
], ],
}) })
@@ -479,11 +479,13 @@ export struct AiPickNodeComponent {
ForEach( ForEach(
this.cardData.tabs[$$.tabIdx].strategy.tagList, this.cardData.tabs[$$.tabIdx].strategy.tagList,
(tag: string) => { (tag: string) => {
Row() {
Text(tag) Text(tag)
.fontSize(11) .fontSize(11)
.lineHeight(18)
.fontColor($r('app.color.elements_text_primary_01')) .fontColor($r('app.color.elements_text_primary_01'))
.maxLines(1) .maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.height(18) .height(18)
.padding({ left: 3, right: 3 }) .padding({ left: 3, right: 3 })
.borderRadius(2) .borderRadius(2)
@@ -491,6 +493,7 @@ export struct AiPickNodeComponent {
width: 0.5, width: 0.5,
color: $r('app.color.elements_text_primary_01'), color: $r('app.color.elements_text_primary_01'),
}) })
.alignItems(VerticalAlign.Center)
.onClick(() => { .onClick(() => {
this.jumpToLabel( this.jumpToLabel(
this.cardData.tabs[$$.tabIdx].strategy, this.cardData.tabs[$$.tabIdx].strategy,
@@ -499,7 +499,7 @@ export struct MarketRankingNodeComponent {
.height(30) .height(30)
.linearGradient({ .linearGradient({
angle: 90, angle: 90,
colors: [[$r('app.color.transparent_white'), 0], colors: [[$r('app.color.tab_gradient_start'), 0],
[$r('app.color.surface_layer1_foreground'), 1]], [$r('app.color.surface_layer1_foreground'), 1]],
}) })
.hitTestBehavior(HitTestMode.None) .hitTestBehavior(HitTestMode.None)
@@ -52,6 +52,10 @@
"name": "transparent_white", "name": "transparent_white",
"value": "#00FFFFFF" "value": "#00FFFFFF"
}, },
{
"name": "tab_gradient_start",
"value": "#00FFFFFF"
},
{ {
"name": "color_333333", "name": "color_333333",
"value": "#333333" "value": "#333333"
@@ -7,6 +7,10 @@
{ {
"name": "solid_grey_900", "name": "solid_grey_900",
"value": "#3B3B3B" "value": "#3B3B3B"
},
{
"name": "tab_gradient_start",
"value": "#00000000"
} }
] ]
} }