原型设计完成

01_文档/原型设计/05_对战页面.html

@@ -17,6 +17,10 @@
             --cell-size: min(8.5vw, 36px);
         }
 
+        body {
+            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
+        }
+
         /* 顶部状态栏 */
         .status-header {
             padding: 8px var(--safe-area-padding);
@@ -244,6 +248,9 @@
             backdrop-filter: blur(10px);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
             overflow: hidden;
+            height: 320px;
+            display: flex;
+            flex-direction: column;
         }
 
         /* 页签头部 */
@@ -282,10 +289,13 @@
         /* 页签内容 */
         .tab-content {
             padding: 16px;
+            flex: 1;
+            overflow-y: auto;
         }
 
         .tab-pane {
             display: none;
+            height: 100%;
         }
 
         .tab-pane.active {
@@ -305,6 +315,7 @@
             align-items: flex-start;
             gap: 16px;
             margin-bottom: 16px;
+            flex: 1;
         }
 
         .plane-selection {
@@ -322,19 +333,26 @@
 
         /* 页面特定按钮样式覆盖 */
         .plane-btn.placed {
-            background: var(--primary-color) !important;
-            color: white;
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
+            color: white !important;
+            border-color: var(--primary-light) !important;
+            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
         }
 
         .plane-btn.selected {
-            background: var(--success-color) !important;
-            color: white;
-            box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)) !important;
+            color: #1a1a2e !important;
+            border-color: var(--secondary-color) !important;
+            box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
         }
 
         /* 攻击控制区域 */
         .attack-controls {
             text-align: center;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
         }
 
         .attack-target-info {
@@ -350,12 +368,14 @@
             display: flex;
             gap: 12px;
             justify-content: center;
+            margin-top: 16px;
         }
 
         /* 历史记录 */
         .history-container {
-            max-height: 200px;
+            flex: 1;
             overflow-y: auto;
+            margin-bottom: 16px;
         }
 
         .history-item {
@@ -391,7 +411,7 @@
             padding: 12px;
             background: rgba(15, 52, 96, 0.4);
             border-radius: 8px;
-            margin-top: 12px;
+            margin-top: auto;
             color: var(--text-secondary);
             font-size: 14px;
         }