4 changed files with 855 additions and 1 deletions
-
5src/store/modules/common.js
-
44src/views/main-navbar.vue
-
795src/views/main-sidebar-hover.vue
-
12src/views/main.vue
@ -0,0 +1,795 @@ |
|||
<template> |
|||
<aside class="site-sidebar-hover" :class="['site-sidebar--' + sidebarLayoutSkin, { 'site-sidebar--fold': sidebarFold }]"> |
|||
<div class="site-sidebar__inner"> |
|||
<!-- 展开状态的内容 --> |
|||
<template v-if="!sidebarFold"> |
|||
<!-- 搜索框 --> |
|||
<div class="sidebar-search"> |
|||
<el-input |
|||
v-model="search" |
|||
placeholder="搜索" |
|||
@keyup.enter.native="searchMenu1" |
|||
size="small"> |
|||
<i slot="suffix" class="el-icon-search" @click="searchMenu1()"></i> |
|||
</el-input> |
|||
</div> |
|||
|
|||
<!-- 首页 --> |
|||
<div class="sidebar-home-item" @click="$router.push({ name: 'home' })"> |
|||
<icon-svg name="shouye" class="sidebar-menu-icon"></icon-svg> |
|||
<span>{{ pageLanguage.homePage }}</span> |
|||
</div> |
|||
|
|||
<!-- 主菜单列表 --> |
|||
<div class="sidebar-main-menu"> |
|||
<div |
|||
v-for="menu in menuList" |
|||
:key="menu.menuId" |
|||
class="main-menu-item" |
|||
@mouseenter="showSubMenu(menu, $event)" |
|||
@mouseleave="hideSubMenu" |
|||
@click="handleMainMenuClick(menu)"> |
|||
<icon-svg :name="menu.icon || ''" class="sidebar-menu-icon"></icon-svg> |
|||
<span class="menu-title">{{ menu.name }}</span> |
|||
<i v-if="menu.list && menu.list.length > 0" class="el-icon-arrow-right menu-arrow"></i> |
|||
</div> |
|||
|
|||
<!-- 收藏夹 --> |
|||
<div |
|||
v-for="menu in favoriteList" |
|||
:key="'fav-' + menu.menuId" |
|||
class="main-menu-item favorite-menu" |
|||
@mouseenter="showSubMenu(menu, $event)" |
|||
@mouseleave="hideSubMenu" |
|||
@click="handleMainMenuClick(menu)"> |
|||
<icon-svg :name="menu.icon || 'star-on'" class="sidebar-menu-icon"></icon-svg> |
|||
<span class="menu-title">{{ menu.name }}</span> |
|||
<i v-if="menu.list && menu.list.length > 0" class="el-icon-arrow-right menu-arrow"></i> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<!-- 折叠状态的内容 - 只显示图标 --> |
|||
<template v-else> |
|||
<!-- 首页图标 --> |
|||
<div class="sidebar-home-item folded-item" @click="$router.push({ name: 'home' })" :title="pageLanguage.homePage"> |
|||
<icon-svg name="shouye" class="sidebar-menu-icon"></icon-svg> |
|||
</div> |
|||
|
|||
<!-- 主菜单图标列表 --> |
|||
<div class="sidebar-main-menu"> |
|||
<div |
|||
v-for="menu in menuList" |
|||
:key="menu.menuId" |
|||
class="main-menu-item folded-item" |
|||
@mouseenter="showSubMenu(menu, $event)" |
|||
@mouseleave="hideSubMenu" |
|||
@click="handleMainMenuClick(menu)" |
|||
:title="menu.name"> |
|||
<icon-svg :name="menu.icon || ''" class="sidebar-menu-icon"></icon-svg> |
|||
</div> |
|||
|
|||
<!-- 收藏夹图标 --> |
|||
<div |
|||
v-for="menu in favoriteList" |
|||
:key="'fav-' + menu.menuId" |
|||
class="main-menu-item folded-item favorite-menu" |
|||
@mouseenter="showSubMenu(menu, $event)" |
|||
@mouseleave="hideSubMenu" |
|||
@click="handleMainMenuClick(menu)" |
|||
:title="menu.name"> |
|||
<icon-svg :name="menu.icon || 'star-on'" class="sidebar-menu-icon"></icon-svg> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
|
|||
<!-- 悬浮子菜单 --> |
|||
<div |
|||
v-if="hoveredMenu && hoveredMenu.list && hoveredMenu.list.length > 0" |
|||
class="hover-submenu" |
|||
:style="submenuStyle" |
|||
@mouseenter="keepSubMenuVisible" |
|||
@mouseleave="hideSubMenu"> |
|||
<div class="submenu-content"> |
|||
<div class="submenu-title">{{ hoveredMenu.name }}</div> |
|||
<div class="submenu-items"> |
|||
<div |
|||
v-for="subItem in hoveredMenu.list" |
|||
:key="subItem.menuId" |
|||
class="submenu-category"> |
|||
<!-- 统一的显示样式：都显示为分类标题 + 子项 --> |
|||
<div class="category-title">{{ subItem.name }}</div> |
|||
<div class="category-items"> |
|||
<!-- 如果有子菜单，递归显示所有子项 --> |
|||
<template v-if="subItem.list && subItem.list.length > 0"> |
|||
<div v-for="grandChild in subItem.list" :key="grandChild.menuId"> |
|||
<!-- 如果孙子菜单还有子菜单，显示为子分类 --> |
|||
<div v-if="grandChild.list && grandChild.list.length > 0" class="sub-category"> |
|||
<div class="sub-category-title">{{ grandChild.name }}</div> |
|||
<div class="sub-category-items"> |
|||
<span |
|||
v-for="greatGrandChild in getAllLeafMenus(grandChild)" |
|||
:key="greatGrandChild.menuId" |
|||
class="submenu-link sub-link" |
|||
@click="gotoRouteHandle(greatGrandChild)"> |
|||
{{ greatGrandChild.name }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<!-- 如果孙子菜单没有子菜单，直接显示 --> |
|||
<span |
|||
v-else |
|||
class="submenu-link" |
|||
@click="gotoRouteHandle(grandChild)"> |
|||
{{ grandChild.name }} |
|||
</span> |
|||
</div> |
|||
</template> |
|||
<!-- 如果没有子菜单，将自己作为子项显示 --> |
|||
<template v-else> |
|||
<span |
|||
class="submenu-link" |
|||
@click="gotoRouteHandle(subItem)"> |
|||
{{ subItem.name }} |
|||
</span> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</aside> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isURL } from '@/utils/validate' |
|||
import { userFavoriteList } from '@/api/userFavorite.js' |
|||
import { searchFunctionButtonList } from '@/api/sysLanguage.js' |
|||
|
|||
export default { |
|||
name: 'MainSidebarHover', |
|||
data() { |
|||
return { |
|||
dynamicMenuRoutes: [], |
|||
search: '', |
|||
favoriteList: [], |
|||
hoveredMenu: null, |
|||
submenuStyle: {}, |
|||
hideTimer: null, |
|||
list: [], |
|||
pageLanguage: { |
|||
homePage: '首页' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
sidebarLayoutSkin: { |
|||
get() { |
|||
return this.$store.state.common.sidebarLayoutSkin |
|||
} |
|||
}, |
|||
sidebarFold: { |
|||
get() { |
|||
return this.$store.state.common.sidebarFold |
|||
} |
|||
}, |
|||
menuList: { |
|||
get() { |
|||
return this.$store.state.common.menuList |
|||
}, |
|||
set(val) { |
|||
this.$store.commit('common/updateMenuList', val) |
|||
} |
|||
}, |
|||
menuActiveName: { |
|||
get() { |
|||
return this.$store.state.common.menuActiveName |
|||
}, |
|||
set(val) { |
|||
this.$store.commit('common/updateMenuActiveName', val) |
|||
} |
|||
}, |
|||
mainTabs: { |
|||
get() { |
|||
return this.$store.state.common.mainTabs |
|||
}, |
|||
set(val) { |
|||
this.$store.commit('common/updateMainTabs', val) |
|||
} |
|||
}, |
|||
mainTabsActiveName: { |
|||
get() { |
|||
return this.$store.state.common.mainTabsActiveName |
|||
}, |
|||
set(val) { |
|||
this.$store.commit('common/updateMainTabsActiveName', val) |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
$route: 'routeHandle' |
|||
}, |
|||
created() { |
|||
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId != 999) |
|||
this.favoriteList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId == 999) |
|||
this.userFavorites() |
|||
this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]') |
|||
this.routeHandle(this.$route) |
|||
this.getFunctionButtonList() |
|||
}, |
|||
methods: { |
|||
// 获取页面多语言数据 |
|||
getFunctionButtonList() { |
|||
let queryButton = { |
|||
functionId: 'systemInformation', |
|||
tableId: 'systemInformation', |
|||
languageCode: this.$i18n.locale, |
|||
objectId: 'homePage' |
|||
} |
|||
searchFunctionButtonList(queryButton).then(({data}) => { |
|||
if (data.code == 0) { |
|||
this.pageLanguage = data.data |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 用户收藏夹 |
|||
userFavorites() { |
|||
let query = { |
|||
userId: this.$store.state.user.id, |
|||
languageCode: this.$i18n.locale |
|||
} |
|||
userFavoriteList(query).then(({data}) => { |
|||
if (data.list && data.list.length > 0 && this.favoriteList.length > 0) { |
|||
this.favoriteList[0].list = data.list |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 显示子菜单 |
|||
showSubMenu(menu, event) { |
|||
if (this.hideTimer) { |
|||
clearTimeout(this.hideTimer) |
|||
this.hideTimer = null |
|||
} |
|||
|
|||
if (menu.list && menu.list.length > 0) { |
|||
this.hoveredMenu = menu |
|||
const rect = event.currentTarget.getBoundingClientRect() |
|||
this.submenuStyle = { |
|||
top: rect.top + 'px', |
|||
left: rect.right + 'px', |
|||
display: 'block' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 隐藏子菜单 |
|||
hideSubMenu() { |
|||
this.hideTimer = setTimeout(() => { |
|||
this.hoveredMenu = null |
|||
this.submenuStyle = { display: 'none' } |
|||
}, 100) |
|||
}, |
|||
|
|||
// 保持子菜单可见 |
|||
keepSubMenuVisible() { |
|||
if (this.hideTimer) { |
|||
clearTimeout(this.hideTimer) |
|||
this.hideTimer = null |
|||
} |
|||
}, |
|||
|
|||
// 处理主菜单点击 |
|||
handleMainMenuClick(menu) { |
|||
if (!menu.list || menu.list.length === 0) { |
|||
this.gotoRouteHandle(menu) |
|||
} |
|||
}, |
|||
|
|||
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由 |
|||
gotoRouteHandle(menu) { |
|||
console.log('点击菜单:', menu.name, 'menuId:', menu.menuId) |
|||
console.log('动态路由数量:', this.dynamicMenuRoutes.length) |
|||
|
|||
var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId) |
|||
console.log('匹配到的路由:', route) |
|||
|
|||
if (route.length >= 1) { |
|||
console.log('跳转到路由:', route[0].name) |
|||
this.$router.push({ name: route[0].name }) |
|||
this.hideSubMenu() |
|||
} else { |
|||
console.warn('未找到对应的路由，menuId:', menu.menuId) |
|||
// 尝试其他跳转方式 |
|||
if (menu.url) { |
|||
console.log('尝试使用URL跳转:', menu.url) |
|||
this.$router.push(menu.url) |
|||
this.hideSubMenu() |
|||
} else { |
|||
this.$message.warning(`菜单 "${menu.name}" 暂无对应页面`) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 搜索菜单 |
|||
searchMenu1() { |
|||
if (this.search == '') { |
|||
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId != 999) |
|||
} else { |
|||
// 搜索逻辑保持原有实现 |
|||
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId != 999) |
|||
|
|||
this.list = this.treeFindPath(this.menuList) |
|||
let list = this.treeFindPath(this.menuList) |
|||
list = this.distinct(list, list) |
|||
|
|||
this.menuList = list.filter(item => item.name.indexOf(this.search) != -1) |
|||
let menuSum = [] |
|||
for (let data of this.menuList) { |
|||
menuSum.push(data) |
|||
this.getParent(data.parentId, menuSum) |
|||
} |
|||
menuSum = Array.from(new Set([...menuSum])) |
|||
|
|||
if (menuSum.length > 0) { |
|||
let menuList = menuSum.filter(item => item.parentId == 0) |
|||
this.menuList = menuList |
|||
this.treeList(menuList, menuSum) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 获取父节点 |
|||
getParent(val, sum) { |
|||
if (val == 0) { |
|||
return |
|||
} |
|||
let parent = this.list.filter(item => item.menuId == val) |
|||
if (parent.length > 0) { |
|||
parent[0].list.length = 0 |
|||
sum.push(parent[0]) |
|||
this.getParent(parent[0].parentId, sum) |
|||
} |
|||
}, |
|||
|
|||
// 封装树形结构 |
|||
treeList(menuList, menuSum) { |
|||
for (let m1 of menuList) { |
|||
for (let m2 of menuSum) { |
|||
if (m1.menuId == m2.parentId) { |
|||
m1.list.push(m2) |
|||
this.treeList(m1.list, menuSum) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 树结构菜单转换list |
|||
treeFindPath(tree, path = []) { |
|||
if (!tree) return [] |
|||
for (const data of tree) { |
|||
path.push(data) |
|||
this.treeFindPath(data.list, path) |
|||
} |
|||
return path |
|||
}, |
|||
|
|||
// 去重 |
|||
distinct(a, b) { |
|||
return Array.from(new Set([...a, ...b])) |
|||
}, |
|||
|
|||
// 递归获取所有叶子节点菜单（没有子菜单的菜单项） |
|||
getAllLeafMenus(menu) { |
|||
const leafMenus = [] |
|||
|
|||
function collectLeafMenus(menuItem) { |
|||
if (!menuItem.list || menuItem.list.length === 0) { |
|||
// 没有子菜单，是叶子节点 |
|||
leafMenus.push(menuItem) |
|||
} else { |
|||
// 有子菜单，递归处理 |
|||
menuItem.list.forEach(child => { |
|||
collectLeafMenus(child) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
collectLeafMenus(menu) |
|||
return leafMenus |
|||
}, |
|||
|
|||
// 路由操作 |
|||
routeHandle(route) { |
|||
if (route.meta.isTab) { |
|||
var tab = this.mainTabs.filter(item => item.name === route.name)[0] |
|||
if (!tab) { |
|||
if (route.meta.isDynamic) { |
|||
route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0] |
|||
if (!route) { |
|||
return console.error('未能找到可用标签页!') |
|||
} |
|||
} |
|||
tab = { |
|||
menuId: route.meta.menuId || route.name, |
|||
name: route.name, |
|||
title: route.meta.title, |
|||
type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module', |
|||
iframeUrl: route.meta.iframeUrl || '', |
|||
params: route.params, |
|||
query: route.query |
|||
} |
|||
this.mainTabs = this.mainTabs.concat(tab) |
|||
} |
|||
this.menuActiveName = tab.menuId + '' |
|||
this.mainTabsActiveName = tab.name |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.site-sidebar-hover { |
|||
position: fixed; |
|||
top: 32px; |
|||
left: 0; |
|||
bottom: 0; |
|||
z-index: 1020; |
|||
width: 230px; |
|||
background-color: #263238; |
|||
overflow: hidden; |
|||
transition: width 0.3s ease; |
|||
|
|||
&.site-sidebar--fold { |
|||
width: 64px; |
|||
|
|||
.site-sidebar__inner { |
|||
width: 64px; |
|||
} |
|||
|
|||
// 折叠菜单项样式 |
|||
.main-menu-item.folded-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 14px 0; |
|||
transition: all 0.3s; |
|||
|
|||
.sidebar-menu-icon { |
|||
width: 20px !important; |
|||
height: 20px !important; |
|||
font-size: 26px !important; |
|||
line-height: 32px !important; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
// 针对 svg 图标的控制 |
|||
svg { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
} |
|||
|
|||
.menu-title { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
// 子菜单图标样式（如有） |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
|
|||
.site-sidebar__inner { |
|||
position: relative; |
|||
z-index: 1; |
|||
width: 230px; |
|||
height: 100%; |
|||
padding: 10px 0; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.sidebar-search { |
|||
padding: 0 15px 10px; |
|||
border-bottom: 1px solid #37474f; |
|||
margin-bottom: 10px; |
|||
|
|||
.el-input__inner { |
|||
background: #37474f; |
|||
border: none; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
|
|||
&::placeholder { |
|||
color: #8a979e; |
|||
} |
|||
} |
|||
|
|||
.el-icon-search { |
|||
color: #8a979e; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sidebar-home-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 12px 20px; |
|||
color: #8a979e; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
|
|||
&:hover { |
|||
background-color: #37474f; |
|||
color: #fff; |
|||
} |
|||
|
|||
.sidebar-menu-icon { |
|||
width: 20px; |
|||
margin-right: 10px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.sidebar-main-menu { |
|||
.main-menu-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 14px 20px; |
|||
color: #8a979e; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
position: relative; |
|||
border-radius: 0 25px 25px 0; |
|||
margin: 2px 0; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
width: 0; |
|||
background: linear-gradient(135deg, #17B3A3, #0BB2D4); |
|||
transition: width 0.3s ease; |
|||
} |
|||
|
|||
&:hover { |
|||
background: linear-gradient(135deg, rgba(23, 179, 163, 0.1), rgba(11, 178, 212, 0.1)); |
|||
color: #fff; |
|||
transform: translateX(5px); |
|||
|
|||
&::before { |
|||
width: 4px; |
|||
} |
|||
|
|||
.menu-arrow { |
|||
transform: translateX(5px); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
&.favorite-menu { |
|||
border-top: 1px solid #37474f; |
|||
margin-top: 15px; |
|||
padding-top: 18px; |
|||
|
|||
&::after { |
|||
content: '★'; |
|||
position: absolute; |
|||
right: 35px; |
|||
color: #ffd700; |
|||
font-size: 12px; |
|||
opacity: 0.7; |
|||
} |
|||
} |
|||
|
|||
.sidebar-menu-icon { |
|||
width: 24px; |
|||
margin-right: 12px; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
color: inherit; |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.menu-title { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.menu-arrow { |
|||
font-size: 14px; |
|||
opacity: 0.6; |
|||
transition: all 0.3s ease; |
|||
color: #17B3A3; |
|||
} |
|||
|
|||
&:hover .sidebar-menu-icon { |
|||
transform: scale(1.1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hover-submenu { |
|||
position: fixed; |
|||
z-index: 1030; |
|||
background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%); |
|||
border: 1px solid #dee2e6; |
|||
border-radius: 8px; |
|||
box-shadow: |
|||
0 8px 32px 0 rgba(0, 0, 0, 0.12), |
|||
0 2px 8px 0 rgba(0, 0, 0, 0.08), |
|||
0 0 0 1px rgba(255, 255, 255, 0.05); |
|||
min-width: 900px; |
|||
max-width: 1200px; |
|||
max-height: 600px; |
|||
overflow-y: auto; |
|||
backdrop-filter: blur(10px); |
|||
-webkit-backdrop-filter: blur(10px); |
|||
|
|||
.submenu-content { |
|||
padding: 25px; |
|||
|
|||
.submenu-title { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: #303133; |
|||
margin-bottom: 20px; |
|||
padding-bottom: 12px; |
|||
border-bottom: 2px solid #17B3A3; |
|||
position: relative; |
|||
|
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: -2px; |
|||
left: 0; |
|||
width: 60px; |
|||
height: 2px; |
|||
background: linear-gradient(90deg, #17B3A3, #0BB2D4); |
|||
} |
|||
} |
|||
|
|||
.submenu-items { |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
gap: 20px; |
|||
|
|||
.submenu-category { |
|||
min-height: 60px; // 确保每个分类都有最小高度 |
|||
|
|||
.category-title { |
|||
font-size: 15px; |
|||
font-weight: 600; |
|||
color: #17B3A3; |
|||
margin-bottom: 12px; |
|||
padding-bottom: 8px; |
|||
border-bottom: 1px solid #e8f4f8; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -1px; |
|||
width: 30px; |
|||
height: 1px; |
|||
background: #17B3A3; |
|||
} |
|||
} |
|||
|
|||
.category-items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 6px; |
|||
|
|||
.sub-category { |
|||
margin: 8px 0; |
|||
padding-left: 12px; |
|||
border-left: 2px solid #e8f4f8; |
|||
|
|||
.sub-category-title { |
|||
font-size: 13px; |
|||
font-weight: 600; |
|||
color: #606266; |
|||
margin-bottom: 6px; |
|||
padding-bottom: 4px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.sub-category-items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 4px; |
|||
} |
|||
} |
|||
|
|||
.submenu-link { |
|||
display: inline-block; |
|||
padding: 8px 12px; |
|||
color: #606266; |
|||
font-size: 13px; |
|||
font-weight: 600; |
|||
cursor: pointer; |
|||
border-radius: 4px; |
|||
transition: all 0.3s ease; |
|||
position: relative; |
|||
|
|||
&:hover { |
|||
background: linear-gradient(135deg, #f0f9ff, #e0f7fa); |
|||
color: #17B3A3; |
|||
transform: translateX(3px); |
|||
box-shadow: 0 2px 8px rgba(23, 179, 163, 0.15); |
|||
} |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 0; |
|||
height: 2px; |
|||
background: #17B3A3; |
|||
transition: width 0.3s ease; |
|||
} |
|||
|
|||
&:hover::before { |
|||
width: 3px; |
|||
} |
|||
|
|||
&.sub-link { |
|||
font-size: 12px; |
|||
font-weight: 400; |
|||
padding: 6px 10px; |
|||
margin-left: 8px; |
|||
// background: rgba(23, 179, 163, 0.05); |
|||
border-radius: 3px; |
|||
|
|||
&:hover { |
|||
background: rgba(23, 179, 163, 0.1); |
|||
transform: translateX(2px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// 添加进入动画 |
|||
animation: slideInRight 0.3s ease-out; |
|||
} |
|||
|
|||
@keyframes slideInRight { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateX(-20px); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
// 深色主题样式 |
|||
.site-sidebar--dark { |
|||
background-color: #263238; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue