Vue/UniApp中如何制作圆角选项卡，且选中状态颜色与未选中状态颜色不同？

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《Vue/UniApp中如何制作圆角选项卡，且选中状态颜色与未选中状态颜色不同？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

vue/uniapp中，如何制作圆角栏目的选项卡效果？

你想要创建一个圆角栏目的选项卡效果，其中一个选中的选项是用白色文本填充蓝色背景，而其他选项是黑色文本填充灰色背景。

以下是使用html和css实现此效果的方法：

<div class="tabs">
    <div class="tab active">日</div>
    <div class="tab">周</div>
    <div class="tab">月</div>
    <div class="tab">年</div>
</div>

.tabs {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: #E1E1E1;
    border-radius: 82px;
    height: 82px;
}

.tab {
    font-size: 36px;
    color: rgba(69, 69, 68, 1);
    width: 100%;
    text-align: center;
    line-height: 82px;
}

.tab.active {
    color: rgba(255, 255, 255, 1);
    background-color: #31BDEC;
    border-radius: 82px;
}

效果展示：

[图片]

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~