<template>
<div class="navbar">
<!
-- 实习管理按钮
-->
<el
-button
class="practice
-management"
@click="handlePracticeClick"
:plain="false"
:round="false"
:disabled="false"
>
实习管理
</el
-button>
<!
-- 汉堡菜单按钮
-->
<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="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">
<div class="right
-menu
-item hover
-effect theme
-switch
-wrapper" @click="toggleTheme">
<svg
-icon v
-if="settingsStore.isDark" icon
-class="sunny" />
<svg
-icon v
-if="!settingsStore.isDark" icon
-class="moon" />
</div>
</el
-tooltip>
<!
-- 布局大小
-->
<el
-tooltip content="布局大小" effect="dark" placement="bottom">
<size
-select id="size
-select" class="right
-menu
-item hover
-effect" />
</el
-tooltip>
<!
-- 导航菜单（学生、消息通知）
-->
<div class="main
-menu">
<!
-- 学生下拉菜单
-->
<el
-dropdown
class="main
-menu
-item"
trigger="hover"
placement="bottom"
>
<span class="menu
-text">学生</span>
<template #dropdown>
<el
-dropdown
-menu>
<el
-dropdown
-item>学生</el
-dropdown
-item>
</el
-dropdown
-menu>
</template>
</el
-dropdown>
<!
-- 消息通知下拉菜单
-->
<el
-dropdown
class="main
-menu
-item"
trigger="hover"
placement="bottom"
>
<span class="menu
-text">消息通知</span>
<template #dropdown>
<el
-dropdown
-menu class="message
-dropdown">
<div class="message
-content">
<p>欢迎进入工学云:</p>
<p>1. 如果您是学校的师生，请在"我的"
-"身份认证"中完成身份认证。</p>
<p>2. 如果您是企业(HR),请使用微信小程序"蘑菇丁招聘"或者在电脑浏览器访问网址：
<a href="https://zhaopin.moguding.net" target="_blank" class="external
-link">
https://zhaopin.moguding.net
</a> 上传企业资料，平台审核通过后可发布职位。
</p>
</div>
</el
-dropdown
-menu>
</template>
</el
-dropdown>
</div>
</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 command="profile">个人中心</el
-dropdown
-item>
</router
-link>
<el
-dropdown
-item command="changePwd">修改密码</el
-dropdown
-item>
<el
-dropdown
-item command="cancelAccount" divided>注销账号</el
-dropdown
-item>
<el
-dropdown
-item command="logout" divided>退出登录</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 { useRouter } from 'vue
-router'
// 组件引入
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 SvgIcon from '@/components/SvgIcon'
// 状态管理引入
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()
const router = useRouter()
// 侧边栏切换
function toggleSideBar() {
appStore.toggleSideBar()
}
// 实习管理按钮点击事件
function handlePracticeClick() {
console.log('点击了实习管理');
}
// 处理下拉菜单命令
function handleCommand(command) {
switch (command) {
case "profile":
router.push('/user/profile')
break
case "changePwd":
router.push('/user/change
-pwd')
break
case "cancelAccount":
cancelAccount()
break
case "logout":
logout()
break
default:
break
}
}
// 注销账号确认
function cancelAccount() {
ElMessageBox.confirm('确定要注销账号吗？此操作不可恢复！', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
if (userStore.cancelAccount) {
userStore.cancelAccount().then(() => {
location.href = '/index'
})
} else {
location.href = '/index'
}
}).catch(() => { })
}
// 退出登录
function logout() {
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
userStore.logOut().then(() => {
location.href = '/index'
})
}).catch(() => { })
}
// emits声明
const emits = defineEmits(['setLayout'])
function setLayout() {
emits('setLayout')
}
// 主题切换
function toggleTheme() {
settingsStore.toggleTheme()
}
</script>
<style lang='scss' scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #000;
box
-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
display: flex;
align
-items: center;
/* 解决flex布局下子元素溢出问题 */
width: 100%;
box
-sizing: border
-box;
// 实习管理按钮样式（强化穿透优先级）
:deep(.practice
-management.el
-button) {
/* 基础布局
- 确保占满导航栏高度 */
height: 50px !important; /* 直接指定高度，避免100%可能的继承问题 */
min
-width: 100px;
margin: 0 !important;
padding: 0 20px !important;
order:
-1; /* 强制居左 */
flex
-shrink: 0; /* 避免被压缩 */
/* 样式覆盖
- 完全清除Element默认样式 */
border: none !important;
border
-radius: 0 !important;
background
-color: #409EFF !important; /* 主蓝色 */
color: #fff !important;
font
-size: 14px !important;
font
-weight: 500 !important;
text
-align: center !important;
box
-shadow: none !important; /* 清除默认阴影 */
box
-sizing: border
-box !important;
/* 内容居中
- 解决文字偏移问题 */
display: inline
-flex !important;
align
-items: center !important;
justify
-content: center !important;
line
-height: 1 !important; /* 重置行高，避免文字垂直偏移 */
/* 交互状态强化 */
&:hover {
background
-color: #66b1ff !important; /* 亮蓝色hover */
color: #fff !important;
border
-color: transparent !important;
box
-shadow: none !important;
}
&:active {
background
-color: #3a8ee6 !important; /* 深蓝光晕active */
color: #fff !important;
border
-color: transparent !important;
}
&:focus {
outline: none !important;
box
-shadow: none !important;
}
/* 禁用状态（如果需要） */
&.is
-disabled {
background
-color: #a0cfff !important;
color: #fff !important;
}
}
.hamburger
-container {
line
-height: 46px;
height: 100%;
padding: 0 15px;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
.breadcrumb
-container {
padding: 0 15px;
/* 避免面包屑挤压按钮 */
flex
-shrink: 1;
overflow: hidden;
}
.topmenu
-container {
flex: 1;
padding
-left: 15px;
}
.right
-menu {
margin
-left: auto;
height: 100%;
line
-height: 50px;
display: flex;
align
-items: center;
flex
-shrink: 0;
&:focus {
outline: none;
}
.right
-menu
-item {
display: inline
-block;
padding: 0 8px;
height: 100%;
font
-size: 18px;
color: #fff;
vertical
-align: text
-bottom;
&.hover
-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
&.theme
-switch
-wrapper {
display: flex;
align
-items: center;
svg {
transition: transform 0.3s;
&:hover {
transform: scale(1.15);
}
}
}
}
.main
-menu {
display: flex;
align
-items: center;
height: 100%;
margin: 0 8px;
.main
-menu
-item {
margin: 0 5px;
padding: 0 8px;
height: 100%;
display: flex;
align
-items: center;
cursor: pointer;
color: #fff;
font
-size: 14px;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
}
.message
-dropdown {
.message
-content {
padding: 15px;
min
-width: 350px;
line
-height: 1.6;
font
-size: 14px;
p {
margin: 0 0 10px 0;
color: #333;
}
.external
-link {
color: #409EFF;
text
-decoration: underline;
}
}
}
.avatar
-container {
margin
-right: 0px;
padding
-right: 0px;
.avatar
-wrapper {
margin
-top: 10px;
right: 5px;
position: relative;
display: flex;
align
-items: center;
padding: 0 10px;
.user
-avatar {
cursor: pointer;
width: 30px;
height: 30px;
border
-radius: 50%;
}
.user
-nickname{
margin
-left: 8px;
font
-size: 14px;
color: #fff;
white
-space: nowrap;
}
}
}
}
}
</style>
要怎么修改才能把实习管理弄成button的样式,并且是蓝色的，不需要跳转
本文介绍如何使用-webkit-tap-highlight-color属性消除iOS设备上点击链接或可点击元素时出现的灰色背景。此属性仅适用于iOS平台。
扫一扫
2959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
