# 订单支付进度
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />
<style type="text/css">
[class*=el-col-] {
float:left;
box-sizing:border-box
}
.el-step__icon[data-v-17eee0cb] {
width:38px;
height:38px;
border:none!important;
background:#999
}
.el-step__icon-inner[data-v-17eee0cb] {
color:#fff
}
.el-step.is-horizontal .el-step__line[data-v-17eee0cb] {
top:18px;
background:#e5e5e5
}
.is-process .el-step__icon[data-v-17eee0cb] {
background:#f24748
}
.is-success .el-step__icon[data-v-17eee0cb] {
background:#333
}
.is-success .el-step__line[data-v-17eee0cb] {
background:#999!important;
border-color:#999!important
}
.el-step__title[data-v-17eee0cb] {
font-size:12px
}
.el-step__title.is-process[data-v-17eee0cb],
.el-step__title.is-success[data-v-17eee0cb] {
font-weight:400;
color:#333
}
.el-steps-1 .el-col[data-v-17eee0cb] {
position:relative
}
.el-steps-1 .el-col[data-v-17eee0cb]:last-child {
overflow:hidden
}
.el-steps-1 .grid-content[data-v-17eee0cb] {
height:38px;
line-height:38px;
background:#e9e9e9;
color:#999;
font-size:12px;
text-align:center
}
.el-steps-1 .el-col .arrow[data-v-17eee0cb] {
display:block;
height:38px;
width:20px;
line-height:38px;
overflow:hidden;
position:absolute;
left:100%;
top:0
}
.el-steps-1 .el-col .arrow[data-v-17eee0cb]:before {
z-index:1;
right:11px;
background:#fff
}
.el-steps-1 .el-col .arrow[data-v-17eee0cb]:after,
.el-steps-1 .el-col .arrow[data-v-17eee0cb]:before {
content:"";
width:56px;
height:56px;
position:absolute;
top:-9px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg)
}
.el-steps-1 .el-col .arrow[data-v-17eee0cb]:after {
z-index:2;
right:13px;
background:#e9e9e9
}
.el-steps-1 .el-col.is-process .grid-content[data-v-17eee0cb],
.el-steps-1 .el-col.is-success .grid-content[data-v-17eee0cb] {
background:#f24748;
color:#fff
}
.el-steps-1 .el-col.is-process .arrow[data-v-17eee0cb]:after,
.el-steps-1 .el-col.is-success .arrow[data-v-17eee0cb]:after {
background:#f24748
}
.el-steps-2[data-v-17eee0cb] {
padding:20px 0;
border-bottom:2px solid #e5e5e5
}
.el-steps-2 .el-step[data-v-17eee0cb] {
text-align:center
}
.el-steps-2 .el-step .el-step__line[data-v-17eee0cb] {
top:100%!important;
left:0!important;
right:0!important;
display:block!important;
margin-top:20px
}
.el-steps-2 .el-step__head[data-v-17eee0cb] {
width:auto;
display:inline-block;
margin-right:10px;
position:static
}
.el-steps-2 .el-step__main[data-v-17eee0cb] {
width:auto;
display:inline-block
}
.el-steps-2 .is-process .el-step__line[data-v-17eee0cb] {
background:#f24748!important;
border-color:#f24748!important
}
.el-steps-2 .is-success .el-step__line[data-v-17eee0cb] {
background:#e5e5e5!important;
border-color:#e5e5e5!important
}
</style>
<title>订单支付进度</title>
</head>
<body>
<div data-v-17eee0cb="" class="el-steps-1 clearfix el-row"><div data-v-17eee0cb="" class="el-col el-col-24 is-success" style="width: 25%;"><div data-v-17eee0cb="" class="grid-content">选购商品</div><i data-v-17eee0cb="" class="arrow"></i></div><div data-v-17eee0cb="" class="el-col el-col-24 is-process" style="width: 25%;"><div data-v-17eee0cb="" class="grid-content">提交订单</div><i data-v-17eee0cb="" class="arrow"></i></div><div data-v-17eee0cb="" class="el-col el-col-24" style="width: 25%;"><div data-v-17eee0cb="" class="grid-content">付款</div><i data-v-17eee0cb="" class="arrow"></i></div><div data-v-17eee0cb="" class="el-col el-col-24" style="width: 25%;"><div data-v-17eee0cb="" class="grid-content">交易完成</div><i data-v-17eee0cb="" class="arrow"></i></div></div>
</body>
</html>