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

目录结构与表单组件结构调整

Browse Source
This commit is contained in:
luorijun
2025-03-24 12:29:52 +08:00
parent 60155e9d9d
commit e16ef8e509
9 changed files with 530 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/app/(root)/product/page.tsx
View File

@@ -1,6 +1,6 @@
import BreadCrumb from '@/components/bread-crumb'
import Wrap from '@/components/wrap'
import {Combo} from '@/app/(root)/product/combo'
import {Combo} from '@/app/(root)/product/_client/combo'
export type ProductPageProps = {}
@@ -13,8 +13,6 @@ export default function ProductPage(props: ProductPageProps) {
{label: '产品中心', href: '/product'},
]}/>
<h2 className={`text-3xl text-center`}>多种套餐选择</h2>
<ul role={`tablist`} className={`flex justify-center items-stretch bg-white rounded-lg`}>
<li role={`tab`}>
<button className={`h-14 px-8 text-lg`}>短效动态套餐</button>
@@ -117,91 +115,99 @@ function Left() {
function Center() {
return (
<div className={`flex-auto p-8 flex flex-col relative gap-4 `}>
<div className={`flex-auto p-8 flex flex-col relative gap-8`}>
<h3>计费方式</h3>
<div className={`grid grid-cols-2 auto-cols-fr place-items-stretch gap-4`}>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col items-start gap-2 cursor-pointer`}>
<h4>包量套餐</h4>
<p className={`text-sm text-gray-500`}>适用于短期或不定期高提取业务场景</p>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col items-start gap-2 cursor-pointer`}>
<h4>包时套餐</h4>
<p className={`text-sm text-gray-500`}>适用于每日提取量稳定的业务场景</p>
</button>
<div className={`space-y-4`}>
<h3>计费方式</h3>
<div className={`grid grid-cols-2 auto-cols-fr place-items-stretch gap-4`}>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col items-start gap-2 cursor-pointer`}>
<h4>包量套餐</h4>
<p className={`text-sm text-gray-500`}>适用于短期或不定期高提取业务场景</p>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col items-start gap-2 cursor-pointer`}>
<h4>包时套餐</h4>
<p className={`text-sm text-gray-500`}>适用于每日提取量稳定的业务场景</p>
</button>
</div>
</div>
<h3 className={`mt-2`}>IP 时效</h3>
<div className={`grid grid-cols-5 auto-cols-fr place-items-stretch gap-4`}>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<div className={`space-y-4`}>
<h3>IP 时效</h3>
<div className={`grid grid-cols-5 auto-cols-fr place-items-stretch gap-4`}>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
<button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
<span>3 分钟</span>
<span className={`text-sm text-gray-500`}>￥0.005/IP</span>
</button>
</div>
</div>
{/* 赠送 IP 数 */}
<h3 className={`mt-2`}>赠送IP总数</h3>
<div className={`flex gap-4`}>
<button className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}>-</button>
<input type="number" className={`w-40 h-10 border border-gray-200 rounded-sm`}/>
<button className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}>+</button>
<div className={`space-y-4`}>
<h3>赠送IP总数</h3>
<div className={`flex gap-4`}>
<button className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}>-</button>
<input type="number" className={`w-40 h-10 border border-gray-200 rounded-sm`}/>
<button className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}>+</button>
</div>
</div>
{/* 产品特性 */}
<h3 className={`mt-2`}>产品特性</h3>
<div className={`grid grid-cols-3 auto-rows-fr gap-y-4`}>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>支持高并发提取</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>完备的API接口</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>完备的API接口</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>每日去重量：500万</span>
</p>
<div className={`space-y-6`}>
<h3>产品特性</h3>
<div className={`grid grid-cols-3 auto-rows-fr gap-y-6`}>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>支持高并发提取</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>完备的API接口</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>完备的API接口</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
</p>
<p className={`flex gap-2 items-center`}>
<img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>每日去重量：500万</span>
</p>
</div>
</div>
{/* 左右的边框 */}