视频封面整个区域都可以进行点击播放，视频列表中视频详情有点赞功能

components/video-card.js

@@ -16,8 +16,9 @@ class CustomVideoCard extends HTMLElement {
           overflow: hidden;
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
           transition: transform 0.2s ease, box-shadow 0.2s ease;
+          cursor: pointer;
         }
-        .video-card:hover {
+.video-card:hover {
           transform: translateY(-4px);
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
           z-index: 10;
@@ -66,14 +67,27 @@ class CustomVideoCard extends HTMLElement {
           -webkit-box-orient: vertical;
           overflow: hidden;
         }
-        
         .video-stats {
           display: flex;
           align-items: center;
           color: #6b7280;
           font-size: 0.875rem;
+          cursor: pointer;
+          transition: color 0.2s;
+          pointer-events: auto;
+        }
+        .video-stats:hover {
+          color: #ef4444;
         }
-      </style>
+        .video-stats i {
+          transition: all 0.2s;
+        }
+        .video-stats[data-liked] i,
+        .video-stats.liked i {
+          color: #ef4444;
+          fill: #ef4444;
+        }
+</style>
       
       <div class="video-card">
         <div class="video-thumbnail">
@@ -95,13 +109,36 @@ class CustomVideoCard extends HTMLElement {
         feather.replace();
       </script>
     `;
-    
-    const playButton = this.shadowRoot.getElementById('play-button');
-    playButton.addEventListener('click', () => {
-      const videoPlayer = document.querySelector('custom-video-player');
-      if (videoPlayer) {
-        videoPlayer.playVideo(videoUrl, parseInt(likes));
+    const videoCard = this.shadowRoot.querySelector('.video-card');
+    videoCard.addEventListener('click', (e) => {
+      // Don't trigger if clicking on like button
+      if (!e.target.closest('.video-stats')) {
+        const videoPlayer = document.querySelector('custom-video-player');
+        if (videoPlayer) {
+          videoPlayer.playVideo(videoUrl, parseInt(likes));
+        }
+      }
+    });
+
+    // Handle like button click
+    const likeButton = this.shadowRoot.querySelector('.video-stats');
+    likeButton.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let currentLikes = parseInt(likes);
+      const isLiked = likeButton.hasAttribute('data-liked');
+      
+      if (isLiked) {
+        likeButton.removeAttribute('data-liked');
+        currentLikes--;
+        likeButton.querySelector('i').classList.remove('liked');
+      } else {
+        likeButton.setAttribute('data-liked', '');
+        currentLikes++;
+        likeButton.querySelector('i').classList.add('liked');
       }
+      
+      likes = currentLikes.toString();
+      likeButton.querySelector('span').textContent = currentLikes.toLocaleString();
     });
 }
 }

script.js

@@ -102,7 +102,6 @@ videoGrid.appendChild(videoCard);
                 loadingSpinner.classList.add('hidden');
                 return;
             }
-
             videos.forEach(video => {
                 const videoCard = document.createElement('custom-video-card');
                 videoCard.setAttribute('video-id', video.id);
@@ -111,11 +110,11 @@ videoGrid.appendChild(videoCard);
                 videoCard.setAttribute('video-url', video.videoUrl);
                 videoCard.setAttribute('likes', video.likes);
                 videoCard.setAttribute('orientation', video.orientation);
+                videoCard.setAttribute('data-likes', video.likes);
                 
                 videoGrid.appendChild(videoCard);
             });
-            
-            currentPage++;
+currentPage++;
             isLoading = false;
             loadingSpinner.classList.add('hidden');
         }, 500);

style.css

@@ -36,7 +36,6 @@
 .video-thumbnail:hover img {
     transform: scale(1.03);
 }
-
 .play-button {
     position: absolute;
     top: 50%;
@@ -49,7 +48,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    cursor: pointer;
+    z-index: 2;
+    pointer-events: none;
 }
 .video-player-modal {
     position: fixed;