|
|
|
|
@ -1,13 +1,15 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<ul class="nav"> |
|
|
|
|
<!-- pc端 --> |
|
|
|
|
<ul v-if="!$store.state.layout.isMobile" |
|
|
|
|
class="nav"> |
|
|
|
|
<li v-for="(item, i) in menus" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{active: active == item.index}" |
|
|
|
|
:class="{active: active == item.id}" |
|
|
|
|
@click="jump(item)"> |
|
|
|
|
{{item.title}} |
|
|
|
|
{{item.name}} |
|
|
|
|
<ul :class="['children']" |
|
|
|
|
v-if="item.index === '/preInfo/list' || item.index === '/info/list'"> |
|
|
|
|
v-if="item.id === '/preInfo/list' || item.id === '/info/list'"> |
|
|
|
|
<li v-for="(column, i) in columns" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{active: columnActive === column.id}" |
|
|
|
|
@ -15,14 +17,31 @@ |
|
|
|
|
</ul> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<!-- 移动端 --> |
|
|
|
|
<el-menu v-else |
|
|
|
|
ref="elMenu" |
|
|
|
|
class="menu" |
|
|
|
|
background-color="#fff" |
|
|
|
|
text-color="#333" |
|
|
|
|
active-text-color="#006eff" |
|
|
|
|
@open="menuClick" |
|
|
|
|
@select="menuClick" |
|
|
|
|
:default-active="String(active)"> |
|
|
|
|
<menuTree :menuList="menus" /> |
|
|
|
|
</el-menu> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import menuTree from '@/components/menuTree' |
|
|
|
|
import Setting from "@/setting" |
|
|
|
|
import util from "@/libs/util" |
|
|
|
|
import { mapActions } from "vuex"; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
menuTree, |
|
|
|
|
}, |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
token: util.local.get(Setting.tokenKey), |
|
|
|
|
@ -31,75 +50,75 @@ export default { |
|
|
|
|
// 登录后的菜单 |
|
|
|
|
loginedMenu: [ |
|
|
|
|
{ |
|
|
|
|
index: "/station/list", |
|
|
|
|
title: "实验台" |
|
|
|
|
id: "/station/list", |
|
|
|
|
name: "实验台" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/appraisal/list", |
|
|
|
|
title: "能力测评" |
|
|
|
|
id: "/appraisal/list", |
|
|
|
|
name: "能力测评" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/record/list", |
|
|
|
|
title: "实验记录" |
|
|
|
|
id: "/record/list", |
|
|
|
|
name: "实验记录" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/ass/list", |
|
|
|
|
title: "考核列表" |
|
|
|
|
id: "/ass/list", |
|
|
|
|
name: "考核列表" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/course/list", |
|
|
|
|
title: "课程学习" |
|
|
|
|
id: "/course/list", |
|
|
|
|
name: "课程学习" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/info/list", |
|
|
|
|
title: "最新资讯" |
|
|
|
|
id: "/info/list", |
|
|
|
|
name: "最新资讯" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/match/list", |
|
|
|
|
title: "线上赛事" |
|
|
|
|
id: "/match/list", |
|
|
|
|
name: "线上赛事" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/activity/list", |
|
|
|
|
title: "创业活动" |
|
|
|
|
id: "/activity/list", |
|
|
|
|
name: "创业活动" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/screen", |
|
|
|
|
title: "数据看板" |
|
|
|
|
id: "/screen", |
|
|
|
|
name: "数据看板" |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
// 游客菜单 |
|
|
|
|
touristMenu: [ |
|
|
|
|
{ |
|
|
|
|
index: "/index/list", |
|
|
|
|
title: "首页" |
|
|
|
|
id: "/index/list", |
|
|
|
|
name: "首页" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/touristMatch/list", |
|
|
|
|
title: "大赛资讯" |
|
|
|
|
id: "/touristMatch/list", |
|
|
|
|
name: "大赛资讯" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/preCourse/list", |
|
|
|
|
title: "精品课程" |
|
|
|
|
id: "/preCourse/list", |
|
|
|
|
name: "精品课程" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/preInfo/list", |
|
|
|
|
title: "最新资讯" |
|
|
|
|
id: "/preInfo/list", |
|
|
|
|
name: "最新资讯" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: 'data', |
|
|
|
|
title: "数据科研" |
|
|
|
|
id: 'data', |
|
|
|
|
name: "数据科研" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/log/list", |
|
|
|
|
title: "更新日志" |
|
|
|
|
id: "/log/list", |
|
|
|
|
name: "更新日志" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
index: "/screen", |
|
|
|
|
title: "数据看板" |
|
|
|
|
id: "/screen", |
|
|
|
|
name: "数据看板" |
|
|
|
|
} |
|
|
|
|
// { |
|
|
|
|
// index: "trial", |
|
|
|
|
// title: "试用申请" |
|
|
|
|
// id: "trial", |
|
|
|
|
// name: "试用申请" |
|
|
|
|
// } |
|
|
|
|
], |
|
|
|
|
menus: [], |
|
|
|
|
@ -109,7 +128,7 @@ export default { |
|
|
|
|
name: '平台资讯' |
|
|
|
|
} |
|
|
|
|
], // 资讯一级栏目 |
|
|
|
|
columnActive: this.$route.query.parentId |
|
|
|
|
columnActive: this.$route.query.parentId, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
@ -131,10 +150,10 @@ export default { |
|
|
|
|
// 如果是智信云的网站，则显示产品服务 |
|
|
|
|
const menus = this.touristMenu |
|
|
|
|
if (Setting.isZxy) { |
|
|
|
|
menus[0].index = '/index/zxy' |
|
|
|
|
menus[0].id = '/index/zxy' |
|
|
|
|
menus.splice(1, 0, { |
|
|
|
|
index: '/product', |
|
|
|
|
title: '产品服务' |
|
|
|
|
id: '/product', |
|
|
|
|
name: '产品服务' |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
this.menus = menus |
|
|
|
|
@ -149,34 +168,43 @@ export default { |
|
|
|
|
]), |
|
|
|
|
// 跳转 |
|
|
|
|
jump (item) { |
|
|
|
|
const { index } = item |
|
|
|
|
const { id } = item |
|
|
|
|
// 数据科研点击后打开新窗口去到数据平台 |
|
|
|
|
if (index === 'data') { |
|
|
|
|
if (id === 'data') { |
|
|
|
|
window.open(Setting.isDev |
|
|
|
|
? `http://192.168.31.125:8092/#/` |
|
|
|
|
: Setting.isTest |
|
|
|
|
? location.origin |
|
|
|
|
: `https://www.dataforward.cn`) |
|
|
|
|
} else if (index === 'trial') { |
|
|
|
|
} else if (id === 'trial') { |
|
|
|
|
// 申请试用 |
|
|
|
|
// window.open('https://www.wjx.cn/vm/wB0RcMm.aspx') |
|
|
|
|
} else if (index === '/screen') { |
|
|
|
|
} else if (id === '/screen') { |
|
|
|
|
// 数据看板 |
|
|
|
|
window.open(this.$router.resolve('/screen').href) |
|
|
|
|
} else { |
|
|
|
|
const token = util.local.get(Setting.tokenKey) |
|
|
|
|
// 如果未登录且跳转的是登录后才有的菜单 |
|
|
|
|
if (!token && this.loginedMenu.find(e => e.index === index)) { |
|
|
|
|
if (!token && this.loginedMenu.find(e => e.id === id)) { |
|
|
|
|
location.reload() |
|
|
|
|
} else { |
|
|
|
|
this.active = index |
|
|
|
|
this.active = id |
|
|
|
|
this.columnActive = '' |
|
|
|
|
this.setColumnId('') |
|
|
|
|
index === '/preInfo/list' || index === '/info/list' || this.$router.push(index).catch(err => { }) |
|
|
|
|
id === '/preInfo/list' || id === '/info/list' || this.$router.push(id).catch(err => { }) |
|
|
|
|
token !== this.token && location.reload() // 如果登录后再返回该页面，浏览器里会存有token，但是这个页面里的token是刚进到页面时获取的，应该是空，如果是这个情况，则刷新，否则右上角还会显示为登录按钮 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 移动端跳转 |
|
|
|
|
menuClick (e) { |
|
|
|
|
this.$emit('toggleMobileMenu') |
|
|
|
|
if (e === 'data') { |
|
|
|
|
location.href = `https://www.dataforward.cn` |
|
|
|
|
} else { |
|
|
|
|
this.$router.push(e) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取资讯一级栏目 |
|
|
|
|
getColumns () { |
|
|
|
|
this.$get(this.api.queryAllColumns).then(({ columnTree }) => { |
|
|
|
|
@ -260,6 +288,70 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$height: 90px; |
|
|
|
|
/deep/.menu.el-menu--horizontal { |
|
|
|
|
display: flex; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
border: 0; |
|
|
|
|
outline: none; |
|
|
|
|
.el-menu-item, |
|
|
|
|
.el-submenu__title { |
|
|
|
|
height: $height; |
|
|
|
|
line-height: $height; |
|
|
|
|
span { |
|
|
|
|
font-size: 1rem; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
background-color: transparent !important; |
|
|
|
|
span { |
|
|
|
|
color: #1583ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.el-submenu__title { |
|
|
|
|
display: inline-flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
.menu-child { |
|
|
|
|
display: flex; |
|
|
|
|
} |
|
|
|
|
.el-submenu__icon-arrow { |
|
|
|
|
position: static; |
|
|
|
|
margin: 0 0 0 5px; |
|
|
|
|
color: inherit; |
|
|
|
|
} |
|
|
|
|
.is-active { |
|
|
|
|
color: #333 !important; |
|
|
|
|
} |
|
|
|
|
.active, |
|
|
|
|
.active .el-submenu__title { |
|
|
|
|
color: #1583ff !important; |
|
|
|
|
} |
|
|
|
|
&.home { |
|
|
|
|
.el-menu-item, |
|
|
|
|
.el-submenu__title { |
|
|
|
|
&:hover { |
|
|
|
|
background-color: transparent !important; |
|
|
|
|
span { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.is-active { |
|
|
|
|
color: #f9f9f9 !important; |
|
|
|
|
} |
|
|
|
|
.active, |
|
|
|
|
.active .el-submenu__title { |
|
|
|
|
color: #fff !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1870px) { |
|
|
|
|
.nav { |
|
|
|
|
left: 55%; |
|
|
|
|
|
