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

src/app/(home)/customized/page.tsx

@@ -40,6 +40,7 @@ export default function CollectPage() {
   })
   // 从store中获取用户信息
   const profile = useProfileStore(store => store.profile)
+
   return (
     <main className="mt-20 flex flex-col gap-4">
       <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="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>
               <p className="text-gray-600 font-medium mt-2">
                 以技术升级为核心，提供优质的IP代理使用体验
               </p>
             </div>
 
-            <div className="flex flex-col md:flex-row gap-8">
-              <div className="w-full md:w-1/3">
-                <div className="relative h-full w-full">
+            <div className="flex flex-col md:flex-row md:gap-4">
+              <div className="w-full md:w-1/3 mb-6 md:mb-0">
+                <div className="relative h-full w-full min-h-[200px] md:min-h-[300px] rounded-xl overflow-hidden">
                   <Image
                     src={banner}
                     alt="宣传图"
-                    layout="responsive"
-                    className="object-cover rounded-lg"
+                    fill
+                    className="object-cover"
                     priority
+                    sizes="(max-width: 768px) 100vw, 33vw"
                   />
                 </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小时服务，助力企业与个人在网络世界畅行无阻，不断开拓业务新边界。
                 </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>
                 </div>
-                <div className="grid grid-cols-3 gap-4">
-                  <div className="flex gap-2 items-center">
-                    <Image src={check} alt="特性" width={20} height={20}/>
+
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mt-2 md:mt-6">
+                  <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>
                   </div>
-                  <div className="flex gap-2 items-center">
-                    <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>
                   </div>
-                  <div className="flex gap-2 items-center">
-                    <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>
                   </div>
-                  <div className="flex gap-2 items-center">
-                    <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>支持高并发提取</span>
                   </div>
-                  <div className="flex gap-2 items-center">
-                    <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>支持高并发提取</span>
                   </div>
-                  <div className="flex gap-2 items-center">
-                    <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>支持高并发提取</span>
                   </div>
                 </div>
@@ -124,7 +129,6 @@ export default function CollectPage() {
                         <span className="text-red-500">*</span>
                         <span>企业名称</span>
                       </label>
-
                       <Input
                         {...field}
                         id={id}
@@ -144,7 +148,6 @@ export default function CollectPage() {
                         <span className="text-red-500">*</span>
                         <span>联系人姓名</span>
                       </label>
-
                       <Input
                         {...field}
                         id={id}
@@ -164,7 +167,6 @@ export default function CollectPage() {
                         <span className="text-red-500">*</span>
                         <span>联系人手机号码</span>
                       </label>
-
                       <Input
                         {...field}
                         id={id}
@@ -184,7 +186,6 @@ export default function CollectPage() {
                         <span className="text-red-500">*</span>
                         <span>每月需求用量</span>
                       </label>
-
                       <Select onValueChange={field.onChange} value={field.value}>
                         <SelectTrigger
                           id={id}
@@ -212,7 +213,6 @@ export default function CollectPage() {
                         <span className="text-red-500">*</span>
                         <span>用途</span>
                       </label>
-
                       <Input
                         {...field}
                         id={id}
@@ -231,33 +231,39 @@ export default function CollectPage() {
             </Form>
           </div>
 
-          {/* <div className="relative mt-8 rounded-lg overflow-hidden  h-32 md:h-40 bg-gray-100">
-            <div
-              className="absolute inset-0 z-0"
-              style={{
-                backgroundImage: `url(${group.src})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'right center',
-              }}>
-            </div>
-            <div className={merge('relative h-full flex items-center justify-center pl-150')}>
-              <div className="flex items-center gap-4">
-                <Button
-                  className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}
-                  onClick={() => {
-                    if (profile) {
-                      router.push('/admin/purchase')
-                    }
-                    else {
-                      router.push('/login?redirect=/admin/purchase')
-                    }
-                  }}
-                >
-                  免费试用
-                </Button>
+          <div className="relative mt-8 rounded-lg overflow-hidden">
+            <div className="h-40 md:h-48 relative">
+              <div
+                className="absolute inset-0 bg-no-repeat"
+                style={{
+                  backgroundImage: `url(${group.src})`,
+                  backgroundPosition: 'center',
+                  backgroundSize: 'cover',
+                }}
+              />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-full max-w-4xl px-6 flex flex-col md:flex-row items-center gap-4 justify-between md:gap-10">
+                  <div className="text-blue-600 font-bold text-2xl md:text-2xl text-center md:text-left">
+                    现在注册，免费领取5000IP
+                  </div>
+
+                  <Button
+                    className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}
+                    onClick={() => {
+                      if (profile) {
+                        router.push('/admin/purchase')
+                      }
+                      else {
+                        router.push('/login?redirect=/admin/purchase')
+                      }
+                    }}
+                  >
+                    免费试用
+                  </Button>
+                </div>
               </div>
             </div>
-          </div> */}
+          </div>
         </div>
       </Wrap>
     </main>