调整首页布局 & 首页移动端适配

src/home/_components/header/common.tsx

@@ -1,12 +1,15 @@
+import { ArrowUp, ChevronDown, ChevronUp } from "lucide-react"
 import { useState } from "react"
+import { cn } from "@/lib/utils"
 import gzh from "../assets/gzh.webp"
-import phone from "../assets/phone.webp"
-import qq from "../assets/qq.webp"
-import top from "../assets/top.webp"
-import wx from "../assets/wx.webp"
+import phoneImg from "../assets/phone.webp"
+import qqImg from "../assets/qq.webp"
+import topImg from "../assets/top.webp"
+import wxImg from "../assets/wx.webp"
 
 export default function Common() {
   const [activePopup, setActivePopup] = useState<"gzh" | "tel" | null>(null)
+  const [isExpanded, setIsExpanded] = useState(false)
 
   // QQ点击跳转
   const handleQQClick = () => {
@@ -20,8 +23,9 @@ export default function Common() {
   }
 
   return (
-    <div className="fixed right-4 bottom-20 z-50 flex flex-col w-18 overflow-visible rounded-xl shadow-lg bg-linear-to-b from-blue-700 to-cyan-300">
-      {/* QQ */}
+    <>
+      {/* ========== 桌面端 ========== */}
+      <div className="hidden md:flex fixed right-4 bottom-20 z-50 flex-col w-18 overflow-visible rounded-xl shadow-lg bg-linear-to-b from-blue-700 to-cyan-300">
         <div
           onClick={handleQQClick}
           onKeyDown={e => {
@@ -33,11 +37,10 @@ export default function Common() {
           tabIndex={0}
           className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
         >
-        <img src={qq} alt="QQ" className="w-7 h-7 object-contain" />
+          <img src={qqImg} alt="QQ" className="w-7 h-7 object-contain" />
           <span className="text-xs mt-1.5">QQ</span>
         </div>
 
-      {/* 微信 */}
         <div
           onClick={handleWxClick}
           onKeyDown={e => {
@@ -49,11 +52,10 @@ export default function Common() {
           tabIndex={0}
           className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
         >
-        <img src={wx} alt="微信" className="w-7 h-7 object-contain" />
+          <img src={wxImg} alt="微信" className="w-7 h-7 object-contain" />
           <span className="text-xs mt-1.5">微信</span>
         </div>
 
-      {/* 公众号 */}
         <div
           className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
           role="button"
@@ -66,15 +68,12 @@ export default function Common() {
           onBlur={() => setActivePopup(null)}
           onKeyDown={e => {
             if (e.key === "Enter" || e.key === " ") {
-            // toggle popup with keyboard
               setActivePopup(prev => (prev === "gzh" ? null : "gzh"))
             }
           }}
         >
           <img src={gzh} alt="公众号" className="w-7 h-7 object-contain" />
           <span className="text-xs mt-1.5">公众号</span>
-
-        {/* 公众号悬浮弹窗 */}
           {activePopup === "gzh" && (
             <div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
               <img
@@ -92,7 +91,6 @@ export default function Common() {
           )}
         </div>
 
-      {/* 电话 */}
         <div
           className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
           role="button"
@@ -109,10 +107,8 @@ export default function Common() {
             }
           }}
         >
-        <img src={phone} alt="电话" className="w-7 h-7 object-contain" />
+          <img src={phoneImg} alt="电话" className="w-7 h-7 object-contain" />
           <span className="text-xs mt-1.5">电话</span>
-
-        {/* 电话悬浮弹窗 */}
           {activePopup === "tel" && (
             <div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
               <p className="font-bold text-lg text-gray-800">400 800 9925</p>
@@ -124,14 +120,180 @@ export default function Common() {
           )}
         </div>
 
-      {/* 回到顶部 */}
         <button
           onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
           className="flex flex-col items-center justify-center py-2 text-white hover:bg-white/10 transition-colors"
         >
-        <img src={top} alt="回到顶部" className="w-7 h-7 object-contain" />
+          <img src={topImg} alt="回到顶部" className="w-7 h-7 object-contain" />
           <span className="text-xs mt-1.5">回到顶部</span>
         </button>
       </div>
+
+      {/* ========== 移动端：底部折叠面板 ========== */}
+      <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
+        {/* 折叠面板 */}
+        <div
+          className={cn(
+            "bg-white shadow-2xl rounded-t-2xl transition-all duration-300 ease-in-out",
+            isExpanded ? "max-h-[80vh]" : "max-h-14",
+          )}
+        >
+          {/* 拖拽条*/}
+          <div
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="flex flex-col items-center justify-center py-2.5 cursor-pointer hover:bg-gray-50 transition-colors rounded-t-2xl"
+          >
+            <div className="w-10 h-1 bg-gray-300 rounded-full" />
+            <div className="flex items-center gap-2 mt-1">
+              <span className="text-xs text-gray-500">
+                {isExpanded ? "收起" : "联系我们"}
+              </span>
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4 text-gray-400" />
+              ) : (
+                <ChevronUp className="w-4 h-4 text-gray-400" />
+              )}
+            </div>
+          </div>
+
+          {/* 展开内容 */}
+          <div
+            className={cn(
+              "overflow-hidden transition-all duration-300",
+              isExpanded ? "max-h-[70vh] opacity-100" : "max-h-0 opacity-0",
+            )}
+          >
+            <div className="px-4 pb-6 pt-2 space-y-3">
+              {/* QQ */}
+              <div
+                onClick={handleQQClick}
+                className="flex items-center gap-4 p-3 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors cursor-pointer"
+              >
+                <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
+                  <img
+                    src={qqImg}
+                    alt="QQ"
+                    className="w-6 h-6 object-contain"
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-800">QQ客服</p>
+                  <p className="text-xs text-gray-500">点击立即咨询</p>
+                </div>
+              </div>
+
+              {/* 微信 */}
+              <div
+                onClick={handleWxClick}
+                className="flex items-center gap-4 p-3 bg-green-50 rounded-xl hover:bg-green-100 transition-colors cursor-pointer"
+              >
+                <div className="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
+                  <img
+                    src={wxImg}
+                    alt="微信"
+                    className="w-6 h-6 object-contain"
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-800">微信客服</p>
+                  <p className="text-xs text-gray-500">点击立即咨询</p>
+                </div>
+              </div>
+
+              {/* 公众号 */}
+              <div
+                onClick={() =>
+                  setActivePopup(activePopup === "gzh" ? null : "gzh")
+                }
+                className="flex items-center gap-4 p-3 bg-purple-50 rounded-xl hover:bg-purple-100 transition-colors cursor-pointer"
+              >
+                <div className="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
+                  <img
+                    src={gzh}
+                    alt="公众号"
+                    className="w-6 h-6 object-contain"
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-800">公众号</p>
+                  <p className="text-xs text-gray-500">点击查看二维码</p>
+                </div>
+                <ChevronUp
+                  className={cn(
+                    "w-5 h-5 text-purple-500 transition-transform",
+                    activePopup === "gzh" ? "rotate-180" : "",
+                  )}
+                />
+              </div>
+
+              {/* 公众号二维码展开 */}
+              {activePopup === "gzh" && (
+                <div className="p-4 bg-gray-50 rounded-xl text-center">
+                  <img
+                    src="/img/ewm.png"
+                    alt="公众号二维码"
+                    className="w-40 h-40 mx-auto object-contain"
+                  />
+                  <p className="text-orange-500 text-xs mt-2">
+                    实时响应 在线时间 8:30-23:00
+                  </p>
+                  <p className="text-orange-500 text-xs">
+                    关注公众号可获取免费的到期提醒服务
+                  </p>
+                </div>
+              )}
+
+              {/* 电话 */}
+              <div
+                onClick={() =>
+                  setActivePopup(activePopup === "tel" ? null : "tel")
+                }
+                className="flex items-center gap-4 p-3 bg-orange-50 rounded-xl hover:bg-orange-100 transition-colors cursor-pointer"
+              >
+                <div className="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center">
+                  <img
+                    src={phoneImg}
+                    alt="电话"
+                    className="w-6 h-6 object-contain"
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-800">电话客服</p>
+                  <p className="text-xs text-gray-500">点击查看号码</p>
+                </div>
+                <ChevronUp
+                  className={cn(
+                    "w-5 h-5 text-orange-500 transition-transform",
+                    activePopup === "tel" ? "rotate-180" : "",
+                  )}
+                />
+              </div>
+
+              {/* 电话展开 */}
+              {activePopup === "tel" && (
+                <div className="p-4 bg-gray-50 rounded-xl text-center">
+                  <p className="font-bold text-2xl text-gray-800">
+                    400 800 9925
+                  </p>
+                  <p className="text-sm text-gray-600 mt-1">实时接通</p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    电话值班时间 8:30-23:00
+                  </p>
+                </div>
+              )}
+
+              {/* 回到顶部 */}
+              <button
+                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+                className="flex items-center justify-center gap-2 w-full p-3 bg-gray-100 rounded-xl hover:bg-gray-200 transition-colors"
+              >
+                <ArrowUp className="w-4 h-4 text-gray-600" />
+                <span className="text-sm text-gray-600">回到顶部</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
   )
 }

src/home/_components/header/menu-mobile.tsx

@@ -0,0 +1,182 @@
+import { ChevronDown, X } from "lucide-react"
+import { useState } from "react"
+import { NavLink, useNavigate } from "react-router-dom"
+import { logout } from "@/api/auth"
+import { cn } from "@/lib/utils"
+
+export default function MobileMenu({
+  authed,
+  onClose,
+}: {
+  authed: boolean
+  onClose: () => void
+}) {
+  const navigate = useNavigate()
+  const [productOpen, setProductOpen] = useState(false)
+
+  const handleLogout = async () => {
+    await logout()
+  }
+
+  const go = (path: string) => {
+    onClose()
+    navigate(path)
+  }
+
+  const openExternal = (url: string) => {
+    onClose()
+    window.open(url, "_blank")
+  }
+
+  return (
+    <div className="lg:hidden fixed inset-0 z-50 flex">
+      <button
+        type="button"
+        aria-label="关闭菜单"
+        className="flex-1 bg-black/40 cursor-pointer"
+        onClick={onClose}
+      />
+
+      <div className="absolute left-0 top-0 bottom-0 w-72 max-w-[80vw] bg-white shadow-xl flex flex-col">
+        {/* 头部：logo + 关闭 */}
+        <div className="flex items-center justify-between px-4 h-16 border-b border-gray-100">
+          <NavLink to="/" onClick={onClose} className="flex items-center gap-2">
+            <img
+              src="/favicon.svg"
+              alt="聚IP"
+              className="w-8 h-8 object-contain"
+            />
+            <span className="text-xl font-bold bg-linear-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
+              聚IP
+            </span>
+          </NavLink>
+          <button
+            type="button"
+            aria-label="关闭菜单"
+            className="rounded-md p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
+            onClick={onClose}
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* 菜单项 */}
+        <div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
+          <MobileNavLink to="/" onNavigate={onClose}>
+            首页
+          </MobileNavLink>
+
+          {/* 二级菜单 */}
+          <div>
+            <button
+              type="button"
+              onClick={() => setProductOpen(!productOpen)}
+              className={cn(
+                "w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-sm transition-colors",
+                productOpen
+                  ? "text-blue-600 font-medium"
+                  : "text-gray-700 hover:bg-gray-50",
+              )}
+            >
+              <span>产品订购</span>
+              <ChevronDown
+                className={cn(
+                  "w-4 h-4 transition-transform duration-200",
+                  productOpen && "rotate-180",
+                )}
+              />
+            </button>
+            {productOpen && (
+              <div className="pl-4 space-y-1">
+                <SubItem onClick={() => go("/product")}>动静态IP</SubItem>
+                <SubItem onClick={() => openExternal("https://lanhuip.com")}>
+                  新HTTP/S5
+                </SubItem>
+                <SubItem onClick={() => go("/product/http")}>HTTP/S5</SubItem>
+                <SubItem onClick={() => go("/product/routeros")}>
+                  软路由成本价
+                </SubItem>
+                <SubItem onClick={() => openExternal("http://vps.juip.com")}>
+                  动态Vps
+                </SubItem>
+              </div>
+            )}
+          </div>
+
+          <MobileNavLink to="/ipline" onNavigate={onClose}>
+            IP线路表
+          </MobileNavLink>
+          <MobileNavLink to="/softdownload" onNavigate={onClose}>
+            软件下载
+          </MobileNavLink>
+          <MobileNavLink to="/help" onNavigate={onClose}>
+            帮助/教程
+          </MobileNavLink>
+          <MobileNavLink to="/client" onNavigate={onClose}>
+            下载客户端
+          </MobileNavLink>
+
+          {authed && (
+            <>
+              <button
+                type="button"
+                onClick={() => go("/admin")}
+                className="w-full flex items-center px-3 py-2.5 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                个人中心
+              </button>
+              <button
+                type="button"
+                onClick={handleLogout}
+                className="w-full flex items-center px-3 py-2.5 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                退出
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MobileNavLink = ({
+  to,
+  onNavigate,
+  children,
+}: {
+  to: string
+  onNavigate: () => void
+  children: React.ReactNode
+}) => (
+  <NavLink
+    to={to}
+    onClick={onNavigate}
+    className={({ isActive }) =>
+      cn(
+        "w-full flex items-center px-3 py-2.5 rounded-lg text-sm transition-colors",
+        isActive
+          ? "bg-blue-50 text-blue-600 font-medium"
+          : "text-gray-700 hover:bg-gray-50",
+      )
+    }
+  >
+    {children}
+  </NavLink>
+)
+
+const SubItem = ({
+  onClick,
+  children,
+}: {
+  onClick: () => void
+  children: React.ReactNode
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="w-full flex items-center px-3 py-2 rounded-lg text-xs text-gray-500 hover:bg-blue-50 hover:text-blue-600 transition-colors"
+  >
+    {children}
+  </button>
+)

src/home/header.tsx

@@ -1,11 +1,17 @@
-import { useRef, useState, useSyncExternalStore } from "react"
-import { NavLink } from "react-router-dom"
+import { Menu, User } from "lucide-react"
+import { useEffect, useRef, useState, useSyncExternalStore } from "react"
+import { NavLink, useNavigate } from "react-router-dom"
+import { AUTH_EVENT, isAuthed } from "@/api/token"
 import ProductDropdown from "@/components/productDropdown"
 import ProfileOrLogin from "@/components/profileOrLogin"
 import Wrap from "@/components/wrap"
+import { useMediaQuery } from "@/lib/hooks/useMediaQuery"
 import { cn } from "@/lib/utils"
+import MobileMenu from "./_components/header/menu-mobile"
 
 export default function Header() {
+  const navigate = useNavigate()
+  const isWideDesktop = useMediaQuery("(min-width: 80rem)")
   const scroll = useSyncExternalStore(
     callback => {
       window.addEventListener("scroll", callback)
@@ -22,6 +28,20 @@ export default function Header() {
   const handleEnter = () => setOpenMenu(true)
   const handleLeave = () => setOpenMenu(false)
 
+  // 移动端状态
+  const [mobileMenu, setMobileMenu] = useState(false)
+  const [authed, setAuthed] = useState(isAuthed)
+
+  useEffect(() => {
+    const update = () => setAuthed(isAuthed())
+    window.addEventListener("focus", update)
+    window.addEventListener(AUTH_EVENT, update)
+    return () => {
+      window.removeEventListener("focus", update)
+      window.removeEventListener(AUTH_EVENT, update)
+    }
+  }, [])
+
   return (
     <header className={cn("fixed top-0 left-0 w-screen z-50 flex flex-col")}>
       <div
@@ -33,8 +53,21 @@ export default function Header() {
             : `bg-transparent shadow-none`,
         )}
       >
-        <Wrap className="h-20 max-md:h-16 flex justify-between pl-15 pr-15">
-          <nav className="flex items-center justify-between gap-4 lg:gap-8">
+        <Wrap className="h-20 max-md:h-16 flex justify-between pl-15 pr-15 max-md:pl-4 max-md:pr-4">
+          <nav className="flex items-center gap-4 lg:gap-8">
+            {/* logo + 网站名称 */}
+            <NavLink to="/" className="flex items-center gap-2 shrink-0">
+              <img
+                src="/favicon.svg"
+                alt="聚IP"
+                className="w-10 h-10 max-md:w-8 max-md:h-8 object-contain"
+              />
+              <span className="text-2xl max-md:text-xl font-bold bg-linear-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
+                聚IP
+              </span>
+            </NavLink>
+
+            {/* 桌面端菜单 */}
             <ul className="h-full items-stretch hidden lg:flex">
               <NavItem to="/">首页</NavItem>
               <MenuItem
@@ -43,16 +76,50 @@ export default function Header() {
                 onMouseEnter={handleEnter}
                 onMouseLeave={handleLeave}
               >
-                <ProductDropdown onNavigate={() => setOpenMenu(false)} />
+                <ProductDropdown
+                  size={isWideDesktop ? "lg" : "sm"}
+                  onNavigate={() => setOpenMenu(false)}
+                />
               </MenuItem>
               <NavItem to="/ipline">IP线路表</NavItem>
               <NavItem to="/softdownload">软件下载</NavItem>
               <NavItem to="/help">帮助/教程</NavItem>
             </ul>
           </nav>
+
+          {/* 桌面端登录/注册 */}
+          <div className="max-lg:hidden flex items-center">
             <ProfileOrLogin />
+          </div>
+
+          {/* 移动端：未登录显示用户图标+汉堡菜单，已登录仅显示汉堡菜单 */}
+          <div className="lg:hidden flex items-center gap-2">
+            {!authed && (
+              <button
+                type="button"
+                aria-label="登录/注册"
+                onClick={() => navigate("/login")}
+                className="p-2 text-slate-700 hover:text-blue-500 transition-colors cursor-pointer"
+              >
+                <User className="w-6 h-6" />
+              </button>
+            )}
+            <button
+              type="button"
+              aria-label="打开菜单"
+              onClick={() => setMobileMenu(true)}
+              className="p-2 text-slate-700 hover:text-blue-500 transition-colors cursor-pointer"
+            >
+              <Menu className="w-6 h-6" />
+            </button>
+          </div>
         </Wrap>
       </div>
+
+      {/* 移动端左侧菜单栏 */}
+      {mobileMenu && (
+        <MobileMenu authed={authed} onClose={() => setMobileMenu(false)} />
+      )}
     </header>
   )
 }
@@ -147,15 +214,11 @@ const MenuItem = ({
 
       <div
         className={cn(
-          "absolute top-full left-0 pt-3 w-screen max-w-4xl transition-all duration-200 z-50",
+          "fixed left-1/2 top-20 -translate-x-1/2 w-[min(56rem,calc(100vw-2rem))] transition-all duration-200 z-50",
           isOpen
             ? "opacity-100 visible translate-y-0"
             : "opacity-0 invisible -translate-y-2 pointer-events-none",
         )}
-        style={{
-          left: "50%",
-          transform: `translateX(-7%)`,
-        }}
       >
         <div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-6 overflow-visible">
           {children}

src/home/index.tsx

@@ -1,6 +1,9 @@
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import type { ReactNode } from "react"
+import { useRef, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import Wrap from "@/components/wrap"
+import { useIsMobile } from "@/lib/hooks/useMediaQuery"
 import banner from "./_assets/banner.webp"
 import s1 from "./_assets/s1.webp"
 import s2 from "./_assets/s2.webp"
@@ -22,6 +25,35 @@ export default function HomePage() {
   const handleFreeTrial = () => {
     navigate("/login")
   }
+
+  const scrollContainerRef = useRef<HTMLUListElement>(null)
+  const [showLeftArrow, setShowLeftArrow] = useState(false)
+  const [showRightArrow, setShowRightArrow] = useState(true)
+  const isMobile = useIsMobile()
+
+  const scroll = (direction: "left" | "right") => {
+    if (!scrollContainerRef.current) return
+    const container = scrollContainerRef.current
+    const scrollAmount = container.clientWidth / 2
+    const newScrollLeft =
+      direction === "left"
+        ? container.scrollLeft - scrollAmount
+        : container.scrollLeft + scrollAmount
+    container.scrollTo({
+      left: newScrollLeft,
+      behavior: "smooth",
+    })
+  }
+
+  const handleScroll = () => {
+    if (!scrollContainerRef.current) return
+    const container = scrollContainerRef.current
+    setShowLeftArrow(container.scrollLeft > 10)
+    setShowRightArrow(
+      container.scrollLeft < container.scrollWidth - container.clientWidth - 10,
+    )
+  }
+
   return (
     <>
       <Common />
@@ -37,7 +69,7 @@ export default function HomePage() {
         />
 
         <Wrap className="relative pt-64 pb-48 max-md:pt-32 max-md:pb-24">
-          <h1 className="text-4xl md:text-5xl font-bold text-center md:text-left">
+          <h1 className="text-4xl md:text-5xl font-bold text-center md:text-left sm:text-left">
             聚集优质IP产品，尽在聚IP
           </h1>
           <p className="mt-6 text-gray-600 text-center md:text-left">
@@ -68,17 +100,69 @@ export default function HomePage() {
       <section className="w-full relative shadow-blue-50 bg-white">
         <Wrap className="relative pt-32 pb-48 max-md:pt-32 max-md:pb-24">
           <PageSection title="为什么我们是你的最佳选择">
-            <p className="text-gray-600 text-center text-sm">
+            <p className="text-gray-600 text-center text-sm hidden md:block">
               国内三大运营商正规授权，千万级代理IP资源，权威与品质的双重保障
             </p>
-            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 pt-16">
+            <div className="relative pt-16">
+              {/* 左箭头 - 移动端显示 */}
+              {isMobile && showLeftArrow && (
+                <button
+                  onClick={() => scroll("left")}
+                  className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white/90 hover:bg-white rounded-full shadow-lg p-2 border border-gray-200 transition-all md:hidden"
+                >
+                  <ChevronLeft className="w-5 h-5 text-gray-600" />
+                </button>
+              )}
+
+              {/* 右箭头 - 移动端显示 */}
+              {isMobile && showRightArrow && (
+                <button
+                  onClick={() => scroll("right")}
+                  className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white/90 hover:bg-white rounded-full shadow-lg p-2 border border-gray-200 transition-all md:hidden"
+                >
+                  <ChevronRight className="w-5 h-5 text-gray-600" />
+                </button>
+              )}
+
+              {/* 左右渐变遮罩 - 移动端显示 */}
+              {isMobile && (
+                <>
+                  <div className="absolute left-0 top-0 bottom-0 w-12 bg-linear-to-r from-white to-transparent pointer-events-none z-5 md:hidden" />
+                  <div className="absolute right-0 top-0 bottom-0 w-12 bg-linear-to-r from-white to-transparent pointer-events-none z-5 md:hidden" />
+                </>
+              )}
+
+              {/* 滚动列表 */}
+              <ul
+                ref={scrollContainerRef}
+                onScroll={handleScroll}
+                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 overflow-x-auto scroll-smooth"
+                style={{
+                  gridTemplateColumns: "repeat(6, 1fr)",
+                  scrollbarWidth: "none",
+                  msOverflowStyle: "none",
+                }}
+              >
+                <li className="min-w-37.5">
                   <ProductTypeCard icon={s1} title="全网产品最多，IP库最大" />
+                </li>
+                <li className="min-w-37.5">
                   <ProductTypeCard icon={s2} title="支持全设备及协议" />
+                </li>
+                <li className="min-w-37.5">
                   <ProductTypeCard icon={s3} title="用户独享宽带" />
+                </li>
+                <li className="min-w-37.5">
                   <ProductTypeCard icon={s4} title="价低质优，免费测试" />
+                </li>
+                <li className="min-w-37.5">
                   <ProductTypeCard icon={s5} title="专属化产品定制" />
+                </li>
+                <li className="min-w-37.5">
                   <ProductTypeCard icon={s6} title="专业的服务团队" />
+                </li>
               </ul>
+            </div>
             <div className="flex max-md:flex-col justify-between items-center gap-6 md:gap-10 mt-10 lg:mt-16 p-6 md:p-12 lg:p-20 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white">
               <div className="flex flex-col">
                 <h3 className="text-xl lg:text-2xl font-bold mb-4">
@@ -92,7 +176,7 @@ export default function HomePage() {
                 <img src={s7} alt="产品" className="w-20 h-20 rounded-lg" />
               </div>
             </div>
-            <div className="flex flex-col pt-12 lg:pt-24 ">
+            <div className="flex flex-col pt-12 lg:pt-24">
               <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                 海量地区，遍布全国的优质IP代理资源
               </h2>
@@ -100,36 +184,37 @@ export default function HomePage() {
                 遍布全国的代理服务器节点为用户提供智能帮助
               </p>
             </div>
+
             <div className="pt-10 lg:pt-20">
-              <ul className="shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col">
-                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4 ">
-                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
+              <ul className="grid grid-cols-2 lg:flex p-8 max-md:p-0 gap-4 lg:gap-0">
+                <li className="flex flex-col items-center justify-center lg:flex-1">
+                  <p className="text-3xl lg:text-4xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold">
                     10万+
                   </p>
-                  <p className="text-sm">全国节点覆盖</p>
+                  <p className="text-sm text-gray-600">全国节点覆盖</p>
                 </li>
-                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4">
-                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
+                <li className="flex flex-col items-center justify-center lg:flex-1">
+                  <p className="text-3xl lg:text-4xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold">
                     100万+
                   </p>
-                  <p className="text-sm">全国独享IP池</p>
+                  <p className="text-sm text-gray-600">全国独享IP池</p>
                 </li>
-                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4">
-                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
+                <li className="flex flex-col items-center justify-center lg:flex-1">
+                  <p className="text-3xl lg:text-4xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold">
                     10万+
                   </p>
-                  <p className="text-sm">全国实时在线IP数</p>
+                  <p className="text-sm text-gray-600">全国实时在线IP数</p>
                 </li>
-                <li className="flex-1 flex flex-col items-center justify-center">
-                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
+                <li className="flex flex-col items-center justify-center lg:flex-1">
+                  <p className="text-3xl lg:text-4xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold">
                     99%
                   </p>
-                  <p className="text-sm">IP可用率</p>
+                  <p className="text-sm text-gray-600">IP可用率</p>
                 </li>
               </ul>
             </div>
 
-            <div className="flex flex-col pt-12 lg:pt-24 ">
+            <div className="flex flex-col pt-12 lg:pt-24">
               <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                 满足您的多种业务需求
               </h2>
@@ -138,7 +223,65 @@ export default function HomePage() {
               </p>
             </div>
 
-            <div className="flex flex-col mt-10 lg:mt-20">
+            {/* ========== 移动端 ========== */}
+            <div className="grid grid-cols-2 gap-4 mt-10 lg:hidden">
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  爬虫抓取
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  3000W高匿名IP，可以轻松抓取企业信息、分类信息、房地产信息、电商信息
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  数据采集
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  用于大数据采集的多样化利用场景，快速采集SEO数据优化、金融理财、地域信息数据
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  营销推广
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  论坛发帖、问答推广、网上购物、投票点赞等，根据渠道操作要求，定制IP完成营销推广
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  电子商务
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  可帮助用户切换网络，模拟多个独立账号，有助于用户参与限时促销活动
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  游戏工作室
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  保证IP稳定，不掉线，在有效时长内完成游戏试玩、升级、完成游戏工作室操作要求
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  自媒体运营
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  可帮助自媒体运营者维护账号独立性，为每个账号赋予独立IP，避免IP地址关联
+                </p>
+              </div>
+            </div>
+
+            {/* ========== 桌面端 ========== */}
+            <div className="hidden lg:flex flex-col mt-10 lg:mt-20">
               <div className="relative flex items-center justify-center">
                 <img src={s9} alt="图片" className="max-w-full h-auto" />
                 <div className="absolute left-0 top-0 w-[30%] h-full flex flex-col justify-between">
@@ -197,16 +340,65 @@ export default function HomePage() {
               </div>
             </div>
 
-            <div className="flex flex-col pt-12 lg:pt-24 ">
+            <div className="flex flex-col pt-12 lg:pt-24">
               <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                 为您提供质量保障
               </h2>
               <p className="text-gray-600 text-center text-sm">
-                国内三大运营商正规授权，千万级代理IP资源，权威与品质的双重保障
+                国内三大运营商正规授权，权威与品质的双重保障
               </p>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 pt-20">
+            {/* 移动端 */}
+            <div className="flex flex-col gap-6 pt-10 md:hidden">
+              {/* 售前咨询 */}
+              <div className="flex items-start gap-4 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-xl p-5">
+                <div className="w-16 h-16 bg-blue-50 rounded-xl flex items-center justify-center shrink-0">
+                  <img src={s10} alt="售前咨询" className="w-10 h-10" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-gray-800 mb-1">
+                    售前咨询
+                  </h3>
+                  <p className="text-xs text-gray-600 leading-relaxed">
+                    注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关答疑
+                  </p>
+                </div>
+              </div>
+
+              {/* 售中服务 */}
+              <div className="flex items-start gap-4 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-xl p-5">
+                <div className="w-16 h-16 bg-blue-50 rounded-xl flex items-center justify-center shrink-0">
+                  <img src={s11} alt="售中服务" className="w-10 h-10" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-gray-800 mb-1">
+                    售中服务
+                  </h3>
+                  <p className="text-xs text-gray-600 leading-relaxed">
+                    全国100万+动态IP代理资源免费测试，先测后买让您安心使用
+                  </p>
+                </div>
+              </div>
+
+              {/* 售后保障 */}
+              <div className="flex items-start gap-4 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-xl p-5">
+                <div className="w-16 h-16 bg-blue-50 rounded-xl flex items-center justify-center shrink-0">
+                  <img src={s12} alt="售后保障" className="w-10 h-10" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-gray-800 mb-1">
+                    售后保障
+                  </h3>
+                  <p className="text-xs text-gray-600 leading-relaxed">
+                    1V1专属售后答疑，技术团队7*24小时在线支持提供专属解决方案
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* 桌面端 */}
+            <div className="hidden md:grid grid-cols-3 gap-12 pt-20">
               <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
                 <div className="flex w-full mb-5 bg-blue-50 items-center justify-center">
                   <img src={s10} alt="售前咨询" className="p-6" />
@@ -215,8 +407,7 @@ export default function HomePage() {
                   售前咨询
                 </h2>
                 <p className="text-xs text-gray-600">
-                  注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关
-                  答疑
+                  注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关答疑
                 </p>
               </div>
               <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
@@ -368,13 +559,13 @@ function PageSection(props: { title: string; children: ReactNode }) {
 
 function ProductTypeCard(props: { icon: string; title: string }) {
   return (
-    <li className="flex flex-col items-center gap-5 rounded-lg text-center gap-6">
+    <div className="flex flex-col items-center gap-5 rounded-lg text-center">
       <img
         src={props.icon}
         alt={props.title}
         className="w-20 h-20 object-cover"
       />
       <p className="text-sm">{props.title}</p>
-    </li>
+    </div>
   )
 }

src/lib/hooks/useMediaQuery.ts

@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from "react"
+
+const subscribeMediaQuery = (query: string) => (callback: () => void) => {
+  if (typeof window === "undefined") return () => {}
+  const mql = window.matchMedia(query)
+  mql.addEventListener("change", callback)
+  return () => mql.removeEventListener("change", callback)
+}
+
+const getMediaQuerySnapshot = (query: string) => () => {
+  if (typeof window === "undefined") return false
+  return window.matchMedia(query).matches
+}
+
+export function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    subscribeMediaQuery(query),
+    getMediaQuerySnapshot(query),
+    () => false,
+  )
+}
+
+// 移动端：< 768px（对应 Tailwind md 断点以下）
+export function useIsMobile(): boolean {
+  return useMediaQuery("(max-width: 47.999rem)")
+}
+
+// 桌面端：>= 768px
+export function useIsDesktop(): boolean {
+  return useMediaQuery("(min-width: 48rem)")
+}
+
+// 窄桌面/平板横屏：< 1280px（对应 Tailwind xl 断点以下）
+export function useIsNarrowDesktop(): boolean {
+  return useMediaQuery("(max-width: 79.999rem)")
+}