diff --git a/src/pages/login/index.module.scss b/src/pages/login/index.module.scss
index 00bd251..5f39425 100644
--- a/src/pages/login/index.module.scss
+++ b/src/pages/login/index.module.scss
@@ -1,22 +1,61 @@
 .page {
-  padding: 120px 60px;
+  min-height: 100vh;
+  background: $color-bg;
+}
+
+// 顶部品牌渐变区（约占 40% 视口高）
+.hero {
+  padding: 140px 0 180px;
+  background: $color-primary-grad;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  width: 120px;
+  height: 120px;
+  border-radius: $radius-circle;
+  background: $color-bg-white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(44, 203, 152, 0.3);
+}
+
+.logoText {
+  font-size: 64px;
+  font-weight: 700;
+  color: $color-primary;
+}
+
+.productName {
+  margin-top: 32px;
+  font-size: 44px;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.slogan {
+  margin-top: 16px;
+  font-size: 26px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+// 表单卡上浮叠在渐变区上
+.form {
+  margin: -120px 24px 0;
+  padding: 48px 32px;
+  background: $color-bg-white;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-popup;
   display: flex;
   flex-direction: column;
 }
 
-.title {
-  font-size: 60px;
-  font-weight: 700;
-  color: $color-text;
-  text-align: center;
-  margin-bottom: 80px;
-}
-
-.form { display: flex; flex-direction: column; }
-
 .input {
   height: 100px;
-  background: $color-bg-white;
+  background: $color-bg-gray;
   border-radius: $radius-md;
   padding: 0 32px;
   margin-bottom: 24px;
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 8709927..72b6d73 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -33,7 +33,13 @@ export default function Login() {
   }
   return (
     <View className={styles.page}>
-      <Text className={styles.title}>智慧养老</Text>
+      <View className={styles.hero}>
+        <View className={styles.logo}>
+          <Text className={styles.logoText}>智</Text>
+        </View>
+        <Text className={styles.productName}>智慧养老</Text>
+        <Text className={styles.slogan}>一起守护家人</Text>
+      </View>
       <View className={styles.form}>
         <Input
           className={styles.input}