Files
exchange/resources/assets/js/components/ProgressTrack.vue
2018-07-17 16:41:09 +08:00

51 lines
1.0 KiB
Vue

<template>
<el-row>
<el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
<el-step title="Booking"/>
<el-step title="Payment"/>
<el-step title="Order Confirmation"/>
<el-step title="Processing Transfer"/>
<el-step title="Transfer Complete"/>
<el-step title="Processing Invoice"/>
<el-step title="Order Complete"/>
</el-steps>
</el-row>
</template>
<style type="text/css">
@media screen and (max-width: 800px) {
.progressBar {
width: 60%;
}
}
/*
.el-steps {
padding-top: 70px;
}
.el-step .el-step__main {
transform: translateY(-70px);
}
.el-step__title.is-wait {
font-size: 10pt;
}
.el-step__title {
line-height: 1.4;
}
.el-step .is-success .el-step__line {
background-color: #67c23a;
} */
</style>
<script>
export default {
props: ['value'],
data: () => ({
status: 1
})
}
</script>