Update index.html

index.html

@@ -23,7 +23,9 @@
             display: flex;
             flex-direction: column;
             width: 80%;
-            height: 80%;
+            max-width: 2000px; /* 添加最大宽度以避免过宽 */
+            min-width: 300px; /* 确保最小宽度以保持可读性 */
+            height: auto; /* 高度自适应内容 */
             border: 1px solid #444;
             border-radius: 8px;
             padding: 20px;
@@ -37,7 +39,7 @@
             text-align: center;
             font-size: 2.5rem;
             margin-bottom: 20px;
-            color: #ffffff; /* 标题白色 */
+            color: #ffffff;
             border-bottom: 2px solid #444;
             padding-bottom: 15px;
             display: flex;
@@ -53,13 +55,11 @@
 
         .content {
             display: flex;
-            height: calc(100% - 50px);
             flex-grow: 1;
             overflow: hidden;
         }
 
-        .video-container {
-            flex: 0 0 40%;
+        .video-container, .asr-container {
             margin: 10px;
             border: 1px solid #444;
             border-radius: 8px;
@@ -69,14 +69,12 @@
             overflow: hidden;
         }
 
+        .video-container {
+            flex: 0 0 40%;
+        }
+
         .asr-container {
             flex: 0 0 60%;
-            margin: 10px;
-            border: 1px solid #444;
-            border-radius: 8px;
-            padding: 15px;
-            box-sizing: border-box;
-            background-color: #333;
             overflow-y: auto;
             position: relative;
             display: flex;
@@ -85,7 +83,7 @@
 
         video {
             width: 100%;
-            height: 300px;
+            height: auto; /* 自适应视频高度 */
             background-color: #000;
             border-radius: 8px;
             margin-bottom: 15px;
@@ -303,6 +301,31 @@
         footer a:hover {
             color: #00d473;
         }
+
+        @media (max-width: 768px) {
+            .container {
+                width: 95%;
+                padding: 10px; /* 减小内边距以增加可用空间 */
+            }
+
+            .content {
+                flex-direction: column;
+            }
+
+            .video-container, .asr-container {
+                flex: 0 0 100%;
+            }
+
+            .title {
+                font-size: 1.5rem; /* 缩小标题字体以适应小屏幕 */
+            }
+
+            .asr-item input[type="text"],
+            .asr-item select,
+            .asr-item input.role-field {
+                width: auto; /* 使输入框在小屏幕上更灵活 */
+            }
+        }
     </style>
 </head>