001
This commit is contained in:
clay
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<!-- <el-row>-->
|
||||
<!-- <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">-->
|
||||
<!-- <div class="grid-content"></div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">-->
|
||||
<!-- <div class="grid-content"></div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- <el-row>-->
|
||||
<!-- <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">-->
|
||||
<!-- <div class="grid-content"></div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">-->
|
||||
<!-- <div class="grid-content"></div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
|
||||
<div class="header">
|
||||
<!--头部部分-->
|
||||
@@ -60,82 +60,32 @@
|
||||
<div class="banner">
|
||||
<router-link to="/">
|
||||
<div class="link_text">
|
||||
<div class="border"></div>
|
||||
<div>学院首页</div>
|
||||
<div class="link_text_title">学院首页</div>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<span v-for="(menu,index) in menuData" :key="index">
|
||||
<span v-for="(menu,index) in menuData" :key="index">
|
||||
<a>
|
||||
<div class="link_text">
|
||||
<div class="border"></div>
|
||||
<div v-show="!english">{{ menu.title }}</div>
|
||||
<div v-show="english">{{ menu.englishTitle }}</div>
|
||||
<div class="link_text_title">
|
||||
<span v-show="!english">{{ menu.title }}</span>
|
||||
<span v-show="english">{{ menu.englishTitle }}</span>
|
||||
</div>
|
||||
<div class="secondary">
|
||||
<ul>
|
||||
<li v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
|
||||
<span v-show="!english">{{ item.title }}</span>
|
||||
<span v-show="english">{{ item.englishTitle }}</span>
|
||||
<li class="menu_list" v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
|
||||
<div class="menu_suffix">
|
||||
<div>
|
||||
<span v-show="!english">{{ item.title }}</span>
|
||||
<span v-show="english">{{ item.englishTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</span>
|
||||
<!-- <router-link to="/ts">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>党群工作</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- <router-link to="/et">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>师资队伍</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- <router-link to="/">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>教育教学</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- <router-link to="/">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>科学研究</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- <router-link to="/">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>学科建设</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- <router-link to="/">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>学生工作</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- <router-link to="/">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>校友工作</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- <router-link to="/">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>国际化</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- <router-link to="/">-->
|
||||
<!-- <div class="link_text">-->
|
||||
<!-- <div class="border"></div>-->
|
||||
<!-- <div>资料下载</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-link>-->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -150,10 +100,10 @@ export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
english:false,
|
||||
width: document.documentElement.clientWidth >=1200,
|
||||
pc:document.documentElement.clientWidth >992,
|
||||
menuData:[],
|
||||
english: false,
|
||||
width: document.documentElement.clientWidth >= 1200,
|
||||
pc: document.documentElement.clientWidth > 992,
|
||||
menuData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -162,23 +112,24 @@ export default {
|
||||
return (() => {
|
||||
//这里写要操作的函数
|
||||
window.screenWidth = document.body.clientWidth
|
||||
that.width = window.screenWidth>=1200
|
||||
that.width = window.screenWidth >= 1200
|
||||
})()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.pc){
|
||||
getNavigation({}).then(res=>{
|
||||
if (this.pc) {
|
||||
getNavigation({}).then(res => {
|
||||
this.menuData = res.data
|
||||
sessionStorage.setItem("menu",JSON.stringify(res.data))
|
||||
sessionStorage.setItem("menu", JSON.stringify(res.data))
|
||||
})
|
||||
}
|
||||
//this.$router.push("/" + menu.encodeId);
|
||||
//this.$router.push("/" + menu.encodeId);
|
||||
//}
|
||||
},
|
||||
methods: {
|
||||
menuCut(menu){
|
||||
this.$router.push("/pc/" + menu.encodeId);
|
||||
menuCut(menu) {
|
||||
console.log(menu)
|
||||
this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type);
|
||||
},
|
||||
switchLang() {
|
||||
let lang = ''
|
||||
@@ -186,11 +137,11 @@ export default {
|
||||
lang = 'cn'
|
||||
|
||||
this.english = false;
|
||||
this.$store.state.isEnglish= this.english
|
||||
this.$store.state.isEnglish = this.english
|
||||
} else {
|
||||
lang = 'en'
|
||||
this.english = true;
|
||||
this.$store.state.isEnglish= this.english
|
||||
this.$store.state.isEnglish = this.english
|
||||
}
|
||||
this.$i18n.locale = lang;
|
||||
}
|
||||
@@ -202,13 +153,13 @@ export default {
|
||||
.header {
|
||||
width: 110rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.top {
|
||||
font-size: 1.2rem;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 3rem;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: #1956BC;
|
||||
@@ -217,9 +168,11 @@ export default {
|
||||
cursor: pointer;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.link{
|
||||
|
||||
.link {
|
||||
line-height: 2.2rem;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
margin: .4rem auto;
|
||||
border-radius: 1.1rem;
|
||||
}
|
||||
|
||||
@@ -280,59 +233,107 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
.secondary{
|
||||
display: none;
|
||||
li{
|
||||
height: 3rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.secondary {
|
||||
display: none;
|
||||
width: 16.5rem;
|
||||
position: absolute;
|
||||
top: 8rem;
|
||||
background-color: transparent;
|
||||
//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;
|
||||
background-color: #1956BC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
//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:hover {
|
||||
//background-color: rgba(25, 86, 188, 0.6);
|
||||
}
|
||||
li:last-child{
|
||||
border-radius: 0 0 .5rem .5rem;
|
||||
border-bottom: none;
|
||||
|
||||
li:last-child {
|
||||
margin-bottom: 1.4rem;
|
||||
//border-bottom: none;
|
||||
|
||||
}
|
||||
position: absolute;
|
||||
top: 8rem;
|
||||
width: 100%;
|
||||
//height: 5rem;
|
||||
//background-color: #1956BC;
|
||||
}
|
||||
.border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
height: 0.4rem;
|
||||
background: transparent;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
}
|
||||
.link_text:hover{
|
||||
.border{
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
.link_text:hover {
|
||||
//.border{
|
||||
// background-color: #fff;
|
||||
//}
|
||||
.secondary {
|
||||
display: block;
|
||||
}
|
||||
.secondary{
|
||||
display: table;
|
||||
.link_text_title{
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.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{
|
||||
@media screen and (min-width: 1200px) {
|
||||
.banner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user