feat: scroll x

src/app/detail/page.tsx

@@ -59,7 +59,7 @@ export default function DetailPage() {
             <div className='text-gray-500'>未找到视频详情</div>
           </div>
         ) : (
-          <div className='w-full max-w-[90%]'>
+          <div className='w-full max-w-[95%]'>
             {/* 主信息区：左图右文 */}
             <div className='flex flex-col md:flex-row gap-8 mb-8 bg-transparent rounded-xl p-6'>
               {/* 封面 */}

src/app/globals.css

@@ -2,10 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}
+
 :root {
   --foreground-rgb: 255, 255, 255;
 }
 
+html,
+body {
+  height: 100%;
+  overflow-x: hidden;
+}
+
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(
@@ -18,7 +35,6 @@ body {
     #d3dde6 100%
   );
   background-attachment: fixed;
-  min-height: 100vh;
 }
 
 /* 自定义滚动条样式 */

src/app/page.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import CapsuleSwitch from '@/components/CapsuleSwitch';
 import DemoCard from '@/components/DemoCard';
 import PageLayout from '@/components/layout/PageLayout';
+import ScrollableRow from '@/components/ScrollableRow';
 import VideoCard from '@/components/VideoCard';
 
 const defaultPoster =
@@ -45,6 +46,38 @@ const mockData = {
       source: 'dyttzy',
       source_name: '电影天堂',
     },
+    {
+      id: '332',
+      title: '三体',
+      poster: defaultPoster,
+      source: 'dyttzy',
+      source_name: '电影天堂',
+      episodes: 30,
+    },
+    {
+      id: '4231',
+      title: '狂飙',
+      poster: defaultPoster,
+      episodes: 39,
+      source: 'dyttzy',
+      source_name: '电影天堂',
+    },
+    {
+      id: '3342',
+      title: '三体',
+      poster: defaultPoster,
+      source: 'dyttzy',
+      source_name: '电影天堂',
+      episodes: 30,
+    },
+    {
+      id: '8',
+      title: '狂飙',
+      poster: defaultPoster,
+      episodes: 39,
+      source: 'dyttzy',
+      source_name: '电影天堂',
+    },
   ],
 };
 
@@ -66,49 +99,49 @@ export default function Home() {
           />
         </div>
 
-        <div className='max-w-[90%] mx-auto'>
+        <div className='max-w-[95%] mx-auto'>
           {/* 继续观看 */}
-          <section className='mb-12'>
+          <section className='mb-8'>
             <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
               继续观看
             </h2>
-            <div className='flex space-x-8 overflow-x-auto pb-2'>
-              {[...mockData.recentMovies, ...mockData.recentTvShows]
-                .slice(0, 4)
-                .map((item) => (
-                  <div key={item.id} className='min-w-[192px] w-48'>
+            <ScrollableRow>
+              {[...mockData.recentMovies, ...mockData.recentTvShows].map(
+                (item) => (
+                  <div key={item.id} className='min-w-[180px] w-44'>
                     <VideoCard {...item} progress={Math.random() * 100} />
                   </div>
-                ))}
-            </div>
+                )
+              )}
+            </ScrollableRow>
           </section>
 
           {/* 最新电影 */}
-          <section className='mb-12'>
+          <section className='mb-8'>
             <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
               最新电影
             </h2>
-            <div className='grid grid-cols-5 gap-8'>
+            <ScrollableRow>
               {mockData.recentMovies.map((movie) => (
-                <div key={movie.id} className='w-48'>
+                <div key={movie.id} className='min-w-[180px] w-44'>
                   <DemoCard {...movie} />
                 </div>
               ))}
-            </div>
+            </ScrollableRow>
           </section>
 
           {/* 最新电视剧 */}
-          <section className='mb-12'>
+          <section className='mb-8'>
             <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
               最新电视剧
             </h2>
-            <div className='grid grid-cols-5 gap-8'>
+            <ScrollableRow>
               {mockData.recentTvShows.map((show) => (
-                <div key={show.id} className='w-48'>
+                <div key={show.id} className='min-w-[180px] w-44'>
                   <DemoCard {...show} />
                 </div>
               ))}
-            </div>
+            </ScrollableRow>
           </section>
         </div>
       </div>

src/app/search/page.tsx

@@ -75,7 +75,7 @@ export default function SearchPage() {
 
   return (
     <PageLayout activePath='/search'>
-      <div className='px-10 py-8'>
+      <div className='px-10 py-8 overflow-visible'>
         {/* 搜索框 */}
         <div className='mb-8'>
           <form onSubmit={handleSearch} className='max-w-2xl mx-auto'>
@@ -94,21 +94,21 @@ export default function SearchPage() {
         </div>
 
         {/* 搜索结果或搜索历史 */}
-        <div className='max-w-[90%] mx-auto mt-12'>
+        <div className='max-w-[95%] mx-auto mt-12 overflow-visible'>
           {isLoading ? (
             <div className='flex justify-center items-center h-40'>
               <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-green-500'></div>
             </div>
           ) : showResults ? (
             // 搜索结果
-            <div className='grid grid-cols-6 gap-7'>
+            <div className='grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-x-8 gap-y-20 px-4'>
               {searchResults.map((item) => (
                 <div key={item.id} className='w-44'>
                   <VideoCard {...item} />
                 </div>
               ))}
               {searchResults.length === 0 && (
-                <div className='col-span-5 text-center text-gray-500 py-8'>
+                <div className='col-span-full text-center text-gray-500 py-8'>
                   未找到相关结果
                 </div>
               )}