Premium 推广卡片：金色边框 + 阴影 + 立即开通按钮

2026/7/19 0:32:37

前言

“海风日记“的“我的“页面中，Premium 推广卡片以金色边框和阴影突出显示，引导用户开通高级订阅。

本文将从源码出发，深入讲解 Premium 推广卡片的实现。

一、Premium 卡片

Row({ space: 16 }) { Column({ space: 4 }) { Row({ space: 6 }) { Text('✨').fontSize(16) Text('海风 Premium').fontSize(14).fontColor('#C8800A').fontWeight(FontWeight.Bold) } Text('解锁无限存储 · AI 周报 · 主题皮肤') .fontSize(12).fontColor(COLOR_TEXT_SECONDARY) } .layoutWeight(1).alignItems(HorizontalAlign.Start) Button('立即开通') .height(32).fontSize(13).fontColor('#FFFFFF').fontWeight(FontWeight.Bold) .backgroundColor(COLOR_PRIMARY).borderRadius(BTN_RADIUS_FULL) .padding({ left: 14, right: 14 }) .onClick(() => { router.pushUrl({ url: 'pages/premium/PremiumPage' }) }) } .padding(PAGE_PADDING) .backgroundColor(COLOR_CARD_BG) .borderRadius(CARD_RADIUS) .border({ width: 1, color: 'rgba(245,166,35,0.20)' }) .shadow({ radius: 12, color: 'rgba(245,166,35,0.12)', offsetY: 3 })

二、设置菜单分组

2.1 菜单数据

interface MenuItemData { icon: Resource label: string url: string danger?: boolean } interface MenuGroup { title: string items: MenuItemData[] }

2.2 菜单渲染

ForEach(this.menuGroups, (group: MenuGroup) => { Column({ space: 0 }) { Text(group.title).fontSize(12).fontColor(COLOR_TEXT_HINT) .padding({ left: PAGE_PADDING, bottom: 6 }) Column() { ForEach(group.items, (item: MenuItemData, idx: number) => { Row({ space: 12 }) { SymbolGlyph(item.icon).fontSize(18).fontColor([item.danger ? '#D06060' : COLOR_AMBER]) Text(item.label).fontSize(15) .fontColor(item.danger ? '#D06060' : COLOR_TEXT_MAIN).layoutWeight(1) SymbolGlyph($r('sys.symbol.chevron_right')).fontSize(14).fontColor([COLOR_TEXT_HINT]) } .width('100%').height(50) .padding({ left: PAGE_PADDING, right: PAGE_PADDING }) .onClick(() => router.pushUrl({ url: item.url })) }) } .backgroundColor(COLOR_CARD_BG).borderRadius(CARD_RADIUS) .shadow({ radius: 8, color: 'rgba(160,120,60,0.06)', offsetY: 2 }) } })