mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-12 20:36:45 +08:00
style:增加左侧导航及头部导航栏
This commit is contained in:
李晓鸽
36
src/components/BreadCrumb.vue
Normal file
36
src/components/BreadCrumb.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "BreadCrumb",
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.breadcrumb {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
325
src/components/NavLeft.vue
Normal file
325
src/components/NavLeft.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<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' }"
|
||||
>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
style="width: 100%; margin-top: 26px"
|
||||
:style="{ display: packup ? 'block' : 'none' }"
|
||||
>
|
||||
<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>
|
||||
|
||||
<el-menu-item index="4">
|
||||
<span class="title">考试</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="5">
|
||||
<span class="title">调研</span>
|
||||
</el-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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
|
||||
export default {
|
||||
name: "NavLeft",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
packup: false,
|
||||
screenHeight: document.body.clientHeight, // 屏幕高度
|
||||
});
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const packUp = () => {
|
||||
state.packup = !state.packup;
|
||||
};
|
||||
const getMousePosition = () => {
|
||||
state.screenHeight = document.body.clientHeight;
|
||||
};
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", getMousePosition, false);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", getMousePosition, false);
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
handleOpen,
|
||||
handleClose,
|
||||
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;
|
||||
.packup {
|
||||
width: 19px;
|
||||
height: 15px;
|
||||
margin-top: 23px;
|
||||
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);
|
||||
|
||||
border: none;
|
||||
}
|
||||
//左侧图标
|
||||
.imgBox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.title {
|
||||
margin-left: 12px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
//修改一级导航文字颜色
|
||||
.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 {
|
||||
background: rgba(236, 245, 255, 0.43) !important;
|
||||
border-right: 3px solid rgba(255, 255, 255, 1);
|
||||
}
|
||||
// 鼠标划上背景颜色
|
||||
.el-menu-item:hover {
|
||||
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);
|
||||
}
|
||||
.circle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
src/components/NavTop.vue
Normal file
90
src/components/NavTop.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="navTop">
|
||||
<div class="navTopMain">
|
||||
<img
|
||||
style="width: 205px; height: 29px; margin-left: 37px; margin-top: 22px"
|
||||
src="../assets/images/navtop/logo.png"
|
||||
/>
|
||||
<div class="navTopRight">
|
||||
<div class="role">
|
||||
<div>管理员</div>
|
||||
<img
|
||||
style="width: 13px; height: 7px; margin-left: 8px"
|
||||
src="../assets/images/navtop/down.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="user">
|
||||
<img
|
||||
style="
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
margin-left: 8px;
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
"
|
||||
src="../assets/images/img.jpg"
|
||||
/>
|
||||
<div>李玉冰</div>
|
||||
</div>
|
||||
<img
|
||||
style="
|
||||
width: 27px;
|
||||
height: 26px;
|
||||
margin: 27px 29px 0px 31px;
|
||||
cursor: pointer;
|
||||
"
|
||||
src="../assets/images/navtop/signout.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "NavTop",
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.navTop {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
// display: flex;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||||
.navTopMain {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
.navTopRight {
|
||||
display: flex;
|
||||
}
|
||||
.role {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333330;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.user {
|
||||
margin-left: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #b3bdc4;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
24
src/components/OpenPages.vue
Normal file
24
src/components/OpenPages.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="openPages">12345</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "OpenPages",
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.openPages {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
// display: flex;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user