feat: adjust mobile layout

This commit is contained in:
shinya
2025-08-21 21:13:44 +08:00
parent 44b5915100
commit b1e03bc180
3 changed files with 22 additions and 4 deletions

View File

@@ -22,7 +22,6 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
const [navItems, setNavItems] = useState([
{ icon: Home, label: '首页', href: '/' },
{ icon: Search, label: '搜索', href: '/search' },
{
icon: Film,
label: '电影',

View File

@@ -14,10 +14,29 @@ interface MobileHeaderProps {
const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
const { siteName } = useSite();
return (
<header className='md:hidden relative w-full bg-white/70 backdrop-blur-xl border-b border-gray-200/50 shadow-sm dark:bg-gray-900/70 dark:border-gray-700/50'>
<header className='md:hidden fixed top-0 left-0 right-0 z-[999] w-full bg-white/70 backdrop-blur-xl border-b border-gray-200/50 shadow-sm dark:bg-gray-900/70 dark:border-gray-700/50'>
<div className='h-12 flex items-center justify-between px-4'>
{/* 左侧:返回按钮和设置按钮 */}
{/* 左侧:搜索按钮、返回按钮和设置按钮 */}
<div className='flex items-center gap-2'>
<Link
href='/search'
className='w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors'
>
<svg
className='w-full h-full'
fill='none'
stroke='currentColor'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={2}
d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
/>
</svg>
</Link>
{showBackButton && <BackButton />}
</div>

View File

@@ -40,7 +40,7 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
{/* 主内容 */}
<main
className='flex-1 md:min-h-0 mb-14 md:mb-0'
className='flex-1 md:min-h-0 mb-14 md:mb-0 md:mt-0 mt-12'
style={{
paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
}}