wmp/juip-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IP线路表 & 软件下载 页面手机端适配

Browse Source
This commit is contained in:
Eamon
2026-08-27 14:06:22 +08:00
parent ff56fbd7c3
commit 171f5bc44a
5 changed files with 127 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/ui/pagination.tsx
View File

@@ -40,6 +40,21 @@ function Pagination({
const [currentPage, setCurrentPage] = useState(page) const [currentPage, setCurrentPage] = useState(page)
const totalPages = Math.ceil(total / size) const totalPages = Math.ceil(total / size)
// 移动端检测：小屏幕减少页码按钮数量，避免溢出
const [isMobile, setIsMobile] = useState(
() =>
typeof window !== "undefined" &&
window.matchMedia("(max-width: 640px)").matches,
)
useEffect(() => {
const mql = window.matchMedia("(max-width: 640px)")
const handleChange = () => setIsMobile(mql.matches)
handleChange()
mql.addEventListener("change", handleChange)
return () => mql.removeEventListener("change", handleChange)
}, [])
// 同步外部 page 变化 // 同步外部 page 变化
useEffect(() => { useEffect(() => {
setCurrentPage(page) setCurrentPage(page)
@@ -47,12 +62,13 @@ function Pagination({
// 分页器逻辑 // 分页器逻辑
const generatePaginationItems = () => { const generatePaginationItems = () => {
// 最多显示7个页码，其余用省略号 // 桌面端最多显示7个页码，移动端最多显示5个，其余用省略号
const SIBLINGS = 1 // 当前页左右各显示的页码数 const SIBLINGS = isMobile ? 0 : 1 // 当前页左右各显示的页码数
const MAX_VISIBLE = isMobile ? 5 : 7
const DOTS = -1 // 省略号标记 const DOTS = -1 // 省略号标记
if (totalPages <= 7) { if (totalPages <= MAX_VISIBLE) {
// 总页数少于7，全部显示 // 总页数较少，全部显示
return Array.from({ length: totalPages }, (_, i) => i + 1) return Array.from({ length: totalPages }, (_, i) => i + 1)
} }
@@ -121,8 +137,13 @@ function Pagination({
const paginationItems = generatePaginationItems() const paginationItems = generatePaginationItems()
return ( return (
<div className={`flex flex-wrap items-center gap-4 ${className || ""}`}> <div
<div className="flex-none flex items-center gap-2 text-sm text-muted-foreground"> className={cn(
"flex flex-wrap items-center justify-center gap-2 md:justify-start md:gap-4",
className,
)}
>
<div className="flex-none flex items-center gap-2 text-xs sm:text-sm text-muted-foreground">
共 {total} 条记录，每页 共 {total} 条记录，每页
<Select value={size.toString()} onValueChange={handlePageSizeChange}> <Select value={size.toString()} onValueChange={handlePageSizeChange}>
<SelectTrigger className="h-8 w-20"> <SelectTrigger className="h-8 w-20">
@@ -209,7 +230,10 @@ function PaginationContent({
return ( return (
<ul <ul
data-slot="pagination-content" data-slot="pagination-content"
className={cn("flex flex-row items-center gap-1", className)} className={cn(
"flex flex-row flex-wrap items-center justify-center gap-1",
className,
)}
{...props} {...props}
/> />
) )
@@ -234,7 +258,7 @@ function PaginationLink({
data-slot="pagination-link" data-slot="pagination-link"
data-active={isActive} data-active={isActive}
className={cn( className={cn(
"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 w-9 rounded-md border border-input hover:bg-secondary hover:text-secondary-foreground", "inline-flex items-center justify-center text-xs sm:text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 sm:h-9 sm:w-9 rounded-md border border-input hover:bg-secondary hover:text-secondary-foreground",
`bg-card`, `bg-card`,
isActive && isActive &&
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground", "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
@@ -283,7 +307,10 @@ function PaginationEllipsis({
<span <span
aria-hidden aria-hidden
data-slot="pagination-ellipsis" data-slot="pagination-ellipsis"
className={cn("flex size-9 items-center justify-center", className)} className={cn(
"flex size-8 sm:size-9 items-center justify-center",
className,
)}
{...props} {...props}
> >
<MoreHorizontalIcon className="size-4" /> <MoreHorizontalIcon className="size-4" />

2
src/home/header.tsx
View File

@@ -53,7 +53,7 @@ export default function Header() {
: `bg-transparent shadow-none`, : `bg-transparent shadow-none`,
)} )}
> >
<Wrap className="h-20 max-md:h-20 flex text-center justify-between max-md:pl-4 max-md:pr-4"> <Wrap className="h-20 max-md:h-20 flex text-center justify-between max-md:pl-4 max-md:pr-4 md:bg-transparent bg-white ">
<nav className="flex items-center gap-4 lg:gap-8"> <nav className="flex items-center gap-4 lg:gap-8">
{/* logo + 网站名称 */} {/* logo + 网站名称 */}
<NavLink to="/" className="flex items-center gap-2 shrink-0"> <NavLink to="/" className="flex items-center gap-2 shrink-0">

72
src/home/ipLine/index.tsx
View File

@@ -193,13 +193,13 @@ export default function IpLinePage() {
return ( return (
<> <>
<Toaster position="top-center" richColors /> <Toaster position="top-center" richColors />
<Wrap className="flex flex-col gap-4 mt-20 max-w-6xl mx-auto px-4 pb-20 bg-white"> <Wrap className="flex flex-col gap-4 mt-24 max-w-6xl mx-auto px-4 pb-20 bg-white">
<div className="grid grid-cols-3 mt-3"> <div className="grid md:grid-cols-3 grid-cols-1 mt-3">
<div></div> <div></div>
<h3 className="text-3xl font-bold text-gray-800 text-center"> <h3 className="text-2xl md:text-3xl font-bold text-gray-800 text-center">
IP线路表 IP线路表
</h3> </h3>
<div className="flex gap-4 text-sm justify-end items-end text-blue-500"> <div className="flex gap-4 text-sm md:justify-end justify-center md:p-0 pt-3 items-end text-blue-500">
<a <a
href="/softDownload" href="/softDownload"
className="no-underline hover:text-blue-700 active:no-underline focus:no-underline" className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
@@ -215,7 +215,7 @@ export default function IpLinePage() {
</div> </div>
</div> </div>
<ul className="flex justify-between gap-4 text-xs text-gray-600 px-2"> <ul className="flex flex-col md:flex-row md:justify-between gap-2 md:gap-4 text-xs text-gray-600 px-2">
<li className="flex items-center gap-1.5"> <li className="flex items-center gap-1.5">
<span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" /> <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
线路表和账户必须为同一产品才能使用 线路表和账户必须为同一产品才能使用
@@ -237,7 +237,7 @@ export default function IpLinePage() {
variant={p.id === productId ? "default" : "outline"} variant={p.id === productId ? "default" : "outline"}
onClick={() => handleSelectProduct(p.id)} onClick={() => handleSelectProduct(p.id)}
className={cn( className={cn(
"px-6 py-1.5 rounded-full", "px-4 md:px-6 py-1.5 rounded-full",
p.id === productId p.id === productId
? "text-white bg-linear-to-r from-cyan-400 to-blue-500 shadow-md shadow-blue-200 hover:opacity-90" ? "text-white bg-linear-to-r from-cyan-400 to-blue-500 shadow-md shadow-blue-200 hover:opacity-90"
: "border-gray-200 bg-white text-gray-600 hover:border-blue-400 hover:text-blue-500", : "border-gray-200 bg-white text-gray-600 hover:border-blue-400 hover:text-blue-500",
@@ -248,8 +248,8 @@ export default function IpLinePage() {
))} ))}
</div> </div>
<div className="flex items-center justify-center gap-4 w-full"> <div className="flex flex-col md:flex-row md:items-center md:justify-center gap-3 md:gap-4 w-full">
<div className="relative w-1/2"> <div className="relative w-full md:w-1/2">
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
<svg <svg
className="w-4 h-4" className="w-4 h-4"
@@ -276,35 +276,37 @@ export default function IpLinePage() {
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-cyan-400 text-sm" className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-cyan-400 text-sm"
/> />
</div> </div>
<Button <div className="flex gap-3 w-full md:w-auto">
onClick={handleSearch} <Button
className="px-8 rounded-full bg-linear-to-r from-cyan-400 to-blue-500 text-white shadow-md shadow-blue-200 hover:opacity-90" onClick={handleSearch}
> className="flex-1 md:flex-none px-8 rounded-full bg-linear-to-r from-cyan-400 to-blue-500 text-white shadow-md shadow-blue-200 hover:opacity-90"
搜索当前线路表
</Button>
<Button
variant="outline"
onClick={handleExport}
className="gap-1.5 px-4 rounded border-blue-400 text-blue-500 bg-white hover:bg-blue-50 hover:text-blue-500"
>
<svg
className="w-4 h-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
> >
<path 搜索当前线路表
strokeLinecap="round" </Button>
strokeLinejoin="round" <Button
strokeWidth={2} variant="outline"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" onClick={handleExport}
/> className="flex-none gap-1.5 px-4 rounded border-blue-400 text-blue-500 bg-white hover:bg-blue-50 hover:text-blue-500"
</svg> >
导出 <svg
</Button> className="w-4 h-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
导出
</Button>
</div>
</div> </div>
<div className="bg-orange-50 border border-orange-100 rounded-lg p-2 flex justify-center items-center gap-8 text-sm font-medium"> <div className="bg-orange-50 border border-orange-100 rounded-lg p-2 md:p-3 flex flex-col md:flex-row md:justify-center md:items-center gap-1 md:gap-8 text-sm font-medium">
<div className="flex items-center gap-2 text-orange-500"> <div className="flex items-center gap-2 text-orange-500">
<span>L2TP密钥：</span> <span>L2TP密钥：</span>
<span className="text-orange-600"> <span className="text-orange-600">
@@ -319,7 +321,7 @@ export default function IpLinePage() {
</div> </div>
</div> </div>
<div className="flex items-center gap-6 text-xs text-gray-600 px-1"> <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-6 text-xs text-gray-600 px-1">
{searching ? ( {searching ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" /> <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />

96
src/home/product/buy.tsx
View File

@@ -47,7 +47,7 @@ function ModeTabs({
onModeChange: (mode: "single" | "batch") => void onModeChange: (mode: "single" | "batch") => void
}) { }) {
return ( return (
<div className="flex bg-gray-50 rounded-xl p-1 w-48"> <div className="flex bg-gray-50 rounded-xl p-1 w-48 max-md:w-full">
<button <button
className={cn( className={cn(
"flex-1 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer", "flex-1 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer",
@@ -89,11 +89,11 @@ function ConnectCountSelector({
disabled?: boolean disabled?: boolean
}) { }) {
return ( return (
<div className="flex items-center gap-6"> <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
{label}： {label}：
</Label> </Label>
<div className="flex items-center gap-4 flex-1"> <div className="flex items-center gap-4 w-full md:w-auto md:flex-1">
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
@@ -156,21 +156,19 @@ function ConnectCountSelector({
// ============ 优惠券选择器 ============ // ============ 优惠券选择器 ============
function CouponSelector() { function CouponSelector() {
return ( return (
<div className="flex items-center gap-6"> <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
选择优惠券： 选择优惠券：
</Label> </Label>
<Select> <Select>
<SelectTrigger className="h-10 rounded-xl border-gray-200 flex-1 max-w-xs"> <SelectTrigger className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1 md:max-w-xs">
<SelectValue placeholder="请选择优惠券" /> <SelectValue placeholder="请选择优惠券" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="none">暂无可用优惠券</SelectItem> <SelectItem value="none">暂无可用优惠券</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<span className="text-xs text-gray-400 whitespace-nowrap"> <span className="text-xs text-gray-400">淘宝每次下单获得优惠券</span>
淘宝每次下单获得优惠券
</span>
</div> </div>
) )
} }
@@ -178,8 +176,8 @@ function CouponSelector() {
// ============ 批量注册说明 ============ // ============ 批量注册说明 ============
function BatchInfo() { function BatchInfo() {
return ( return (
<div className="flex items-start gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-start md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28 pt-1"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28 md:pt-1">
说明： 说明：
</Label> </Label>
<div className="flex-1 text-sm text-gray-600 leading-relaxed p-2 bg-blue-50/70 rounded-xl border border-blue-100"> <div className="flex-1 text-sm text-gray-600 leading-relaxed p-2 bg-blue-50/70 rounded-xl border border-blue-100">
@@ -343,8 +341,8 @@ export default function BuyPage() {
const showTabs = !isTest && !isFirstOrderDayCard const showTabs = !isTest && !isFirstOrderDayCard
return ( return (
<Wrap className="bg-white min-h-screen flex items-start justify-center pt-16"> <Wrap className="bg-white min-h-screen flex items-start justify-center pt-24">
<div className="w-full max-w-2xl px-8"> <div className="w-full max-w-2xl px-0 md:px-8">
{/* 标题 */} {/* 标题 */}
<div className="text-center mb-6 space-y-2"> <div className="text-center mb-6 space-y-2">
<h4 className="text-2xl font-bold"> <h4 className="text-2xl font-bold">
@@ -371,38 +369,38 @@ export default function BuyPage() {
// ====== 单个注册 ====== // ====== 单个注册 ======
<> <>
{/* IP产品账号 */} {/* IP产品账号 */}
<div className="flex items-center gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
IP产品账号： IP产品账号：
</Label> </Label>
<Input <Input
value={account} value={account}
onChange={e => setAccount(e.target.value)} onChange={e => setAccount(e.target.value)}
placeholder="4-10位字母或数字" placeholder="4-10位字母或数字"
className="h-10 rounded-xl border-gray-200 flex-1" className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
/> />
<span className="text-xs text-gray-400 whitespace-nowrap"> <span className="text-xs text-gray-400">
4至10位字母或数字或组合 4至10位字母或数字或组合
</span> </span>
</div> </div>
{/* IP产品密码 */} {/* IP产品密码 */}
<div className="flex items-center gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
IP产品密码： IP产品密码：
</Label> </Label>
<Input <Input
value={pwd} value={pwd}
onChange={e => setPwd(e.target.value)} onChange={e => setPwd(e.target.value)}
placeholder="1-10位字母或数字" placeholder="1-10位字母或数字"
className="h-10 rounded-xl border-gray-200 flex-1" className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
/> />
<span className="text-xs text-gray-400 whitespace-nowrap"> <span className="text-xs text-gray-400">
1至10位字母或数字或组合 1至10位字母或数字或组合
</span> </span>
</div> </div>
{/* 连接设备数：测试卡不显示；天卡首单(0.1元)显示但禁用 */}
{!isTest && ( {!isTest && (
<ConnectCountSelector <ConnectCountSelector
value={displayConnectCount} value={displayConnectCount}
@@ -420,24 +418,24 @@ export default function BuyPage() {
<BatchInfo /> <BatchInfo />
{/* IP账号前缀 */} {/* IP账号前缀 */}
<div className="flex items-center gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
IP账号前缀： IP账号前缀：
</Label> </Label>
<Input <Input
value={batchAccount} value={batchAccount}
onChange={e => setBatchAccount(e.target.value)} onChange={e => setBatchAccount(e.target.value)}
placeholder="3-8位字母或数字" placeholder="3-8位字母或数字"
className="h-10 rounded-xl border-gray-200 flex-1" className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
/> />
<span className="text-xs text-gray-400 whitespace-nowrap"> <span className="text-xs text-gray-400">
3至8位字母或数字或组合 3至8位字母或数字或组合
</span> </span>
</div> </div>
{/* 开始号 */} {/* 开始号 */}
<div className="flex items-center gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
开始号： 开始号：
</Label> </Label>
<Input <Input
@@ -446,7 +444,7 @@ export default function BuyPage() {
onChange={e => onChange={e =>
setBatchStart(Number.parseInt(e.target.value, 10) || 1) setBatchStart(Number.parseInt(e.target.value, 10) || 1)
} }
className="h-10 rounded-xl border-gray-200 flex-1 max-w-32" className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1 md:max-w-32"
/> />
<span className="text-xs text-gray-400"> <span className="text-xs text-gray-400">
本批次账号的起始账号 本批次账号的起始账号
@@ -454,8 +452,8 @@ export default function BuyPage() {
</div> </div>
{/* 注册个数 */} {/* 注册个数 */}
<div className="flex items-center gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
注册个数： 注册个数：
</Label> </Label>
<Input <Input
@@ -466,14 +464,14 @@ export default function BuyPage() {
Math.min(500, Number.parseInt(e.target.value, 10) || 1), Math.min(500, Number.parseInt(e.target.value, 10) || 1),
) )
} }
className="h-10 rounded-xl border-gray-200 flex-1 max-w-32" className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1 md:max-w-32"
/> />
</div> </div>
{/* 账号预览 */} {/* 账号预览 */}
{batchPreview && ( {batchPreview && (
<div className="flex items-center gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
即将生成的账号： 即将生成的账号：
</Label> </Label>
<span className="text-sm text-gray-700 font-medium"> <span className="text-sm text-gray-700 font-medium">
@@ -483,17 +481,17 @@ export default function BuyPage() {
)} )}
{/* IP产品密码 */} {/* IP产品密码 */}
<div className="flex items-center gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
IP产品密码： IP产品密码：
</Label> </Label>
<Input <Input
value={batchPwd} value={batchPwd}
onChange={e => setBatchPwd(e.target.value)} onChange={e => setBatchPwd(e.target.value)}
placeholder="1-10位字母或数字" placeholder="1-10位字母或数字"
className="h-10 rounded-xl border-gray-200 flex-1" className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
/> />
<span className="text-xs text-gray-400 whitespace-nowrap"> <span className="text-xs text-gray-400">
1至10位字母或数字或组合 1至10位字母或数字或组合
</span> </span>
</div> </div>
@@ -512,11 +510,11 @@ export default function BuyPage() {
{!isTest && <CouponSelector />} {!isTest && <CouponSelector />}
{/* 余额 */} {/* 余额 */}
<div className="flex items-center gap-6"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
余额： 余额：
</Label> </Label>
<div className="flex items-center gap-2 flex-1"> <div className="flex items-center gap-2 w-full md:w-auto md:flex-1">
<span className="text-sm text-gray-600"> <span className="text-sm text-gray-600">
当前账户余额 当前账户余额
<span className="font-bold text-orange-500 ml-1">¥10.00</span> <span className="font-bold text-orange-500 ml-1">¥10.00</span>
@@ -532,14 +530,14 @@ export default function BuyPage() {
</div> </div>
{/* 支付方式 */} {/* 支付方式 */}
<div className="flex items-center gap-6"> <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
支付方式： 支付方式：
</Label> </Label>
<RadioGroup <RadioGroup
value={payType} value={payType}
onValueChange={setPayType} onValueChange={setPayType}
className="flex gap-8" className="flex flex-wrap gap-x-8 gap-y-3 md:gap-8"
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<RadioGroupItem value="100" id="alipay" /> <RadioGroupItem value="100" id="alipay" />
@@ -576,16 +574,16 @@ export default function BuyPage() {
{/* 总金额 / 应付款 */} {/* 总金额 / 应付款 */}
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-6"> <div className="flex items-center justify-between md:justify-start md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
总金额： 总金额：
</Label> </Label>
<span className="font-medium text-gray-800"> <span className="font-medium text-gray-800">
¥{total.toFixed(2)} ¥{total.toFixed(2)}
</span> </span>
</div> </div>
<div className="flex items-center gap-6"> <div className="flex items-center justify-between md:justify-start md:gap-6">
<Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28"> <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
应付款： 应付款：
</Label> </Label>
<span className="text-xl font-bold text-orange-500"> <span className="text-xl font-bold text-orange-500">

12
src/home/softDownload/index.tsx
View File

@@ -23,13 +23,13 @@ export default function SoftDownloadPage() {
) )
return ( return (
<Wrap className="flex flex-col gap-6 mt-20 bg-white"> <Wrap className="flex flex-col gap-6 mt-24 bg-white">
<div className="grid grid-cols-3 mt-3"> <div className="grid md:grid-cols-3 grid-cols-1 text-center justify-center mt-3">
<div></div> <div></div>
<h3 className="text-3xl font-bold text-gray-800 text-center"> <h3 className="text-3xl font-bold text-gray-800 text-center">
软件下载 软件下载
</h3> </h3>
<div className="flex gap-4 text-sm justify-end items-end text-blue-500"> <div className="flex gap-4 text-sm md:justify-end justify-center md:p-0 pt-3 items-end text-blue-500">
<a <a
href="/ipline" href="/ipline"
className="no-underline hover:text-blue-700 active:no-underline focus:no-underline" className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
@@ -60,7 +60,7 @@ export default function SoftDownloadPage() {
</li> </li>
</ul> </ul>
<div className="grid grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 grid-cols-1 gap-8">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<h4 className="text-center font-bold text-gray-700 text-base mb-1"> <h4 className="text-center font-bold text-gray-700 text-base mb-1">
极狐IP 极狐IP
@@ -131,7 +131,7 @@ export default function SoftDownloadPage() {
</div> </div>
</div> </div>
<div className="grid grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 grid-cols-1 gap-8">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<h4 className="text-center font-bold text-gray-700 text-base mb-1"> <h4 className="text-center font-bold text-gray-700 text-base mb-1">
麒麟IP 麒麟IP
@@ -183,7 +183,7 @@ export default function SoftDownloadPage() {
<h4 className="text-center font-bold text-gray-700 text-base"> <h4 className="text-center font-bold text-gray-700 text-base">
代理商专用客户端 代理商专用客户端
</h4> </h4>
<div className="grid grid-cols-3 gap-4"> <div className="grid md:grid-cols-3 grid-cols-1 gap-4">
<DownloadBtn <DownloadBtn
href="https://mp4.juip.com/jh-dl.zip" href="https://mp4.juip.com/jh-dl.zip"
icon={<Monitor className="w-4 h-4" />} icon={<Monitor className="w-4 h-4" />}