diff --git a/src/app/sidebar/components/back-bar.module.css b/src/app/sidebar/components/back-bar.module.css index 2482ca69..e27325e2 100644 --- a/src/app/sidebar/components/back-bar.module.css +++ b/src/app/sidebar/components/back-bar.module.css @@ -7,11 +7,11 @@ .link { display: inline-flex; align-items: center; - gap: var(--spacing-xs, 4px); + justify-content: center; + width: 32px; + height: 32px; color: #000000; text-decoration: none; - font-size: var(--font-size-lg, 16px); - font-weight: 400; background: none; border: 0; padding: 0; @@ -26,9 +26,3 @@ color: currentColor; flex-shrink: 0; } - -.text { - color: currentColor; - font-size: var(--font-size-lg, 16px); - font-weight: 400; -} diff --git a/src/app/sidebar/components/back-bar.tsx b/src/app/sidebar/components/back-bar.tsx index 4221f765..e6590b46 100644 --- a/src/app/sidebar/components/back-bar.tsx +++ b/src/app/sidebar/components/back-bar.tsx @@ -1,5 +1,6 @@ "use client"; +import { ChevronLeft } from "lucide-react"; import Link from "next/link"; import { ROUTES } from "@/router/routes"; @@ -7,7 +8,7 @@ import { ROUTES } from "@/router/routes"; import styles from "./back-bar.module.css"; /** - * 顶部返回栏:chevron + "Back" 文字,链接至聊天页。 + * 顶部返回栏:图标按钮,链接至聊天页。 * * 视觉规格(与设计稿对齐): * - 黑色文本(浅色主题下) @@ -21,23 +22,12 @@ export function BackBar() { className={styles.link} aria-label="Back" > - - Back + /> ); diff --git a/src/app/sidebar/components/vip-benefits-card.module.css b/src/app/sidebar/components/vip-benefits-card.module.css index f96be910..9c17e5e5 100644 --- a/src/app/sidebar/components/vip-benefits-card.module.css +++ b/src/app/sidebar/components/vip-benefits-card.module.css @@ -88,22 +88,26 @@ } .activateBtn { - display: flex; + display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-md, 12px) var(--spacing-lg, 16px); - border-radius: var(--radius-full, 999px); - background: linear-gradient( - 90deg, - var(--color-button-gradient-start, #ff67e0), - var(--color-button-gradient-end, #ff52a2) - ); + border-radius: 22px; + background-image: + linear-gradient( + 135deg, + #ff67e0 0%, + rgba(255, 109, 225, 0.29) 20%, + rgba(254, 122, 228, 0.47) 66%, + rgba(252, 140, 231, 0.59) 100% + ), + linear-gradient(#fb5e9d, #fb5e9d); + background-blend-mode: normal, normal; color: var(--color-text-primary, #ffffff); font-size: var(--font-size-md, 14px); font-weight: 600; border: 0; cursor: pointer; - width: 100%; box-sizing: border-box; } diff --git a/src/app/sidebar/components/voice-package-card.module.css b/src/app/sidebar/components/voice-package-card.module.css index 51191482..6cac511d 100644 --- a/src/app/sidebar/components/voice-package-card.module.css +++ b/src/app/sidebar/components/voice-package-card.module.css @@ -74,22 +74,20 @@ } .buyBtn { - display: flex; + display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-md, 12px) var(--spacing-lg, 16px); - border-radius: var(--radius-full, 999px); - background: linear-gradient( - 90deg, - var(--color-button-gradient-start, #ff67e0), - var(--color-button-gradient-end, #ff52a2) - ); + border-radius: 22px; + background-image: + linear-gradient(91deg, #f67382 0%, #f66690 44%, #f657a0 100%), + linear-gradient(#f69757, #f69757); + background-blend-mode: normal, normal; color: var(--color-text-primary, #ffffff); font-size: var(--font-size-md, 14px); font-weight: 600; border: 0; cursor: pointer; - width: 100%; box-sizing: border-box; } diff --git a/src/app/sidebar/components/voice-package-card.tsx b/src/app/sidebar/components/voice-package-card.tsx index b82d49b3..e442e97d 100644 --- a/src/app/sidebar/components/voice-package-card.tsx +++ b/src/app/sidebar/components/voice-package-card.tsx @@ -19,7 +19,6 @@ export interface VoicePackageCardProps { * 视觉规格(与设计稿对齐): * - 白色卡片 + 粉色→橙色渐变描边 * - 标题 "Voice Message Package"(粉色加粗) - * - 右上角大圆形渐变麦克风图标 * - "0min/0min used/remaining" 文案(前缀粉色加粗) * - 底部 "Buy Package" 粉色胶囊按钮 */