feat: adjust mobile layout
This commit is contained in:
@@ -22,7 +22,6 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
|
||||
|
||||
const [navItems, setNavItems] = useState([
|
||||
{ icon: Home, label: '首页', href: '/' },
|
||||
{ icon: Search, label: '搜索', href: '/search' },
|
||||
{
|
||||
icon: Film,
|
||||
label: '电影',
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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))',
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user