首页页面及手机端适配

src/app/(home)/footer.tsx

@@ -4,86 +4,78 @@ export type FooterProps = {}
 
 export default function Footer(props: FooterProps) {
   return (
-    <footer className="h-[500px] bg-gray-900 p-12 text-white overflow-hidden">
-      <Wrap className="flex flex-col">
-        <div className={`flex-auto overflow-hidden flex justify-between`}>
-          <div className="flex">
-            <div className="flex flex-col items-center">
-              <img src="/logo.svg" alt="logo" className="w-44 h-44 bg-gray-100"/>
-              <span className="text-sm font-light mt-6">关注我们查看更多资讯</span>
-            </div>
-
+    <footer className="bg-gray-900 text-white overflow-hidden">
+      <Wrap className="flex flex-col px-4 py-8 lg:p-12">
+        <div className={`flex-auto overflow-hidden flex flex-wrap justify-between`}>
+          <div className="flex flex-col lg:items-center gap-2 lg:gap-6 max-lg:w-1/2">
+            <img src="/qrcode.svg" alt="logo" className="flex-none w-20 h-20 sm:w-44 sm:h-44 bg-gray-100"/>
+            <span className="text-sm font-light">关注我们查看更多资讯</span>
           </div>
 
-          <div className={`flex flex-col gap-4`}>
+          <div className={`flex flex-col gap-2 lg:gap-4 max-lg:w-1/2`}>
             <h3>商务合作</h3>
             <p className={`text-sm text-gray-400 font-light`}>大客户经理:张经理</p>
             <p className={`text-sm text-gray-400 font-light`}>电话/微信:18751847847</p>
             <p className={`text-sm text-gray-400 font-light`}>QQ号:800180559</p>
-            <h3>服务保障</h3>
-            <p className={`text-sm text-gray-400 font-light`}>售前服务</p>
-            <p className={`text-sm text-gray-400 font-light`}>技术支持</p>
+            <h3 className={`hidden sm:block`}>服务保障</h3>
+            <p className={`text-sm text-gray-400 font-light hidden sm:block`}>售前服务</p>
+            <p className={`text-sm text-gray-400 font-light hidden sm:block`}>技术支持</p>
           </div>
 
-          <div>
-            <h3>站点导航</h3>
-            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
-              <li><a href="#" className={`text-sm text-gray-400`}>产品订购</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>获取代理</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>帮助中心</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>企业服务</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>推广返利</a></li>
-            </ul>
-          </div>
-
-          <div>
-            <h3>国内代理</h3>
-            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
-              <li><a href="#" className={`text-sm text-gray-400`}>短效代理</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>长效代理</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>固定IP代理</a></li>
-            </ul>
-          </div>
-
-          <div>
-            <h3>全球代理</h3>
-            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
-              <li><a href="#" className={`text-sm text-gray-400`}>动态代理</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>静态代理</a></li>
-            </ul>
-          </div>
-
-          <div>
-            <h3>使用案例</h3>
-            <ul className={`mt-4 h-[184px] flex flex-col flex-wrap gap-4 gap-x-6 font-light`}>
-              <li><a href="#" className={`text-sm text-gray-400`}>数据抓取</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>媒体矩阵</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>广告验证</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>价格监控</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>市场调研</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>金融数据</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>SEO优化</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>网站测试</a></li>
-            </ul>
-          </div>
-
-          <div>
-            <h3>获取代理</h3>
-            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
-              <li><a href="#" className={`text-sm text-gray-400`}>API提取</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>代码示例</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>热门地区</a></li>
-            </ul>
-          </div>
-
-          <div>
-            <h3>代理资讯</h3>
-            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
-              <li><a href="#" className={`text-sm text-gray-400`}>产品功能</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>使用教程</a></li>
-              <li><a href="#" className={`text-sm text-gray-400`}>行业资讯</a></li>
-            </ul>
-          </div>
+          <SiteNavList
+            title={`站点导航`}
+            items={[
+              {name: `产品订购`, href: `#`},
+              {name: `获取代理`, href: `#`},
+              {name: `帮助中心`, href: `#`},
+              {name: `企业服务`, href: `#`},
+              {name: `推广返利`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`国内代理`}
+            items={[
+              {name: `短效代理`, href: `#`},
+              {name: `长效代理`, href: `#`},
+              {name: `固定IP代理`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`全球代理`}
+            items={[
+              {name: `动态代理`, href: `#`},
+              {name: `静态代理`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`使用案例`}
+            items={[
+              {name: `数据抓取`, href: `#`},
+              {name: `媒体矩阵`, href: `#`},
+              {name: `广告验证`, href: `#`},
+              {name: `价格监控`, href: `#`},
+              {name: `市场调研`, href: `#`},
+              {name: `金融数据`, href: `#`},
+              {name: `SEO优化`, href: `#`},
+              {name: `网站测试`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`获取代理`}
+            items={[
+              {name: `API提取`, href: `#`},
+              {name: `代码示例`, href: `#`},
+              {name: `热门地区`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`代理资讯`}
+            items={[
+              {name: `产品功能`, href: `#`},
+              {name: `使用教程`, href: `#`},
+              {name: `行业资讯`, href: `#`},
+            ]}
+          />
         </div>
 
         <div className={`flex-none mt-6 pt-6 border-t border-gray-300 flex flex-col items-center`}>
@@ -104,3 +96,28 @@ export default function Footer(props: FooterProps) {
     </footer>
   )
 }
+
+function SiteNavList(props: {
+  title: string
+  items: {
+    name: string
+    href: string
+  }[]
+}) {
+  return (
+    <div className={`max-lg:mt-4 w-full lg:w-auto`}>
+      <h3>{props.title}</h3>
+      <ul
+        className={[
+          `mt-1 flex flex-wrap gap-2 font-light`,
+          `lg:mt-4 lg:h-[184px] lg:flex-col lg:gap-4 lg:gap-x-6`,
+        ].join(' ')}>
+        {props.items.map((item, index) => (
+          <li key={index}>
+            <a href={item.href} className={`text-sm text-gray-400`}>{item.name}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}