优化页面设计

device-register.html

@@ -42,7 +42,8 @@
 
         .modal-body {
             flex: 1; /* 让body区域自动填充剩余空间 */
-            overflow-y: auto; /* 内容过多时显示滚动条 */
+            overflow: hidden; /* 修改这里，从auto改为hidden */
+            padding: 24px;
         }
 
         @media (max-width: 576px) {
@@ -607,6 +608,7 @@
         /* 添加模态框显示/隐藏的样式 */
         .modal {
             display: none;
+            overflow: hidden;
         }
         
         .modal.show {
@@ -621,20 +623,36 @@
         /* 序列号模态框表格样式 */
         #serialsModal .table-responsive {
             flex: 1;
-            overflow-y: auto;
             margin-bottom: 16px;
-            max-height: 900px;
+            max-height: calc(85vh - 200px); /* 调整最大高度，减去头部和底部的高度 */
             border-radius: 12px;
             background: #ffffff;
             padding: 8px;
+            overflow-y: auto; /* 确保内部可以滚动 */
         }
 
+        /* 确保模态框内容不会超出 */
+        #serialsModal .modal-content {
+            max-height: 85vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #serialsModal .modal-body {
+            padding: 24px;
+            overflow: hidden; /* 防止出现双滚动条 */
+            flex: 1;
+        }
+
+        /* 调整表格容器的内边距和边距 */
+        #serialsModal .table-responsive {
+            margin: 0;
+            padding: 0;
+        }
+
+        /* 优化表格样式 */
         #serialsModal .table {
-            width: 100%;
-            border-collapse: separate;
-            border-spacing: 0;
-            border-radius: 8px;
-            overflow: hidden;
+            margin-bottom: 0;
         }
 
         #serialsModal .table th {