feat: mobile style

src/app/detail/page.tsx

@@ -111,7 +111,7 @@ function DetailPageClient() {
 
   return (
     <PageLayout activePath='/detail'>
-      <div className='px-10 py-8 overflow-visible'>
+      <div className='px-4 sm:px-10 py-4 sm:py-8 overflow-visible'>
         {/* 顶部返回按钮已移入右侧信息容器 */}
         {loading ? (
           <div className='flex items-center justify-center min-h-[60vh]'>

src/app/douban/page.tsx

@@ -179,7 +179,7 @@ function DoubanPageClient() {
 
   return (
     <PageLayout activePath={getActivePath()}>
-      <div className='px-10 py-8 overflow-visible'>
+      <div className='px-4 sm:px-10 py-4 sm:py-8 overflow-visible'>
         {/* 页面标题 */}
         <div className='mb-8'>
           <h1 className='text-3xl font-bold text-gray-800 mb-2'>
@@ -200,7 +200,7 @@ function DoubanPageClient() {
           ) : (
             <>
               {/* 内容网格 */}
-              <div className='grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-x-8 gap-y-20 px-4'>
+              <div className='grid grid-cols-2 gap-x-2 gap-y-12 px-2 sm:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] sm:gap-x-8 sm:gap-y-20 sm:px-4'>
                 {loading
                   ? // 显示骨架屏
                     skeletonData.map((index) => (
@@ -208,7 +208,7 @@ function DoubanPageClient() {
                     ))
                   : // 显示实际数据
                     doubanData.map((item, index) => (
-                      <div key={`${item.title}-${index}`} className='w-44'>
+                      <div key={`${item.title}-${index}`} className='w-full'>
                         <DemoCard title={item.title} poster={item.poster} />
                       </div>
                     ))}

src/app/globals.css

@@ -73,3 +73,17 @@ body {
     rgba(0, 0, 0, 0.8) 100%
   );
 }
+
+/* 隐藏移动端（<768px）垂直滚动条 */
+@media (max-width: 767px) {
+  html,
+  body {
+    -ms-overflow-style: none; /* IE & Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  html::-webkit-scrollbar,
+  body::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+}

src/app/page.tsx

@@ -130,7 +130,7 @@ function HomeClient() {
 
   return (
     <PageLayout>
-      <div className='px-10 py-8'>
+      <div className='px-4 sm:px-10 py-4 sm:py-8 overflow-visible'>
         {/* 顶部 Tab 切换 */}
         <div className='mb-8 flex justify-center'>
           <CapsuleSwitch
@@ -150,7 +150,7 @@ function HomeClient() {
               <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
                 我的收藏
               </h2>
-              <div className='justify-start grid grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] gap-x-8 gap-y-20 px-4'>
+              <div className='justify-start grid grid-cols-2 gap-x-2 gap-y-6 px-2 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-8 sm:gap-y-20 sm:px-4'>
                 {favoriteItems.map((item) => (
                   <div key={item.id + item.source} className='w-full'>
                     <VideoCard {...item} from='favorites' />
@@ -173,7 +173,10 @@ function HomeClient() {
                 </h2>
                 <ScrollableRow scrollDistance={800}>
                   {collections.map((collection) => (
-                    <div key={collection.title} className='min-w-[280px] w-72'>
+                    <div
+                      key={collection.title}
+                      className='min-w-[180px] w-44 sm:min-w-[280px] sm:w-72'
+                    >
                       <CollectionCard
                         title={collection.title}
                         icon={collection.icon}
@@ -196,7 +199,10 @@ function HomeClient() {
                   {loading
                     ? // 加载状态显示灰色占位数据
                       Array.from({ length: 8 }).map((_, index) => (
-                        <div key={index} className='min-w-[180px] w-44'>
+                        <div
+                          key={index}
+                          className='min-w-[140px] w-36 sm:min-w-[180px] sm:w-44'
+                        >
                           <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse'>
                             <div className='absolute inset-0 bg-gray-300'></div>
                           </div>
@@ -205,7 +211,10 @@ function HomeClient() {
                       ))
                     : // 显示真实数据
                       hotMovies.map((movie, index) => (
-                        <div key={index} className='min-w-[180px] w-44'>
+                        <div
+                          key={index}
+                          className='min-w-[140px] w-36 sm:min-w-[180px] sm:w-44'
+                        >
                           <DemoCard title={movie.title} poster={movie.poster} />
                         </div>
                       ))}
@@ -221,7 +230,10 @@ function HomeClient() {
                   {loading
                     ? // 加载状态显示灰色占位数据
                       Array.from({ length: 8 }).map((_, index) => (
-                        <div key={index} className='min-w-[180px] w-44'>
+                        <div
+                          key={index}
+                          className='min-w-[140px] w-36 sm:min-w-[180px] sm:w-44'
+                        >
                           <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse'>
                             <div className='absolute inset-0 bg-gray-300'></div>
                           </div>
@@ -230,7 +242,10 @@ function HomeClient() {
                       ))
                     : // 显示真实数据
                       hotTvShows.map((show, index) => (
-                        <div key={index} className='min-w-[180px] w-44'>
+                        <div
+                          key={index}
+                          className='min-w-[140px] w-36 sm:min-w-[180px] sm:w-44'
+                        >
                           <DemoCard title={show.title} poster={show.poster} />
                         </div>
                       ))}

src/app/search/page.tsx

@@ -99,7 +99,7 @@ function SearchPageClient() {
 
   return (
     <PageLayout activePath='/search'>
-      <div className='px-10 py-8 overflow-visible mb-10'>
+      <div className='px-4 sm:px-10 py-4 sm:py-8 overflow-visible mb-10'>
         {/* 搜索框 */}
         <div className='mb-8'>
           <form onSubmit={handleSearch} className='max-w-2xl mx-auto'>
@@ -125,7 +125,7 @@ function SearchPageClient() {
             </div>
           ) : showResults ? (
             // 搜索结果
-            <div className='justify-start grid grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] gap-x-8 gap-y-20 px-4'>
+            <div className='justify-start grid grid-cols-2 gap-x-2 gap-y-20 px-2 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-8 sm:gap-y-20 sm:px-4'>
               {searchResults.map((item) => (
                 <div key={item.id} className='w-full'>
                   <VideoCard {...item} from='search' />