|
|
@ -1,9 +1,11 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div |
|
|
|
<router-link to="/" style="text-decoration:none;out-line: none; color: #000"> |
|
|
|
:class="['step-item', link ? 'linkable' : null]" |
|
|
|
<span :style="titleStyle">{{title}}</span> |
|
|
|
@click="go" |
|
|
|
<a-icon :style="iconStyle" :type="icon" /> |
|
|
|
> |
|
|
|
</router-link> |
|
|
|
<span :style="titleStyle">{{title}}</span> |
|
|
|
|
|
|
|
<a-icon :style="iconStyle" :type="icon" /> |
|
|
|
|
|
|
|
<slot></slot> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
@ -25,10 +27,27 @@ export default { |
|
|
|
name: 'AStepItem', |
|
|
|
name: 'AStepItem', |
|
|
|
Group: Group, |
|
|
|
Group: Group, |
|
|
|
components: {AIcon}, |
|
|
|
components: {AIcon}, |
|
|
|
props: ['title', 'icon', 'link', 'titleStyle', 'iconStyle'] |
|
|
|
props: ['title', 'icon', 'link', 'titleStyle', 'iconStyle'], |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
go () { |
|
|
|
|
|
|
|
const link = this.link |
|
|
|
|
|
|
|
if (link) { |
|
|
|
|
|
|
|
this.$router.push(link) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
|
|
.step-item{ |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
:global{ |
|
|
|
|
|
|
|
.ant-steps-item-process{ |
|
|
|
|
|
|
|
.linkable{ |
|
|
|
|
|
|
|
color: #40a9ff; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|