44 lines
802 B
Vue
44 lines
802 B
Vue
<template>
|
|
<n-tabs type="segment" size="large" v-bind="$attrs">
|
|
<slot></slot>
|
|
</n-tabs>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NTabs } from 'naive-ui'
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.n-tabs {
|
|
--n-tab-height: 50px;
|
|
--n-tab-text-color-active: #18a058 !important;
|
|
--n-tab-text-color-hover: #18a058 !important;
|
|
|
|
position: relative;
|
|
// height: 100%;
|
|
min-height: var(--n-tab-height);
|
|
|
|
:deep(.n-tabs-nav) {
|
|
position: absolute;
|
|
height: var(--n-tab-height);
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.n-tabs-tab--active {
|
|
background-color: inherit !important;
|
|
box-shadow: inherit !important;
|
|
}
|
|
}
|
|
|
|
:deep(.n-tab-pane) {
|
|
position: absolute;
|
|
padding: 0;
|
|
top: 0;
|
|
bottom: var(--n-tab-height);
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
</style> |