Skip to content

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

update

上级 a3c8052a
显示空白字符变更
内嵌 并排
正在显示 包含 143 行增加 和 64 行删除
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
@click="goPage(level2Item.path, level2Item.pathType)" :class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
class="name" :key="level2Index + 'level2'"
@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,12 +77,12 @@ ...@@ -57,12 +77,12 @@
</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: [
{ {
...@@ -165,7 +185,7 @@ ...@@ -165,7 +185,7 @@
path: '', path: '',
pathType: 3 pathType: 3
} }
], ]
}, },
{ {
name: '硕士', name: '硕士',
...@@ -250,14 +270,15 @@ ...@@ -250,14 +270,15 @@
} }
}, },
methods: { methods: {
switchLocale(locale) {
this.$store.dispatch('switchLocale', locale)
},
goPage(path, goType) { goPage(path, goType) {
if (parseInt(goType) === 3) { if (parseInt(goType) === 3) {
this.$message('暂未开通，尽请期待') this.$message('暂未开通，尽请期待')
} else { } else {
if (path) { if (path) {
goType goType ? window.open(path) : this.$router.push({ path: path })
? window.open(path)
: this.$router.push({ path: path })
} }
} }
}, },
...@@ -304,7 +325,7 @@ ...@@ -304,7 +325,7 @@
}, },
computed: { computed: {
getNameActive() { getNameActive() {
return (item) => { return item => {
const currentPath = this.$route.path const currentPath = this.$route.path
if (item.path === currentPath) { if (item.path === currentPath) {
return 'name active' return 'name active'
...@@ -320,39 +341,40 @@ ...@@ -320,39 +341,40 @@
} }
} }
} }
} }
</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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论