341 lines
8.3 KiB
Vue
341 lines
8.3 KiB
Vue
<template>
|
|
<div class="header">
|
|
<!--头部部分-->
|
|
<div class="top">
|
|
<el-row>
|
|
<!-- <el-col :span="2">-->
|
|
<!-- <div class="link">-->
|
|
<!-- {{ $t('message.student') }}-->
|
|
<!-- </div>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="2">-->
|
|
<!-- <div class="link">-->
|
|
<!-- {{ $t('message.staff') }}-->
|
|
<!-- </div>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="2">-->
|
|
<!-- <div class="link">-->
|
|
<!-- {{ $t('message.alumni') }}-->
|
|
<!-- </div>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="2">-->
|
|
<!-- <div class="link">-->
|
|
<!-- {{ $t('message.examine') }}-->
|
|
<!-- </div>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="3">-->
|
|
<!-- <div class="link">-->
|
|
<!-- {{ $t('message.services_portal') }}-->
|
|
<!-- </div>-->
|
|
<!-- </el-col>-->
|
|
<el-col :span="11">
|
|
<div style="width: 10px;height: 10px;"></div>
|
|
</el-col>
|
|
<el-col :offset="11" :span="2">
|
|
<div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!--导航部分-->
|
|
<div class="bottom">
|
|
<el-row>
|
|
<!-- <el-col v-show="width" :span="1">-->
|
|
<!-- <div class="grid-content"></div>-->
|
|
<!-- </el-col>-->
|
|
<div class="bottom-div" style="margin-left: 1rem;">
|
|
<el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="4" :xl="5">
|
|
<div class="icon">
|
|
<div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
|
|
<!-- <div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>-->
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
|
|
<div class="banner">
|
|
<router-link to="/home">
|
|
<div class="link_text">
|
|
<div v-show="$i18n.locale === 'cn'" style="padding: 0 1.1rem;" class="link_text_title">学院首页</div>
|
|
<div v-show="$i18n.locale === 'en'" style="padding: 0 .9rem" class="link_text_title">Home</div>
|
|
</div>
|
|
</router-link>
|
|
|
|
<span v-for="(menu,index) in menuData" :key="index"
|
|
v-if="menu.displayType == 1 ||($i18n.locale === 'cn'&& menu.displayType == 3)||($i18n.locale === 'cn'&& menu.displayType == 2)">
|
|
<a>
|
|
<div class="link_text">
|
|
<div class="link_text_title">
|
|
<span style="padding: 0 1.1rem;" v-show="$i18n.locale === 'cn'">{{ menu.title }}</span>
|
|
<span style="padding: 0 .9rem" v-show="$i18n.locale === 'en'">{{ menu.englishTitle }}</span>
|
|
<div class="secondary">
|
|
<ul style="text-align:left;">
|
|
<span v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
|
|
<li class="menu_list" v-if="item.displayType != 4">
|
|
<div class="menu_suffix">
|
|
<div>
|
|
<span v-show="$i18n.locale === 'cn'">{{ item.title }}</span>
|
|
<span v-show="$i18n.locale === 'en'">{{ item.englishTitle }}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</span>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!--<div class="secondary" v-if="index == 5">-->
|
|
</div>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</el-col>
|
|
</div>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getNavigation} from "@/api";
|
|
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
english: false,
|
|
width: document.documentElement.clientWidth >= 1200,
|
|
pc: document.documentElement.clientWidth > 992,
|
|
menuData: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
const that = this
|
|
window.onresize = () => {
|
|
return (() => {
|
|
//这里写要操作的函数
|
|
window.screenWidth = document.body.clientWidth
|
|
that.width = window.screenWidth >= 1200
|
|
})()
|
|
}
|
|
},
|
|
created() {
|
|
if (this.pc) {
|
|
getNavigation({}).then(res => {
|
|
this.menuData = res.data
|
|
sessionStorage.setItem("menu", JSON.stringify(res.data))
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
menuCut(menu) {
|
|
console.log(menu)
|
|
this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
|
|
},
|
|
switchLang() {
|
|
let lang = ''
|
|
if (this.$i18n.locale === 'en') {
|
|
lang = 'cn'
|
|
} else {
|
|
lang = 'en'
|
|
}
|
|
sessionStorage.setItem("lang", lang)
|
|
let fullPath = this.$route.fullPath
|
|
debugger
|
|
window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.header {
|
|
//width: 100rem;
|
|
width: 130rem;
|
|
margin: 0 auto;
|
|
|
|
.top {
|
|
font-size: 1.2rem;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 3rem;
|
|
background: #1956BC;
|
|
|
|
.switchLang {
|
|
cursor: pointer;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.link {
|
|
line-height: 2.2rem;
|
|
width: 80%;
|
|
margin: .4rem auto;
|
|
border-radius: 1.1rem;
|
|
}
|
|
|
|
.link:hover {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
}
|
|
|
|
.bottom {
|
|
height: 7.6rem;
|
|
background: rgba(25, 86, 188, 0.6);
|
|
border-radius: 0rem 0rem 2rem 2rem;
|
|
|
|
.icon {
|
|
margin-left: 4rem;
|
|
|
|
div {
|
|
margin-top: 2.4rem;
|
|
}
|
|
|
|
.icont {
|
|
img {
|
|
width: 23.3rem;
|
|
}
|
|
}
|
|
|
|
.iconb {
|
|
img {
|
|
width: 8.9rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
a {
|
|
text-decoration: none;
|
|
color: #ffffff;
|
|
}
|
|
|
|
width: 100%;
|
|
height: 7.6rem;
|
|
clear: left;
|
|
margin-left: 3rem;
|
|
|
|
.link_text {
|
|
height: 100%;
|
|
text-align: center;
|
|
float: left;
|
|
font-size: 1.6rem;
|
|
font-family: "微软雅黑";
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
.link_text_title {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.secondary {
|
|
display: none;
|
|
width: 25rem;
|
|
position: absolute;
|
|
//top: 6rem;
|
|
background-color: transparent;
|
|
text-align: left !important;
|
|
margin-top: 1rem;
|
|
//display: block;
|
|
//width: 100%;
|
|
//height: 5rem;
|
|
//background-color: #1956BC;
|
|
|
|
|
|
ul {
|
|
background-color: #ffffff;
|
|
display: inline-block;
|
|
border-radius: 0 0 .5rem .5rem;
|
|
|
|
li {
|
|
margin-top: 1.2rem;
|
|
height: 2rem;
|
|
list-style: none;
|
|
//border-bottom: .1rem solid gray;
|
|
color: #666666;
|
|
//display: flex;
|
|
//align-items: center;
|
|
//justify-content: center;
|
|
//clear: left;
|
|
|
|
//.menu_prefix{
|
|
// width: 1.2rem;
|
|
//}
|
|
.menu_suffix {
|
|
|
|
margin-left: .6rem;
|
|
display: inline-block;
|
|
//width: 14.3rem;
|
|
border-left: .2rem solid #ffffff;
|
|
margin-right: .8rem;
|
|
padding-left: .8rem;
|
|
|
|
div {
|
|
padding: 0.2rem .4rem;
|
|
}
|
|
}
|
|
|
|
div {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
li:hover {
|
|
//background-color: rgba(25, 86, 188, 0.6);
|
|
}
|
|
|
|
li:last-child {
|
|
margin-bottom: 1.4rem;
|
|
//border-bottom: none;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.link_text:hover {
|
|
//.border{
|
|
// background-color: #fff;
|
|
//}
|
|
.secondary {
|
|
display: block;
|
|
}
|
|
|
|
.link_text_title {
|
|
//font-weight: bolder !important;
|
|
}
|
|
}
|
|
|
|
.menu_list:hover {
|
|
.menu_suffix {
|
|
|
|
border-left: .2rem solid #1956BC;
|
|
|
|
div {
|
|
color: #0054B0;
|
|
background-color: #C3D7EC;
|
|
border-radius: 0.2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) {
|
|
.banner {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|