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

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-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-hero { display: grid; gap: 14px; padding: 16px 4px 30px; }
+.login-content { width: 100%; max-width: 334px; display: flex; flex-direction: column; align-items: center; text-align: center; }
-.login-title { display: block; color: #182522; font-size: 42px; font-weight: 800; line-height: 1.3; }
+.login-logo { width: 174px; height: auto; margin-bottom: 38px; }
-.login-note { display: block; color: #718079; font-size: 22px; line-height: 1.6; }
+.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%; color: #fff; background: #19766a; border-radius: 999px; font-size: 25px; }
+.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-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-privacy { display: block; color: #87938c; text-align: center; font-size: 17px; 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,10 +44,9 @@ export default function LoginPage() {
 
   return (
     <View className="login-page">
-      <View className="login-hero">
+      <View className="login-content">
-        <Text className="eyebrow">万趣账号</Text>
+        <Image className="login-logo" src={WANDERQ_LOGO_URL} mode="widthFix" />
-        <Text className="login-title">登录万趣，开启贵州旅程</Text>
+        <Text className="login-title">一键登录，开启万趣！</Text>
-      </View>
         <Button
           className="phone-login-button"
           openType="getPhoneNumber"
@@ -56,7 +56,12 @@ export default function LoginPage() {
           {loading ? "登录中..." : "微信手机号一键登录"}
         </Button>
         {message ? <Text className="login-message">{message}</Text> : null}
-      <Text className="login-privacy">登录即同意万趣保存必要账号信息</Text>
+        <View className="login-benefits">
+          <Text className="login-benefit">收藏行程</Text>
+          <Text className="login-benefit">同步记录</Text>
+          <Text className="login-benefit">专属管家</Text>
+        </View>
+      </View>
     </View>
   );
 }

src/App.tsx

@@ -1182,6 +1182,25 @@ function AnchorTabs({ activeTab, tabs, onSearch }: { activeTab: string; tabs: Ar
     document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
   };
 
+  useEffect(() => {
+    const container = tabsRef.current;
+    const activeButton = container?.querySelector<HTMLButtonElement>("button.active");
+    if (!container || !activeButton) return;
+
+    const buttonStart = activeButton.offsetLeft;
+    const buttonEnd = buttonStart + activeButton.offsetWidth;
+    const visibleStart = container.scrollLeft;
+    const visibleEnd = visibleStart + container.clientWidth;
+    if (buttonStart >= visibleStart && buttonEnd <= visibleEnd) return;
+
+    const targetLeft = buttonStart - (container.clientWidth - activeButton.offsetWidth) / 2;
+    const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+    container.scrollTo({
+      left: Math.max(0, Math.min(targetLeft, maxScrollLeft)),
+      behavior: "smooth",
+    });
+  }, [activeTab]);
+
   if (!tabs.length) return null;
 
   return (
@@ -4068,15 +4087,6 @@ export default function App() {
     };
   }, [anchorTabs]);
 
-  useEffect(() => {
-    if (!activeTab) return;
-    document.querySelector(".anchor-tabs-scroll button.active")?.scrollIntoView({
-      block: "nearest",
-      inline: "center",
-      behavior: "smooth",
-    });
-  }, [activeTab]);
-
   const renderHomeModule = (module: HomeModuleConfig) => {
     const templateType = module.templateType ?? module.id;
     const items = module.content?.items;