首页 新闻 会员 周边

如图所示,有没有办法将99+那个气泡显示到标签页上面

0
悬赏园豆:10 [已解决问题] 解决于 2022-02-09 15:41

Arash的主页 Arash | 初学一级 | 园豆:184
提问于:2022-02-08 15:30
< >
分享
最佳答案
1
<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>

具体的样式和位置自己再根据需求详细调整吧~

收获园豆:10
小小憨批儿 | 菜鸟二级 |园豆:216 | 2022-02-09 15:19
其他回答(1)
0

设置比较大的 z-index 属性试试

寂静的羽夏 | 园豆:1781 (小虾三级) | 2022-02-08 15:41

试过了,不行

支持(0) 反对(0) Arash | 园豆:184 (初学一级) | 2022-02-08 17:06
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册