<template>
<div class="pd-20">
<el-tabs v-model="activeName" type="card">
<el-tab-pane name="second">
<template slot="label">
<div class="relative">
<span>待付款</span>
<div class="count">99+</div>
</div>
</template>
待付款
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data(){
return {
activeName: 'second'
}
}
}
</script>
<style lang="scss" scoped>
.relative {
position: relative;
}
.count {
width: fit-content;
line-height: 1;
padding: 1px 3px;
border-radius: 20px;
font-size: 12px;
color: #fff;
background-color: #ff4f4f;
position: absolute;
top: 0px;
right: -20px;
}
</style>
具体的样式和位置自己再根据需求详细调整吧~
设置比较大的 z-index 属性试试
试过了,不行