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>
<div class="box">
<t-menu
v-model:expanded="expanded"
theme="light"
default-value="3-2"
expand-mutex
:collapsed="collapsed"
>
<t-submenu value="3">
<t-menu>
<t-submenu value="1" title="财务票据管理">
<template #icon>
<t-icon name="mail" />
<t-icon name="application" />
</template>
<template #title>
<span>消息区</span>
</template>
<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-menu-item value="1-1" to="/Bill/BillStock">
<span>菜单二</span>
</t-menu-item>
</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>
</div>
</template>
<script setup>
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>
<script setup></script>
<style lang="less" scoped>
.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";
const financeBillManage = [
{
path: "/Bill",
name: "bill",
component: BillManage,
// meta: { title: "票据管理", name: "resource" },
// children: [
// {
// path: "BillStock",
// name: "billStock",
// component: BillManage,
// meta: {
// title: "票据上传",
// },
// },
// ],
component: Layout,
meta: { title: "票据管理", name: "resource" },
children: [
{
path: "BillStock",
name: "billStock",
component: BillManage,
meta: {
title: "票据上传",
},
},
],
},
];

2
src/style/index.css
View File

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