From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 27 五月 2025 17:52:03 +0800
Subject: [PATCH] 页面样式修改
---
src/layout/components/Navbar.vue | 209 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 209 insertions(+), 0 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..42f14c1
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,209 @@
+<template>
+ <div class="navbar">
+<!-- <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" />-->
+<!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
+ <div class="logo">
+ <img src="@/assets/logo/logo.png" alt=""/>
+ </div>
+ <div class="right-menu">
+ <template v-if="appStore.device !== 'mobile'">
+ <header-search id="header-search" class="right-menu-item" />
+ <screenfull id="screenfull" class="right-menu-item hover-effect" />
+ </template>
+ <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
+ <div class="avatar-wrapper">
+ <img :src="userStore.avatar" class="user-avatar" />
+ <span class="user-nickname"> {{ userStore.nickName }} </span>
+ </div>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <router-link to="/user/profile">
+ <el-dropdown-item>涓汉涓績</el-dropdown-item>
+ </router-link>
+ <el-dropdown-item divided command="logout">
+ <span>閫�鍑虹櫥褰�</span>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+<!-- <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">-->
+<!-- <svg-icon icon-class="more-up" />-->
+<!-- </div>-->
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ElMessageBox } from 'element-plus'
+import Breadcrumb from '@/components/Breadcrumb'
+import TopNav from '@/components/TopNav'
+import Hamburger from '@/components/Hamburger'
+import Screenfull from '@/components/Screenfull'
+import SizeSelect from '@/components/SizeSelect'
+import HeaderSearch from '@/components/HeaderSearch'
+import RuoYiGit from '@/components/RuoYi/Git'
+import RuoYiDoc from '@/components/RuoYi/Doc'
+import useAppStore from '@/store/modules/app'
+import useUserStore from '@/store/modules/user'
+import useSettingsStore from '@/store/modules/settings'
+
+const appStore = useAppStore()
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
+
+function toggleSideBar() {
+ appStore.toggleSideBar()
+}
+
+function handleCommand(command) {
+ switch (command) {
+ case "setLayout":
+ setLayout()
+ break
+ case "logout":
+ logout()
+ break
+ default:
+ break
+ }
+}
+
+function logout() {
+ ElMessageBox.confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ userStore.logOut().then(() => {
+ location.href = '/index'
+ })
+ }).catch(() => { })
+}
+
+const emits = defineEmits(['setLayout'])
+function setLayout() {
+ emits('setLayout')
+}
+
+function toggleTheme() {
+ settingsStore.toggleTheme()
+}
+</script>
+
+<style lang='scss' scoped>
+.navbar {
+ height: 50px;
+ overflow: hidden;
+ position: fixed; /* 灏嗗ご閮ㄥ浐瀹� */
+ top: 0; /* 鍦ㄩ《閮ㄥ浐瀹� */
+ width: 100%; /* 瀹藉害100%锛岃鐩栨暣涓鍙� */
+ //background-color: #f8f9fa; /* 璁剧疆鑳屾櫙棰滆壊锛屼互渚挎洿鏄庢樉鍦扮湅鍒版晥鏋� */
+ z-index: 1000; /* 纭繚澶撮儴鍦ㄥ叾浠栧唴瀹逛箣涓� */
+ background: var(--navbar-bg);
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+ display: flex;
+ justify-content: space-between;
+ padding: 0 20px;
+
+ .logo {
+ height: 50px;
+ line-height: 50px;
+ img {
+ cursor: pointer;
+ width: 146px;
+ height: 46px;
+ }
+ }
+
+ .breadcrumb-container {
+ float: left;
+ }
+
+ .topmenu-container {
+ position: absolute;
+ left: 50px;
+ }
+
+ .errLog-container {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ .right-menu {
+ float: right;
+ height: 100%;
+ line-height: 50px;
+ display: flex;
+
+ &:focus {
+ outline: none;
+ }
+
+ .right-menu-item {
+ display: inline-block;
+ padding: 0 8px;
+ height: 100%;
+ font-size: 18px;
+ color: #5a5e66;
+ vertical-align: text-bottom;
+
+ &.hover-effect {
+ cursor: pointer;
+ transition: background 0.3s;
+
+ &: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);
+ }
+ }
+ }
+ }
+
+ .avatar-container {
+ margin-right: 0px;
+ padding-right: 0px;
+
+ .avatar-wrapper {
+ margin-top: 10px;
+ right: 5px;
+ position: relative;
+
+ .user-avatar {
+ cursor: pointer;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ }
+
+ .user-nickname{
+ position: relative;
+ left: 5px;
+ bottom: 10px;
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ i {
+ cursor: pointer;
+ position: absolute;
+ right: -20px;
+ top: 25px;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3