2022-08-12 10:21:25 +08:00
|
|
|
<template>
|
2022-09-02 15:21:58 +08:00
|
|
|
<Card title="进度管理">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<VueSteps :items="items" :activeIndex="index" />
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
2022-08-12 10:21:25 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2022-08-24 15:52:18 +08:00
|
|
|
import Card from '../components/Card'
|
2022-08-12 10:21:25 +08:00
|
|
|
export default {
|
2022-08-24 15:52:18 +08:00
|
|
|
components: { Card },
|
2022-08-12 10:21:25 +08:00
|
|
|
data() {
|
2022-09-02 15:21:58 +08:00
|
|
|
return {
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
num: '一',
|
|
|
|
|
text: '测试阶段1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
num: '二',
|
|
|
|
|
text: '测试阶段2'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
num: '三',
|
|
|
|
|
text: '测试阶段3'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
num: '三',
|
|
|
|
|
text: '测试阶段3'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
num: '三',
|
|
|
|
|
text: '测试阶段3'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
index: 0
|
|
|
|
|
}
|
2022-08-12 10:21:25 +08:00
|
|
|
}
|
2022-08-24 15:52:18 +08:00
|
|
|
}
|
2022-08-12 10:21:25 +08:00
|
|
|
</script>
|
|
|
|
|
|
2022-09-02 15:21:58 +08:00
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.container {
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ::v-deep .steps-item {
|
|
|
|
|
// width: 150px;
|
|
|
|
|
// height: 34px;
|
|
|
|
|
// padding-top: 15px;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// }
|
|
|
|
|
</style>
|