66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<template>
|
|
<div class="nav-bar">
|
|
<NavTabs />
|
|
<NavMenus />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useConfig } from '@/stores/config'
|
|
import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
|
|
import NavMenus from '../navMenus.vue'
|
|
|
|
const config = useConfig()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-bar {
|
|
display: flex;
|
|
height: 40px;
|
|
margin: 10px var(--ba-main-space) 0 var(--ba-main-space);
|
|
:deep(.nav-tabs) {
|
|
display: flex;
|
|
height: 100%;
|
|
position: relative;
|
|
.ba-nav-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 20px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
user-select: none;
|
|
opacity: 0.7;
|
|
color: v-bind('config.getColorVal("headerBarTabColor")');
|
|
.close-icon {
|
|
padding: 2px;
|
|
margin: 2px 0 0 4px;
|
|
color: v-bind('config.getColorVal("headerBarTabColor")') !important;
|
|
}
|
|
&.active {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
|
.close-icon {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
|
|
}
|
|
}
|
|
&:hover {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
|
background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
|
|
.close-icon {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
|
|
}
|
|
}
|
|
}
|
|
.nav-tabs-active-box {
|
|
position: absolute;
|
|
height: 40px;
|
|
border-radius: var(--el-border-radius-base);
|
|
background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
|
|
box-shadow: var(--el-box-shadow-light);
|
|
transition: all 0.2s;
|
|
-webkit-transition: all 0.2s;
|
|
}
|
|
}
|
|
}
|
|
</style>
|