106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-dialog class="steps-dialog" title="审核流程" v-model="dialogForm" width="420px">
|
|||
|
|
<div class="steps-body">
|
|||
|
|
<el-steps direction="vertical" :active="active" :space="90">
|
|||
|
|
<el-step v-for="(item, idx) in steps" :key="item.title" :title="item.title" :description="idx === 0 ? item.time : ''" />
|
|||
|
|
</el-steps>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, defineExpose } from 'vue';
|
|||
|
|
const dialogForm = ref(false);
|
|||
|
|
const pxgsData = ref()
|
|||
|
|
const active = ref(1)
|
|||
|
|
const steps = ref([
|
|||
|
|
{ title: '保安公司审核', time: '2026-01-07 21:00' },
|
|||
|
|
{ title: '培训公司审核', time: '2026-01-07 21:00' },
|
|||
|
|
{ title: '公安局审核', time: '2026-01-07 21:00' },
|
|||
|
|
])
|
|||
|
|
const init = (row) => {
|
|||
|
|
pxgsData.value = row
|
|||
|
|
dialogForm.value = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
init
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.steps-body {
|
|||
|
|
height: 260px;
|
|||
|
|
padding: 6px 10px 10px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-dialog__header) {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 20px 20px 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-dialog__title) {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-dialog__body) {
|
|||
|
|
padding: 0 20px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-step__title) {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-step__description) {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #9AA8B6;
|
|||
|
|
line-height: 20px;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-step__line) {
|
|||
|
|
left: 8px;
|
|||
|
|
background-color: transparent;
|
|||
|
|
border-left: 1px dashed #dadada;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-step.is-vertical .el-step__head) {
|
|||
|
|
width: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-step__icon) {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-step__head.is-process .el-step__icon),
|
|||
|
|
:deep(.steps-dialog .el-step__head.is-process .el-step__icon.is-text) {
|
|||
|
|
background: #2e6bff;
|
|||
|
|
border: none;
|
|||
|
|
box-shadow: 0 0 0 5px rgba(46, 107, 255, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-step.is-wait .el-step__icon),
|
|||
|
|
:deep(.steps-dialog .el-step.is-finish .el-step__icon) {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #dadada;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.steps-dialog .el-step__icon-inner) {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
::v-deep .is-finish .el-step__icon{
|
|||
|
|
background: #86b6f1;
|
|||
|
|
}
|
|||
|
|
</style>
|