lbw
fe7128dd4e
- 在admid页面和class页面包裹el-container，插入Sidebar侧边栏组件 - 在LearningPlan和PlanTTS页面同样新增侧边栏布局 - 重构Header组件样式，采用fluent风格透明卡片和按钮样式 - 增加main.css中panel-shell的样式定义以支持新布局视觉效果 - 优化部分按钮及菜单交互样式，提升整体一致性与视觉体验
51 lines
1.5 KiB
Vue
51 lines
1.5 KiB
Vue
<template>
|
|
<div class="h-full p-2">
|
|
<div class="h-full panel-shell">
|
|
<el-menu router :default-active="activePath" class="h-full rounded-xl bg-transparent" :collapse="false">
|
|
<el-menu-item index="/">
|
|
<span>班级列表</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/learningplan">
|
|
<span>学案</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/uploadpng">
|
|
<span>上传图片</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import router from '@/router'
|
|
const route = useRoute()
|
|
const activePath = computed(() => route.path)
|
|
const allRoutes = router.getRoutes()
|
|
const menuItems = computed(() => {
|
|
return allRoutes
|
|
.filter(r => r.meta && r.meta.title)
|
|
.filter(r => !r.path.includes(':'))
|
|
.filter(r => r.path !== '/login')
|
|
.map(r => ({ path: r.path, title: r.meta.title }))
|
|
.sort((a, b) => a.title.localeCompare(b.title, 'zh-CN'))
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Fluent 2 气质的轻盈质感：柔和玻璃、圆角、细描边 */
|
|
.el-menu {
|
|
--el-menu-bg-color: transparent;
|
|
--el-menu-hover-bg-color: rgba(255, 255, 255, 0.35);
|
|
--el-menu-active-color: #2563eb;
|
|
}
|
|
.el-menu-item {
|
|
border-radius: 10px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.el-menu-item:hover {
|
|
backdrop-filter: saturate(1.2);
|
|
}
|
|
</style>
|