<template>
|
<div class="homeBox">
|
<div class="headerBox">
|
<p>数字教材平台</p>
|
</div>
|
<div class="contentBox">
|
<div class="menuBox">
|
<div
|
:class="['menuItem', activeMenu == index ? 'active' : '']"
|
v-for="(item, index) in menuData"
|
:key="index"
|
@click="menuItemClick(index)"
|
>
|
<div class="menuIcon imgBox">
|
<img :src="item.icon" />
|
</div>
|
<p>{{ item.name }}</p>
|
</div>
|
</div>
|
<div class="pageBox"></div>
|
<div class="toolBox">
|
<el-menu default-active="2" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
|
<el-sub-menu index="1">
|
<template #title>
|
<el-icon><location /></el-icon>
|
<span>Navigator One</span>
|
</template>
|
<el-menu-item-group>
|
<template #title><span>Group One</span></template>
|
<el-menu-item index="1-1">item one</el-menu-item>
|
<el-menu-item index="1-2">item two</el-menu-item>
|
</el-menu-item-group>
|
<el-menu-item-group title="Group Two">
|
<el-menu-item index="1-3">item three</el-menu-item>
|
</el-menu-item-group>
|
<el-sub-menu index="1-4">
|
<template #title><span>item four</span></template>
|
<el-menu-item index="1-4-1">item one</el-menu-item>
|
</el-sub-menu>
|
</el-sub-menu>
|
<el-menu-item index="2">
|
<el-icon><icon-menu /></el-icon>
|
<template #title>Navigator Two</template>
|
</el-menu-item>
|
<el-menu-item index="3" disabled>
|
<el-icon><document /></el-icon>
|
<template #title>Navigator Three</template>
|
</el-menu-item>
|
<el-menu-item index="4">
|
<el-icon><setting /></el-icon>
|
<template #title>Navigator Four</template>
|
</el-menu-item>
|
</el-menu>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, watch } from 'vue'
|
import mulu from '@/assets/images/menu/mulu.png'
|
import biji from '@/assets/images/menu/biji.png'
|
import ziyuan from '@/assets/images/menu/ziyuan.png'
|
import zhishitupu from '@/assets/images/menu/zhishitupu.png'
|
import jietu from '@/assets/images/menu/jietu.png'
|
import biaoqian from '@/assets/images/menu/biaoqian.png'
|
import topbg from '@/assets/images/header/top-bg.png'
|
|
// 菜单
|
const menuData = reactive([
|
{
|
name: '目录',
|
icon: mulu
|
},
|
{
|
name: '笔记',
|
icon: biji
|
},
|
{
|
name: '资源',
|
icon: ziyuan
|
},
|
{
|
name: '知识图谱',
|
icon: zhishitupu
|
},
|
{
|
name: '截图',
|
icon: jietu
|
},
|
{
|
name: '标签',
|
icon: biaoqian
|
}
|
])
|
|
// 选中菜单
|
const activeMenu = ref(0)
|
|
// // 监听路由变化，默认选中菜单
|
// watch(
|
// () => router.currentRoute.value,
|
// (newRoute) => {
|
// console.log(newRoute.path)
|
|
// const index = menuData.findIndex((item) => item.router == newRoute.path)
|
// activeMenu.value = index > -1 ? index : 0
|
// }
|
// )
|
|
// 菜单点击
|
const menuItemClick = (index) => {
|
activeMenu.value = index
|
}
|
|
// 右侧工具
|
const isCollapse = ref(false)
|
</script>
|
|
<style lang="less">
|
.homeBox {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.headerBox {
|
height: 48px;
|
background-image: url('@/assets/images/header/top-bg.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
padding: 0 20px;
|
line-height: 48px;
|
p {
|
font-size: 24px;
|
color: #ffffff;
|
letter-spacing: 2px;
|
font-weight: bold;
|
}
|
}
|
.contentBox {
|
overflow: hidden;
|
flex: 1;
|
display: flex;
|
.menuBox {
|
width: 80px;
|
border-right: 1px solid #e6e7e8;
|
padding-bottom: 20px;
|
box-sizing: border-box;
|
.menuItem {
|
text-align: center;
|
line-height: 1;
|
cursor: pointer;
|
padding: 10px 0;
|
&.active,
|
&:hover {
|
background-color: #cfebff;
|
p {
|
color: #0093ff;
|
}
|
}
|
.menuIcon {
|
display: inline-block;
|
width: 32px;
|
height: 32px;
|
margin-bottom: 4px;
|
}
|
}
|
}
|
|
.pageBox {
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
}
|
</style>
|
