From b1073be89dc0f5cd7577800925c909cc330d2ffd Mon Sep 17 00:00:00 2001
From: shinya <kobayashi_shinya@outlook.com>
Date: Wed, 16 Jul 2025 01:23:58 +0800
Subject: [PATCH] fix: scrollable row index

---
 src/components/ScrollableRow.tsx | 28 ++++++++++++++++------------
 src/components/VideoCard.tsx     |  2 +-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/ScrollableRow.tsx b/src/components/ScrollableRow.tsx
index 3e06ecc..f140599 100644
--- a/src/components/ScrollableRow.tsx
+++ b/src/components/ScrollableRow.tsx
@@ -109,20 +109,22 @@ export default function ScrollableRow({
       </div>
       {showLeftScroll && (
         <div
-          className={`hidden sm:flex absolute left-0 top-0 bottom-0 w-16 items-center justify-center z-50 transition-opacity duration-200 ${
+          className={`hidden sm:flex absolute left-0 top-0 bottom-0 w-16 items-center justify-center z-[600] transition-opacity duration-200 ${
             isHovered ? 'opacity-100' : 'opacity-0'
           }`}
           style={{
             background: 'transparent',
+            pointerEvents: 'none', // 允许点击穿透
           }}
         >
-          <div
-            className='absolute inset-0'
-            onClick={(e) => e.stopPropagation()}
-          />
           <div
             className='absolute inset-0 flex items-center justify-center'
-            style={{ top: '40%', bottom: '60%', left: '-4.5rem' }}
+            style={{
+              top: '40%',
+              bottom: '60%',
+              left: '-4.5rem',
+              pointerEvents: 'auto',
+            }}
           >
             <button
               onClick={handleScrollLeftClick}
@@ -136,20 +138,22 @@ export default function ScrollableRow({
 
       {showRightScroll && (
         <div
-          className={`hidden sm:flex absolute right-0 top-0 bottom-0 w-16 items-center justify-center z-50 transition-opacity duration-200 ${
+          className={`hidden sm:flex absolute right-0 top-0 bottom-0 w-16 items-center justify-center z-[600] transition-opacity duration-200 ${
             isHovered ? 'opacity-100' : 'opacity-0'
           }`}
           style={{
             background: 'transparent',
+            pointerEvents: 'none', // 允许点击穿透
           }}
         >
-          <div
-            className='absolute inset-0'
-            onClick={(e) => e.stopPropagation()}
-          />
           <div
             className='absolute inset-0 flex items-center justify-center'
-            style={{ top: '40%', bottom: '60%', right: '-4.5rem' }}
+            style={{
+              top: '40%',
+              bottom: '60%',
+              right: '-4.5rem',
+              pointerEvents: 'auto',
+            }}
           >
             <button
               onClick={handleScrollRightClick}
diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx
index 6d69051..30c9a26 100644
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -263,7 +263,7 @@ export default function VideoCard({
 
   return (
     <div
-      className='group relative w-full rounded-lg bg-transparent cursor-pointer transition-all duration-300 ease-in-out hover:scale-[1.05] hover:z-[9999]'
+      className='group relative w-full rounded-lg bg-transparent cursor-pointer transition-all duration-300 ease-in-out hover:scale-[1.05] hover:z-[500]'
       onClick={handleClick}
     >
       {/* 海报容器 */}