127 lines
4.3 KiB
TypeScript
127 lines
4.3 KiB
TypeScript
|
'use client'
|
|||
|
|
|
|||
|
|
import { useState, ReactNode } from "react"
|
|||
|
|
import Wrap from "@/components/wrap"
|
|||
|
|
import Image from "next/image"
|
|||
|
|
import prod from '@/assets/header/product/prod.svg'
|
|||
|
|
import custom from '@/assets/header/product/custom.svg'
|
|||
|
|
import anno from '@/assets/header/product/anno.svg'
|
|||
|
|
|
|||
|
|
type TabType = 'domestic' | 'oversea'
|
|||
|
|
|
|||
|
|
export default function ProductMenu() {
|
|||
|
|
|
|||
|
|
const [type, setType] = useState<TabType>('domestic')
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Wrap className="flex">
|
|||
|
|
<ul role="tablist" className="w-48">
|
|||
|
|
<Tab selected={type === 'domestic'} onSelect={() => setType('domestic')}>国内代理</Tab>
|
|||
|
|
<Tab selected={type === 'oversea'} onSelect={() => setType('oversea')}>海外代理</Tab>
|
|||
|
|
</ul>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
{type === 'domestic'
|
|||
|
|
? (
|
|||
|
|
<section role="tabpanel" className="flex gap-16 mr-16">
|
|||
|
|
<div className="w-64 flex flex-col gap-6">
|
|||
|
|
<h3 className="font-bold mb-2 flex items-center gap-3">
|
|||
|
|
<Image src={prod} alt={`产品`} className={`w-10 h-=10`} />
|
|||
|
|
<span>代理产品</span>
|
|||
|
|
</h3>
|
|||
|
|
<div className="flex flex-col gap-2">
|
|||
|
|
<p className="flex gap-2">
|
|||
|
|
<span>短效动态IP</span>
|
|||
|
|
<span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
|
|||
|
|
折扣45%
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-gray-400 text-sm">
|
|||
|
|
全国300+城市级定位节点
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-col gap-2">
|
|||
|
|
<p className="flex gap-2">
|
|||
|
|
<span>长效静态IP</span>
|
|||
|
|
<span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
|
|||
|
|
折扣45%
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-gray-400 text-sm">
|
|||
|
|
IPI资源覆盖全国
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="flex gap-2">
|
|||
|
|
<span>固定IP</span>
|
|||
|
|
<span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
|
|||
|
|
折扣45%
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-64 flex flex-col gap-4">
|
|||
|
|
<h3 className="font-bold mb-2 flex items-center gap-3">
|
|||
|
|
<Image src={custom} alt="定制" className="w-10 h-10" />
|
|||
|
|
<span>业务定制</span>
|
|||
|
|
</h3>
|
|||
|
|
<div className="flex flex-col gap-2">
|
|||
|
|
<p>优质/企业/精选IP</p>
|
|||
|
|
<p className="text-gray-400 text-sm">
|
|||
|
|
超 1000 家企业共同信赖之选！大客户经理全
|
|||
|
|
程 1 对 1 沟通，随时为您排忧解难，提供 24
|
|||
|
|
小时不间断支持
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
) : (
|
|||
|
|
<section role="tabpanel">
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
<aside className="w-64">
|
|||
|
|
<h3 className="flex gap-3 items-center mb-4">
|
|||
|
|
<Image src={anno} alt={`公告`} className={`w-10 h-10`} />
|
|||
|
|
<span>网站公告</span>
|
|||
|
|
</h3>
|
|||
|
|
<div className="flex flex-col gap-2">
|
|||
|
|
<p>官网最新上线，体验再升级！</p>
|
|||
|
|
<p className="text-gray-400 text-sm">
|
|||
|
|
1.新增多样使用功能，新增多样使用
|
|||
|
|
新增多样使用功能
|
|||
|
|
</p>
|
|||
|
|
<p className="text-gray-400 text-sm">
|
|||
|
|
2.新增多样使用功能，新增多样使用
|
|||
|
|
新增多样使用功能
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
</Wrap>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function Tab(props: {
|
|||
|
|
selected: boolean
|
|||
|
|
onSelect: () => void
|
|||
|
|
children: ReactNode
|
|||
|
|
}) {
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<li role="tab">
|
|||
|
|
<button
|
|||
|
|
className={[
|
|||
|
|
`p-8 text-lg cursor-pointer border-r`,
|
|||
|
|
props.selected ? `bg-gradient-to-r from-transparent to-blue-200 border-blue-400` : `border-gray-200`,
|
|||
|
|
].join(' ')}
|
|||
|
|
onClick={props.onSelect}
|
|||
|
|
>
|
|||
|
|
{props.children}
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
)
|
|||
|
|
}
|