<template>
    <van-tabs v-bind="$attrs" type="card" class="styled-tabs">
        <slot></slot>
    </van-tabs>
</template>

<script setup>
// 透传所有属性和事件到 van-tabs
defineOptions({
    inheritAttrs: false
})
</script>

<style scoped>
/* van-tabs 卡片样式定制 - 仅用于此组件 */
.styled-tabs:deep(.van-tabs__line) {
    background-color: var(--van-theme-primary) !important;
}

.styled-tabs:deep(.van-tabs__nav) {
    gap: 10px;
}

.styled-tabs:deep(.van-tabs__nav--card) {
    border: unset !important;
}

.styled-tabs:deep(.van-tab--card) {
    color: #666666 !important;
    border-right: unset !important;
    background-color: #eeeeee !important;
    border-radius: 8px !important;
}

.styled-tabs:deep(.van-tab--active) {
    color: white !important;
    background-color: var(--van-theme-primary) !important;
}

.styled-tabs:deep(.van-tabs__wrap) {
    background-color: #ffffff !important;
    padding: 9px 0;
}
</style>
