From 573a2c176d4195f2d7362c58f54988eed5086801 Mon Sep 17 00:00:00 2001
From: wangjie <931696759@qq.com>
Date: Fri, 25 Apr 2025 17:24:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../myControl/components/sendControl.vue      | 14 +++-
 .../myControl/components/ui/approvalInfo.vue  | 79 ++++++++++++-------
 2 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue
index 44fcf4e..5c74278 100644
--- a/src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="dialog" v-if="dialogForm">
     <div class="head_box">
-      <span class="title">发起布控12346</span>
+      <span class="title">发起布控</span>
       <div>
         <el-button size="small" @click="close">关闭</el-button>
       </div>
     </div>
     <div class="cntinfo">
-      <div>布控信息</div>
+      <div class="title-item">布控信息</div>
       <ControlInfo></ControlInfo>
-      <div>布控范围</div>
+      <div class="title-item">布控范围</div>
       <ControlArea></ControlArea>
-      <div>审批信息</div>
+      <div class="title-item">审批信息</div>
       <ApprovalInfo></ApprovalInfo>
     </div>
   </div>
@@ -48,6 +48,12 @@
       height: calc(100% - 70px);
       overflow: hidden;
       overflow-y: auto;
+      .title-item {
+        font-size: 20px;
+
+        font-weight: 700;
+        margin-bottom: 20px;
+      }
     }
   }
 </style>
diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue
index a10e154..28f2351 100644
--- a/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue
@@ -36,33 +36,21 @@
 
     <!-- 审批流程 -->
     <div class="approval-flow">
-      <div style="height: 300px; max-width: 600px">
-        <el-steps direction="vertical" :active="1">
-          <el-step title="发起申请">
-            <template #description>
-              <div class="description flexcc">
-                <div class="description-item">布控发起人</div>
-                <div class="description-item">发起部门</div>
-              </div>
-            </template>
-          </el-step>
-          <el-step title="审核确认">
-            <template #description>
-              <div class="description flexcc">
-                <div class="description-item">布控发起人</div>
-                <div class="description-item">发起部门</div>
-              </div>
-            </template>
-          </el-step>
-          <el-step title="审批确认">
-            <template #description>
-              <div class="description flexcc">
-                <div class="description-item">布控发起人</div>
-                <div class="description-item">发起部门</div>
-              </div>
-            </template>
-          </el-step>
-        </el-steps>
+      <div class="step" v-for="(item, index) in step" :key="`${index}step`">
+        <div class="icon">
+          <div class="circle"></div>
+          <div class="line"></div>
+        </div>
+
+        <div>
+          <div>{{ item.title }}</div>
+          <div class="desc">
+            <div class="description flexcc">
+              <div class="description-item">{{ item.fqr }}</div>
+              <div class="description-item">{{ item.fqbm }}</div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </el-form>
@@ -83,9 +71,44 @@
     approver: "",
     approveDepartment: ""
   });
+  const step = ref([
+    { fqr: "发起人", fqbm: "发起部门", title: "发起申请" },
+    { fqr: "发起人", fqbm: "发起部门", title: "审核确认" },
+    { fqr: "发起人", fqbm: "发起部门", title: "审批确认" }
+  ]);
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .step {
+    //   position: relative;
+    display: flex;
+    gap: 5px;
+    box-sizing: border-box;
+    .desc {
+      margin: 5px;
+      color: #929090;
+      width: 350px;
+    }
+    .icon {
+      // position: absolute;
+      // top: 0;
+      // left: 0;
+      text-align: center;
+      .circle {
+        height: 14px;
+        width: 14px;
+        border-radius: 50%;
+        background-color: rgb(196, 219, 240);
+      }
+      .line {
+        margin: 0 auto;
+        width: 0;
+        height: calc(100% - 14px);
+        border: 1px dashed rgb(196, 219, 240);
+      }
+    }
+  }
+
   .unit-selection {
     display: flex;
     align-items: center;