优化页面设计

device-register.html

@@ -14,6 +14,45 @@
             line-height: 1.6;
         }
 
+        /* 模态框居中样式 */
+        .modal {
+            display: none;
+        }
+        
+        .modal.show {
+            display: block;
+        }
+
+        .modal-dialog {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) !important;
+            margin: 0;
+            width: 90%;
+            max-width: 800px;
+            height: 85vh; /* 设置高度为视窗高度的90% */
+        }
+
+        .modal-content {
+            height: 100%; /* 让内容区域填充整个模态框 */
+            display: flex;
+            flex-direction: column;
+        }
+
+        .modal-body {
+            flex: 1; /* 让body区域自动填充剩余空间 */
+            overflow-y: auto; /* 内容过多时显示滚动条 */
+        }
+
+        @media (max-width: 576px) {
+            .modal-dialog {
+                width: 95%;
+                margin: 0;
+                height: 95vh; /* 在小屏幕上增加高度 */
+            }
+        }
+
         /* 卡片样式现代化 */
         .card {
             border: none;
@@ -579,6 +618,97 @@
             background-color: rgba(0, 0, 0, 0.5);
         }
 
+        /* 序列号模态框表格样式 */
+        #serialsModal .table-responsive {
+            flex: 1;
+            overflow-y: auto;
+            margin-bottom: 16px;
+            max-height: 900px;
+            border-radius: 12px;
+            background: #ffffff;
+            padding: 8px;
+        }
+
+        #serialsModal .table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        #serialsModal .table th {
+            padding: 12px 16px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: #475569;
+            background: #fafafa;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-bottom: 2px solid #fafafa;
+            text-align: center;
+        }
+
+        #serialsModal .table td {
+            padding: 12px 16px;
+            font-size: 0.875rem;
+            color: #334155;
+            border-bottom: 1px solid #ffffff;
+            transition: background-color 0.2s ease;
+            text-align: center;
+        }
+
+        #serialsModal .table tr:hover td {
+            background-color: #ffffff;
+        }
+
+        #serialsModal .table tr:nth-child(even) {
+            background-color: #ffffff;
+        }
+
+        /* 添加表格单元格动画效果 */
+        #serialsModal .table td {
+            position: relative;
+            overflow: hidden;
+        }
+
+        #serialsModal .table td::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 1px;
+            background: #3b82f6;
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+
+        #serialsModal .table tr:hover td::after {
+            transform: scaleX(1);
+        }
+
+        /* 自定义滚动条样式 */
+        #serialsModal .table-responsive::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        #serialsModal .table-responsive::-webkit-scrollbar-track {
+            background: #ffffff;
+            border-radius: 8px;
+        }
+
+        #serialsModal .table-responsive::-webkit-scrollbar-thumb {
+            background: #e8ebf0;
+            border-radius: 8px;
+            transition: background 0.2s ease;
+        }
+
+        #serialsModal .table-responsive::-webkit-scrollbar-thumb:hover {
+            background: #e8ebf0;
+        }
+
     </style>
 </head>
     <body>
@@ -689,7 +819,7 @@
             <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h5 class="modal-title" id="serialsModalLabel">Device Serial Numbers List</h5>
+                        <h5 class="modal-title" id="serialsModalLabel">Serial Numbers</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">