first

src/layouts/admin/components/navBar/classic.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class='nav-bar'>
+        <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>
+        <span class='nav-bar-title'>电能质量数据监测云平台</span>
+        <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'
+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 scoped lang='scss'>
+.nav-bar {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    width: 100%;
+    background-color: v-bind('config.getColorVal("headerBarBackground")');
+
+    .nav-bar-title {
+        color: v-bind('config.getColorVal("headerBarTabColor")');
+        font-size: 24px;
+        margin-left: 10px;
+        font-weight: 700
+    }
+
+    :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;
+            height: 100%;
+            user-select: none;
+            color: v-bind('config.getColorVal("headerBarTabColor")');
+            transition: all 0.2s;
+            -webkit-transition: all 0.2s;
+
+            .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: 50px;
+            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
+            transition: all 0.2s;
+            -webkit-transition: all 0.2s;
+        }
+    }
+}
+
+.unfold {
+    align-self: center;
+    padding-left: var(--ba-main-space);
+}
+</style>