0926

src/views/zhinengxunjian/css/detail-dialog.css

@@ -51,35 +51,90 @@
   word-break: break-word;
 }
 
-/* 步骤相关样式 */
-.steps-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+/* 步骤相关样式 - 详情弹窗专用 - 使用外部CSS样式 */
+.task-detail-container .steps-container {
+  width: 100%;
+  padding: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background-color: #fff;
 }
 
-.step-item {
+.task-detail-container .step-item {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  padding: 16px;
-  background-color: #ffffff;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 15px;
+  background-color: #fafafa;
   border-radius: 6px;
-  border: 1px solid #e4e7ed;
+  position: relative;
+  transition: all 0.3s ease;
 }
 
-.step-number {
-  width: 28px;
-  height: 28px;
+.task-detail-container .step-item:hover {
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.task-detail-container .step-number {
+  width: 32px;
+  height: 32px;
   background-color: #409eff;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 600;
+  margin-right: 16px;
   font-size: 14px;
+  font-weight: bold;
   flex-shrink: 0;
+  z-index: 1;
+}
+
+.task-detail-container .step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50px;
+  left: 16px;
+  width: 2px;
+  height: calc(100% + 5px);
+  background-color: #e4e7ed;
+  z-index: 0;
+}
+
+.task-detail-container .step-info {
+  flex: 1;
+}
+
+.task-detail-container .step-name {
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.task-detail-container .step-purpose {
+  color: #606266;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.task-detail-container .step-time,
+.task-detail-container .step-finish-time,
+.task-detail-container .step-remark {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.task-detail-container .step-status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-top: 4px;
 }
 
 .step-info {
@@ -110,8 +165,8 @@
   margin-bottom: 2px;
 }
 
-/* 状态相关样式 */
-.step-status {
+/* 步骤状态样式 - 详情弹窗专用 */
+.task-detail-container .step-status {
   padding: 4px 12px;
   border-radius: 4px;
   font-size: 12px;
@@ -120,26 +175,29 @@
   margin-top: 4px;
 }
 
-/* 步骤状态样式 */
-.step-status.status-pending {
+/* 步骤状态样式 - 待执行 */
+.task-detail-container .step-status.status-pending {
   background-color: #e6f7ff;
   color: #1677ff;
   border: 1px solid #91d5ff;
 }
 
-.step-status.status-executing {
+/* 步骤状态样式 - 执行中 */
+.task-detail-container .step-status.status-executing {
   background-color: #fffbe6;
   color: #fa8c16;
   border: 1px solid #ffe58f;
 }
 
-.step-status.status-completed {
+/* 步骤状态样式 - 已完成 */
+.task-detail-container .step-status.status-completed {
   background-color: #f6ffed;
   color: #52c41a;
   border: 1px solid #b7eb8f;
 }
 
-.step-status.status-delayed {
+/* 步骤状态样式 - 已延期 */
+.task-detail-container .step-status.status-delayed {
   background-color: #fff2f0;
   color: #ff4d4f;
   border: 1px solid #ffccc7;
@@ -238,6 +296,35 @@
   .info-row {
     gap: 12px;
   }
+
+  /* 步骤条响应式设计 */
+  .task-detail-container .steps-container {
+    padding: 10px;
+  }
+
+  .task-detail-container .step-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .task-detail-container .step-item > * {
+    width: 100%;
+    margin-bottom: 10px;
+    margin-right: 0 !important;
+  }
+
+  .task-detail-container .step-number {
+    margin-bottom: 10px;
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .task-detail-container .step-item:not(:last-child)::after {
+    display: none;
+  }
 }
 
 /* 弹窗按钮样式 */