一个粗糙的角标

kis_me

已于 2022-06-30 17:14:54 修改

阅读量582

点赞数 1

文章标签： vue css

于 2022-05-11 14:59:57 首次发布

本文链接：https://blog.csdn.net/kis_wuyan/article/details/124710379

版权

css手写一个粗糙的角标

我这里是给element的el-tab组件加了一个小角标

<el-tabs v-model="activeName" @tab-click="cut">
   <el-tab-pane name="0">
       <span slot="label" class="jiaobiao">
           待办
	       <span class="count" v-if="unReadCount">{{ unReadCount }}</span>
       </span>
   </el-tab-pane>
   <el-tab-pane label="已办" name="1"></el-tab-pane>
   <el-tab-pane label="发起" name="2"></el-tab-pane>
</el-tabs>

//
//
//
//
//
//
//
.jiaobiao {
    position: relative;
    .count {
        position: absolute;
        top: -10px;
        right: -20px;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background-color: red;
        display: inline-block;
        height: 18px;
        min-width: 18px;
        line-height: 18px;
        text-align: center;
        color: #fff;
    }
}