fix navbar

This commit is contained in:
Ironsp
2026-05-13 15:13:44 +08:00
parent 8cac136e25
commit f7906bb579
4 changed files with 31 additions and 32 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -11,7 +11,7 @@
</template> </template>
<div class="right-menu flex align-center"> <div class="right-menu flex align-center">
<template v-if="appStore.device !== 'mobile'"> <template v-if="appStore.device !== 'mobile'">
<el-select <!-- <el-select
v-if="userId === 1 && tenantEnabled" v-if="userId === 1 && tenantEnabled"
v-model="companyName" v-model="companyName"
class="min-w-244px mr-2" class="min-w-244px mr-2"
@@ -24,14 +24,14 @@
> >
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option> <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template> <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
</el-select> </el-select> -->
<search-menu ref="searchMenuRef" /> <search-menu ref="searchMenuRef" />
<el-tooltip content="搜索" effect="dark" placement="bottom"> <!-- <el-tooltip content="搜索" effect="dark" placement="bottom">
<div class="right-menu-item hover-effect" @click="openSearchMenu"> <div class="right-menu-item hover-effect" @click="openSearchMenu">
<svg-icon class-name="search-icon" icon-class="search" /> <svg-icon class-name="search-icon" icon-class="search" />
</div> </div>
</el-tooltip> </el-tooltip> -->
<!-- 消息 --> <!-- 消息 -->
<el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom"> <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
@@ -47,7 +47,7 @@
</el-popover> </el-popover>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip content="Github" effect="dark" placement="bottom"> <!-- <el-tooltip content="Github" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
@@ -65,7 +65,7 @@
<el-tooltip :content="proxy.$t('navbar.layoutSize')" effect="dark" placement="bottom"> <el-tooltip :content="proxy.$t('navbar.layoutSize')" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip> -->
</template> </template>
<div class="avatar-container"> <div class="avatar-container">
<el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand"> <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
@@ -105,8 +105,8 @@ import notice from './notice/index.vue';
import router from '@/router'; import router from '@/router';
import { ElMessageBoxOptions } from 'element-plus/es/components/message-box/src/message-box.type'; import { ElMessageBoxOptions } from 'element-plus/es/components/message-box/src/message-box.type';
import { NavTypeEnum } from '@/enums/NavTypeEnum'; import { NavTypeEnum } from '@/enums/NavTypeEnum';
import Logo from "@/layout/components/Sidebar/Logo.vue"; import Logo from '@/layout/components/Sidebar/Logo.vue';
import TopBar from './TopBar' import TopBar from './TopBar';
const appStore = useAppStore(); const appStore = useAppStore();
const userStore = useUserStore(); const userStore = useUserStore();
@@ -282,7 +282,6 @@ watch(
margin-left: 8px; margin-left: 8px;
} }
.errLog-container { .errLog-container {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@@ -310,7 +309,9 @@ watch(
&.hover-effect { &.hover-effect {
cursor: pointer; cursor: pointer;
transition: background 0.2s ease, color 0.2s ease; transition:
background 0.2s ease,
color 0.2s ease;
&:hover { &:hover {
background: var(--el-fill-color-light); background: var(--el-fill-color-light);

View File

@@ -1,20 +1,13 @@
<template> <template>
<div <div class="sidebar-logo-container" :class="{ collapse: collapse }">
class="sidebar-logo-container"
:class="{ collapse: collapse }"
>
<transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in"> <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title"> <h1 v-else class="sidebar-title">可视化电子围栏管理系统</h1>
{{ title }}
</h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title"> <h1 class="sidebar-title">可视化电子围栏管理系统</h1>
{{ title }}
</h1>
</router-link> </router-link>
</transition> </transition>
</div> </div>
@@ -41,24 +34,24 @@ const sideTheme = computed(() => settingsStore.sideTheme);
// 获取Logo背景色 // 获取Logo背景色
const getLogoBackground = computed(() => { const getLogoBackground = computed(() => {
if (settingsStore.isDark) { if (settingsStore.isDark) {
return 'var(--sidebar-bg)' return 'var(--sidebar-bg)';
} }
if (settingsStore.navType == NavTypeEnum.TOP) { if (settingsStore.navType == NavTypeEnum.TOP) {
return variables.menuLightBackground return variables.menuLightBackground;
} }
return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBackground return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBackground;
}) });
// 获取Logo文字颜色 // 获取Logo文字颜色
const getLogoTextColor = computed(() => { const getLogoTextColor = computed(() => {
if (settingsStore.isDark) { if (settingsStore.isDark) {
return 'var(--sidebar-text)' return 'var(--sidebar-text)';
} }
if (settingsStore.navType == NavTypeEnum.TOP) { if (settingsStore.navType == NavTypeEnum.TOP) {
return variables.logoLightTitleColor return variables.logoLightTitleColor;
} }
return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor;
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -97,8 +90,13 @@ const getLogoTextColor = computed(() => {
color: v-bind(getLogoTextColor); color: v-bind(getLogoTextColor);
font-weight: 600; font-weight: 600;
line-height: 50px; line-height: 50px;
font-size: 14px; font-size: 12px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-family:
Avenir,
Helvetica Neue,
Arial,
Helvetica,
sans-serif;
vertical-align: middle; vertical-align: middle;
} }
} }

View File

@@ -127,7 +127,7 @@ const setLayout = () => {
width: calc(100% - #{$base-sidebar-width}); width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s; transition: width 0.28s;
background: $fixed-header-bg; background: $fixed-header-bg;
box-shadow: 0 2px 8px rgba(0, 21, 41, 0.10); box-shadow: 0 2px 8px rgba(0, 21, 41, 0.1);
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {