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

修改定制套餐页面的背景图

Browse Source
This commit is contained in:
Eamon-meng
2025-07-25 15:16:54 +08:00
parent 0ae049e6f5
commit 2242275e84
3 changed files with 59 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/(home)/customized/_assets/Group.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
src/app/(home)/customized/_assets/Group.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

112
src/app/(home)/customized/page.tsx
View File

@@ -40,6 +40,7 @@ export default function CollectPage() {
}) })
// 从store中获取用户信息 // 从store中获取用户信息
const profile = useProfileStore(store => store.profile) const profile = useProfileStore(store => store.profile)
return ( return (
<main className="mt-20 flex flex-col gap-4"> <main className="mt-20 flex flex-col gap-4">
<Wrap className="flex flex-col py-8 gap-8"> <Wrap className="flex flex-col py-8 gap-8">
@@ -49,57 +50,61 @@ export default function CollectPage() {
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div className="bg-white rounded-lg shadow-md overflow-hidden p-6"> <div className="bg-white rounded-lg shadow-md overflow-hidden p-6">
<div className="text-center mb-8"> <div className="text-center mb-4">
<h1 className="text-2xl font-bold">优质代理IP服务商</h1> <h1 className="text-2xl font-bold">优质代理IP服务商</h1>
<p className="text-gray-600 font-medium mt-2"> <p className="text-gray-600 font-medium mt-2">
以技术升级为核心，提供优质的IP代理使用体验 以技术升级为核心，提供优质的IP代理使用体验
</p> </p>
</div> </div>
<div className="flex flex-col md:flex-row gap-8"> <div className="flex flex-col md:flex-row md:gap-4">
<div className="w-full md:w-1/3"> <div className="w-full md:w-1/3 mb-6 md:mb-0">
<div className="relative h-full w-full"> <div className="relative h-full w-full min-h-[200px] md:min-h-[300px] rounded-xl overflow-hidden">
<Image <Image
src={banner} src={banner}
alt="宣传图" alt="宣传图"
layout="responsive" fill
className="object-cover rounded-lg" className="object-cover"
priority priority
sizes="(max-width: 768px) 100vw, 33vw"
/> />
</div> </div>
</div> </div>
<div className="w-full md:w-2/3 flex flex-col gap-6">
<p className="text-gray-600"> <div className="w-full md:w-2/3 flex flex-col gap-4">
<p className="text-sm md:text-base text-gray-600 leading-relaxed">
华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。公司拥有海量优质IP资源，涵盖全球多地，能精准匹配不同客户需求，无论是数据采集、网络营销还是突破地域限制，都能提供合适方案。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行，让用户使用过程顺畅无忧，数据安全有保障。秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻，不断开拓业务新边界。 华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。公司拥有海量优质IP资源，涵盖全球多地，能精准匹配不同客户需求，无论是数据采集、网络营销还是突破地域限制，都能提供合适方案。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行，让用户使用过程顺畅无忧，数据安全有保障。秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻，不断开拓业务新边界。
</p> </p>
<div className="mt-4">
<Button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md"> <div className="mt-2 md:mt-4">
<Button className="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-4 md:px-6 py-2 md:py-3 rounded-md">
立即咨询 立即咨询
</Button> </Button>
</div> </div>
<div className="grid grid-cols-3 gap-4">
<div className="flex gap-2 items-center"> <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mt-2 md:mt-6">
<Image src={check} alt="特性" width={20} height={20}/> <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
<span>IP时效3-30分钟(可定制)</span> <span>IP时效3-30分钟(可定制)</span>
</div> </div>
<div className="flex gap-2 items-center"> <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
<Image src={check} alt="特性" width={20} height={20}/> <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
<span>IP时效3-30分钟(可定制)</span> <span>IP时效3-30分钟(可定制)</span>
</div> </div>
<div className="flex gap-2 items-center"> <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
<Image src={check} alt="特性" width={20} height={20}/> <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
<span>IP时效3-30分钟(可定制)</span> <span>IP时效3-30分钟(可定制)</span>
</div> </div>
<div className="flex gap-2 items-center"> <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
<Image src={check} alt="特性" width={20} height={20}/> <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
<span>支持高并发提取</span> <span>支持高并发提取</span>
</div> </div>
<div className="flex gap-2 items-center"> <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
<Image src={check} alt="特性" width={20} height={20}/> <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
<span>支持高并发提取</span> <span>支持高并发提取</span>
</div> </div>
<div className="flex gap-2 items-center"> <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
<Image src={check} alt="特性" width={20} height={20}/> <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
<span>支持高并发提取</span> <span>支持高并发提取</span>
</div> </div>
</div> </div>
@@ -124,7 +129,6 @@ export default function CollectPage() {
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
<span>企业名称</span> <span>企业名称</span>
</label> </label>
<Input <Input
{...field} {...field}
id={id} id={id}
@@ -144,7 +148,6 @@ export default function CollectPage() {
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
<span>联系人姓名</span> <span>联系人姓名</span>
</label> </label>
<Input <Input
{...field} {...field}
id={id} id={id}
@@ -164,7 +167,6 @@ export default function CollectPage() {
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
<span>联系人手机号码</span> <span>联系人手机号码</span>
</label> </label>
<Input <Input
{...field} {...field}
id={id} id={id}
@@ -184,7 +186,6 @@ export default function CollectPage() {
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
<span>每月需求用量</span> <span>每月需求用量</span>
</label> </label>
<Select onValueChange={field.onChange} value={field.value}> <Select onValueChange={field.onChange} value={field.value}>
<SelectTrigger <SelectTrigger
id={id} id={id}
@@ -212,7 +213,6 @@ export default function CollectPage() {
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
<span>用途</span> <span>用途</span>
</label> </label>
<Input <Input
{...field} {...field}
id={id} id={id}
@@ -231,33 +231,39 @@ export default function CollectPage() {
</Form> </Form>
</div> </div>
{/* <div className="relative mt-8 rounded-lg overflow-hidden h-32 md:h-40 bg-gray-100"> <div className="relative mt-8 rounded-lg overflow-hidden">
<div <div className="h-40 md:h-48 relative">
className="absolute inset-0 z-0" <div
style={{ className="absolute inset-0 bg-no-repeat"
backgroundImage: `url(${group.src})`, style={{
backgroundSize: 'cover', backgroundImage: `url(${group.src})`,
backgroundPosition: 'right center', backgroundPosition: 'center',
}}> backgroundSize: 'cover',
</div> }}
<div className={merge('relative h-full flex items-center justify-center pl-150')}> />
<div className="flex items-center gap-4"> <div className="absolute inset-0 flex items-center justify-center">
<Button <div className="w-full max-w-4xl px-6 flex flex-col md:flex-row items-center gap-4 justify-between md:gap-10">
className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')} <div className="text-blue-600 font-bold text-2xl md:text-2xl text-center md:text-left">
onClick={() => { 现在注册，免费领取5000IP
if (profile) { </div>
router.push('/admin/purchase')
} <Button
else { className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}
router.push('/login?redirect=/admin/purchase') onClick={() => {
} if (profile) {
}} router.push('/admin/purchase')
> }
免费试用 else {
</Button> router.push('/login?redirect=/admin/purchase')
}
}}
>
免费试用
</Button>
</div>
</div> </div>
</div> </div>
</div> */} </div>
</div> </div>
</Wrap> </Wrap>
</main> </main>