流程状态样式优化

rain

2025-04-14 9a2274eb43f5da477183e32d8387a073251c7b05

流程状态样式优化

 src/views/tickets/ticket.vue

@@ -158,29 +158,51 @@
    <el-dialog v-model="detailVisible" title="工单详情" width="80%" append-to-body>
      <div class="detail-container">
        <!-- 工单状态流程 -->
        <div class="status-flow">
          <el-steps :active="getActiveStep()" align-center finish-status="success" process-status="success" class="custom-steps">
            <el-step title="发起任务">
        <div class="custom-steps-container">
          <!-- 标题行 -->
          <div class="steps-titles">
            <div 
              class="step-title" 
              :class="{ active: true }"
            >
              发起任务
            </div>
            <div
              v-for="(status, index) in fixedStatuses"
              :key="index"
              :class="{ active: Number(currentDetail.status) >= Number(status) }"
              class="step-title"
            >
              {{ mapStatus(status) }}
            </div>
          </div>

          <!-- Element Steps 组件 -->
          <el-steps :active="getActiveStep()" align-center class="custom-steps">
            <el-step>
              <template #description>
                <div class="init-step-info">
                  <div class="creator-name">
                    {{ currentDetail.creator || '未知' }}
                  </div>
                  <div class="create-time">
                    {{ currentDetail.startTime || '未知时间' }}
                  </div>
                <span class="step-description">
                  {{ currentDetail.creator || '未知' }}
                </span>
                <div class="step-description">
                  {{ currentDetail.startTime || '未知时间' }}
                </div>
              </template>
            </el-step>
            <el-step v-for="(status, index) in fixedStatuses" :key="index" :title="mapStatus(status)">
            <el-step v-for="(status, index) in fixedStatuses" :key="index">
              <template #description>
                <div class="step-info">
                  <div class="process-time" >
                    <span v-if="getStepTime(status)">耗时:{{ getStepTime(status) }}</span>
                  </div>
                  <div class="handler-name">
                    {{ getStepHandler(status) }}
                  </div>
                <span class="step-description">
                  {{ getStepHandler(status) }}
                </span>
                <div class="step-description" v-if="getStepTime(status)">
                 <span style="         position: absolute;
          right: 80%;  
          top: 50%;
          transform: translateY(-50%);
          width: 100px;
          margin-left: 4px;  
          color: #666;
          font-size: 10px;">耗时： {{ getStepTime(status) }}</span>
                </div>
              </template>
            </el-step>
@@ -1839,6 +1861,13 @@
  min-height: 40px;
  color: #606266;
  line-height: 1.5;
  display: block;
  text-align: left;
  
  &:first-child {
    font-weight: bold;
    margin-bottom: 4px;
  }
}

// 添加删除按钮样式
@@ -1849,4 +1878,71 @@
.danger-button:hover {
  color: #f78989;
}

.custom-steps-container {
  width: 100%;
  margin: 20px 0;
}

.steps-titles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
}

.step-title {
  text-align: center;
  flex: 1;
  font-size: 16px;
  color: #999;
  position: relative;
  padding-bottom: 10px;
}

.step-title.active {
  color: #409eff;
  font-weight: bold;
}

.custom-steps {
  margin-top: -20px;

  :deep(.el-step__description) {
    margin-top: 8px;
    padding: 0 20px;
  }
}

.step-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: block;
  text-align: center;
  
  &:first-child {
    font-weight: bold;
    margin-bottom: 4px;
  }
}

// 覆盖其他相关样式
.status-flow {
  .custom-steps {
    .el-step__description {
      position: relative;
      margin: 0;
      padding: 0;
    }

    // 移除之前的样式
    .init-step-info,
    .step-info {
      display: block;
      width: auto;
      text-align: center;
    }
  }
}
</style>