| | |
| | | <!-- </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> |
| | |
| | | } |
| | | .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; |
| | |
| | | } |
| | | .line{ |
| | | width: 1px; |
| | | height: 120px; |
| | | flex-grow: 1; /* 自动适应剩余高度 */ |
| | | background: #13ce66; |
| | | } |
| | | } |
| | | .content{ |
| | | |
| | | div{ |
| | | margin-bottom: 6px; |
| | | } |
| | |
| | | .line{ |
| | | display: none; |
| | | } |
| | | .greenDot{ |
| | | background: #13ce66; |
| | | } |
| | | .tit{ |
| | | span{ |
| | | color: #409eff; |
| | | } |
| | | .green{ |
| | | color: #13ce66; |
| | | } |
| | | } |
| | | } |
| | | } |