fix

views/v2/video-coloring-page.ejs

@@ -57,14 +57,12 @@
 
     /* 视频播放器样式 */
     .video-player {
-      max-width: 500px;
       position: relative;
       background-color: #000;
       border-radius: 8px;
       overflow: hidden;
       cursor: pointer;
       aspect-ratio: 1/1; /* 修改为1:1比例 */
-      margin-bottom: 50px;
     }
 
     .video-player video {
@@ -104,6 +102,63 @@
       margin-left: 5px;
     }
 
+    /* 线稿图样式 */
+    .lineart-container {
+      position: relative;
+      border-radius: 8px;
+      overflow: hidden;
+      aspect-ratio: 1/1;
+      /* 修改为1:1比例 */
+      background-color: #f5f5f5;
+    }
+
+    .lineart-container img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      /* 使用contain保持图像比例 */
+      padding: 15px;
+      /* 添加内边距，使图像不贴边 */
+      transition: all 0.3s ease;
+    }
+
+    /* 线稿图悬停效果 */
+    .lineart-overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+      padding: 15px;
+      color: white;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .lineart-container:hover .lineart-overlay {
+      opacity: 1;
+    }
+
+    .lineart-container img:hover {
+      transform: translateY(-5px);
+    }
+
+    .lineart-title {
+      font-weight: 600;
+      margin-bottom: 5px;
+    }
+
+    .lineart-desc {
+      font-size: 0.9rem;
+      opacity: 0.9;
+    }
+
+
+
+    .coloring-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+
     .gallery-link {
       text-align: center;
       margin-top: 30px;
@@ -133,6 +188,10 @@
       .gallery-link {
         font-size: 1rem;
       }
+
+      .coloring-grid {
+        grid-template-columns: 1fr;
+      }
     }
   </style>
 
@@ -193,45 +252,25 @@
         <h1><%= title%></h1>
         <h4 style="margin-bottom: 40px;">By Art Number Coloring / <%=data.timeCreate%></h4>
 
-        <div class="video-player" id="storyVideo">
-          <video poster="<%= data.poster %>" controls>
-            <source src="<%= data.url %>" type="application/x-mpegURL">
-            Your browser does not support the video tag.
-          </video>
-          <div class="play-button"></div>
-        </div>
+
 
         <div class="coloring-grid">
+          <div class="video-player" id="storyVideo">
+            <video poster="<%= data.poster %>" controls>
+              <source src="<%= data.url %>" type="application/x-mpegURL">
+              Your browser does not support the video tag.
+            </video>
+            <div class="play-button"></div>
+          </div>
           <% data.contents.forEach(item=> { %>
-            <div class="coloring-card">
-              <div data-content-id="<%= item._id %>" class="coloring-image">
-                <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
-              </div>
-              <div class="coloring-content">
-                <div class="coloring-title">
-                  <%= item.title %>
-                </div>
-                <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>">
-                    <%= item.user.username %>
-                  </a></div>
-                <div class="coloring-meta">
-                  <div class="date">
-                    <%= item.publishTime %>
-                  </div>
-                  <div class="views">
-                    <%= item.totalStartCount ? item.totalStartCount : 0 %>
-                  </div>
-                </div>
-                <div class="coloring-tags">
-                  <% item.tags.forEach(tag=> { %>
-                    <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>">
-                        <%= tag %>
-                      </span></a>
-                    <% }); %>
-                </div>
+            <div class="lineart-container">
+              <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+              <div class="lineart-overlay">
+                <div class="lineart-title"><%= item.title %></div>
+                <div class="lineart-desc">Click to download or color online along with the video</div>
               </div>
             </div>
-            <% }); %>
+          <% }); %>
         </div>
 
       </section>