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>
|