fix navbar
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user