hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-16 06:16:46 +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

120
src/components/BreadCrumb.vue
View File

@@ -1,36 +1,130 @@
<template>
<div class="breadcrumb">
<div style="margin-left: 21px">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item
><a href="/">promotion management</a></el-breadcrumb-item
>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
<a-breadcrumb>
<a-breadcrumb-item v-for="(value, index) in list" :key="index">
<router-link
:to="value.href ? value.href : ''"
:style="{ display: value.href ? 'inline-block' : 'none' }"
>{{ value.name }}</router-link
>
<span :style="{ display: value.href ? 'none' : 'inline-block' }">{{
value.name
}}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { reactive, toRefs, watch } from "vue";
import { useRoute } from "vue-router";
export default {
name: "BreadCrumb",
setup() {
const state = reactive({});
const state = reactive({
list: [],
});
const route = useRoute();
watch(
() => route.fullPath,
(n, o) => {
// console.log("监听路由");
console.log("new:" + n + ",old:" + o);
if (n === "/learningpath" || n === "/LearningPath") {
state.list = [
{
name: "学习路径",
href: "",
// href: "#/coursewaremanage",
},
];
}
if (n === "/projectmanage" || n === "/ProjectManage") {
state.list = [
{
name: "项目中心",
href: "",
// href: "#/coursewaremanage",
},
{
name: "项目",
href: "",
},
];
}
if (n === "/projectadd" || n === "/ProjectAdd") {
state.list = [
{
name: "项目",
href: "/projectmanage",
},
{
name: "创建项目",
},
];
}
if (n === "/templatelibrary" || n === "/TemplateLibrary") {
state.list = [
{
name: "项目中心",
},
{
name: "模板库",
},
];
}
if (n === "/coursemanage" || n === "/CourseManage") {
state.list = [
{
name: "课程库",
href: "",
// href: "#/coursewaremanage",
},
{
name: "课件管理",
href: "",
},
];
}
if (n === "/coursewaremanage" || n === "/CoursewareManage") {
state.list = [
{
name: "课程库",
},
{
name: "课程管理",
},
];
}
}
);
return {
...toRefs(state),
};
},
};
</script>
<style scoped lang="scss">
<style lang="scss">
.breadcrumb {
width: 100%;
height: 60px;
display: flex;
align-items: center;
// background-color: rgba(255, 255, 255, 0.5);
.el-breadcrumb__inner.is-link {
font-size: 14px;
font-weight: 400;
color: #878b92 !important;
line-height: 36px;
}
.el-breadcrumb__inner {
font-size: 14px;
font-weight: 400;
color: #363636 !important;
line-height: 36px;
}
}
</style>

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>

74
src/components/NavTop.vue
View File

@@ -7,11 +7,18 @@
/>
<div class="navTopRight">
<div class="role">
<div>管理员</div>
<img
style="width: 13px; height: 7px; margin-left: 8px"
src="../assets/images/navtop/down.png"
/>
<div>{{ selectRole }}</div>
<div class="roleArrow"></div>
<div class="roleItems">
<div
v-for="(value, index) in roleList"
:key="index"
class="roleItem"
@click="changeRole(value)"
>
{{ value.name }}
</div>
</div>
</div>
<div class="user">
<img
@@ -44,9 +51,29 @@ import { reactive, toRefs } from "vue";
export default {
name: "NavTop",
setup() {
const state = reactive({});
const state = reactive({
selectRole: "管理员",
roleList: [
{
id: 1,
name: "管理员",
},
{
id: 2,
name: "学员",
},
],
});
const changeRole = (value) => {
state.roleList.map((item) => {
if (value.name === item.name) {
state.selectRole = item.name;
}
});
};
return {
...toRefs(state),
changeRole,
};
},
};
@@ -75,6 +102,41 @@ export default {
color: #333330;
line-height: 36px;
cursor: pointer;
position: relative;
.roleArrow {
width: 13px;
height: 7px;
margin-left: 8px;
background-image: url(../assets/images/navtop/down.png);
background-size: 100%;
}
.roleItems {
width: 109px;
height: 80px;
padding-top: 10px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
top: 60px;
right: 0px;
text-align: center;
display: none;
}
.roleItem {
font-size: 14px;
font-weight: 400;
color: rgba(79, 81, 86, 1);
line-height: 36px;
}
.roleItem:hover {
color: #4ea6ff;
}
}
.role:hover .roleItems {
display: block;
}
.role:hover .roleArrow {
background-image: url(../assets/images/navtop/up.png);
}
.user {
margin-left: 37px;

89
src/components/OpenPages.vue
View File

@@ -1,14 +1,67 @@
<template>
<div class="openPages">12345</div>
<div class="openPages">
<div
v-for="(value, index) in openList"
:key="index"
style="position: relative"
>
<router-link
:to="value.href"
class="openItems"
:style="{ background: value.active ? '#f5f7fa' : '' }"
>
<div
:style="{
color: value.active
? 'rgba(64, 158, 255, 1)'
: 'rgba(135, 139, 146, 1)',
}"
>
{{ value.pagename }}
</div>
</router-link>
<div class="close" @click.stop="closePage(value)">
<img src="../assets/images/openPages/close.png" />
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
name: "OpenPages",
setup() {
const state = reactive({});
const store = useStore();
const $router = useRouter();
const state = reactive({
openList: store.state.openpages,
});
const closePage = (value) => {
console.log("点击关闭页面", value, state.openList);
state.openList.map((item, key) => {
if (item.href === value.href) {
if (state.openList.length === 1) {
state.openList.splice(key, 1);
$router.push({ path: "/learningpath" });
} else {
if (key === state.openList.length - 1) {
$router.push({ path: state.openList[key - 1].href });
state.openList.splice(key, 1);
} else {
$router.push({ path: state.openList[key + 1].href });
state.openList.splice(key, 1);
}
}
}
});
store.commit("chengeOpenpages", state.openList);
};
return {
...toRefs(state),
closePage,
};
},
};
@@ -17,8 +70,38 @@ export default {
.openPages {
width: 100%;
height: 50px;
// display: flex;
display: flex;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
overflow-x: auto;
.openItems {
width: 272px;
height: 50px;
border: 1px solid #edf2fa;
border-left: 0px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 400;
line-height: 36px;
cursor: pointer;
flex-shrink: 0;
}
.close {
width: 16px;
height: 16px;
border-radius: 8px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 17px;
right: 27px;
}
.close:hover {
background: rgba(220, 220, 220, 1);
}
}
</style>