优化导航栏性能,完善导航栏弹出菜单的移动端适配;调整导航栏与 store 公共组件的所在目录结构
This commit is contained in:
64
src/app/(home)/@header/menu-help.tsx
Normal file
64
src/app/(home)/@header/menu-help.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import Link from 'next/link'
|
||||
import Image, {StaticImageData} from 'next/image'
|
||||
import Wrap from '@/components/wrap'
|
||||
import h01 from '@/assets/header/help/01.svg'
|
||||
import h02 from '@/assets/header/help/02.svg'
|
||||
import h03 from '@/assets/header/help/03.svg'
|
||||
import banner from '@/assets/header/help/banner.webp'
|
||||
import {FragmentTitle} from '@/app/(home)/@header/common'
|
||||
|
||||
export default function HelpMenu() {
|
||||
return (
|
||||
<Wrap className="w-full grid sm:grid-cols-3 lg:grid-cols-4 gap-4 justify-items-start">
|
||||
<Column
|
||||
icon={h01}
|
||||
title="提取 IP"
|
||||
items={[
|
||||
{lead: '短效 IP 提取', href: '#'},
|
||||
{lead: '长效 IP 提取', href: '#'},
|
||||
]}
|
||||
/>
|
||||
<Column
|
||||
icon={h02}
|
||||
title="使用教程"
|
||||
items={[
|
||||
{lead: '快速入手', href: '#'},
|
||||
{lead: '代码下载', href: '#'},
|
||||
{lead: 'API文档', href: '#'},
|
||||
]}
|
||||
/>
|
||||
<Column
|
||||
icon={h03}
|
||||
title="产品功能"
|
||||
items={[
|
||||
{lead: '常见问题', href: '#'},
|
||||
{lead: '产品介绍', href: '#'},
|
||||
{lead: '行业资讯', href: '#'},
|
||||
]}
|
||||
/>
|
||||
<Image src={banner} alt="banner" className="hidden lg:block"/>
|
||||
</Wrap>
|
||||
)
|
||||
}
|
||||
|
||||
function Column(props: {
|
||||
icon: StaticImageData
|
||||
title: string
|
||||
items: {
|
||||
lead: string
|
||||
href: string
|
||||
}[]
|
||||
}) {
|
||||
return (
|
||||
<div className="flex-1 flex flex-col gap-4">
|
||||
<FragmentTitle img={props.icon} text={props.title}/>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{props.items.map((item, index) => (
|
||||
<li key={index}>
|
||||
<Link href={item.href} className="px-4 py-2">{item.lead}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user