修改样式

This commit is contained in:
wangjie 2025-04-25 17:24:39 +08:00
parent 81fd8c8737
commit 573a2c176d
2 changed files with 61 additions and 32 deletions

View File

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

View File

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