mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 03:46:45 +08:00
781 lines
24 KiB
Vue
781 lines
24 KiB
Vue
<template>
|
|
<div
|
|
class="navLeft"
|
|
:style="{
|
|
width: packup ? '100px' : '208px',
|
|
'min-height': screenHeight - 80 + 'px',
|
|
}"
|
|
>
|
|
<div style="display: flex; justify-content: flex-end">
|
|
<img
|
|
class="packup"
|
|
src="../assets/images/navleft/packup.png"
|
|
@click="packUp"
|
|
:style="{ 'margin-right': packup ? '36px' : '14px' }"
|
|
/>
|
|
</div>
|
|
<div
|
|
style="width: 100%; margin-top: 26px"
|
|
:style="{ display: packup ? 'none' : 'block' }"
|
|
>
|
|
<a-menu
|
|
id="dddddd"
|
|
:open-keys="openKeys"
|
|
:selectedKeys="selectedKeys"
|
|
style="width: 208px"
|
|
mode="inline"
|
|
@openChange="onOpenChange"
|
|
@select="selectItem"
|
|
>
|
|
<a-sub-menu key="sub10" @titleClick="titleClick">
|
|
<template #icon>
|
|
<div class="imgBox">
|
|
<img
|
|
style="width: 22px; height: 22px"
|
|
src="../assets/images/navleft/review.png"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #title>审核管理</template>
|
|
<a-menu-item key="sub10-1">
|
|
<span
|
|
:class="{
|
|
circleActive: selectedKeys[0] === 'sub10-1' ? true : false,
|
|
circle: selectedKeys[0] === 'sub10-1' ? false : true,
|
|
}"
|
|
></span>
|
|
<router-link to="/coursereviewedn">待审核课程</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub10-2">
|
|
<span
|
|
:class="{
|
|
circleActive: selectedKeys[0] === 'sub10-2' ? true : false,
|
|
circle: selectedKeys[0] === 'sub10-2' ? false : true,
|
|
}"
|
|
></span>
|
|
<router-link to="/coursereviewed">已审核课程</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub10-3">
|
|
<span
|
|
:class="{
|
|
circleActive: selectedKeys[0] === 'sub10-3' ? true : false,
|
|
circle: selectedKeys[0] === 'sub10-3' ? false : true,
|
|
}"
|
|
></span>
|
|
<router-link to="/projectreviewedn">待审核项目</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub10-4">
|
|
<span
|
|
:class="{
|
|
circleActive: selectedKeys[0] === 'sub10-4' ? true : false,
|
|
circle: selectedKeys[0] === 'sub10-4' ? false : true,
|
|
}"
|
|
></span>
|
|
<router-link to="/projectreviewed">已审核项目</router-link>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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="/coursewaremanage">面授管理</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="/onlinemanage">在线管理</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub3-3">
|
|
<span
|
|
:class="{
|
|
circleActive: selectedKeys[0] === 'sub3-3' ? true : false,
|
|
circle: selectedKeys[0] === 'sub3-3' ? false : true,
|
|
}"
|
|
></span>
|
|
<router-link to="/coursemanage">课件管理</router-link>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
<!-- 2022-12-10注释 后面放开 -->
|
|
<!-- <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> -->
|
|
<a-menu-item key="sub5" @titleClick="titleClick">
|
|
<div class="imgBox">
|
|
<img
|
|
style="width: 16px; height: 16px"
|
|
src="../assets/images/navleft/survey.png"
|
|
/>
|
|
</div>
|
|
<router-link to="/researchmanage">评估管理</router-link>
|
|
</a-menu-item>
|
|
<!-- 2022-12-10注释 后面放开 -->
|
|
<!-- <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> -->
|
|
<!-- 2022-12-10注释 后面放开 -->
|
|
<!-- <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> -->
|
|
<!-- 2022-12-10注释 后面放开 -->
|
|
<!-- <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> -->
|
|
<!-- <router-link to="/systemmanage">系统管理</router-link> -->
|
|
<!-- </a-menu-item> -->
|
|
|
|
<a-sub-menu key="sub11" @titleClick="titleClick">
|
|
<template #icon>
|
|
<div class="imgBox">
|
|
<img
|
|
style="width: 16px; height: 16px"
|
|
src="../assets/images/navleft/test.png"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #title>考试</template>
|
|
<a-menu-item key="sub11-1">
|
|
<span
|
|
:class="{
|
|
circleActive: selectedKeys[0] === 'sub11-1' ? true : false,
|
|
circle: selectedKeys[0] === 'sub11-1' ? false : true,
|
|
}"
|
|
></span>
|
|
<router-link to="/questionmanage">试题管理</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub11-2">
|
|
<span
|
|
:class="{
|
|
circleActive: selectedKeys[0] === 'sub11-2' ? true : false,
|
|
circle: selectedKeys[0] === 'sub11-2' ? false : true,
|
|
}"
|
|
></span>
|
|
<router-link to="/papermanage">试卷管理</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub11-3">
|
|
<span
|
|
:class="{
|
|
circleActive: selectedKeys[0] === 'sub11-3' ? true : false,
|
|
circle: selectedKeys[0] === 'sub11-3' ? false : true,
|
|
}"
|
|
></span>
|
|
<router-link to="/examinationcenter">考试管理</router-link>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
<a-menu-item key="sub12" @titleClick="titleClick">
|
|
<div class="imgBox">
|
|
<img
|
|
style="width: 20px; height: 20px"
|
|
src="../assets/images/navleft/case.png"
|
|
/>
|
|
</div>
|
|
<router-link to="/casemanage">案例管理</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub13" @titleClick="titleClick">
|
|
<div class="imgBox">
|
|
<img
|
|
style="width: 20px; height: 20px"
|
|
src="../assets/images/navleft/article.png"
|
|
/>
|
|
</div>
|
|
<router-link to="/articlemanage">文章管理</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub14" @titleClick="titleClick">
|
|
<div class="imgBox">
|
|
<img
|
|
style="width: 20px; height: 20px"
|
|
src="../assets/images/navleft/qa.png"
|
|
/>
|
|
</div>
|
|
<router-link to="/qamanage">问答管理</router-link>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</div>
|
|
<div
|
|
style="width: 100%; margin-top: 26px"
|
|
:style="{ display: packup ? 'block' : 'none' }"
|
|
class="packupMenu"
|
|
>
|
|
<a-menu
|
|
id="dddddd"
|
|
v-model:openKeys="openKeys2"
|
|
v-model:selectedKeys="selectedKeys2"
|
|
style="width: 100px"
|
|
mode="inline"
|
|
@click="handleClick"
|
|
>
|
|
<a-menu-item key="sub10" @titleClick="titleClick">
|
|
<router-link to="/coursereviewedn">审核</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub1" @titleClick="titleClick">
|
|
<router-link to="/learningpath">学习</router-link>
|
|
</a-menu-item>
|
|
|
|
<a-menu-item key="sub2" @titleClick="titleClick">
|
|
<router-link to="/projectmanage">项目</router-link>
|
|
</a-menu-item>
|
|
|
|
<a-menu-item key="sub3" @titleClick="titleClick">
|
|
<router-link to="/coursewaremanage">课程</router-link>
|
|
</a-menu-item>
|
|
<!-- 2022-12-10注释 后面放开 -->
|
|
<!-- <a-menu-item key="sub4" @titleClick="titleClick">
|
|
<span>考试</span>
|
|
</a-menu-item> -->
|
|
|
|
<a-menu-item key="sub5" @titleClick="titleClick">
|
|
<router-link to="/researchmanage">评估</router-link>
|
|
</a-menu-item>
|
|
<!-- 2022-12-10注释 后面放开 -->
|
|
<!-- <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-item key="sub11" @titleClick="titleClick">
|
|
<router-link to="/examinationcenter">考试</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub12" @titleClick="titleClick">
|
|
<router-link to="/casemanage">案例</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub13" @titleClick="titleClick">
|
|
<router-link to="/articlemanage">文章</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="sub14" @titleClick="titleClick">
|
|
<router-link to="/qamanage">问答</router-link>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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",
|
|
"sub10",
|
|
"sub11",
|
|
"sub12",
|
|
"sub13",
|
|
"sub14",
|
|
],
|
|
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: "/coursereviewedn",
|
|
openKeys: "sub10",
|
|
selectedKeys: "sub10-1",
|
|
pagename: "待审核课程",
|
|
},
|
|
{
|
|
href: "/coursereviewed",
|
|
openKeys: "sub10",
|
|
selectedKeys: "sub10-2",
|
|
pagename: "已审核课程",
|
|
},
|
|
{
|
|
href: "/projectreviewedn",
|
|
openKeys: "sub10",
|
|
selectedKeys: "sub10-3",
|
|
pagename: "待审核项目",
|
|
},
|
|
{
|
|
href: "/projectrrviewed",
|
|
openKeys: "sub10",
|
|
selectedKeys: "sub10-4",
|
|
pagename: "已审核项目",
|
|
},
|
|
{
|
|
href: "/learningpath",
|
|
openKeys: "sub1",
|
|
selectedKeys: "sub1",
|
|
pagename: "学习路径图",
|
|
},
|
|
{
|
|
href: "/leveladd",
|
|
openKeys: "sub1",
|
|
selectedKeys: "sub1",
|
|
pagename: "管理",
|
|
},
|
|
{
|
|
href: "/levelcheck",
|
|
openKeys: "sub1",
|
|
selectedKeys: "sub1",
|
|
pagename: "查看",
|
|
},
|
|
{
|
|
href: "/leveladddetail",
|
|
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: "/libraryadd",
|
|
openKeys: "sub2",
|
|
selectedKeys: "sub2-2",
|
|
pagename: "查看",
|
|
},
|
|
{
|
|
href: "/coursewaremanage",
|
|
openKeys: "sub3",
|
|
selectedKeys: "sub3-1",
|
|
pagename: "面授管理",
|
|
},
|
|
{
|
|
href: "/onlinemanage",
|
|
openKeys: "sub3",
|
|
selectedKeys: "sub3-2",
|
|
pagename: "在线管理",
|
|
},
|
|
{
|
|
href: "/coursemanage",
|
|
openKeys: "sub3",
|
|
selectedKeys: "sub3-3",
|
|
pagename: "课件管理",
|
|
},
|
|
{
|
|
href: "/certificatecenter",
|
|
openKeys: "sub8",
|
|
selectedKeys: "sub8",
|
|
pagename: "证书中心",
|
|
},
|
|
|
|
{
|
|
href: "/systemmanage",
|
|
openKeys: "sub9",
|
|
selectedKeys: "sub9",
|
|
pagename: "系统管理",
|
|
},
|
|
{
|
|
href: "/researchmanage",
|
|
openKeys: "sub5",
|
|
selectedKeys: "sub5",
|
|
pagename: "评估管理",
|
|
},
|
|
|
|
{
|
|
href: "/questionmanage",
|
|
openKeys: "sub11",
|
|
selectedKeys: "sub11-1",
|
|
pagename: "试题管理",
|
|
},
|
|
{
|
|
href: "/papermanage",
|
|
openKeys: "sub11",
|
|
selectedKeys: "sub11-2",
|
|
pagename: "试卷管理",
|
|
},
|
|
{
|
|
href: "/examinationcenter",
|
|
openKeys: "sub11",
|
|
selectedKeys: "sub11-3",
|
|
pagename: "考试管理",
|
|
},
|
|
{
|
|
href: "/casemanage",
|
|
openKeys: "sub12",
|
|
selectedKeys: "sub12",
|
|
pagename: "案例管理",
|
|
},
|
|
{
|
|
href: "/articlemanage",
|
|
openKeys: "sub13",
|
|
selectedKeys: "sub13",
|
|
pagename: "文章管理",
|
|
},
|
|
{
|
|
href: "/qamanage",
|
|
openKeys: "sub14",
|
|
selectedKeys: "sub14",
|
|
pagename: "问答管理",
|
|
},
|
|
],
|
|
});
|
|
|
|
// 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 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, state.keysList);
|
|
// 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;
|
|
if (openpages.length === 0) {
|
|
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);
|
|
}
|
|
} else {
|
|
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 getClientHeight = () => {
|
|
state.screenHeight = document.body.clientHeight;
|
|
};
|
|
|
|
onMounted(() => {
|
|
// console.log("11111", 1);
|
|
window.addEventListener("resize", getClientHeight, false);
|
|
// judgeUrl();
|
|
});
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", getClientHeight, false);
|
|
});
|
|
return {
|
|
...toRefs(state),
|
|
onOpenChange,
|
|
selectItem,
|
|
packUp,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.navLeft {
|
|
width: 208px;
|
|
min-height: 100%;
|
|
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;
|
|
margin-top: 23px;
|
|
margin-right: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
//修改导航栏背景颜色
|
|
.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;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
}
|
|
.ant-menu-submenu-arrow {
|
|
color: rgba(255, 255, 255, 1) !important;
|
|
right: 14px !important;
|
|
}
|
|
// .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);
|
|
}
|
|
//选中背景
|
|
.ant-menu-item-selected {
|
|
background: rgba(236, 245, 255, 0.43) !important;
|
|
border-right: 3px solid rgba(255, 255, 255, 1);
|
|
}
|
|
.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;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
</style>
|