Skip to content

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

update

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