diff --git a/apps/miniprogram/src/app.css b/apps/miniprogram/src/app.css index 68ae989..c3a109a 100644 --- a/apps/miniprogram/src/app.css +++ b/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; } } diff --git a/apps/miniprogram/src/pages/login/index.config.ts b/apps/miniprogram/src/pages/login/index.config.ts index 73fccff..c949595 100644 --- a/apps/miniprogram/src/pages/login/index.config.ts +++ b/apps/miniprogram/src/pages/login/index.config.ts @@ -1,4 +1,7 @@ export default definePageConfig({ navigationBarTitleText: "微信手机号登录", + navigationBarBackgroundColor: "#ffffff", + backgroundColor: "#ffffff", + backgroundColorContent: "#ffffff", backgroundTextStyle: "light", }); diff --git a/apps/miniprogram/src/pages/login/index.tsx b/apps/miniprogram/src/pages/login/index.tsx index bc8d8f4..a888cee 100644 --- a/apps/miniprogram/src/pages/login/index.tsx +++ b/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 ( - - 万趣账号 - 登录万趣，开启贵州旅程 + + + 一键登录，开启万趣！ + + {message ? {message} : null} + + 收藏行程 + 同步记录 + 专属管家 + - - {message ? {message} : null} - 登录即同意万趣保存必要账号信息 ); } diff --git a/apps/miniprogram/src/pages/login/wanderq-logo-black-green.png b/apps/miniprogram/src/pages/login/wanderq-logo-black-green.png new file mode 100644 index 0000000..41b8503 Binary files /dev/null and b/apps/miniprogram/src/pages/login/wanderq-logo-black-green.png differ diff --git a/src/App.tsx b/src/App.tsx index 39d6612..d4003c0 100644 --- a/src/App.tsx +++ b/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("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;