网站开发不兼容ie8,网站开发设计前景,做网站推广怎么跟客户沟通,建材网络销售平台有哪些分享一下项目中自封装的步骤条#xff0c;存个档~
1. 话不多说#xff0c;先看效果 2. 话还不多说#xff0c;上代码
template!-- 获取一个数组#xff0c;结构为[{nodeName:流程发起isAudit:falsetime:2024-02-04 14:27:35otherDat…分享一下项目中自封装的步骤条存个档~
1. 话不多说先看效果 2. 话还不多说上代码
template!-- 获取一个数组结构为[{nodeName:流程发起isAudit:falsetime:2024-02-04 14:27:35otherData:{assignee:{userId:465name:XXXcompany:测试产业单位1tenantId:140}}] --view classbgview classstepsview classsteps_item v-for(i, index) in infoList :keyindexview classs_rview classline :style{ backgroundColor: index ! 0 ? #EAEAEA : rgba(0,0,0,0) }/viewview classindex :style{ backgroundColor: backgroundColor, color: color }/viewviewclassline:style{ backgroundColor: index ! infoList.length - 1 ? #EAEAEA : rgba(0,0,0,0) }/view/viewview classs_lview classinfo_item!-- 真是节点名称、时间 --view classtop_infoview classtitle{{ i.nodeName }}/viewview classdate{{ i.time }}/view/viewview classinfo!-- 是否为审批节点审批节点可显示审批状态 --template v-ifi.isAuditviewclassaudit-statusv-ifi.status 1:stylebackground-color:${auditStatus(2).bgColor};color:${auditStatus(2).color}{{ auditStatus(2).text }}/viewviewclassaudit-statusv-else:stylebackground-color:${auditStatus(3).bgColor};color:${auditStatus(3).color}{{ auditStatus(3).text }}/view/template!-- 是否有其他信息需要展示如审批人、签名、原因等 --template v-ifi.otherDataview classtext-grey v-ifi.otherData.assignee{{ i.otherData.assignee.name }} text classml5/text{{ i.otherData.assignee.company }}/viewview classmt10 v-ifi.otherData.signimagestylewidth: 320rpxmodewidthFix:srci.otherData.signclickhandlePreview(i.otherData.sign)//viewview classtext-grey mt10 v-ifi.otherData.comment 原因{{ i.otherData.comment }} /view/template/view/view/view/view/view/view
/templatescript
export default {name: YSteps,props: {infoList: {type: Array,default: [],},color: {type: String,default: #fff,},backgroundColor: {type: String,default: #ff3838,},lineNum: {type: Number,default: 0,},},methods: {// 审核状态auditStatus(i) {if (i 2) {return {text: 通过,color: #00D288,bgColor: #EAFFF8,}} else if (i 3) {return {text: 驳回,color: #FF4141,bgColor: #FFDCD5,}}},handlePreview(url) {uni.previewImage({ urls: [url] })},},
}
/scriptstyle langscss scoped
.steps {display: flex;flex-direction: column;.steps_item {display: flex;.s_r {padding: 0 20rpx;display: flex;flex-direction: column;align-items: center;.line {flex: 1;width: 5rpx;border-left: 4rpx dashed #fff;}.index {width: 24rpx;height: 24rpx;border-radius: 50rpx;border: 4rpx solid #e3eeff;box-sizing: border-box;}}.s_l {display: flex;flex-direction: column;padding: 20rpx 0;flex: 1;.info_item {background-color: #ffffff;margin-right: 30rpx;border-radius: 10rpx;display: flex;flex-direction: column;justify-content: center;padding: 30rpx 0;.top_info {display: flex;align-items: center;justify-content: space-between;}text {font-size: 24rpx;font-weight: 500;color: rgba(51, 51, 51, 1);}.title {width: calc(100vw - 330rpx);font-size: 28rpx;font-weight: 500;color: rgba(102, 102, 102, 1);overflow: hidden;text-overflow: ellipsis;display: -webkit-box;flex-direction: column;}.info {font-size: 24rpx;color: #afb4be;margin-top: 10rpx;}.date {font-size: 23rpx;color: #afb4be;}.audit-status {float: right;width: 120rpx;height: 40rpx;line-height: 40rpx;text-align: center;font-size: 22rpx;background: #eafff8;border-radius: 20rpx;}}.info_item:active {background-color: #f4f4f4;}}}
}
.ml5 {margin-left: 10rpx;
}
.mt10 {margin-top: 20rpx;
}
/style
