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>
<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="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="bottom">
<el-row>
@@ -43,17 +43,17 @@
<!-- <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">
<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="19" :xl="19">
<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 === '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>
@@ -84,6 +84,8 @@
</div>
</a>
</span>
<div class="iconfont"><img src="@/assets/header/magnifier.png" alt=""></div>
<div class="switchLang"><span>EN</span></div>
</div>
</el-col>
</div>
@@ -102,52 +104,52 @@ 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: {
menuCut(menu) {
console.log(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'
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">
.header {
//width: 100rem;
width: 130rem;
width: 190.3rem;
margin: 0 auto;
.top {
@@ -160,10 +162,7 @@ export default {
height: 3rem;
background: #1956BC;
.switchLang {
cursor: pointer;
font-size: 1.6rem;
}
.link {
line-height: 2.2rem;
@@ -179,20 +178,22 @@ export default {
}
.bottom {
height: 7.6rem;
background: rgba(25, 86, 188, 0.6);
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: 2.4rem;
margin-top: 3.5rem;
margin-left: 10rem;
}
.icont {
img {
width: 23.3rem;
width: 22.6rem;
height: 4rem;
}
}
@@ -209,10 +210,11 @@ export default {
color: #ffffff;
}
width: 100%;
height: 7.6rem;
//width: 100%;
height: 11rem;
clear: left;
margin-left: 3rem;
display: flex;
.link_text {
height: 100%;
@@ -234,7 +236,33 @@ export default {
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 {
display: none;
width: 25rem;