mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-05-19 04:17:29 +08:00
feat: adjust mobile layout
This commit is contained in:
@@ -22,7 +22,6 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
|
|||||||
|
|
||||||
const [navItems, setNavItems] = useState([
|
const [navItems, setNavItems] = useState([
|
||||||
{ icon: Home, label: '首页', href: '/' },
|
{ icon: Home, label: '首页', href: '/' },
|
||||||
{ icon: Search, label: '搜索', href: '/search' },
|
|
||||||
{
|
{
|
||||||
icon: Film,
|
icon: Film,
|
||||||
label: '电影',
|
label: '电影',
|
||||||
|
|||||||
@@ -14,10 +14,29 @@ interface MobileHeaderProps {
|
|||||||
const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
|
const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
|
||||||
const { siteName } = useSite();
|
const { siteName } = useSite();
|
||||||
return (
|
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='h-12 flex items-center justify-between px-4'>
|
||||||
{/* 左侧:返回按钮和设置按钮 */}
|
{/* 左侧:搜索按钮、返回按钮和设置按钮 */}
|
||||||
<div className='flex items-center gap-2'>
|
<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 />}
|
{showBackButton && <BackButton />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
|
|||||||
|
|
||||||
{/* 主内容 */}
|
{/* 主内容 */}
|
||||||
<main
|
<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={{
|
style={{
|
||||||
paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
|
paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user