odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'clay fix : header调整完毕' (#11) from clay into master

Browse Source 
Reviewed-on: http://git.hchyun.com/feashow/sist_web/pulls/11
This commit is contained in:
clay
2022-10-04 16:42:19 +00:00
parent a372dff77c a267822a8b
commit 09c1836ca5
4 changed files with 495 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/header/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
src/assets/header/logo@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

220
src/views/header/index.vue
View File

@@ -1,70 +1,71 @@
<template>
<div style="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%);
">
<div class="header">
<!--头部部分-->
<!-- <div class="top">-->
<!-- <el-row>-->
<!--&lt;!&ndash; <el-col :span="2">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!--&lt;!&ndash; {{ $t('message.student') }}&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!--&lt;!&ndash; <el-col :span="2">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!--&lt;!&ndash; {{ $t('message.staff') }}&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!--&lt;!&ndash; <el-col :span="2">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!--&lt;!&ndash; {{ $t('message.alumni') }}&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!--&lt;!&ndash; <el-col :span="2">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!--&lt;!&ndash; {{ $t('message.examine') }}&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!--&lt;!&ndash; <el-col :span="3">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!--&lt;!&ndash; {{ $t('message.services_portal') }}&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!-- <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="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>
<!-- <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">
<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="icont"><img src="@/assets/header/logo@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">
<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 v-show="$i18n.locale === 'cn'" class="link_text_title cn_title">首页</div>
<div v-show="$i18n.locale === 'en'" class="link_text_title en_title">Home</div>
</div>
</router-link>
<span v-for="(menu,index) in menuData" :key="index">
<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"
<span class="cn_title" v-if="menu.displayType == 3 || menu.displayType == 1"
v-show="$i18n.locale === 'cn'">{{ menu.title }}</span>
<span class="en_title"v-if="menu.displayType == 2 || menu.displayType == 1"
v-show="$i18n.locale === 'en'">{{ menu.englishTitle }}</span>
<div class="secondary">
<ul style="text-align:left;">
@@ -96,13 +97,14 @@
</div>
</span>
<div class="iconfont" @click="login"><img src="@/assets/header/denglu.png" alt=""></div>
<div class="switchLang" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>
<div class="iconfont" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>
</div>
</el-col>
</div>
</el-row>
</div>
</div>
</div>
</template>
<script>
@@ -115,61 +117,76 @@ export default {
english: false,
width: document.documentElement.clientWidth >= 1200,
pc: document.documentElement.clientWidth > 992,
menuData: []
};
menuData: [],
}
},
mounted() {
const that = this;
const that = this
window.onresize = () => {
return (() => {
//这里写要操作的函数
window.screenWidth = document.body.clientWidth;
that.width = window.screenWidth >= 1200;
})();
};
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));
});
this.menuData = res.data
sessionStorage.setItem("menu", JSON.stringify(res.data))
})
}
},
methods: {
login() {
let routeData = this.$router.resolve("/admin");
window.open(routeData.href, "_blank")
},
menuCut(menu) {
console.log(menu);
console.log(menu)
this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
},
login(){
let routeData = this.$router.resolve("/admin");
window.open(routeData.href,"_blank")
},
switchLang() {
let lang = "";
if (this.$i18n.locale === "en") {
lang = "cn";
let lang = ''
if (this.$i18n.locale === 'en') {
lang = 'cn'
} else {
lang = "en";
lang = 'en'
}
sessionStorage.setItem("lang", lang);
let fullPath = this.$route.fullPath;
sessionStorage.setItem("lang", lang)
let fullPath = this.$route.fullPath
debugger
window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang);
window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang)
}
}
};
}
</script>
<style scoped lang="scss">
.grid-content{
height: 1px;
.cn_title{
padding: 0 0.7rem;
}
.en_title{
padding: 0 0.7rem;
}
.iconfont {
cursor: pointer;
display: inline-block;
line-height: 7.6rem;
//line-height: 11rem;
padding-top: .7rem;
margin-left: .5rem;
img {
width: 2.5rem;
height: 2.6rem;
}
}
.header {
width: 100%;
//width: 100rem;
width: 124rem;
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;
@@ -179,9 +196,12 @@ export default {
text-align: center;
width: 100%;
height: 3rem;
background: #1956BC;
//background: #1956BC;
.switchLang {
cursor: pointer;
font-size: 1.6rem;
}
.link {
line-height: 2.2rem;
@@ -197,22 +217,24 @@ export default {
}
.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;
height: 7.6rem;
//height: 11rem;
//background: rgba(25, 86, 188, 0.6);
border-radius: 0rem 0rem 2rem 2rem;
.icon {
margin-left: 4rem;
margin-left: 1rem;
div {
margin-top: 3.5rem;
margin-left: 10rem;
margin-top: 2.4rem;
//margin-top: 4.4rem;
}
.icont {
img {
width: 22.6rem;
height: 4rem;
// todo logo有问题
// width: 23.3rem;
width: 15rem;
}
}
@@ -229,11 +251,11 @@ export default {
color: #ffffff;
}
//width: 100%;
height: 11rem;
width: 100%;
height: 7.6rem;
//height: 11rem;
clear: left;
margin-left: 3rem;
display: flex;
.link_text {
height: 100%;
@@ -255,23 +277,7 @@ export default {
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;

382
src/views/header/index_new.vue Normal file
View File

@@ -0,0 +1,382 @@
<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 type="flex" justify="center">
<el-col :sm="24" :md="21" :lg="16" :xl="16">
<el-row type="flex" justify="center">
<el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="5" :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="21" :lg="19" :xl="19">
<div class="banner">
<router-link to="/home">
<div class="link_text">
<div v-show="$i18n.locale === 'cn'" class="link_text_title cn_title">首页</div>
<div v-show="$i18n.locale === 'en'" class="link_text_title en_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 class="cn_title" v-if="menu.displayType == 3 || menu.displayType == 1"
v-show="$i18n.locale === 'cn'">{{ menu.title }}</span>
<span class="en_title"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" @click="login"><img src="@/assets/header/denglu.png" alt=""></div>
<div class="iconfont" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>
</div>
</el-col>
</el-row>
</el-col>
<!-- <el-col :span="2">-->
<!-- <div class="iconfont" @click="login"><img src="@/assets/header/denglu.png" alt=""></div>-->
<!-- <div class="switchLang" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>-->
<!-- </el-col>-->
</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"));
},
login() {
let routeData = this.$router.resolve("/admin");
window.open(routeData.href, "_blank")
},
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">
.cn_title{
padding: 0 0.7rem;
}
.en_title{
padding: 0 0.7rem;
}
.iconfont {
cursor: pointer;
display: inline-block;
line-height: 11rem;
padding-top: .7rem;
margin-left: .5rem;
img {
width: 2.5rem;
height: 2.6rem;
}
}
//.switchLang {
// cursor: pointer;
// display: inline-block;
// line-height: 11rem;
// padding-top: .5rem;
//
// img {
// width: 2.5rem;
// height: 2.6rem;
// }
//}
.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 {
margin: 0 auto;
//width: 70%;
height: 11rem;
.icon {
div {
margin-top: 4em;
}
.icont {
img {
width: 22.6rem;
}
}
.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;
}
.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>