mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-06 17:36:44 +08:00
style:增加左侧导航及头部导航栏
This commit is contained in:
李晓鸽
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
24
README.md
Normal file
24
README.md
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# fe_manage
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
19758
package-lock.json
generated
Normal file
19758
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
50
package.json
Normal file
50
package.json
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "fe_manage",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"element-plus": "^2.2.17",
|
||||||
|
"vue": "^3.2.13",
|
||||||
|
"vue-router": "^4.0.3",
|
||||||
|
"vuex": "^4.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"sass": "^1.32.7",
|
||||||
|
"sass-loader": "^12.0.0"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead",
|
||||||
|
"not ie 11"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
77
src/App.vue
Normal file
77
src/App.vue
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div id="container">
|
||||||
|
<main>
|
||||||
|
<router-view />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { computed, defineComponent } from "vue";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
console.log("router", router.getRoutes(), route);
|
||||||
|
const routes = computed(() => {
|
||||||
|
return router.getRoutes().filter((e) => e.meta?.isLink);
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentRouteName = computed(() => route.name);
|
||||||
|
|
||||||
|
return {
|
||||||
|
routes,
|
||||||
|
name: currentRouteName,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
#app {
|
||||||
|
// font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
|
||||||
|
// sans-serif;
|
||||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
|
||||||
|
Microsoft YaHei, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
color: #2c3e50;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
min-width: 1000px;
|
||||||
|
min-height: 100%;
|
||||||
|
background-color: rgba(245, 247, 250, 1);
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
// @media screen and (max-width: 1366px) {
|
||||||
|
// .cmMain {
|
||||||
|
// width: 750px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// @media screen and (min-width: 1367px) and (max-width: 1680px) {
|
||||||
|
// .cmMain {
|
||||||
|
// width: 1010px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// @media screen and (min-width: 1681px) and (max-width: 1920px) {
|
||||||
|
// .cmMain {
|
||||||
|
// width: 1270px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// @media screen and (min-width: 1921px) {
|
||||||
|
// .cmMain {
|
||||||
|
// width: 1270px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/images/img.jpg
Normal file
BIN
src/assets/images/img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
src/assets/images/navleft/certificate.png
Normal file
BIN
src/assets/images/navleft/certificate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 661 B |
BIN
src/assets/images/navleft/course.png
Normal file
BIN
src/assets/images/navleft/course.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 391 B |
BIN
src/assets/images/navleft/exam.png
Normal file
BIN
src/assets/images/navleft/exam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
BIN
src/assets/images/navleft/packup.png
Normal file
BIN
src/assets/images/navleft/packup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
BIN
src/assets/images/navleft/project.png
Normal file
BIN
src/assets/images/navleft/project.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
BIN
src/assets/images/navleft/report.png
Normal file
BIN
src/assets/images/navleft/report.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
BIN
src/assets/images/navleft/studyPath.png
Normal file
BIN
src/assets/images/navleft/studyPath.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 613 B |
BIN
src/assets/images/navleft/survey.png
Normal file
BIN
src/assets/images/navleft/survey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 B |
BIN
src/assets/images/navleft/system.png
Normal file
BIN
src/assets/images/navleft/system.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 508 B |
BIN
src/assets/images/navleft/teacher.png
Normal file
BIN
src/assets/images/navleft/teacher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 493 B |
BIN
src/assets/images/navtop/down.png
Normal file
BIN
src/assets/images/navtop/down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 B |
BIN
src/assets/images/navtop/logo.png
Normal file
BIN
src/assets/images/navtop/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/navtop/signout.png
Normal file
BIN
src/assets/images/navtop/signout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/images/navtop/up.png
Normal file
BIN
src/assets/images/navtop/up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 B |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
7
src/assets/scss/common.scss
Normal file
7
src/assets/scss/common.scss
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
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>
|
||||||
13
src/main.js
Normal file
13
src/main.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||||
|
import "@/assets/scss/common.scss"
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(store).use(router).mount('#app')
|
||||||
|
app.use(ElementPlus, {
|
||||||
|
locale: zhCn,
|
||||||
|
})
|
||||||
16
src/router/config.js
Normal file
16
src/router/config.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
const routes = [];
|
||||||
|
const context = require.context('@/views', true, /\.vue$/, 'lazy');
|
||||||
|
context.keys().forEach(path => {
|
||||||
|
// console.log('path', path)
|
||||||
|
const componentName = path.replace(/.*\/([^\\.\\/]*)\.vue$/, '$1');
|
||||||
|
routes.push({
|
||||||
|
path: `/${componentName.toLowerCase()}`,
|
||||||
|
name: componentName,
|
||||||
|
component: () => context(path),
|
||||||
|
meta: {
|
||||||
|
isLink: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
export default routes;
|
||||||
19
src/router/index.js
Normal file
19
src/router/index.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||||
|
import routesConfig from './config';
|
||||||
|
// console.log('routesConfig', routesConfig)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: '首页',
|
||||||
|
redirect: routesConfig[0].path
|
||||||
|
},
|
||||||
|
...routesConfig
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
14
src/store/index.js
Normal file
14
src/store/index.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { createStore } from 'vuex'
|
||||||
|
|
||||||
|
export default createStore({
|
||||||
|
state: {
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
}
|
||||||
|
})
|
||||||
52
src/views/courselibrary/CourseManage.vue
Normal file
52
src/views/courselibrary/CourseManage.vue
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div class="courseManage">
|
||||||
|
<nav-top />
|
||||||
|
<div style="display: flex">
|
||||||
|
<nav-left />
|
||||||
|
<div style="flex: 1; display: flex; flex-direction: column">
|
||||||
|
<open-pages />
|
||||||
|
<bread-crumb />
|
||||||
|
<div class="cmMain">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { reactive, toRefs } from "vue";
|
||||||
|
import NavLeft from "@/components/NavLeft";
|
||||||
|
import NavTop from "@/components/NavTop";
|
||||||
|
import OpenPages from "@/components/OpenPages";
|
||||||
|
import BreadCrumb from "@/components/BreadCrumb";
|
||||||
|
export default {
|
||||||
|
name: "CourseManage",
|
||||||
|
components: {
|
||||||
|
NavLeft,
|
||||||
|
NavTop,
|
||||||
|
OpenPages,
|
||||||
|
BreadCrumb,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({});
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.courseManage {
|
||||||
|
.cmMain {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0px 20px 20px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
src/views/courselibrary/CoursewareManage.vue
Normal file
16
src/views/courselibrary/CoursewareManage.vue
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div class="coursewareManage"></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { reactive, toRefs } from "vue";
|
||||||
|
export default {
|
||||||
|
name: "CoursewareManage",
|
||||||
|
setup() {
|
||||||
|
const state = reactive({});
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user