diff --git a/web/static/css/style.css b/web/static/css/style.css
index cd5ec384..7adb409e 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -6752,19 +6752,53 @@ header {
 
 .batch-queue-detail-info {
     margin-bottom: 24px;
-    padding: 16px;
+    padding: 20px;
     background: var(--bg-secondary);
-    border-radius: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 16px;
 }
 
 .batch-queue-detail-info .detail-item {
-    margin-bottom: 8px;
-    font-size: 0.875rem;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 12px;
+    background: var(--bg-primary);
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
 }
 
-.batch-queue-detail-info .detail-item strong {
+.batch-queue-detail-info .detail-item:hover {
+    border-color: var(--accent-color);
+    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.08);
+}
+
+.batch-queue-detail-info .detail-label {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+}
+
+.batch-queue-detail-info .detail-value {
+    font-size: 0.9375rem;
     color: var(--text-primary);
-    margin-right: 8px;
+    font-weight: 500;
+    word-break: break-word;
+}
+
+.batch-queue-detail-info .detail-value code {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.875rem;
+    background: var(--bg-secondary);
+    padding: 2px 6px;
+    border-radius: 4px;
+    color: var(--accent-color);
 }
 
 .batch-queue-tasks-list {
diff --git a/web/static/js/tasks.js b/web/static/js/tasks.js
index 07a8794a..e12ae874 100644
--- a/web/static/js/tasks.js
+++ b/web/static/js/tasks.js
@@ -1147,18 +1147,28 @@ async function showBatchQueueDetail(queueId) {
         content.innerHTML = `
             <div class="batch-queue-detail-info">
                 <div class="detail-item">
-                    <strong>队列ID:</strong> <code>${escapeHtml(queue.id)}</code>
+                    <span class="detail-label">队列ID</span>
+                    <span class="detail-value"><code>${escapeHtml(queue.id)}</code></span>
                 </div>
                 <div class="detail-item">
-                    <strong>状态:</strong> <span class="batch-queue-status ${queueStatusMap[queue.status]?.class || ''}">${queueStatusMap[queue.status]?.text || queue.status}</span>
+                    <span class="detail-label">状态</span>
+                    <span class="detail-value"><span class="batch-queue-status ${queueStatusMap[queue.status]?.class || ''}">${queueStatusMap[queue.status]?.text || queue.status}</span></span>
                 </div>
                 <div class="detail-item">
-                    <strong>创建时间:</strong> ${new Date(queue.createdAt).toLocaleString('zh-CN')}
+                    <span class="detail-label">创建时间</span>
+                    <span class="detail-value">${new Date(queue.createdAt).toLocaleString('zh-CN')}</span>
                 </div>
-                ${queue.startedAt ? `<div class="detail-item"><strong>开始时间:</strong> ${new Date(queue.startedAt).toLocaleString('zh-CN')}</div>` : ''}
-                ${queue.completedAt ? `<div class="detail-item"><strong>完成时间:</strong> ${new Date(queue.completedAt).toLocaleString('zh-CN')}</div>` : ''}
+                ${queue.startedAt ? `<div class="detail-item">
+                    <span class="detail-label">开始时间</span>
+                    <span class="detail-value">${new Date(queue.startedAt).toLocaleString('zh-CN')}</span>
+                </div>` : ''}
+                ${queue.completedAt ? `<div class="detail-item">
+                    <span class="detail-label">完成时间</span>
+                    <span class="detail-value">${new Date(queue.completedAt).toLocaleString('zh-CN')}</span>
+                </div>` : ''}
                 <div class="detail-item">
-                    <strong>任务总数:</strong> ${queue.tasks.length}
+                    <span class="detail-label">任务总数</span>
+                    <span class="detail-value">${queue.tasks.length}</span>
                 </div>
             </div>
             <div class="batch-queue-tasks-list">