diff --git a/src/components/navbar/index.module.scss b/src/components/navbar/index.module.scss
index 6546978..3a63af1 100644
--- a/src/components/navbar/index.module.scss
+++ b/src/components/navbar/index.module.scss
@@ -57,3 +57,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+// hero 变体：智能设备 tab 等需要绿色品牌头部的页面使用
+// 垂直渐变贴近设计参考图：顶部深绿、底部亮绿；局部样式不引入新 token
+.navbarHero {
+  background: linear-gradient(180deg, #0da89b 0%, #2ccb98 100%);
+}
+
+// hero 模式下标题反白，避免与渐变背景对比度不足
+.titleHero {
+  color: #ffffff;
+}
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index d900709..04f261c 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -9,6 +9,7 @@ interface Props {
   autoBack?: boolean       // 默认 true（修复 uni-app up-navbar 坑）
   border?: boolean         // 默认 false
   safeAreaTop?: boolean    // 默认 true
+  variant?: 'default' | 'hero'   // hero 为绿色渐变头部，default 为白底黑字
   onBack?: () => void
 }
 
@@ -18,6 +19,7 @@ export function Navbar({
   autoBack = true,
   border = false,
   safeAreaTop = true,
+  variant = 'default',
   onBack
 }: Props) {
   // getSystemInfoSync 已废弃，改用 getWindowInfo
@@ -30,7 +32,7 @@ export function Navbar({
 
   return (
     <View
-      className={styles.navbar}
+      className={`${styles.navbar} ${variant === 'hero' ? styles.navbarHero : ''}`}
       style={{
         paddingTop: safeAreaTop ? `${statusBarHeight}px` : 0,
         position: fixed ? 'fixed' : 'relative',
@@ -44,7 +46,7 @@ export function Navbar({
           </View>
         )}
         <View className={styles.titleWrap}>
-          <Text className={styles.title}>{title}</Text>
+          <Text className={`${styles.title} ${variant === 'hero' ? styles.titleHero : ''}`}>{title}</Text>
         </View>
       </View>
     </View>
diff --git a/src/pages/device/index.tsx b/src/pages/device/index.tsx
index 807b051..30eb830 100644
--- a/src/pages/device/index.tsx
+++ b/src/pages/device/index.tsx
@@ -52,7 +52,7 @@ export default function DeviceList() {
 
   return (
     <View className={styles.page}>
-      <Navbar title="智能设备" autoBack={false} />
+      <Navbar title="智能设备" autoBack={false} variant="hero" />
 
       <View className={styles.siteRow} onClick={goSceneSelect}>
         <Text className={styles.siteText}>{scene?.name || '请选择场所'}</Text>