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-26 16:55:22 +08:00
parent 5007cd9f51
commit ff56fbd7c3
9 changed files with 63 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/home/product/index.tsx
View File

@@ -154,16 +154,18 @@ export default function ProductPage() {
}
return (
<Wrap className="flex flex-col gap-16 pt-30 bg-white">
<Wrap className="flex flex-col gap-16 pt-30 bg-white">
<div className="flex flex-col">
<ProductTabs
tabs={tabs}
activeId={activeTabId}
onTabChange={handleTabChange}
/>
<div className="flex mt-8 mb-8 mx-auto w-full">
<div className="shrink-0 border-r border-gray-200">
<div className="bg-orange-50 border block md:hidden border-orange-100 text-orange-400 p-3 text-center font-bold text-sm w-full mt-4">
需求5个以上，可以联系客服设置优惠价
</div>
<div className="flex flex-col md:flex-row md:mt-8 md:mb-8 mx-auto w-full">
<div className="shrink-0 md:border-r md:border-gray-200">
<ProductSidebar
brands={currentTab.brands}
activeId={currentBrand?.id || ""}
@@ -174,7 +176,7 @@ export default function ProductPage() {
<div className="flex-1 flex flex-col">
{!isPurchaseInfo ? (
<>
<div className="grid grid-cols-2 pl-3 text-sm gap-2 text-gray-600 leading-relaxed">
<div className="grid grid-cols-1 md:grid-cols-2 pl-3 text-sm gap-2 text-gray-600 leading-relaxed">
<ul className="space-y-2">
<li className="flex items-start gap-2">
<span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" />
@@ -196,11 +198,11 @@ export default function ProductPage() {
</li>
</ul>
</div>
<div className="bg-orange-50 border gap-3 border-orange-100 text-orange-400 p-3 text-center font-bold mt-3 mb-3 text-sm w-full">
<div className="bg-orange-50 border gap-3 border-orange-100 hidden md:block text-orange-400 p-3 text-center font-bold mt-3 mb-3 text-sm w-full">
需求5个以上，可以联系客服设置优惠价
</div>
{currentBrand?.versions && currentBrand.versions.length > 0 && (
<div className="w-full mt-2 pl-6">
<div className="w-full mt-2 px-3 md:pl-6 md:pr-0">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{currentBrand.versions.map(v => (
<button
@@ -219,7 +221,7 @@ export default function ProductPage() {
</div>
</div>
)}
<main className="pl-6">
<main className="pl-3 md:pl-6">
{displayProducts.length > 0 ? (
<ProductGrid products={displayProducts} />
) : (
@@ -230,7 +232,7 @@ export default function ProductPage() {
</main>
</>
) : (
<div className="pl-6 pr-6">
<div className="px-3 md:pl-6 md:pr-6">
<PurchaseInfo />
</div>
)}

33
src/home/product/productSidebar.tsx
View File

@@ -13,21 +13,24 @@ export default function ProductSidebar({
onSelect,
}: ProductSidebarProps) {
return (
<aside className="w-30">
{brands.map(brand => (
<button
key={brand.id}
onClick={() => onSelect(brand.id)}
className={cn(
"w-full text-left px-4 py-3 rounded-lg text-sm transition-colors",
activeId === brand.id
? "bg-blue-50 text-blue-600 font-semibold"
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
)}
>
{brand.name}
</button>
))}
<aside className="w-full md:w-30 overflow-visible">
<div className="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-hide md:flex-col md:gap-0 md:overflow-visible md:px-0 md:py-0">
{brands.map(brand => (
<button
key={brand.id}
onClick={() => onSelect(brand.id)}
className={cn(
"shrink-0 whitespace-nowrap px-5 py-1.5 rounded-full text-sm font-medium transition-colors",
"md:w-full md:text-left md:px-4 md:py-3 md:rounded-lg md:whitespace-normal",
activeId === brand.id
? "bg-blue-50 text-blue-600 font-semibold"
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
)}
>
{brand.name}
</button>
))}
</div>
</aside>
)
}

10
src/home/product/purchaseInfo.tsx
View File

@@ -1,15 +1,15 @@
export default function PurchaseInfo() {
return (
<div className="flex w-full max-w-6xl mx-auto">
<div className="flex-1 space-y-3 pr-3 border-r">
<div className="flex flex-col md:flex-row w-full max-w-6xl mx-auto">
<div className="flex-1 space-y-3 md:pr-3 md:border-r">
<div>
<h3 className="text-lg font-bold text-orange-400 mb-3">重磅打造：</h3>
<ul className="space-y-2 text-sm text-gray-600">
<li className="flex items-start gap-2 whitespace-nowrap">
<li className="flex items-start gap-2">
<span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" />
极光IP（聚IP池子最大的动态产品），240城市纯净住宅IP；现推广期，天卡1毛体验
</li>
<li className="flex items-start gap-2 whitespace-nowrap">
<li className="flex items-start gap-2">
<span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" />
极狐IP（聚IP网速最快的动态产品），260城市纯净住宅IP；现推广期，天卡1毛体验
</li>
@@ -40,7 +40,7 @@ export default function PurchaseInfo() {
</div>
</div>
<div className="flex-none w-90 pl-6 space-y-6">
<div className="flex-none md:w-90 md:pl-6 space-y-6 mt-6 md:mt-0">
<h3 className="text-lg font-bold text-orange-400 mb-2">
1V1定制化企业级业务场景
</h3>