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

dengjie commit : header头部修改样式

Browse Source
This commit is contained in:
clay
2022-10-03 18:30:15 +08:00
parent b8e3653069
commit f3a24641e1
2 changed files with 97 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

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

@@ -1,41 +1,41 @@
<template> <template>
<div class="header"> <div class="header">
<!--头部部分--> <!--头部部分-->
<div class="top"> <!-- <div class="top">-->
<el-row> <!-- <el-row>-->
<!-- <el-col :span="2">--> <!--&lt;!&ndash; <el-col :span="2">&ndash;&gt;-->
<!-- <div class="link">--> <!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!-- {{ $t('message.student') }}--> <!--&lt;!&ndash; {{ $t('message.student') }}&ndash;&gt;-->
<!-- </div>--> <!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </el-col>--> <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!-- <el-col :span="2">--> <!--&lt;!&ndash; <el-col :span="2">&ndash;&gt;-->
<!-- <div class="link">--> <!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!-- {{ $t('message.staff') }}--> <!--&lt;!&ndash; {{ $t('message.staff') }}&ndash;&gt;-->
<!-- </div>--> <!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </el-col>--> <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!-- <el-col :span="2">--> <!--&lt;!&ndash; <el-col :span="2">&ndash;&gt;-->
<!-- <div class="link">--> <!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!-- {{ $t('message.alumni') }}--> <!--&lt;!&ndash; {{ $t('message.alumni') }}&ndash;&gt;-->
<!-- </div>--> <!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </el-col>--> <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!-- <el-col :span="2">--> <!--&lt;!&ndash; <el-col :span="2">&ndash;&gt;-->
<!-- <div class="link">--> <!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!-- {{ $t('message.examine') }}--> <!--&lt;!&ndash; {{ $t('message.examine') }}&ndash;&gt;-->
<!-- </div>--> <!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </el-col>--> <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!-- <el-col :span="3">--> <!--&lt;!&ndash; <el-col :span="3">&ndash;&gt;-->
<!-- <div class="link">--> <!--&lt;!&ndash; <div class="link">&ndash;&gt;-->
<!-- {{ $t('message.services_portal') }}--> <!--&lt;!&ndash; {{ $t('message.services_portal') }}&ndash;&gt;-->
<!-- </div>--> <!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </el-col>--> <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<el-col :span="11"> <!-- <el-col :span="11">-->
<div style="width: 10px;height: 10px;"></div> <!-- <div style="width: 10px;height: 10px;"></div>-->
</el-col> <!-- </el-col>-->
<el-col :offset="11" :span="2"> <!-- <el-col :offset="11" :span="2">-->
<div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div> <!-- <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
</div> <!-- </div>-->
<!--导航部分--> <!--导航部分-->
<div class="bottom"> <div class="bottom">
<el-row> <el-row>
@@ -43,17 +43,17 @@
<!-- <div class="grid-content"></div>--> <!-- <div class="grid-content"></div>-->
<!-- </el-col>--> <!-- </el-col>-->
<div class="bottom-div" style="margin-left: 1rem;"> <div class="bottom-div" style="margin-left: 1rem;">
<el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="4" :xl="5"> <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="8" :xl="8">
<div class="icon"> <div class="icon">
<div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div> <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 class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>-->
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19"> <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
<div class="banner"> <div class="banner">
<router-link to="/home"> <router-link to="/home">
<div class="link_text"> <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 === '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 === 'en'" style="padding: 0 .9rem" class="link_text_title">Home</div>
</div> </div>
</router-link> </router-link>
@@ -84,6 +84,8 @@
</div> </div>
</a> </a>
</span> </span>
<div class="iconfont"><img src="@/assets/header/magnifier.png" alt=""></div>
<div class="switchLang"><span>EN</span></div>
</div> </div>
</el-col> </el-col>
</div> </div>
@@ -102,52 +104,52 @@ export default {
english: false, english: false,
width: document.documentElement.clientWidth >= 1200, width: document.documentElement.clientWidth >= 1200,
pc: document.documentElement.clientWidth > 992, pc: document.documentElement.clientWidth > 992,
menuData: [], menuData: []
} };
}, },
mounted() { mounted() {
const that = this const that = this;
window.onresize = () => { window.onresize = () => {
return (() => { return (() => {
//这里写要操作的函数 //这里写要操作的函数
window.screenWidth = document.body.clientWidth window.screenWidth = document.body.clientWidth;
that.width = window.screenWidth >= 1200 that.width = window.screenWidth >= 1200;
})() })();
} };
}, },
created() { created() {
if (this.pc) { if (this.pc) {
getNavigation({}).then(res => { getNavigation({}).then(res => {
this.menuData = res.data this.menuData = res.data;
sessionStorage.setItem("menu", JSON.stringify(res.data)) sessionStorage.setItem("menu", JSON.stringify(res.data));
}) });
} }
}, },
methods: { methods: {
menuCut(menu) { menuCut(menu) {
console.log(menu) console.log(menu);
this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang")); this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
}, },
switchLang() { switchLang() {
let lang = '' let lang = "";
if (this.$i18n.locale === 'en') { if (this.$i18n.locale === "en") {
lang = 'cn' lang = "cn";
} else { } else {
lang = 'en' lang = "en";
} }
sessionStorage.setItem("lang", lang) sessionStorage.setItem("lang", lang);
let fullPath = this.$route.fullPath let fullPath = this.$route.fullPath;
debugger debugger
window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang) window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang);
} }
} }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.header { .header {
//width: 100rem; //width: 100rem;
width: 130rem; width: 190.3rem;
margin: 0 auto; margin: 0 auto;
.top { .top {
@@ -160,10 +162,7 @@ export default {
height: 3rem; height: 3rem;
background: #1956BC; background: #1956BC;
.switchLang {
cursor: pointer;
font-size: 1.6rem;
}
.link { .link {
line-height: 2.2rem; line-height: 2.2rem;
@@ -179,20 +178,22 @@ export default {
} }
.bottom { .bottom {
height: 7.6rem; height: 11rem;
background: rgba(25, 86, 188, 0.6); 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; border-radius: 0rem 0rem 2rem 2rem;
.icon { .icon {
margin-left: 4rem; margin-left: 4rem;
div { div {
margin-top: 2.4rem; margin-top: 3.5rem;
margin-left: 10rem;
} }
.icont { .icont {
img { img {
width: 23.3rem; width: 22.6rem;
height: 4rem;
} }
} }
@@ -209,10 +210,11 @@ export default {
color: #ffffff; color: #ffffff;
} }
width: 100%; //width: 100%;
height: 7.6rem; height: 11rem;
clear: left; clear: left;
margin-left: 3rem; margin-left: 3rem;
display: flex;
.link_text { .link_text {
height: 100%; height: 100%;
@@ -234,7 +236,33 @@ export default {
position: relative; position: relative;
} }
.iconfont {
width: 4rem;
height: 4.2rem;
border: 0.1rem solid #C5DCFE;
text-align: center;
margin-top: 3.4rem;
margin-left: 2.6rem;
img {
margin-top: 0.9rem;
width: 2.4rem;
height: 2.4rem;
}
}
.switchLang {
width: 4rem;
height: 4.2rem;
border: 0.1rem solid #C5DCFE;
margin-top: 3.4rem;
margin-left: .6rem;
cursor: pointer;
text-align: center;
span{
font-size: 2rem;
line-height: 4rem;
color: #C5DCFE;
}
}
.secondary { .secondary {
display: none; display: none;
width: 25rem; width: 25rem;