新增页面

src/views/Training/trainingCompanyNjgl/components/steps.vue

@@ -0,0 +1,105 @@
+<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>