<!--
* @Author: xiaohe
* @LastEditors: xiaohe
-->
<template>
<div class="step">
<template v-for="(item, index) in stepArray">
<div v-if="item.id != 5" :key="item.id" class="step_box">
<div class="step_icon" :id="getIcon(item.id)">
{{ indexNum > item.id ? "" : item.id }}
</div>
<div class="step_text">
<div :class="getText(item.id)">
{{ item.label }}
</div>
<div class="step_time">
2022-12-08 12:45:11
</div>
<div
v-show="index != 7"
:class="getBorder(item.id)"
:style="{ '--myColor1': item.widthStr }"
></div>
</div>
</div>
<div :key="item.id" class="step_boxs" v-else>
<div class="step_box_list">
<div class="top_left border_pan" :id="getBorderPay(5)">
<div class="top_wc">
<div class="pay_step" :id="getIcon(5)">
{{ indexNum > 5 ? "" : 5 }}
</div>
<div class="pay_text">
<div :class="getText(5)">支付完成</div>
<div class="step_time">
2022-12-08 12:45:11
</div>
</div>
</div>
</div>
<div class="bom_left border_span" :id="getBorderPay(6)">
<div class="top_qy">
<div class="pay_step" :id="getIcon(6)">
{{ indexNum > 6 ? "" : 6 }}
</div>
<div class="pay_text">
<div :class="getText(6)">签约,保函确认完成</div>
<div class="step_time">
2022-12-08 12:45:11
</div>
</div>
</div>
</div>
</div>
<div class="pay_ing" :id="indexNum > 6 ? 'pay_ing' : ''"></div>
</div>
</template>
</div>
</template>
<script>
export default {
props: ["indexProNum", "infoJson"],
computed: {
indexNum() {
return this.indexProNum;
}
},
components: {},
data() {
return {
stepArray: [
{
label: "提交订单",
id: 1,
widthStr: "68px",
key: "" // 时间字段
},
{
widthStr: "100px",
key: "",
label: "初审",
id: 2
},
{
widthStr: "52px",
key: "",
label: "确认投保单",
id: 3
},
{
widthStr: "55px",
key: "",
label: "核心初审",
id: 4
},
{
widthStr: "",
label: "支付完成",
id: 5
},
// {
// widthStr: "",
// label: "签约,保函确认完成",
// id: 6
// },
{
widthStr: "68px",
key: "",
label: "核心终审",
id: 7
},
{
widthStr: "",
key: "",
label: "开具保函",
id: 8
}
]
};
},
mounted() {},
methods: {
// 圆框
getIcon(id) {
// 选中
if (id == this.indexNum) {
return "step_icon_cur";
}
// 未完成
if (id > this.indexNum) {
return "step_icon_mo";
}
// 已完成
if (id < this.indexNum) {
return "step_icon_active";
}
},
// 文字
getText(id) {
// 选中
if (id == this.indexNum) {
return "start_cur";
}
// 未完成
if (id > this.indexNum) {
return "start_mo";
}
// 已完成
if (id < this.indexNum) {
return "start_active";
}
},
// 边框
getBorder(id) {
// 已完成
if (id < this.indexNum) {
return "step_active_border";
} else {
return "step_mo_border";
}
},
getBorderPay(id) {
if (id == this.indexNum || id < this.indexNum) {
return "pay_step_active_border";
} else {
return "";
}
}
}
};
</script>
<style lang="scss" scoped>
.step {
width: 100%;
padding: 50px;
display: flex;
margin-top: 60px;
// 已完成
#step_icon_active {
background: url("~@/assets/images/step.png") no-repeat;
background-position: center;
background-size: cover;
color: none !important;
}
// 选中
#step_icon_cur {
width: 36px;
height: 36px;
background: #0570ff;
border-radius: 50%;
font-size: 16px;
font-family: Helvetica Neue-Regular, Helvetica Neue;
font-weight: 400;
color: #ffffff;
text-align: center;
line-height: 36px;
}
// 未选中
#step_icon_mo {
width: 36px;
height: 36px;
border-radius: 50%;
opacity: 1;
font-size: 16px;
font-family: Helvetica Neue-Regular, Helvetica Neue;
font-weight: 400;
text-align: center;
line-height: 36px;
color: #999999;
border: 1px solid #dcdde6;
}
// 已完成
.start_active {
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
}
// 选中
.start_cur {
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
// 未选中
.start_mo {
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #999999;
}
.step_time {
font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #999999;
margin-top: 7px;
}
.step_box {
display: flex;
width: 200px;
position: relative;
margin-right: 10px;
.step_icon {
width: 36px;
height: 36px;
margin-right: 16px;
}
.step_text {
padding-top: 8px;
}
// 选中的border
.step_active_border {
width: var(--myColor1);
height: 1px;
border: 1px solid #0570ff;
position: absolute;
right: 0px;
top: 15px;
}
// 未选中的border
.step_mo_border {
width: var(--myColor1);
height: 1px;
border: 1px solid #dcdde6;
position: absolute;
right: 0px;
top: 15px;
}
}
.step_boxs {
width: 330px;
height: 140px;
position: relative;
.pay_ing {
width: 50px;
height: 0px;
opacity: 1;
border: 1px solid #dcdde6;
position: absolute;
top: 17px;
right: 10px;
}
#pay_ing {
border: 1px solid #0570ff;
}
.step_box_list {
position: absolute;
top: -53px;
left: -11px;
.pay_step {
width: 36px;
height: 36px;
}
.border_pan {
display: block;
position: absolute;
top: 0;
right: 0;
width: 46px;
height: 70px;
.top_wc {
width: 200px;
position: absolute;
left: 55px;
top: -17px;
display: flex;
}
}
.pay_text {
margin-left: 16px;
}
.border_span {
display: block;
position: absolute;
top: 70px;
right: 0;
width: 46px;
height: 70px;
.top_qy {
width: 200px;
position: absolute;
left: 55px;
bottom: -17px;
display: flex;
}
}
.top_left {
top: 1px;
left: 1px;
border-top: 2px solid #dcdde6;
border-left: 2px solid #dcdde6;
border-top-left-radius: 22px;
}
.bom_left {
bottom: 1px;
left: 1px;
border-bottom: 2px solid #dcdde6;
border-left: 2px solid #dcdde6;
border-bottom-left-radius: 22px;
}
#pay_step_active_border {
// border-top: 2px solid #0570ff;
// border-left: 2px solid #0570ff;
border-color: #0570ff;
}
}
}
}
</style>