优化登录页与锚点滚动体验

apps/miniprogram/src/app.css

@@ -127,18 +127,25 @@ page, view, text, image, input, button, scroll-view, swiper, swiper-item {
 .contact-fallback { background: #e8f1e9; }
 .contact-back { width: 100%; color: #19766a; background: transparent; border: 1px solid #bcd3c5; border-radius: 999px; font-size: 22px; }
 
-.login-page { display: grid; align-content: start; gap: 22px; min-height: 100vh; padding: 64px 32px 100px; background: #f6f4ee; }
-.login-hero { display: grid; gap: 14px; padding: 16px 4px 30px; }
-.login-title { display: block; color: #182522; font-size: 42px; font-weight: 800; line-height: 1.3; }
-.login-note { display: block; color: #718079; font-size: 22px; line-height: 1.6; }
-.phone-login-button { width: 100%; color: #fff; background: #19766a; border-radius: 999px; font-size: 25px; }
+.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 28px calc(40px + env(safe-area-inset-bottom)); background: #fff; }
+.login-content { width: 100%; max-width: 334px; display: flex; flex-direction: column; align-items: center; text-align: center; }
+.login-logo { width: 174px; height: auto; margin-bottom: 38px; }
+.login-title { display: block; margin-bottom: 42px; color: #182522; font-size: 34px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
+.phone-login-button { width: 100%; min-height: 58px; padding: 0 16px; color: #fff; background: #287642; border: 0; border-radius: 999px; box-shadow: 0 10px 22px rgba(40, 118, 66, .18); font-size: 24px; font-weight: 700; line-height: 58px; }
+.phone-login-button::after { border: 0; }
 .phone-login-button[disabled] { opacity: .6; }
-.login-message { display: block; color: #b15842; text-align: center; font-size: 20px; line-height: 1.5; }
-.login-privacy { display: block; color: #87938c; text-align: center; font-size: 17px; line-height: 1.5; }
+.login-message { display: block; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #fff1ec; color: #b15842; text-align: center; font-size: 18px; line-height: 1.5; }
+.login-benefits { width: 100%; display: flex; justify-content: center; gap: 24px; margin-top: 30px; }
+.login-benefit { flex: 1 1 0; min-width: 0; color: #287642; font-size: 17px; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; }
 
 @media (max-width: 680px) {
   .product-grid { grid-template-columns: 1fr; }
   .hero-copy > text:nth-child(2), .hero-fallback > text:nth-of-type(1) { font-size: 34px; }
   .section-title { font-size: 31px; }
   .key-fact-grid { grid-template-columns: 1fr 1fr; }
+  .login-logo { width: 158px; }
+  .login-title { font-size: 31px; }
+  .phone-login-button { font-size: 22px; }
+  .login-benefits { gap: 10px; }
+  .login-benefit { font-size: 15px; }
 }

apps/miniprogram/src/pages/login/index.config.ts

@@ -1,4 +1,7 @@
 export default definePageConfig({
   navigationBarTitleText: "微信手机号登录",
+  navigationBarBackgroundColor: "#ffffff",
+  backgroundColor: "#ffffff",
+  backgroundColorContent: "#ffffff",
   backgroundTextStyle: "light",
 });

apps/miniprogram/src/pages/login/index.tsx

@@ -1,7 +1,8 @@
-import { Button, Text, View } from "@tarojs/components";
+import { Button, Image, Text, View } from "@tarojs/components";
 import { useState } from "react";
 import Taro, { useLoad } from "@tarojs/taro";
 import { clearToken, loginMiniProgramWithPhone } from "../../services/api";
+import WANDERQ_LOGO_URL from "./wanderq-logo-black-green.png";
 
 type LoginPageParams = {
   mode?: string;
@@ -43,20 +44,24 @@ export default function LoginPage() {
 
   return (
     <View className="login-page">
-      <View className="login-hero">
-        <Text className="eyebrow">万趣账号</Text>
-        <Text className="login-title">登录万趣，开启贵州旅程</Text>
+      <View className="login-content">
+        <Image className="login-logo" src={WANDERQ_LOGO_URL} mode="widthFix" />
+        <Text className="login-title">一键登录，开启万趣！</Text>
+        <Button
+          className="phone-login-button"
+          openType="getPhoneNumber"
+          onGetPhoneNumber={handlePhoneNumber}
+          disabled={loading}
+        >
+          {loading ? "登录中..." : "微信手机号一键登录"}
+        </Button>
+        {message ? <Text className="login-message">{message}</Text> : null}
+        <View className="login-benefits">
+          <Text className="login-benefit">收藏行程</Text>
+          <Text className="login-benefit">同步记录</Text>
+          <Text className="login-benefit">专属管家</Text>
+        </View>
       </View>
-      <Button
-        className="phone-login-button"
-        openType="getPhoneNumber"
-        onGetPhoneNumber={handlePhoneNumber}
-        disabled={loading}
-      >
-        {loading ? "登录中..." : "微信手机号一键登录"}
-      </Button>
-      {message ? <Text className="login-message">{message}</Text> : null}
-      <Text className="login-privacy">登录即同意万趣保存必要账号信息</Text>
     </View>
   );
 }