马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/views/specialWorkSystem/specialIndex/components/workRecord.vue
@@ -11,15 +11,21 @@
<!--    </el-steps>-->
    <div class="item" v-for="(item,index) in data" :key="index">
      <div class="marker">
        <div class="dot"></div>
        <div class="dot" :class="item.operationTitle == '作业验收'?'greenDot':''"></div>
        <div class="line"></div>
      </div>
      <div class="content">
        <div class="tit">{{item.operationTitle}}<span>{{index == data.length - 1 ? '[进行中]': '[已完成]'}}</span></div>
        <div class="tit">{{item.operationTitle}}<span :class="item.operationTitle == '作业验收'?'green':''">{{item.operationTitle == '作业验收'?'[已完成]':(index == data.length - 1 ? '[进行中]': '[已完成]')}}</span></div>
        <div>{{item.operationUtype}}:{{item.operationUname}}</div>
        <div>操作时间:{{item.operationTime}}</div>
        <div>操作内容:{{item.content}}</div>
        <div>操作意见:{{item.approvalOpinions}}</div>
        <div v-if="item.fileUrl" style="display: flex;align-items: flex-start">附件内容:
          <el-image v-for="(i,index) in item.fileUrl.split(',')" :key="index" :preview-src-list="item.fileUrl.split(',')" :initial-index="0" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="i" fit="cover" />
        </div>
        <div v-if="item.signUrl" style="display: flex;align-items: flex-start">签字图片:
          <el-image v-for="(i,index) in item.signUrl.split(',')" :key="index" :preview-src-list="item.signUrl.split(',')" :initial-index="0" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="i" fit="cover" />
        </div>
      </div>
    </div>
  </el-dialog>
@@ -101,16 +107,21 @@
      }
    .item{
      display: flex;
      align-items: flex-start;
      align-items: stretch; /* 使 marker 和 content 高度一致 */
      width: 100%;
      padding-left: 50px;
      margin-bottom: 10px;
      position: relative;
      .marker{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
        height: 100%; /* 使 marker 高度自适应父元素 */
        .dot{
          width: 28px;
@@ -121,11 +132,12 @@
        }
        .line{
          width: 1px;
          height: 120px;
          flex-grow: 1; /* 自动适应剩余高度 */
          background: #13ce66;
        }
      }
      .content{
        div{
          margin-bottom: 6px;
        }
@@ -150,10 +162,16 @@
        .line{
          display: none;
        }
        .greenDot{
          background: #13ce66;
        }
        .tit{
          span{
            color: #409eff;
          }
          .green{
            color: #13ce66;
          }
        }
      }
    }