| | |
| | | <template>
|
| | | <div class="navbar">
|
| | | <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
| | | <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
|
| | | <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
|
| | |
|
| | | <div>
|
| | | <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
| | | <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
| | | </div>
|
| | | <!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
|
| | | <div class="center-menu">
|
| | | <span class="label">MIS系统(管理信息系统)</span>
|
| | | </div>
|
| | | <div class="right-menu">
|
| | | <template v-if="appStore.device !== 'mobile'">
|
| | | <header-search id="header-search" class="right-menu-item" />
|
| | |
|
| | | <el-tooltip content="源码地址" effect="dark" placement="bottom">
|
| | | <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
| | | </el-tooltip>
|
| | |
|
| | | <el-tooltip content="文档地址" effect="dark" placement="bottom">
|
| | | <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
| | | </el-tooltip>
|
| | |
|
| | | <screenfull id="screenfull" class="right-menu-item hover-effect" />
|
| | |
|
| | | <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
| | | <size-select id="size-select" class="right-menu-item hover-effect" />
|
| | | </el-tooltip>
|
| | | </template>
|
| | | <div class="avatar-container">
|
| | | <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
|
| | | <div class="avatar-wrapper">
|
| | |
| | | function handleCommand(command) {
|
| | | switch (command) {
|
| | | case "setLayout":
|
| | | setLayout();
|
| | | break;
|
| | | setLayout()
|
| | | break
|
| | | case "logout":
|
| | | logout();
|
| | | break;
|
| | | logout()
|
| | | break
|
| | | default:
|
| | | break;
|
| | | break
|
| | | }
|
| | | }
|
| | |
|
| | |
| | | type: 'warning'
|
| | | }).then(() => {
|
| | | userStore.logOut().then(() => {
|
| | | location.href = '/index';
|
| | | location.href = '/index'
|
| | | })
|
| | | }).catch(() => { });
|
| | | }).catch(() => { })
|
| | | }
|
| | |
|
| | | const emits = defineEmits(['setLayout'])
|
| | | function setLayout() {
|
| | | emits('setLayout');
|
| | | emits('setLayout')
|
| | | }
|
| | |
|
| | | function toggleTheme() {
|
| | | settingsStore.toggleTheme()
|
| | | }
|
| | | </script>
|
| | |
|
| | |
| | | height: 50px;
|
| | | overflow: hidden;
|
| | | position: relative;
|
| | | background: #fff;
|
| | | background: var(--navbar-bg);
|
| | | box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
| | | .center-menu {
|
| | | line-height: 50px;
|
| | | position: absolute;
|
| | | left: 50%;
|
| | | transform: translateX(-50%);
|
| | | .label {
|
| | | font-weight: bold;
|
| | | font-size: 18px;
|
| | | color: #333333;
|
| | | }
|
| | | }
|
| | |
|
| | | .hamburger-container {
|
| | | line-height: 46px;
|
| | |
| | | padding: 0 8px;
|
| | | height: 100%;
|
| | | font-size: 18px;
|
| | | color: #5a5e66;
|
| | | color: var(--navbar-text);
|
| | | vertical-align: text-bottom;
|
| | |
|
| | | &.hover-effect {
|
| | |
| | |
|
| | | &:hover {
|
| | | background: rgba(0, 0, 0, 0.025);
|
| | | }
|
| | | }
|
| | |
|
| | | &.theme-switch-wrapper {
|
| | | display: flex;
|
| | | align-items: center;
|
| | |
|
| | | svg {
|
| | | transition: transform 0.3s;
|
| | | |
| | | &:hover {
|
| | | transform: scale(1.15);
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | |
| | | cursor: pointer;
|
| | | width: 40px;
|
| | | height: 40px;
|
| | | border-radius: 10px;
|
| | | border-radius: 50px;
|
| | | }
|
| | |
|
| | | i {
|
| | | cursor: pointer;
|
| | | position: absolute;
|
| | | right: -20px;
|
| | | top: 25px;
|
| | | top: 14px;
|
| | | font-size: 12px;
|
| | | }
|
| | | }
|