检测流程样式调整

This commit is contained in:
GYYM
2024-11-20 21:30:05 +08:00
parent d673fc8685
commit b992b2653a
9 changed files with 1035 additions and 48 deletions

View File

@@ -1,10 +1,11 @@
<template>
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="1200px" height="900px">
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="1200px" height="1200px">
<!-- simple -->
<!-- :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" -->
<el-steps class="test-head-steps" :space="200" :active="stepsActiveIndex" process-status="finish" finish-status="success" >
<el-step title="预检测" :icon="stepsActiveIndex > 0 ? SuccessFilled : Edit" style="height:100px" />
<el-steps class="test-head-steps" simple :space="200" :active="stepsActiveIndex" process-status="finish" finish-status="success" >
<!-- style="height:100px" -->
<el-step title="预检测" :icon="stepsActiveIndex > 0 ? SuccessFilled : Edit" />
<el-step title="守时检测" :icon="stepsActiveIndex > 1 ? SuccessFilled :UploadFilled"/>
<el-step title="系数校准" :icon="stepsActiveIndex > 2 ? SuccessFilled :Picture" />
<el-step title="正式检测" :icon="stepsActiveIndex > 3 ? SuccessFilled :Picture" />
@@ -376,10 +377,25 @@ const detectionOptions = ref([
<style scoped>
.test-head-steps{
height: 200px;
height: 50px;
margin-bottom: 20px;
}
.el-step__icon.is-text {
border-radius: 50%;
border: 4px solid;
width: 50px;
height: 50px;
border-color: inherit;
}
.el-step__icon.is-icon {
border-radius: 50%;
border: 4px solid;
width: 50px;
height: 50px;
border-color: inherit;
}
.test-head-steps .el-step__line{
height:50px !important;
}
@@ -390,9 +406,9 @@ const detectionOptions = ref([
}
.test-head-steps .el-step__icon{
width: 80px !important;
height:80px !important;
font-size: 40px !important; /* 调整图标大小 */
width: 48px !important;
height:48px !important;
font-size: 48px !important; /* 调整图标大小 */
line-height: 80px !important; /* 使图标居中 */
}