<!-- * @ Author: zhaowei * @ Create Time: 2022-09-3 10:20:17 * @ Modified by: zhaowei * @ Modified time: 2022-09-03 11:39:54 * @ Description: --> <template> <div class="body"> <div class="rarle"> <tatle-bar :tatle="tatleName"></tatle-bar> </div> <van-steps class="step" direction="vertical" :active="active" style="padding-top:5%;" > <van-step v-for="(item,index) in bussList" :key = "index" style="padding-bottom:20%;" > <van-row > <van-col span="5"> <span>{{item.name}}</span></van-col> <van-col span="8"> <span>{{item.jobs}}</span></van-col> <van-col span="11"> <span>{{item.time}}</span></van-col> </van-row> <van-row > <van-col span="5"> <span>{{item.falg}}</span></van-col> </van-row> </van-step> </van-steps> </div> </template> <script lang="ts"> import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator"; import { Step, Steps } from 'vant'; Vue.use(Step); Vue.use(Steps); /* * title */ @Component({ name: "businessProgress" }) export default class businessProgress extends Vue { tatleName = "业务进度" bussList:any =[ { name :"赵飞", jobs : "客户经理", time : "2021/02/20 11:14:12", falg:"同意" }, { name :"李星琳", jobs : "支行审批岗", time : "2021/02/20 11:14:12", falg:"同意" }, { name :"孙先辉", jobs : "支行行长", time : "2021/02/20 11:14:12", falg:"同意" }, { name :"童菲可", jobs : "某某审批岗", time : "2021/02/20 11:14:12", falg:"" }, { name :"孙晴", jobs : "某某审批岗", time : "2021/02/20 11:14:12", falg:"" }, { name :"赵可欣", jobs : "某某最终审批岗", time : "2021/02/20 11:14:12", falg:"" }, ] active = 3 } </script> <style scoped lang="scss"> .body { height: 100%; width: 100%; background-color: rgba(241, 241, 241, 1); } .step{ height: 100%; width: 100%; background-color: rgba(241, 241, 241, 1); } </style>