374 lines
11 KiB
Vue
374 lines
11 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="8" :xl="8">
|
|
<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="14" :xl="14">
|
|
<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 === 'en'&& menu.displayType == 2)">-->
|
|
<div class="link_text" v-if="menu.displayType != 4">
|
|
<div class="link_text_title">
|
|
<span style="padding: 0 1.1rem;" v-if="menu.displayType == 3 || menu.displayType == 1"
|
|
v-show="$i18n.locale === 'cn'">{{ menu.title }}</span>
|
|
<span style="padding: 0 .9rem" v-if="menu.displayType == 2 || menu.displayType == 1"
|
|
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 && (item.displayType == 3 || item.displayType == 1)"
|
|
v-show="$i18n.locale === 'cn'">
|
|
<div class="menu_suffix">
|
|
<div>
|
|
<span>{{ item.title }}</span>
|
|
<!-- <span v-if="(item.displayType == 2 || item.displayType == 1)&&$i18n.locale === 'en'" >{{ item.englishTitle }}</span>-->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="menu_list"
|
|
v-if="item.displayType != 4&&(item.displayType == 2 || item.displayType == 1)"
|
|
v-show="$i18n.locale === 'en'">
|
|
<div class="menu_suffix" v-if="">
|
|
<div>
|
|
<span>{{ item.englishTitle }}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</span>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!--<div class="secondary" v-if="index == 5">-->
|
|
</div>
|
|
</span>
|
|
<div class="iconfont"><img src="@/assets/header/denglu.png" alt=""></div>
|
|
<div class="switchLang"><img src="@/assets/header/en.png" alt=""></div>
|
|
</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">
|
|
.grid-content{
|
|
height: 1px;
|
|
}
|
|
.header {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
background: linear-gradient(180deg, rgba(61,96,163,0.91) 0%, rgba(61,96,163,0.64) 35%, rgba(61,96,163,0.42) 65%, rgba(73,133,234,0.33) 77%, rgba(73,133,234,0.02) 100%);
|
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
.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: 11rem;
|
|
//background: linear-gradient(180deg, rgba(61,96,163,0.91) 0%, rgba(61,96,163,0.64) 35%, rgba(61,96,163,0.42) 65%, rgba(73,133,234,0.33) 77%, rgba(73,133,234,0.02) 100%);
|
|
//border-radius: 0rem 0rem 2rem 2rem;
|
|
|
|
.icon {
|
|
margin-left: 4rem;
|
|
|
|
div {
|
|
margin-top: 3.5rem;
|
|
margin-left: 10rem;
|
|
}
|
|
|
|
.icont {
|
|
img {
|
|
width: 22.6rem;
|
|
height: 4rem;
|
|
}
|
|
}
|
|
|
|
.iconb {
|
|
img {
|
|
width: 8.9rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
a {
|
|
text-decoration: none;
|
|
color: #ffffff;
|
|
}
|
|
|
|
//width: 100%;
|
|
height: 11rem;
|
|
clear: left;
|
|
margin-left: 3rem;
|
|
display: flex;
|
|
|
|
.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;
|
|
}
|
|
|
|
.iconfont {
|
|
margin-top: 2.1rem;
|
|
margin-left: 1.3rem;
|
|
img {
|
|
width: 2.5rem;
|
|
height: 2.6rem;
|
|
}
|
|
}
|
|
.switchLang {
|
|
margin-top: 2.1rem;
|
|
margin-left: .4rem;
|
|
cursor: pointer;
|
|
img{
|
|
width: 2.5rem;
|
|
height: 2.6rem;
|
|
}
|
|
}
|
|
.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>
|