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