hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-12 12:26:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

style:修改左侧导航及头部导航栏,创建左侧导航相关页面

Browse Source
This commit is contained in:
李晓鸽
2022-10-08 10:20:21 +08:00
parent f416bb7da8
commit 8cb03598cc
31 changed files with 3277 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

620
src/components/NavLeft.vue
View File

@@ -18,203 +18,373 @@
style="width: 100%; margin-top: 26px"
:style="{ display: packup ? 'none' : 'block' }"
>
<el-row class="tac">
<el-col :span="12">
<el-menu
default-active="1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item index="1">
<div class="imgBox">
<img
style="width: 20px; height: 18px"
src="../assets/images/navleft/studyPath.png"
/>
</div>
<span class="title">学习路径</span>
</el-menu-item>
<el-sub-menu index="2">
<template #title>
<div class="imgBox">
<img
style="width: 15px; height: 15px"
src="../assets/images/navleft/project.png"
/>
</div>
<span class="title">项目中心</span>
</template>
<el-menu-item index="2-1">
<div class="circle"></div>
<span>项目</span>
</el-menu-item>
<el-menu-item index="2-2">
<div class="circleActive"></div>
<span>模板库</span>
</el-menu-item>
</el-sub-menu>
<a-menu
id="dddddd"
:open-keys="openKeys"
:selectedKeys="selectedKeys"
style="width: 208px"
mode="inline"
@openChange="onOpenChange"
@select="selectItem"
>
<a-menu-item key="sub1" @titleClick="titleClick">
<div class="imgBox">
<img
style="width: 20px; height: 18px"
src="../assets/images/navleft/studyPath.png"
/>
</div>
<router-link to="/learningpath">学习路径</router-link>
</a-menu-item>
<el-sub-menu index="3">
<template #title>
<div class="imgBox">
<img
style="width: 18px; height: 15px"
src="../assets/images/navleft/course.png"
/>
</div>
<span class="title">课程库</span>
</template>
<el-menu-item index="3-1">
<div class="circle"></div>
<span>课件管理</span>
</el-menu-item>
<el-menu-item index="3-2">
<div class="circleActive"></div>
<span>课程管理</span>
</el-menu-item>
</el-sub-menu>
<a-sub-menu key="sub2" @titleClick="titleClick">
<template #icon>
<div class="imgBox">
<img
style="width: 15px; height: 15px"
src="../assets/images/navleft/project.png"
/>
</div>
</template>
<template #title>项目中心</template>
<a-menu-item key="sub2-1">
<span
:class="{
circleActive: selectedKeys[0] === 'sub2-1' ? true : false,
circle: selectedKeys[0] === 'sub2-1' ? false : true,
}"
></span>
<router-link to="/projectmanage">项目</router-link>
</a-menu-item>
<a-menu-item key="sub2-2">
<span
:class="{
circleActive: selectedKeys[0] === 'sub2-2' ? true : false,
circle: selectedKeys[0] === 'sub2-2' ? false : true,
}"
></span>
<router-link to="/templatelibrary">模板库</router-link>
</a-menu-item>
</a-sub-menu>
<el-menu-item index="4">
<div class="imgBox">
<img
style="width: 19px; height: 19px"
src="../assets/images/navleft/exam.png"
/>
</div>
<span class="title">考试中心</span>
</el-menu-item>
<a-sub-menu key="sub3">
<template #icon>
<div class="imgBox">
<img
style="width: 18px; height: 15px"
src="../assets/images/navleft/course.png"
/>
</div>
</template>
<template #title>课程库</template>
<a-menu-item key="sub3-1">
<span
:class="{
circleActive: selectedKeys[0] === 'sub3-1' ? true : false,
circle: selectedKeys[0] === 'sub3-1' ? false : true,
}"
></span>
<router-link to="/coursemanage">课件管理</router-link>
</a-menu-item>
<a-menu-item key="sub3-2">
<span
:class="{
circleActive: selectedKeys[0] === 'sub3-2' ? true : false,
circle: selectedKeys[0] === 'sub3-2' ? false : true,
}"
></span>
<router-link to="/coursewaremanage">课程管理</router-link>
</a-menu-item>
</a-sub-menu>
<el-menu-item index="5">
<div class="imgBox">
<img
style="width: 16px; height: 16px"
src="../assets/images/navleft/survey.png"
/>
</div>
<span class="title">调研管理</span>
</el-menu-item>
<a-menu-item key="sub4" @titleClick="titleClick">
<div class="imgBox">
<img
style="width: 19px; height: 19px"
src="../assets/images/navleft/exam.png"
/>
</div>
<span>考试中心</span>
</a-menu-item>
<el-menu-item index="6">
<div class="imgBox">
<img
style="width: 17px; height: 15px"
src="../assets/images/navleft/report.png"
/>
</div>
<span class="title">报表中心</span>
</el-menu-item>
<el-menu-item index="7">
<div class="imgBox">
<img
style="width: 17px; height: 18px"
src="../assets/images/navleft/teacher.png"
/>
</div>
<span class="title">教师管理</span>
</el-menu-item>
<el-menu-item index="8">
<div class="imgBox">
<img
style="width: 20px; height: 20px"
src="../assets/images/navleft/certificate.png"
/>
</div>
<span class="title">证书中心</span>
</el-menu-item>
<el-menu-item index="9">
<div class="imgBox">
<img
style="width: 19px; height: 18px"
src="../assets/images/navleft/system.png"
/>
</div>
<span class="title">系统管理</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
<a-menu-item key="sub5" @titleClick="titleClick">
<div class="imgBox">
<img
style="width: 16px; height: 16px"
src="../assets/images/navleft/survey.png"
/>
</div>
<span>调研管理</span>
</a-menu-item>
<a-menu-item key="sub6" @titleClick="titleClick">
<div class="imgBox">
<img
style="width: 17px; height: 15px"
src="../assets/images/navleft/report.png"
/>
</div>
<span>报表中心</span>
</a-menu-item>
<a-menu-item key="sub7" @titleClick="titleClick">
<div class="imgBox">
<img
style="width: 17px; height: 18px"
src="../assets/images/navleft/teacher.png"
/>
</div>
<span>教师管理</span>
</a-menu-item>
<a-menu-item key="sub8" @titleClick="titleClick">
<div class="imgBox">
<img
style="width: 20px; height: 20px"
src="../assets/images/navleft/certificate.png"
/>
</div>
<span>证书中心</span>
</a-menu-item>
<a-menu-item key="sub9" @titleClick="titleClick">
<div class="imgBox">
<img
style="width: 19px; height: 18px"
src="../assets/images/navleft/system.png"
/>
</div>
<span>系统管理</span>
</a-menu-item>
</a-menu>
</div>
<div
style="width: 100%; margin-top: 26px"
:style="{ display: packup ? 'block' : 'none' }"
class="packupMenu"
>
<el-row class="tac">
<el-col :span="12">
<el-menu
default-active="1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item index="1">
<span class="title">学习</span>
</el-menu-item>
<el-menu-item index="2">
<span class="title">项目</span>
</el-menu-item>
<el-menu-item index="3">
<span class="title">课程</span>
</el-menu-item>
<a-menu
id="dddddd"
v-model:openKeys="openKeys2"
v-model:selectedKeys="selectedKeys2"
style="width: 100px"
mode="inline"
@click="handleClick"
>
<a-menu-item key="sub1" @titleClick="titleClick">
<router-link to="/learningpath">学习</router-link>
</a-menu-item>
<el-menu-item index="4">
<span class="title">考试</span>
</el-menu-item>
<a-menu-item key="sub2" @titleClick="titleClick">
<router-link to="/projectmanage">项目</router-link>
</a-menu-item>
<el-menu-item index="5">
<span class="title">调研</span>
</el-menu-item>
<a-menu-item key="sub3" @titleClick="titleClick">
<router-link to="/coursewaremanage">课程</router-link>
</a-menu-item>
<el-menu-item index="6">
<span class="title">报表</span>
</el-menu-item>
<el-menu-item index="7">
<span class="title">教师</span>
</el-menu-item>
<el-menu-item index="8">
<span class="title">证书</span>
</el-menu-item>
<el-menu-item index="9">
<span class="title">系统</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
<a-menu-item key="sub4" @titleClick="titleClick">
<span>考试</span>
</a-menu-item>
<a-menu-item key="sub5" @titleClick="titleClick">
<span>调研</span>
</a-menu-item>
<a-menu-item key="sub6" @titleClick="titleClick">
<span>报表</span>
</a-menu-item>
<a-menu-item key="sub7" @titleClick="titleClick">
<span>教师</span>
</a-menu-item>
<a-menu-item key="sub8" @titleClick="titleClick">
<span>证书</span>
</a-menu-item>
<a-menu-item key="sub9" @titleClick="titleClick">
<span>系统</span>
</a-menu-item>
</a-menu>
</div>
</div>
</template>
<script>
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
name: "NavLeft",
setup() {
const store = useStore();
const state = reactive({
packup: false,
screenHeight: document.body.clientHeight, // 屏幕高度
rootSubmenuKeys: [
"sub1",
"sub2",
"sub3",
"sub4",
"sub5",
"sub6",
"sub7",
"sub8",
"sub9",
],
openKeys: localStorage.getItem("openKeys")
? JSON.parse(localStorage.getItem("openKeys"))
: ["sub1"], //默认打开以及打开的一级导航
selectedKeys: localStorage.getItem("selectedKeys")
? JSON.parse(localStorage.getItem("selectedKeys"))
: ["sub1"], //默认选择以及选择的二级导航
openKeys2: localStorage.getItem("openKeys")
? JSON.parse(localStorage.getItem("openKeys"))
: ["sub1"], //默认打开以及打开的一级导航
selectedKeys2: localStorage.getItem("openKeys")
? JSON.parse(localStorage.getItem("openKeys"))
: ["sub1"], //默认选择以及选择的二级导航
keysList: [
{
href: "/learningpath",
openKeys: "sub1",
selectedKeys: "sub1",
pagename: "学习路径",
},
{
href: "/projectmanage",
openKeys: "sub2",
selectedKeys: "sub2-1",
pagename: "项目",
},
{
href: "/projectadd",
openKeys: "sub2",
selectedKeys: "sub2-1",
pagename: "创建项目",
},
{
href: "/templatelibrary",
openKeys: "sub2",
selectedKeys: "sub2-2",
pagename: "模板库",
},
{
href: "/coursemanage",
openKeys: "sub3",
selectedKeys: "sub3-1",
pagename: "课件管理",
},
{
href: "/coursewaremanage",
openKeys: "sub3",
selectedKeys: "sub3-2",
pagename: "课程管理",
},
],
});
const handleOpen = (key, keyPath) => {
console.log(key, keyPath);
// console.log(state.openKeys, state.selectedKeys);
const onOpenChange = (openKeys) => {
const latestOpenKey = openKeys.find(
(key) => state.openKeys.indexOf(key) === -1
);
if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
state.openKeys = openKeys;
} else {
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
}
};
const handleClose = (key, keyPath) => {
console.log(key, keyPath);
const selectItem = (e) => {
// console.log("onSelect", e, );
let arr = state.keysList;
arr.map((value) => {
if (e.key === value.selectedKeys) {
localStorage.setItem("openKeys", JSON.stringify([value.openKeys]));
localStorage.setItem(
"selectedKeys",
JSON.stringify([value.selectedKeys])
);
state.openKeys = [value.openKeys];
state.selectedKeys = [value.selectedKeys];
state.openKeys2 = [value.openKeys];
state.selectedKeys2 = [value.openKeys];
}
});
};
const route = useRoute();
watch(
() => route.fullPath,
(n) => {
console.log("监听路由", n, store.state.openpages);
// console.log("new:" + n.toLowerCase() + ",old:" + o);
let arr = state.keysList;
arr.map((value) => {
if (n.toLowerCase() === value.href) {
localStorage.setItem("openKeys", JSON.stringify([value.openKeys]));
localStorage.setItem(
"selectedKeys",
JSON.stringify([value.selectedKeys])
);
state.openKeys = [value.openKeys];
state.selectedKeys = [value.selectedKeys];
state.openKeys2 = [value.openKeys];
state.selectedKeys2 = [value.openKeys];
}
});
let openpages = store.state.openpages;
for (let i = 0; i < openpages.length; i++) {
openpages[i].active = false;
}
for (let i = 0; i < openpages.length; i++) {
openpages[i].active = false;
if (n.toLowerCase() === openpages[i].href) {
console.log("已存在", openpages[i]);
openpages[i].active = true;
break;
} else {
if (i === openpages.length - 1) {
let pagename = state.keysList.filter((a) => {
return a.href === n.toLowerCase();
});
if (pagename && pagename.length !== 0) {
let obj = {
pagename: pagename[0].pagename,
href: n.toLowerCase(),
active: true,
};
openpages.push(obj);
}
}
}
}
localStorage.setItem("openpages", JSON.stringify(openpages));
store.commit("chengeOpenpages", openpages);
// store.getters.chengeOpenpages(openpages)
}
);
const packUp = () => {
state.packup = !state.packup;
};
const getMousePosition = () => {
state.screenHeight = document.body.clientHeight;
};
onMounted(() => {
// console.log("11111", 1);
window.addEventListener("resize", getMousePosition, false);
// judgeUrl();
});
onUnmounted(() => {
window.removeEventListener("resize", getMousePosition, false);
});
return {
...toRefs(state),
handleOpen,
handleClose,
onOpenChange,
selectItem,
packUp,
};
},
@@ -227,6 +397,7 @@ export default {
background: linear-gradient(0deg, #a9e9f7 0%, #388be1 73%);
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
// margin-top: -50px;
flex-shrink: 0;
.packup {
width: 19px;
height: 15px;
@@ -234,21 +405,57 @@ export default {
margin-right: 14px;
cursor: pointer;
}
//修改导航栏大小
.el-row {
width: 100%;
}
.el-col-12 {
width: 100%;
max-width: 100%;
flex: 1;
}
//修改导航栏背景颜色
.el-menu {
background-color: rgba(56, 139, 225, 0);
//修改导航栏背景颜色
.ant-menu {
background-color: rgba(56, 139, 225, 0);
border: none;
box-shadow: none;
}
//图标和字放在一行
.ant-menu-title-content {
display: flex;
align-items: center;
}
.packupMenu .ant-menu-title-content {
display: flex;
align-items: center;
justify-content: center;
}
//修改导航文字颜色
.ant-menu-title-content {
padding: 0px !important;
// padding-left: 27px !important;
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
border-right: 3px solid rgba(255, 255, 255, 0);
margin-left: 0 !important;
}
.ant-menu-item a,
.ant-menu-item a:hover {
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
}
//修改二级导航背景色
.ant-menu-sub.ant-menu-inline {
background-color: rgba(56, 139, 225, 0);
border: none;
box-shadow: none;
}
//修改左侧padding
.ant-menu-item,
.ant-menu-submenu-title {
padding-left: 27px !important;
height: 49px !important;
line-height: 49px !important;
margin: 0px !important;
}
//左侧图标
.imgBox {
width: 20px;
@@ -256,70 +463,49 @@ export default {
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.title {
margin-left: 12px;
margin-top: 1px;
.ant-menu-submenu-arrow {
color: rgba(255, 255, 255, 1) !important;
right: 14px !important;
}
//修改一级导航文字颜色
.el-sub-menu__title {
padding: 0px !important;
padding-left: 27px !important;
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
border-right: 3px solid rgba(255, 255, 255, 0);
}
//修改箭头图标位置
.el-sub-menu .el-sub-menu__icon-arrow {
right: 14px;
}
//修改箭头图标大小
.el-icon svg {
font-weight: 800;
font-size: 16px;
}
// 鼠标划上背景颜色
.el-sub-menu__title:hover {
// .ant-menu-submenu-active .ant-menu-submenu-arrow {
// right: 11px !important;
// }
//划上背景
.ant-menu-item-active {
background: rgba(236, 245, 255, 0.43) !important;
border-right: 3px solid rgba(255, 255, 255, 1);
}
// 鼠标划上背景颜色
.el-menu-item:hover {
//选中背景
.ant-menu-item-selected {
background: rgba(236, 245, 255, 0.43) !important;
border-right: 3px solid rgba(255, 255, 255, 1);
}
// 点击选中背景色
.el-menu-item.is-active {
background: rgba(236, 245, 255, 0.43) !important;
border-right: 3px solid rgba(255, 255, 255, 1);
}
.el-menu-item {
height: 49px;
padding: 0px !important;
padding-left: 27px !important;
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
border-right: 3px solid rgba(255, 255, 255, 0);
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
border-right: 0px;
}
.circle {
width: 10px;
height: 10px;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 1);
margin-left: 24px;
margin-right: 18px;
display: inline-block;
}
.circleActive {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 1);
margin-left: 24px;
margin-right: 18px;
}
.circleActive {
width: 6px;
height: 6px;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 1);
margin-left: 24px;
margin-right: 18px;
display: inline-block;
}
}
</style>