van-tabs 自定义

1. 标签样式修改

css

:deep(.van-tab--card) {color: #000;border-radius: 192rpx;border: none;margin-right: 20rpx;
}

• :deep(.van-tab--card)：选中 Vant 中卡片风格的标签页
• color: #000：设置标签文字颜色为黑色
• border-radius: 192rpx：设置标签圆角半径，使标签呈现胶囊形状
• border: none：移除标签的边框
• margin-right: 20rpx：为每个标签右侧添加间距

2. 激活状态样式

css

:deep(.van-tab--active) {background-color: rgba(242, 87, 0, 1) !important;
}

• :deep(.van-tab--active)：选中当前激活的标签页
• background-color: rgba(242, 87, 0, 1)：设置激活标签的背景色为橙色
• !important：强制覆盖组件默认样式

3. 标签导航栏样式

css

:deep(.van-tabs__nav--card) {border: none;
}

• :deep(.van-tabs__nav--card)：选中卡片风格的标签导航容器
• border: none：移除导航容器的边框

4. 标签包裹容器样式

css

:deep(.van-tabs__wrap) {height: 100rpx;display: flex;align-items: center;border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);border-top: 1rpx solid rgba(0, 0, 0, 0.08);margin-bottom: 36rpx;
}

• :deep(.van-tabs__wrap)：选中整个标签页的包裹容器
• height: 100rpx：设置容器高度
• display: flex 和 align-items: center：使用 Flex 布局并垂直居中内容
• border-bottom 和 border-top：添加顶部和底部细边框
• margin-bottom: 36rpx：为标签容器下方添加间距