103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
Vue
<template>
|
|
<div class="nav-bar" :class="config.layout.shrink ? 'shrink' : ''">
|
|
<!-- 小屏设备下的展开菜单按钮 -->
|
|
<div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
|
|
<Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')" size="18" />
|
|
</div>
|
|
<NavTabs v-if="!config.layout.shrink" ref="layoutNavTabsRef" />
|
|
<NavMenus />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useConfig } from '/@/stores/config'
|
|
import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
|
|
import NavMenus from '../navMenus.vue'
|
|
import { layoutNavTabsRef } from '/@/stores/refs'
|
|
import { showShade } from '/@/utils/pageShade'
|
|
|
|
const config = useConfig()
|
|
|
|
const onMenuCollapse = () => {
|
|
showShade('ba-aside-menu-shade', () => {
|
|
config.setLayout('menuCollapse', true)
|
|
})
|
|
config.setLayout('menuCollapse', false)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-bar {
|
|
display: flex;
|
|
height: 52px;
|
|
margin: var(--ba-main-space) var(--ba-main-space) 0 var(--ba-main-space);
|
|
gap: 12px;
|
|
:deep(.nav-tabs) {
|
|
display: flex;
|
|
height: 100%;
|
|
position: relative;
|
|
min-width: 0;
|
|
.ba-nav-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 18px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
user-select: none;
|
|
opacity: 0.78;
|
|
color: v-bind('config.getColorVal("headerBarTabColor")');
|
|
border-radius: var(--ba-radius-control);
|
|
transition:
|
|
opacity 0.2s ease,
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
.close-icon {
|
|
padding: 2px;
|
|
margin: 2px 0 0 4px;
|
|
}
|
|
.close-icon:hover {
|
|
background: var(--el-color-primary-light-8);
|
|
color: var(--el-color-primary) !important;
|
|
border-radius: 50%;
|
|
}
|
|
&.active {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
|
font-weight: 600;
|
|
}
|
|
&:hover {
|
|
opacity: 1;
|
|
background: v-bind('config.getColorVal("headerBarHoverBackground")');
|
|
}
|
|
}
|
|
.nav-tabs-active-box {
|
|
position: absolute;
|
|
height: 38px;
|
|
top: 7px;
|
|
border-radius: var(--ba-radius-control);
|
|
background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
|
|
border: 1px solid var(--ba-border-color-soft);
|
|
box-shadow: var(--ba-shadow-card);
|
|
transition:
|
|
transform 0.2s ease,
|
|
width 0.2s ease,
|
|
left 0.2s ease;
|
|
-webkit-transition:
|
|
transform 0.2s ease,
|
|
width 0.2s ease,
|
|
left 0.2s ease;
|
|
}
|
|
}
|
|
}
|
|
.nav-bar.shrink {
|
|
width: 100%;
|
|
background-color: v-bind('config.getColorVal("headerBarBackground")');
|
|
margin: 0;
|
|
border-bottom: 1px solid var(--ba-border-color-soft);
|
|
.unfold {
|
|
align-self: center;
|
|
padding-left: var(--ba-main-space);
|
|
}
|
|
}
|
|
</style>
|