优化UI

src/index.html

@@ -16,7 +16,7 @@
         html, body {
             height: 100%;
             overflow: hidden;
-            background: #000;
+            background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%); /* 浅蓝色渐变背景 */
         }
         
         .container {
@@ -49,6 +49,9 @@
             width: 100%;
             height: 100%;
             position: relative;
+            /* 确保视频区域固定高度并居中 */
+            min-height: 100vh;
+            max-height: 100vh;
         }
         
         /* 视频容器样式 - 支持双缓冲 */
@@ -57,18 +60,23 @@
             width: 100vw;
             height: 100vh;
             overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
         
         #recordedVideo, #recordedVideoBuffer {
             position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
             height: 100%;
             object-fit: cover;
             border-radius: 0;
             box-shadow: none;
             transition: opacity 0.5s ease-in-out;
+            /* 确保视频始终居中 */
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
         }
         
         /* 主视频默认显示 */
@@ -125,6 +133,51 @@
             100% { transform: rotate(360deg); }
         }
         
+        /* 响应式设计 - 确保在不同屏幕尺寸下视频容器保持固定高度和居中 */
+        @media (max-width: 768px) {
+            .video-container {
+                height: 100vh;
+                width: 100vw;
+            }
+            
+            #recordedVideo, #recordedVideoBuffer {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+        
+        @media (min-width: 769px) {
+            .video-container {
+                height: 100vh;
+                width: 100vw;
+            }
+            
+            #recordedVideo, #recordedVideoBuffer {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+        
+        /* 横屏模式优化 */
+        @media (orientation: landscape) and (max-height: 500px) {
+            .video-container {
+                height: 100vh;
+            }
+            
+            .controls {
+                bottom: 20px;
+            }
+        }
+        
+        /* 竖屏模式优化 */
+        @media (orientation: portrait) {
+            .video-container {
+                height: 100vh;
+            }
+        }
+        
         .controls {
             position: absolute;
             bottom: 50px;

src/styles.css

@@ -101,6 +101,14 @@ header p {
 .recorded-video-section {
     margin-bottom: 30px;
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    /* 确保视频区域固定高度并居中 */
+    min-height: 100vh;
+    max-height: 100vh;
+    width: 100%;
 }
 
 .recorded-video-section h3 {
@@ -109,14 +117,22 @@ header p {
 }
 
 #recordedVideo {
+    max-width: 100%;
+    max-height: 100%;
     width: 100%;
-    max-width: 400px; /* 限制最大宽度 */
+    height: 100%;
-    aspect-ratio: 9/16; /* 固定9:16比例 */
+    border-radius: 0;
-    border-radius: 10px;
+    box-shadow: none;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    object-fit: cover; /* 覆盖整个容器 */
-    object-fit: cover; /* 确保视频填充容器 */
+    background: transparent; /* 透明背景 */
-    background: #000; /* 视频背景色 */
     transition: opacity 0.15s; /* 添加透明度过渡效果 */
+    margin: 0 auto; /* 左右居中 */
+    display: block; /* 确保块级显示 */
+    /* 确保视频始终居中 */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
 
 /* 视频加载时的样式 */
@@ -423,6 +439,50 @@ header p {
     .video-list {
         grid-template-columns: 1fr;
     }
+    
+    /* 移动端视频容器优化 */
+    .video-container {
+        height: 100vh;
+        width: 100vw;
+    }
+    
+    #recordedVideo {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+/* 桌面端视频容器优化 */
+@media (min-width: 769px) {
+    .video-container {
+        height: 100vh;
+        width: 100vw;
+    }
+    
+    #recordedVideo {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+/* 横屏模式优化 */
+@media (orientation: landscape) and (max-height: 500px) {
+    .video-container {
+        height: 100vh;
+    }
+    
+    .controls {
+        bottom: 20px;
+    }
+}
+
+/* 竖屏模式优化 */
+@media (orientation: portrait) {
+    .video-container {
+        height: 100vh;
+    }
 }
 
 /* 动画效果 */