Skip to content

L
learn-online-pc
提交 4daddbc6 authored 作者: zyx's avatar zyx
浏览文件
操作

update

上级 62f9496b
隐藏空白字符变更
内嵌 并排
正在显示 包含 445 行增加 和 31 行删除
client/src/components/errorPages/404.vue
浏览文件 @ 4daddbc6
......@@ -25,7 +25,6 @@ export default {
}
</script>
<style lang="scss" scoped>
.err-container {
width: 100%;
......
client/src/components/learnSysLayout/container.vue 0 → 100644
浏览文件 @ 4daddbc6
<template>
<router-view></router-view>
</template>
client/src/components/learnSysLayout/navigation.vue 0 → 100644
浏览文件 @ 4daddbc6
<template>
<div class="menu">
<div class="nav-left">
<img class="logo" src="@/assets/images/logo-header.png" alt="logo" />
<div class="text-title" @click="setStatus">在线学习系统</div>
</div>
<div class="notify" @click="goNotify()">通知
<div class="num" v-if="num">{{num}}</div>
</div>
</div>
</template>
<script>
// import cAction from '@action'
export default {
data () {
return {
num: 0
}
},
mounted () {
// request({
// component: this,
// actionName: 'msgAction',
// functionName: 'getMyMsg',
// data: {},
// thenCallback: data => {
// this.num = data.length
// },
// catchCallback: () => {},
// finallyCallback: () => {}
// })
},
methods: {
goNotify () {
this.$router.push({ path: '/app/my-grade/message' })
},
setStatus () {
if (this.status) {
this.status = false
} else {
this.status = true
}
this.$root.$emit('updateStatus', this.status)
}
}
}
</script>
<style scoped lang="scss">
.menu {
width: 100%;
height: 100%;
color: #ffffff;
.nav-left {
float: left;
position: relative;
height: 100%;
img.logo {
position: absolute;
left: 0;
top: 50%;
height: 37%;
width: auto;
transform: translateY(-50%);
}
.text-title {
float: left;
margin-left: 190px;
line-height: 60px;
font-size: 16px;
}
}
.notify {
position: relative;
float: right;
padding: 0 20px;
line-height: 60px;
font-size: 16px;
cursor: pointer;
.num {
position: absolute;
top: 9px;
left: 50px;
padding: 1px 5px 2px 4px;
font-size: 12px;
line-height: 14px;
color: #ffffff;
background: #fb2121;
border-radius: 50%;
}
&:hover {
color: #b49441;
}
}
}
@media (max-width: 767px) {
.menu {
.nav-left {
img.logo {
display: none;
}
.text-title {
margin-left: 0;
}
}
}
}
</style>
client/src/components/learnSysLayout/sidebar.vue 0 → 100644
浏览文件 @ 4daddbc6
<template>
<el-aside :style="[obj.sidebarStyle]">
<el-menu :default-active="defaultActive" :collapse="obj.status" :default-openeds="['1', '2']" @select="curSelect">
<el-menu-item index="0" class="my-account">
<div class="pic" @click="goUpdatePic">
<div class="set-pic">修改头像</div>
<template v-if="UserInfo.avatar">
<img :src="UserInfo.avatar" alt="人物头像">
</template>
<template v-else>
<img src="@/assets/images/person-default.jpg" alt="人物头像">
</template>
</div>
<el-button type="text" class="com-txt set-pwd" @click="goSetPwd">修改密码</el-button>
<el-button type="text" class="com-txt out-login" @click="goOutLogin">退出登录</el-button>
</el-menu-item>
<template v-for="(item, index) in headerData">
<template v-if="item.children">
<el-submenu v-bind:key="index" :index="item.index">
<template slot="title"><i :class="item.iconClass"></i><span slot="title">{{item.name}}</span></template>
<template v-for="(_item, _index) in item.children">
<el-menu-item v-bind:key="_index" :index="_item.index" @click="goPages(_item.index)">{{_item.name}}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item v-bind:key="index" :index="item.index" @click="goPages(item.index)">
<i :class="item.iconClass"></i><span slot="title">{{item.name}}</span>
</el-menu-item>
</template>
</template>
</el-menu>
<div class="side-move"
:style="{left: (obj.isMouseDown ? 0 : (parseInt(obj.sidebarStyle.width)-2+'px')), width: (obj.isMouseDown ? obj.containerStyle.width : '5px')}"
v-if="obj.sidebarStyle.width !== 'auto'"
@mousedown="beforeMove"
@mousemove="moving"
@mouseup="afterMove"
></div>
</el-aside>
</template>
<script>
import cAction from '@action'
export default {
props: {
/**
* 详细参数，请查看 app.vue
*/
obj: { type: Object, require: true }
},
data () {
const _path = this.$GlobalVariable.siderbar.defaultPath
let defaultActive = ''
switch (_path) {
case '/app/my-learn/course': defaultActive = '1-1'; break
case '/app/my-learn/course-detail': defaultActive = '1-1'; break
case '/app/my-learn/course-all': defaultActive = '0'; break
case '/app/my-learn/discussion': defaultActive = '1-2'; break
case '/app/my-learn/report-list': defaultActive = '1-3'; break
case '/app/my-grade/credit': defaultActive = '2-1'; break
case '/app/account/feedbackList': defaultActive = '3'; break
case '/app/service-hall/hall': defaultActive = '4'; break
}
return {
UserInfo: this.$GlobalVariable.UserInfo || {},
defaultActive: defaultActive,
headerData: [
{
name: '我的学习',
iconClass: 'el-icon-self-xuexi-',
index: '1',
children: [
{ name: '我的课程', index: '1-1' },
{ name: '课程讨论', index: '1-2' },
{ name: '学术报告', index: '1-3' }
]
},
{
name: '我的成绩',
iconClass: 'el-icon-self-grade',
index: '2',
children: [
{ name: '我的学分', index: '2-1' }
]
},
{
name: '办事大厅',
iconClass: 'el-icon-self-fankuiyijian',
index: '4'
},
{
name: '意见反馈',
iconClass: 'el-icon-self-fankuiyijian',
index: '3'
}
]
}
},
mounted () {
this.defineEvent()
},
methods: {
goPages (str) {
switch (str) {
case '1-1': this.$router.push({ path: '/app/my-learn/course' }); break
case '1-2': this.$router.push({ path: '/app/my-learn/discussion' }); break
case '1-3': this.$router.push({ path: '/app/my-learn/report-active-list' }); break
case '2-1': this.$router.push({ path: '/app/my-grade/credit' }); break
case '3': this.$router.push({ path: '/app/account/feedbackList' }); break
case '4': this.$router.push({ path: '/app/service-hall/hall' }); break
}
},
/* 修改头像 - 跳转方法 */
goUpdatePic () {
this.$router.push({ path: '/app/account/update-pic' })
},
/* 修改密码 - 跳转方法 */
goSetPwd () {
this.$router.push({ path: '/app/account/set-pwd' })
},
/* 退出登录 - 跳转方法 */
goOutLogin () {
cAction.loginAction.outLogin().then(str => {
if (/^login/gi.test(str)) {
window.G.UserInfo = {}
this.$router.push({ path: '/login/index' })
} else {
/* 出错 */
}
}).catch(e => {
this.$message.error(e.message)
})
/* 清空一下记录，然后调整到登录页 */
// this.$router.push({ path: '/login/index' })
},
/* 定义监听事件 */
defineEvent () {
this.VueEvent.$off('can-change-sidebar').$on('can-change-sidebar', (data) => {
this.defaultActive = data.defaultActive
})
},
/* 当前菜单选中 */
curSelect (i, p) {
this.defaultActive = i
},
/* 侧边栏 拖拽条按下并移动前 */
beforeMove (e) {
this.obj.isMouseDown = true
this.obj.beforeMoveInitX = parseInt(this.obj.sidebarStyle.width) - e.pageX
},
/* 侧边栏 拖拽条按下并移动中 */
moving (e) {
if (this.obj.isMouseDown) {
this.obj.sidebarStyle.width = e.pageX + this.obj.beforeMoveInitX + 'px'
}
},
/* 侧边栏 拖拽条按下并移动中 */
afterMove () {
this.obj.isMouseDown = false
}
}
}
</script>
<style scoped lang="scss">
.el-menu {
user-select: none;
height: 100%;
/* 直接消失 */
&.el-menu--collapse {
display: none;
}
.el-submenu {
.el-menu-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: auto;
}
}
.el-menu-item.my-account {
height: auto;
line-height: 0;
padding-top: 20px;
overflow: hidden;
text-align: center;
.pic {
position: relative;
margin-bottom: 15px;
img {
display: block;
margin: 0 auto;
width: 80px;
height: 80px;
border-radius: 50%;
}
&:hover {
.set-pic {
display: block;
color: #000000;
}
}
.set-pic {
display: none;
position: absolute;
left: 50%;
top: 70%;
width: 50%;
line-height: 2;
color: #000000;
background: #eeeeee4f;
transform: translate(-50%, -50%);
}
}
}
}
/* 侧边栏 拖拽条 */
.side-move {
position: absolute;
z-index: 999;
top: 0;
width: 5px;
height: 100%;
cursor: ew-resize;
}
@media (max-width: 767px) {
// .el-aside {
// position: fixed;
// z-index: 99;
// }
}
</style>
client/src/pages/mainsite.vue 0 → 100644
浏览文件 @ 4daddbc6
<template>
<!-- // 整体网站结构 -->
<el-container :style="{height: containerStyle.height}">
<el-header><navigation /></el-header>
<el-container>
<sidebar :obj="sidebar" />
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</template>
<script>
import Navigation from '@/components/learnSysLayout/navigation.vue'
import Sidebar from '@/components/learnSysLayout/sidebar.vue'
export default {
components: { Navigation, Sidebar },
data () {
const clientHeight = document.documentElement.clientHeight - 1 + 'px'
const clientWidth = document.documentElement.clientWidth + 'px'
return {
/**
* 整个结构 样式
* obj.height 整个结构高度
* obj.width 整个结构宽度
*/
containerStyle: { height: clientHeight, width: clientWidth },
/**
* 侧边栏 样式
* obj.containerStyle 继承上面的整个结构 样式
* obj.sidebarStyle 侧边栏 样式对象
* obj.status 判断侧边栏 展开还是收起
* obj.beforeMoveInitX 在拖拽侧边栏前，拖拽时，鼠标初始X值
* obj.isMouseDown 鼠标是否按下
*/
sidebar: {
containerStyle: null,
sidebarStyle: { width: '200px' },
status: false,
beforeMoveInitX: 0,
isMouseDown: false
}
}
},
mounted () {
this.sidebar.containerStyle = this.containerStyle
/* 监听侧边栏的当前状态 */
this.$root.$on('updateStatus', (status) => {
this.sidebar.status = status
this.sidebar.sidebarStyle.width = (status ? 'auto' : '200px')
})
}
}
</script>
<style lang="scss" scoped>
.el-header {
z-index: 1;
background: #252625;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}
.el-main {
padding: 0;
position: relative;
}
</style>
client/src/router/routes.js
浏览文件 @ 4daddbc6
......@@ -25,59 +25,59 @@ export default [
{
path: '/app',
redirect: '/app/error/404',
component: App,
component: () => import('@/pages/mainsite.vue'),
children: [
{ path: 'error/404', component: () => import('../components/error/404.vue') },
{ path: 'error/404', component: () => import('@/components/errorPages/404.vue') },
{
path: 'my-learn',
redirect: 'error/404',
component: container,
component: () => import('@/components/learnSysLayout/container.vue'),
children: [
{ path: 'course', component: () => import('../pages/myLearn/course.vue') },
{ path: 'course-detail/:sid/:cid', component: () => import('../pages/myLearn/courseDetail.vue'), props: true },
{ path: 'discuss-detail/:sid/:cid/:id', component: () => import('../pages/myLearn/discussDetail.vue'), props: true },
{ path: 'course-all', component: () => import('../pages/myLearn/courseAll.vue') },
{ path: 'discussion', component: () => import('../pages/myLearn/discussion.vue') },
{ path: 'report-list', component: () => import('../pages/myLearn/reportList.vue') },
{ path: 'report-active-list', component: () => import('../pages/myLearn/reportActiveList.vue') },
{ path: 'report-list-all/:rid', component: () => import('../pages/myLearn/reportListAll.vue'), props: true },
{ path: 'report-add/:rid', component: () => import('../pages/myLearn/reportAdd.vue'), props: true },
{ path: 'report-submit/:rid/:reid', component: () => import('../pages/myLearn/reportSubmit.vue'), props: true }
// { path: 'course', component: () => import('../pages/myLearn/course.vue') },
// { path: 'course-detail/:sid/:cid', component: () => import('../pages/myLearn/courseDetail.vue'), props: true },
// { path: 'discuss-detail/:sid/:cid/:id', component: () => import('../pages/myLearn/discussDetail.vue'), props: true },
// { path: 'course-all', component: () => import('../pages/myLearn/courseAll.vue') },
// { path: 'discussion', component: () => import('../pages/myLearn/discussion.vue') },
// { path: 'report-list', component: () => import('../pages/myLearn/reportList.vue') },
// { path: 'report-active-list', component: () => import('../pages/myLearn/reportActiveList.vue') },
// { path: 'report-list-all/:rid', component: () => import('../pages/myLearn/reportListAll.vue'), props: true },
// { path: 'report-add/:rid', component: () => import('../pages/myLearn/reportAdd.vue'), props: true },
// { path: 'report-submit/:rid/:reid', component: () => import('../pages/myLearn/reportSubmit.vue'), props: true }
]
},
{
path: 'my-grade',
redirect: 'error/404',
component: container,
component: () => import('@/components/learnSysLayout/container.vue'),
children: [
{ path: 'credit', component: () => import('../pages/myGrade/credit.vue') },
{ path: 'rebuild', component: () => import('../pages/myGrade/rebuild.vue') },
{ path: 'message', component: () => import('../pages/myGrade/message.vue') }
// { path: 'credit', component: () => import('../pages/myGrade/credit.vue') },
// { path: 'rebuild', component: () => import('../pages/myGrade/rebuild.vue') },
// { path: 'message', component: () => import('../pages/myGrade/message.vue') }
]
},
{
path: 'account',
redirect: 'error/404',
component: container,
component: () => import('@/components/learnSysLayout/container.vue'),
children: [
{ path: 'set-pwd', component: () => import('../pages/account/setPwd.vue') },
{ path: 'update-pic', component: () => import('../pages/account/updatePic.vue') },
{ path: 'feedbackList', component: () => import('../pages/account/feedbackList.vue') },
{ path: 'feedbackCreate', component: () => import('../pages/account/feedbackCreate.vue') }
// { path: 'set-pwd', component: () => import('../pages/account/setPwd.vue') },
// { path: 'update-pic', component: () => import('../pages/account/updatePic.vue') },
// { path: 'feedbackList', component: () => import('../pages/account/feedbackList.vue') },
// { path: 'feedbackCreate', component: () => import('../pages/account/feedbackCreate.vue') }
]
},
{
path: 'service-hall',
redirect: 'error/404',
component: container,
component: () => import('@/components/learnSysLayout/container.vue'),
children: [
{ path: 'hall', component: () => import('../pages/serviceHall/hall.vue') },
{ path: 'learning-add/:rid', component: () => import('../pages/serviceHall/learningAdd.vue'), props: true },
{ path: 'share-add/:rid', component: () => import('../pages/serviceHall/shareAdd.vue'), props: true },
{ path: 'again-add/:rid', component: () => import('../pages/serviceHall/againAdd.vue'), props: true },
{ path: 'my-apply', component: () => import('../pages/serviceHall/myApply.vue'), props: true },
{ path: 'upload-report/:rid/:reid', component: () => import('../pages/serviceHall/uploadReport.vue'), props: true },
{ path: 'view-report/:rid', component: () => import('../pages/serviceHall/viewReport.vue'), props: true }
// { path: 'hall', component: () => import('../pages/serviceHall/hall.vue') },
// { path: 'learning-add/:rid', component: () => import('../pages/serviceHall/learningAdd.vue'), props: true },
// { path: 'share-add/:rid', component: () => import('../pages/serviceHall/shareAdd.vue'), props: true },
// { path: 'again-add/:rid', component: () => import('../pages/serviceHall/againAdd.vue'), props: true },
// { path: 'my-apply', component: () => import('../pages/serviceHall/myApply.vue'), props: true },
// { path: 'upload-report/:rid/:reid', component: () => import('../pages/serviceHall/uploadReport.vue'), props: true },
// { path: 'view-report/:rid', component: () => import('../pages/serviceHall/viewReport.vue'), props: true }
]
}
]
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论