sundongyu/dykj-college-back-office-management-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: layout配置二级菜单

Browse Source
This commit is contained in:
ycy 2024-04-06 11:25:56 +08:00
parent f0fc0ae310
commit 923a9ae1ed
3 changed files with 21 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/layout/components/LayoutAside.vue
View File

@ -1,82 +1,19 @@
<template> <template>
<div class="box"> <div class="box">
<t-menu <t-menu>
v-model:expanded="expanded" <t-submenu value="1" title="财务票据管理">
theme="light"
default-value="3-2"
expand-mutex
:collapsed="collapsed"
>
<t-submenu value="3">
<template #icon> <template #icon>
<t-icon name="mail" /> <t-icon name="application" />
</template> </template>
<template #title> <t-menu-item value="1-1" to="/Bill/BillStock">
<span>消息区</span> <span>菜单二</span>
</template> </t-menu-item>
<t-submenu value="3-1" title="二级菜单">
<t-menu-item value="3-1-1"> 三级菜单内容 </t-menu-item>
<t-menu-item value="3-1-2"> 三级菜单内容 </t-menu-item>
<t-menu-item value="3-1-3"> 三级菜单内容 </t-menu-item>
</t-submenu>
<t-submenu value="3-5" title="二级菜单">
<t-menu-item value="3-5-1"> 三级菜单内容 </t-menu-item>
<t-menu-item value="3-5-2"> 三级菜单内容 </t-menu-item>
<t-menu-item value="3-5-3"> 三级菜单内容 </t-menu-item>
</t-submenu>
<t-menu-item value="3-2"> 二级菜单内容 </t-menu-item>
<t-menu-item value="3-3"> 二级菜单内容 </t-menu-item>
<t-menu-item value="3-4"> 二级菜单内容 </t-menu-item>
</t-submenu> </t-submenu>
<t-menu-item value="user-circle">
<template #icon>
<t-icon name="user-circle" />
</template>
个人中心
</t-menu-item>
<t-submenu value="4">
<template #icon>
<t-icon name="play-circle" />
</template>
<template #title>
<span>视频区</span>
</template>
<t-menu-item value="4-1"> 二级菜单内容 </t-menu-item>
<t-menu-item value="4-2"> 二级菜单内容 </t-menu-item>
<t-menu-item value="4-3"> 二级菜单内容 </t-menu-item>
</t-submenu>
<t-menu-item value="edit1">
<template #icon>
<t-icon name="edit-1" />
</template>
资源编辑
</t-menu-item>
<template #operations>
<t-button variant="text" shape="square" @click="changeCollapsed">
<template #icon><t-icon name="view-list" /></template>
</t-button>
</template>
</t-menu> </t-menu>
</div> </div>
</template> </template>
<script setup> <script setup></script>
import { ref } from 'vue'
const collapsed = ref(false)
const collapsed2 = ref(false)
const changeCollapsed = () => {
collapsed.value = !collapsed.value
}
const changeCollapsed2 = () => {
collapsed2.value = !collapsed2.value
}
const expanded = ref(['2', '3'])
const expanded2 = ref(['2'])
</script>
<style lang="less" scoped> <style lang="less" scoped>
.t-demo-collapse-btn { .t-demo-collapse-btn {

26
src/router/modules/financeBillManage.js
View File

@ -1,22 +1,22 @@
import lauout from "@/layout/index.vue"; import Layout from "@/layout/index.vue";
import BillManage from "@/pages/finance-bill-manage/billStock.vue"; import BillManage from "@/pages/finance-bill-manage/billStock.vue";
const financeBillManage = [ const financeBillManage = [
{ {
path: "/Bill", path: "/Bill",
name: "bill", name: "bill",
component: BillManage, component: Layout,
// meta: { title: "票据管理", name: "resource" }, meta: { title: "票据管理", name: "resource" },
// children: [ children: [
// { {
// path: "BillStock", path: "BillStock",
// name: "billStock", name: "billStock",
// component: BillManage, component: BillManage,
// meta: { meta: {
// title: "票据上传", title: "票据上传",
// }, },
// }, },
// ], ],
}, },
]; ];

2
src/style/index.css
View File

@ -186,7 +186,7 @@ pre {
.back-color { .back-color {
background-color: #f5f7fb; background-color: #f5f7fb;
padding: 16px 24px; padding: 16px 24px;
height: calc(100vh - 64px); height: calc(100vh - 128px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }