提交 45940ef6 authored 作者: lihuihui's avatar lihuihui

优化导航

上级 6a3a52a7
差异被折叠。
<template>
<ul class="nav-item-box" @mouseleave="navLeave">
<template v-for="(item, index) in navData">
<li :key="index">
<div :class="getNameActive(item)">
<template v-if="!item.path">
<template v-if="item.click">
<span @click="showEnroll">{{ item.name }}</span>
</template>
<template v-else>
{{ item.name }}
</template>
</template>
<template v-else>
<nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
</template>
</div>
<div class="child-item" v-if="item.childern">
<div class="one-level">
<template v-for="(level2Item, level2Index) in item.childern">
<div
:class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
:key="level2Index + 'level2'"
@mouseenter="levelShow(level2Item)"
@mouseleave="levelShow(level2Item, 'out')"
>
<app-link :item="{
path: level2Item.path
}">
<div class="name">
{{ level2Item.name }}
</div>
<div class="el-icon-arrow-right" v-if="level2Item.childern"></div>
</app-link>
</div>
</template>
</div>
</div>
</li>
</template>
</ul>
</template>
<script>
import AppLink from '@/components/Link'
export default {
name: 'AppMenu',
components: { AppLink },
data() {
return {
navData: [
{
name: '项目介绍',
path: '/project-intro/bg',
childern: [
{ name: '项目背景', path: '/project-intro/bg' },
{ name: '项目特色', path: '/project-intro/charac' },
{ name: '证书授予', path: '/project-intro/certificate' }
]
},
{
name: '课程与师资',
path: '/about/course',
childern: [
{ name: '课程设置', path: '/about/course' },
{ name: '师资力量', path: '/about/teacher' }
]
},
{
name: '最新动态',
path: '/news/hot',
childern: [
{ name: '热点新闻', path: '/news/hot' },
{ name: '教授采访', path: '/news/interview' }
]
},
{
name: '招生信息',
path: '/apply/relevant',
childern: [
{ name: '有关申请', path: '/apply/relevant' },
{ name: '费用资助', path: '/apply/support' },
{ name: '常见问题', path: '/apply/problem' }
]
},
{
name: '校友风采',
path: '/alumni/outstanding',
childern: [
{ name: '杰出校友', path: '/alumni/outstanding' },
{ name: '校友分享', path: '/alumni/sharing' }
]
},
{
name: '报名申请',
path: '/my'
}
],
time: null
}
},
methods: {
navLeave() {
this.navData.map(item => {
if (item.childern) {
item.childern.map(cItem => {
cItem.isShow = false
})
}
})
this.$forceUpdate()
},
levelShow(item, isOut) {
if (item.childern) {
if (isOut) {
clearTimeout(this.time)
this.time = setTimeout(() => {
item.isShow = false
}, 500)
return
}
this.navLeave()
item.isShow = true
} else {
this.navLeave()
}
}
},
computed: {
getNameActive() {
return item => {
const currentPath = this.$route.path
if (currentPath.includes(item.path)) {
return 'name active'
} else {
let className = 'name'
if (item.childern) {
item.childern.map(cData => {
currentPath.includes(cData.path) && (className = 'name active')
})
}
return className
}
}
}
}
}
</script>
<style lang="scss" scoped>
.nav-item-box {
padding-left: 11px;
display: flex;
li {
position: relative;
margin-right: 60px;
.name {
line-height: 72px;
font-size: 22px;
color: #333333;
cursor: pointer;
a {
color: #333333;
font-size: 22px;
text-decoration: none;
}
&.active {
font-weight: 500;
color: #aa1941;
a {
// font-weight: 500;
color: #aa1941;
}
}
}
&:hover {
.name {
color: #aa1941;
font-weight: 500;
a {
// font-weight: 500;
color: #aa1941;
}
}
.child-item {
.one-level {
display: block;
}
}
}
.child-item {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: 72px;
left: -10px;
display: flex;
background: #fff;
z-index: 999;
.one-level {
padding: 36px 24px 0;
border-top: 4px solid rgba(170, 25, 65, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
display: none;
.li {
margin-bottom: 36px;
display: flex;
justify-content: space-between;
&.active {
.name {
color: rgba(170, 25, 65, 1);
}
}
.name {
font-weight: 400;
line-height: 100%;
color: #333333;
font-size: 16px;
white-space: nowrap;
a {
color: #333333;
font-size: 16px;
}
}
.el-icon-arrow-right {
color: rgba(51, 51, 51, 1);
margin-left: 15px;
}
&:hover {
.name {
color: rgba(170, 25, 65, 1);
a {
color: rgba(170, 25, 65, 1);
}
}
.el-icon-arrow-right {
color: rgba(170, 25, 65, 1);
}
}
}
}
.two-level {
pointer-events: auto;
padding: 34px 41px 0 24px;
.name {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
&:hover {
color: rgba(170, 25, 65, 1);
}
a {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
}
}
}
}
}
}
</style>
......@@ -64,7 +64,6 @@ export default {
project_id: process.env.projectId
}
this.listData = await this.$axios.get('/api/zws/v1/cms/news', { params }).then(res => {
console.log(res)
return res
})
},
......
......@@ -137,7 +137,6 @@ export default {
project_id: process.env.projectId
}
this.listData = await this.$axios.get('/api/zws/v1/cms/news', { params }).then(res => {
console.log(params)
return res
})
},
......
......@@ -129,7 +129,6 @@ export default {
return new Promise((resolve, reject) => {
postNes(params)
.then(res => {
console.log(res)
if (res && res.status === 200 && res.error === 0) {
resolve({
type: 'enroll',
......@@ -157,7 +156,6 @@ export default {
}
sendCode(param)
.then(res => {
console.log(res)
this.btnDisabledTimer()
if (res && res.code === 0) this.$message.success('验证码已发送,请注意查收')
else this.$message.error('获取验证码失败,请稍后再试')
......@@ -172,7 +170,6 @@ export default {
}
return new Promise((resolve, reject) => {
checkCode(checkCodeParam).then(res => {
console.log(res)
if (res && res.code === 0) {
res.type = 'checkcode'
resolve({
......
......@@ -103,7 +103,6 @@ export default {
// 提交推荐信
handleAddRequest() {
api.addLetter(this.userId, this.letterId, this.ruleForm).then(response => {
console.log(response)
const { error, message } = response
if (error.toString() === '0') {
this.dialogVisible = true
......
......@@ -95,7 +95,6 @@ export default {
api
.sendCode({ account: this.ruleForm.account })
.then(response => {
console.log(response)
if (response.code === 0) {
this.$message({ type: 'success', message: '验证码已发送' })
} else {
......
......@@ -170,7 +170,6 @@ export default {
}
},
mounted() {
console.log(this.$route)
}
}
</script>
......
......@@ -121,7 +121,6 @@ export default {
}
},
mounted() {
console.log(this.$route)
}
}
</script>
......
......@@ -4,7 +4,7 @@
<div class="alumni">
<h5>KELLEY商学院杰出校友</h5>
<ul class="card-list">
<li v-for="item in alumniList" :key="item.name">
<li v-for="(item, index) in alumniList" :key="index">
<div class="avatar">
<img :src="item.avatar" />
</div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论