Skip to content

P
project-www-pc
提交 f653cdb8 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

update

上级 a3c8052a
隐藏空白字符变更
内嵌 并排
正在显示 包含 388 行增加 和 309 行删除
components/Head.vue
浏览文件 @ f653cdb8
......@@ -3,11 +3,18 @@
<div class="color-bar"></div>
<div class="head-top-content">
<div class="max-width-content">
<img src="https://zws-imgs-pub.ezijing.com/static/public/0411340f9306b908eda54b5d66668f50.png" alt="" @click="goPage('/')">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/0411340f9306b908eda54b5d66668f50.png"
alt=""
@click="goPage('/')"
/>
<!-- <div class="login-btn-box">
<div class="login">快速登录</div>
<div class="register">注册</div>
</div> -->
<div class="language">
<span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span>
</div>
</div>
</div>
<div class="head-nav-content max-width-content">
......@@ -30,11 +37,13 @@
<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')">
<div
@click="goPage(level2Item.path, level2Item.pathType)"
class="name"
>
<div
:class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
:key="level2Index + 'level2'"
@mouseenter="levelShow(level2Item)"
@mouseleave="levelShow(level2Item, 'out')"
>
<div @click="goPage(level2Item.path, level2Item.pathType)" class="name">
{{ level2Item.name }}
</div>
<div class="el-icon-arrow-right" v-if="level2Item.childern"></div>
......@@ -42,8 +51,19 @@
</template>
</div>
<template v-for="(level2Item, level2Index) in item.childern">
<div class="two-level" :key="level2Index + 'two-level2'" v-if="level2Item.isShow" @mouseenter="level3Show" @mouseleave="level3Show(level2Item, 'out')">
<div @click="goPage(level3Item.path, level3Item.pathType)" class="name" v-for="(level3Item, level3Index) in level2Item.childern" :key="level3Index + level3Item">
<div
class="two-level"
:key="level2Index + 'two-level2'"
v-if="level2Item.isShow"
@mouseenter="level3Show"
@mouseleave="level3Show(level2Item, 'out')"
>
<div
@click="goPage(level3Item.path, level3Item.pathType)"
class="name"
v-for="(level3Item, level3Index) in level2Item.childern"
:key="level3Index + level3Item"
>
{{ level3Item.name }}
</div>
</div>
......@@ -57,302 +77,304 @@
</div>
</template>
<script>
export default {
data() {
return {
navData: [
{
name: '关于紫荆',
path: '/about/introduce',
childern: [
{
name: '紫荆简介',
isShow: false,
path: '/about/introduce'
},
{
name: '文化理念',
isShow: false,
path: '/about/culture'
},
{
name: '新闻中心',
isShow: false,
path: '/about/news'
},
{
name: '联系我们',
isShow: false,
path: '/about/contact'
}
]
},
{
name: '教育服务',
childern: [
{
name: '1+x',
isShow: false,
childern: [
{
name: '金融产品数字化营销证书',
path: 'http://x.ezijing.com',
pathType: 1
}
// {
// name: '数字金融客户服务证书',
// pathType: 3
// },
// {
// name: '酒店及旅游业的数字化营销证书',
// pathType: 3
// },
// {
// name: '青少年儿童心理以及行为指导证书',
// pathType: 3
// }
]
},
{
name: '专业共建',
isShow: false,
path: '/services/major'
},
{
name: '产业学院',
isShow: false,
path: '/services/college'
},
{
name: '新职业',
isShow: false,
path: '/services/job'
},
{
name: '高质量实习就业服务',
isShow: false,
path: '/services/employment'
},
{
name: '在线教育解决方案',
isShow: false,
childern: [
{
name: '产品技术（即将推出）',
pathType: 3
},
{
name: '技术支持（即将推出）',
pathType: 3
},
{
name: '联合运营（即将推出）',
pathType: 3
}
]
}
]
},
{
name: '学位教育',
childern: [
{
name: '本科',
isShow: false,
childern: [
{
name: '海外留学SHMS（即将推出）',
path: '',
pathType: 3
}
],
},
{
name: '硕士',
isShow: false,
childern: [
{
name: '金融硕士MSF',
path: 'https://kelley.ezijing.com',
pathType: 1
},
{
name: '教育学硕士MED（儿童心理与教育）',
path: 'https://cu.ezijing.com',
pathType: 1
},
{
name: '应用心理学MAP',
path: 'https://ciis.ezijing.com',
pathType: 1
},
{
name: '未来金融领袖计划',
path: 'https://cfflp.ezijing.com',
pathType: 1
}
]
},
{
name: 'MBA',
isShow: false,
childern: [
{
name: '综合管理方向MBA',
path: 'http://marywood.ezijing.com/',
pathType: 1
},
{
name: '金融方向MBA',
path: 'https://sofia.ezijing.com',
pathType: 1
},
{
name: '酒店和旅游方向MBA',
path: 'https://shms.ezijing.com',
pathType: 1
}
]
},
{
name: '博士',
isShow: false,
childern: [
{
name: '心理学博士DBA（即将推出）',
pathType: 3
},
{
name: '工商管理学博士EDD（即将推出）',
pathType: 3
}
]
}
]
},
{
name: '校友会',
path: '/alumnus',
childern: [
{
name: '校友会',
isShow: false,
path: '/alumnus'
}
]
},
{
name: '我要报名',
click: 1
}
],
time: null
export default {
data() {
return {
navData: [
{
name: this.$t('menu.about'),
path: '/about/introduce',
childern: [
{
name: '紫荆简介',
isShow: false,
path: '/about/introduce'
},
{
name: '文化理念',
isShow: false,
path: '/about/culture'
},
{
name: '新闻中心',
isShow: false,
path: '/about/news'
},
{
name: '联系我们',
isShow: false,
path: '/about/contact'
}
]
},
{
name: '教育服务',
childern: [
{
name: '1+x',
isShow: false,
childern: [
{
name: '金融产品数字化营销证书',
path: 'http://x.ezijing.com',
pathType: 1
}
// {
// name: '数字金融客户服务证书',
// pathType: 3
// },
// {
// name: '酒店及旅游业的数字化营销证书',
// pathType: 3
// },
// {
// name: '青少年儿童心理以及行为指导证书',
// pathType: 3
// }
]
},
{
name: '专业共建',
isShow: false,
path: '/services/major'
},
{
name: '产业学院',
isShow: false,
path: '/services/college'
},
{
name: '新职业',
isShow: false,
path: '/services/job'
},
{
name: '高质量实习就业服务',
isShow: false,
path: '/services/employment'
},
{
name: '在线教育解决方案',
isShow: false,
childern: [
{
name: '产品技术（即将推出）',
pathType: 3
},
{
name: '技术支持（即将推出）',
pathType: 3
},
{
name: '联合运营（即将推出）',
pathType: 3
}
]
}
]
},
{
name: '学位教育',
childern: [
{
name: '本科',
isShow: false,
childern: [
{
name: '海外留学SHMS（即将推出）',
path: '',
pathType: 3
}
]
},
{
name: '硕士',
isShow: false,
childern: [
{
name: '金融硕士MSF',
path: 'https://kelley.ezijing.com',
pathType: 1
},
{
name: '教育学硕士MED（儿童心理与教育）',
path: 'https://cu.ezijing.com',
pathType: 1
},
{
name: '应用心理学MAP',
path: 'https://ciis.ezijing.com',
pathType: 1
},
{
name: '未来金融领袖计划',
path: 'https://cfflp.ezijing.com',
pathType: 1
}
]
},
{
name: 'MBA',
isShow: false,
childern: [
{
name: '综合管理方向MBA',
path: 'http://marywood.ezijing.com/',
pathType: 1
},
{
name: '金融方向MBA',
path: 'https://sofia.ezijing.com',
pathType: 1
},
{
name: '酒店和旅游方向MBA',
path: 'https://shms.ezijing.com',
pathType: 1
}
]
},
{
name: '博士',
isShow: false,
childern: [
{
name: '心理学博士DBA（即将推出）',
pathType: 3
},
{
name: '工商管理学博士EDD（即将推出）',
pathType: 3
}
]
}
]
},
{
name: '校友会',
path: '/alumnus',
childern: [
{
name: '校友会',
isShow: false,
path: '/alumnus'
}
]
},
{
name: '我要报名',
click: 1
}
],
time: null
}
},
methods: {
switchLocale(locale) {
this.$store.dispatch('switchLocale', locale)
},
goPage(path, goType) {
if (parseInt(goType) === 3) {
this.$message('暂未开通，尽请期待')
} else {
if (path) {
goType ? window.open(path) : this.$router.push({ path: path })
}
}
},
methods: {
goPage(path, goType) {
if (parseInt(goType) === 3) {
this.$message('暂未开通，尽请期待')
} else {
if (path) {
goType
? window.open(path)
: this.$router.push({ path: path })
}
levelShow(item, isOut) {
if (item.childern) {
if (isOut) {
clearTimeout(this.time)
this.time = setTimeout(() => {
item.isShow = false
}, 500)
return
}
},
levelShow(item, isOut) {
this.navLeave()
item.isShow = true
} else {
this.navLeave()
}
},
level3Show(item, isOut) {
if (isOut) {
item.isShow = false
} else {
clearTimeout(this.time)
}
},
navLeave() {
this.navData.map(item => {
if (item.childern) {
if (isOut) {
clearTimeout(this.time)
this.time = setTimeout(() => {
item.isShow = false
}, 500)
return
}
this.navLeave()
item.isShow = true
} else {
this.navLeave()
item.childern.map(cItem => {
cItem.isShow = false
})
}
},
level3Show(item, isOut) {
if (isOut) {
item.isShow = false
})
this.$forceUpdate()
},
showEnroll() {
const dom = document.getElementById('show-enroll')
const dom2 = document.getElementById('show-enroll-content')
const dom3 = document.getElementById('show-enroll-wx')
dom.style.display = 'block'
dom2.style.display = 'block'
dom3.style.display = 'none'
}
},
computed: {
getNameActive() {
return item => {
const currentPath = this.$route.path
if (item.path === currentPath) {
return 'name active'
} else {
clearTimeout(this.time)
}
},
navLeave() {
this.navData.map(item => {
let className = 'name'
if (item.childern) {
item.childern.map(cItem => {
cItem.isShow = false
item.childern.map(cData => {
cData.path === currentPath && (className = 'name active')
})
}
})
this.$forceUpdate()
},
showEnroll() {
const dom = document.getElementById('show-enroll')
const dom2 = document.getElementById('show-enroll-content')
const dom3 = document.getElementById('show-enroll-wx')
dom.style.display = 'block'
dom2.style.display = 'block'
dom3.style.display = 'none'
}
},
computed: {
getNameActive() {
return (item) => {
const currentPath = this.$route.path
if (item.path === currentPath) {
return 'name active'
} else {
let className = 'name'
if (item.childern) {
item.childern.map(cData => {
cData.path === currentPath && (className = 'name active')
})
}
return className
}
return className
}
}
}
}
}
</script>
<style lang="scss" scoped>
ul,li{
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.head-mian{
.head-mian {
width: 100%;
min-width: 1200px;
background: #fff;
.color-bar{
.color-bar {
height: 10px;
background: #AA1941;
background: #aa1941;
}
.head-top-content{
.head-top-content {
// width: 1200px;
// margin: 0 auto;
border: 1px solid #EBEBEB;
border: 1px solid #ebebeb;
padding: 23px 0 22px;
.max-width-content{
.max-width-content {
display: flex;
align-items: center;
img{
img {
height: 55px;
cursor: pointer;
display: block;
}
.login-btn-box{
.login-btn-box {
margin-left: auto;
display: flex;
div{
div {
width: 72px;
height: 24px;
box-sizing: border-box;
......@@ -363,66 +385,70 @@ ul,li{
margin-left: 10px;
cursor: pointer;
}
.login{
background: #AA1941;
.login {
background: #aa1941;
color: #fff;
}
.register{
.register {
color: #333333;
border: 1px solid #EAEAEA;
border: 1px solid #eaeaea;
}
}
.language {
margin-left: auto;
cursor: pointer;
}
}
}
.max-width-content{
.max-width-content {
width: 1200px;
margin: 0 auto;
}
.head-nav-content{
.head-nav-content {
height: 72px;
display: flex;
align-items: center;
.nav-item-box{
.nav-item-box {
padding-left: 11px;
display: flex;
li{
li {
position: relative;
margin-right: 60px;
.name{
.name {
line-height: 72px;
font-size: 22px;
color: #333333;
cursor: pointer;
a{
a {
color: #333333;
font-size: 22px;
text-decoration: none;
}
&.active{
&.active {
font-weight: 500;
color: #AA1941;
a{
color: #aa1941;
a {
// font-weight: 500;
color: #AA1941;
color: #aa1941;
}
}
}
&:hover{
.name{
color: #AA1941;
&:hover {
.name {
color: #aa1941;
font-weight: 500;
a{
a {
// font-weight: 500;
color: #AA1941;
color: #aa1941;
}
}
.child-item{
.one-level{
.child-item {
.one-level {
display: block;
}
}
}
.child-item{
.child-item {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: 72px;
......@@ -430,62 +456,62 @@ ul,li{
display: flex;
background: #fff;
z-index: 999;
.one-level{
.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{
.li {
margin-bottom: 36px;
display: flex;
justify-content: space-between;
&.active{
.name{
&.active {
.name {
color: rgba(170, 25, 65, 1);
}
}
.name{
.name {
font-weight: 400;
line-height: 100%;
color: #333333;
font-size: 16px;
white-space: nowrap;
a{
a {
color: #333333;
font-size: 16px;
}
}
.el-icon-arrow-right{
.el-icon-arrow-right {
color: rgba(51, 51, 51, 1);
margin-left: 15px;
}
&:hover{
.name{
&:hover {
.name {
color: rgba(170, 25, 65, 1);
a{
a {
color: rgba(170, 25, 65, 1);
}
}
.el-icon-arrow-right{
.el-icon-arrow-right {
color: rgba(170, 25, 65, 1);
}
}
}
}
.two-level{
.two-level {
pointer-events: auto;
padding: 34px 41px 0 24px;
.name{
.name {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
&:hover{
&:hover {
color: rgba(170, 25, 65, 1);
}
a{
a {
font-size: 16px;
font-weight: 400;
line-height: 20px;
......
langs/en-US.js 0 → 100644
浏览文件 @ f653cdb8
export default {
menu: {
about: 'About'
}
}
langs/zh-CN.js 0 → 100644
浏览文件 @ f653cdb8
export default {
menu: {
about: '关于紫荆'
}
}
middleware/i18n.js 0 → 100644
浏览文件 @ f653cdb8
export default function({ app, store }) {
const defaultLocale = app.i18n.fallbackLocale
const locale = app.$cookies.get('lang') || defaultLocale
store.dispatch('switchLocale', locale)
}
nuxt.config.js
浏览文件 @ f653cdb8
......@@ -81,6 +81,7 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'@/plugins/i18n',
'@/plugins/axios',
'@/plugins/element-ui',
{
......@@ -101,14 +102,14 @@ export default {
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [],
modules: ['cookie-universal-nuxt'],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: [/^element-ui/]
},
router: {
middleware: ['device']
middleware: ['device', 'i18n']
}
// proxy: {
// '/api': {
......
package-lock.json
浏览文件 @ f653cdb8
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
浏览文件 @ f653cdb8
......@@ -10,13 +10,15 @@
},
"dependencies": {
"axios": "^0.21.1",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.9.1",
"element-ui": "^2.15.1",
"lodash": "^4.17.21",
"nuxt": "^2.15.3",
"qs": "^6.10.1",
"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1"
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4"
},
"devDependencies": {
"sass": "^1.32.11",
......
plugins/i18n.js 0 → 100644
浏览文件 @ f653cdb8
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zhCN from '@/langs/zh-CN'
import enUS from '@/langs/en-US'
Vue.use(VueI18n)
export default ({ app, store }) => {
app.i18n = new VueI18n({
locale: store.state.locale,
fallbackLocale: 'zh-CN',
messages: { 'zh-CN': zhCN, 'en-US': enUS }
})
}
store/index.js 0 → 100644
浏览文件 @ f653cdb8
export const state = () => ({
locales: ['zh-CN', 'en-US'],
locale: 'zh-CN'
})
export const mutations = {
setLocale(state, locale) {
if (state.locales.includes(locale)) {
state.locale = locale
}
}
}
export const actions = {
switchLocale({ commit }, locale) {
commit('setLocale', locale)
this.app.i18n.locale = locale
this.app.$cookies.set('lang', locale)
process.client && location.reload()
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论