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" 粉色胶囊按钮
*/