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-06 15:59:33 +08:00
parent c019214c7c
commit 18f1083182
8 changed files with 194 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

55
src/test.html Normal file
View File

@@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.sticky header {
position: sticky;
background: linear-gradient(180deg, #0A51AE 0%, rgba(25,84,167,0.9) 56%, rgba(21,82,167,0.7) 69%, rgba(16,80,168,0.4) 85%, rgba(11,81,173,0) 100%);
width: 120rem;
top: 0;
/*font-size: 20px;*/
/*padding: 10px;*/
z-index: 1;
/*margin: 0 auto;*/
display: flex;
justify-content: center;
align-content: center;
}
/*.sticky shadow::before {*/
/* content: '';*/
/* box-shadow: 0 0 10px 1px #333;*/
/* position: fixed;*/
/* width: 100%;*/
/*}*/
/*.sticky shadow::after {*/
/* content: '';*/
/* width: 100%;*/
/* height: 15px;*/
/* background-color: #fff;*/
/* position: absolute;*/
/* top: 0;*/
/*}*/
.sticky main {
height: 1800px;
/*padding-top: 10px;*/
line-height: 200%;
}
</style>
<title>Document</title>
</head>
<body>
<div class='sticky'>
<header>LOGO</header>
<!-- <shadow></shadow>-->
<main>很多内容文本</main>
</div>
</body>
</html>

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

@@ -1,69 +1,31 @@
<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>-->
<!-- <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 id="header_bgc" style="background: linear-gradient(180deg, #0A51AE 0%, rgba(25,84,167,0.9) 56%, rgba(21,82,167,0.7) 69%, rgba(16,80,168,0.4) 85%, rgba(11,81,173,0) 100%);">
<div class="header" id="header">
<!--导航部分-->
<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="4" :xl="5">
<div class="icon">
<!-- <div class="icont"><img src="@/assets/header/logo@2x.png" alt=""></div>-->
<div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
<div class="icont" :style="{display:logoOne}"><img src="@/assets/header/logob.png" alt=""></div>
<div class="icont" :style="{display:logoTwo}"><img src="@/assets/header/logol.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">
<div class="banner">
<router-link to="/home">
<router-link to="/home" v-bind:style="{color:link_color}">
<div class="link_text">
<div v-show="$i18n.locale === 'cn'" class="link_text_title cn_title">首页</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">
<!-- 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">
<div class="link_text" id="link_text" v-if="menu.displayType != 4" v-bind:style="{color:link_color}">
<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"
@@ -119,9 +81,36 @@ export default {
width: document.documentElement.clientWidth >= 1200,
pc: document.documentElement.clientWidth > 992,
menuData: [],
link_color:'#C5DCFE',
logoOne:'block',
logoTwo:'none'
}
},
mounted() {
let Head = document.getElementById('header')
let header_bgc = document.getElementById('header_bgc')
// let link_text = document.getElementById('link_text') 为啥不能更改
window.onscroll = ()=>{
// 获取滚动距离
let top = document.documentElement.scrollTop || document.body.scrollTop;
if (top !== 0) {
Head.style = "position: fixed;top: 0;background-color: #fff;"
header_bgc.style= "position: fixed;top: 0;background-color: #fff;box-shadow: 0px 1px 3px 0px rgba(8,57,122,0.18);"
this.link_color='#0A51AE'
this.logoOne='none'
this.logoTwo='block'
// // link_text.style="color:#fff;"
// link_text.addClass('active')
}else if(top === 0){
Head.style = "position: static;"
header_bgc.style= "position: static;background: linear-gradient(180deg, #0A51AE 0%, rgba(25,84,167,0.9) 56%, rgba(21,82,167,0.7) 69%, rgba(16,80,168,0.4) 85%, rgba(11,81,173,0) 100%);"
this.link_color='#C5DCFE'
this.logoOne='block'
this.logoTwo='none'
}
}
const that = this
window.onresize = () => {
return (() => {
@@ -165,6 +154,10 @@ export default {
</script>
<style scoped lang="scss">
.active{
color: red;
}
.cn_title{
padding: 0 0.7rem;
}
@@ -184,39 +177,18 @@ export default {
height: 2.6rem;
}
}
#header_bgc{
width: 100%;
height: 7.6rem;
display: flex;
justify-content: center;
align-content: center;
}
.header {
//width: 100rem;
width: 124rem;
margin: 0 auto;
.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;
.switchLang {
cursor: pointer;
font-size: 1.6rem;
}
.link {
line-height: 2.2rem;
width: 80%;
margin: .4rem auto;
border-radius: 1.1rem;
}
.link:hover {
background: rgba(255, 255, 255, 0.7);
}
}
width: 124rem;
z-index: 9999;
.bottom {
height: 7.6rem;
//height: 11rem;
@@ -224,7 +196,7 @@ export default {
border-radius: 0rem 0rem 2rem 2rem;
.icon {
margin-left: 1rem;
margin-left: 4rem;
div {
margin-top: 2.4rem;
@@ -234,7 +206,7 @@ export default {
.icont {
img {
// todo logo有问题
width: 23.3rem;
width: 16rem;
//width: 15rem;
}
}
@@ -249,7 +221,8 @@ export default {
.banner {
a {
text-decoration: none;
color: #ffffff;
//color: #ffffff;
//color: #C5DCFE;
}
width: 100%;
@@ -265,7 +238,8 @@ export default {
font-size: 1.6rem;
font-family: "微软雅黑";
font-weight: 400;
color: #C5DCFE;
//color: red!important;
cursor: pointer;
display: flex;
align-items: center;
@@ -273,11 +247,10 @@ export default {
vertical-align: middle;
}
.link_text_title {
.link_text_title {
position: relative;
}
.secondary {
display: none;
width: 25rem;

1
src/views/index/components/academy_and_sciences.vue
View File

@@ -135,6 +135,7 @@ export default {
pageNum: 1,
pageSize: 9
}).then(res => {
console.log(res.rows);
this.academyData = res.rows;
});
},