lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 13 Activity

首页页面及手机端适配

Browse Source
This commit is contained in:
luorijun
2025-03-12 11:11:54 +08:00
parent 5e3ade9aba
commit 8ea085463e
13 changed files with 291 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/(home)/header.tsx
View File

@@ -6,10 +6,10 @@ import Wrap from '@/components/wrap'
export type HeaderProps = {}
export default function Header(props: HeaderProps) {
const [isScrolled, setIsScrolled] = useState(window.scrollY > 0)
const [isScrolled, setIsScrolled] = useState(window.scrollY > 48)
const handleScroll = () => {
setIsScrolled(window.scrollY > 0)
setIsScrolled(window.scrollY > 48)
}
useEffect(() => {
@@ -22,20 +22,20 @@ export default function Header(props: HeaderProps) {
return (
<header
className={[
`w-full h-24 fixed top-0 shadow-lg`,
`transition-shadow duration-200 ${isScrolled ? 'bg-white' : 'bg-transparent shadow-transparent'}`,
`w-full h-24 max-md:h-16 overflow-hidden fixed top-0 shadow-lg`,
`transition-shadow duration-200 ${isScrolled ? 'bg-[rgba(255,255,255,0.9)] backdrop-blur-sm' : 'bg-transparent shadow-transparent'}`,
].join(' ')}>
<Wrap className="flex items-center justify-between">
{/* 菜单 */}
<Wrap className="flex h-full items-center justify-between">
<div className="flex items-center justify-between gap-8">
{/* logo */}
<Link href="/">
<img alt={`logo`} className={`w-16 h-16 rounded-full bg-gray-100`}/>
<img src={`/logo.svg`} alt={`logo`} className={`w-16 max-md:w-12 h-16 max-md:h-12 rounded-full bg-gray-100`}/>
</Link>
{/* 菜单 */}
<nav className={`flex items-center`}>
<ul className="flex items-center gap-4 text-xl">
<nav className={`flex items-center max-lg:hidden`}>
<ul className="flex items-center text-xl">
<NavItemTop>
<Link href={`/`}>首页</Link>
</NavItemTop>
@@ -64,12 +64,12 @@ export default function Header(props: HeaderProps) {
<div className={`flex items-center`}>
<a
href="#"
className={`w-24 h-12 flex items-center justify-center text-xl font-medium`}>
className={`w-24 h-12 flex items-center justify-center lg:text-lg font-medium`}>
<span>登录</span>
</a>
<a
href="#"
className={`w-24 h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center text-xl font-medium text-white`}>
className={`w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center lg:text-lg font-medium text-white`}>
<span>注册</span>
</a>
</div>
@@ -84,7 +84,7 @@ type NavItemTopProps = {
function NavItemTop(props: NavItemTopProps) {
return (
<li className={`flex items-center text-xl px-2`}>
<li className={`px-4 h-10 flex items-center text-xl`}>
{props.children}
</li>
)