Skip to content

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

update

上级 a3c8052a
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 105 行增加 和 63 行删除
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"
: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,12 +77,12 @@
</div>
</template>
<script>
export default {
export default {
data() {
return {
navData: [
{
name: '关于紫荆',
name: this.$t('menu.about'),
path: '/about/introduce',
childern: [
{
......@@ -165,7 +185,7 @@
path: '',
pathType: 3
}
],
]
},
{
name: '硕士',
......@@ -250,14 +270,15 @@
}
},
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 })
goType ? window.open(path) : this.$router.push({ path: path })
}
}
},
......@@ -304,7 +325,7 @@
},
computed: {
getNameActive() {
return (item) => {
return item => {
const currentPath = this.$route.path
if (item.path === currentPath) {
return 'name active'
......@@ -320,39 +341,40 @@
}
}
}
}
}
</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
差异被折叠。
plugins/i18n.js 0 → 100644
浏览文件 @ f653cdb8
差异被折叠。
store/index.js 0 → 100644
浏览文件 @ f653cdb8
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论