t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Fix] fix header(navbar) postion and space

Browse Source
This commit is contained in:
barrystone 2021-03-30 23:26:12 +08:00
parent 87af6ce6b3
commit acdd7ac920
3 changed files with 4 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/scss/header.scss
View File

@ -24,10 +24,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
}
.header {
position: relative;
z-index: 99;
position: relative;
top: 40px;
left: 6%;
top: 60px;
width: 88%;
height: 62px;
border-radius: 73px;
@ -35,11 +35,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
background-color: $white;
&--sticky {
// position: fixed;
position: sticky;
z-index: 99;
left: 6%;
top: 65px;
margin-top: 60px;
}
&__left {
float: left;
@ -57,15 +56,12 @@ $font-header-apply: "Noto Serif CJK TC -Black";
&__right {
float: right;
width: 80%;
// background-color: lightgoldenrodyellow;
}
&-links {
// background-color: lightgray;
font-family: $font-header-link;
float: right;
@include headerLinksWidth;
// width: 600px;
margin-right: 92px;
height: 100%;
height: 50px;
@ -85,9 +81,6 @@ $font-header-apply: "Noto Serif CJK TC -Black";
height: 100%;
display: block;
text-align: left;
// &:active {
// border-bottom: $indigo-blue solid 5px;
// }
a {
@include headerLinksFontSize;
@ -99,7 +92,6 @@ $font-header-apply: "Noto Serif CJK TC -Black";
}
&-link--active {
// padding-bottom: 10px;
border-bottom: $indigo-blue solid 3.5px;
}

7
src/assets/scss/home/home.scss
View File

@ -130,7 +130,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
.section {
&-title {
margin-top: 88px;
margin-top: 20px;
@include sectionTitleHeight;
// background-color: chartreuse;
}
@ -144,9 +144,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
font-family: $font-home;
position: relative;
&__title {
// width: 600px;
width: 75%;
// width: 60%;
text-align: center;
// background-color: cornflowerblue;
margin: 0 auto;
@ -159,7 +157,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
margin-bottom: 20px;
// background-color: chocolate;
height: 80px;
// width: 600px;
width: 100%;
p {
@include homeTitleFontsize;
@ -175,7 +172,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
text-align: center;
// background-color: chocolate;
height: 80px;
// width: 600px;
width: 100%;
margin: 0 auto;
margin-top: 80px;
@ -241,7 +237,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
}
&-button {
// transform: scale(2);
font-size: 12.5pt;
font-family: $font-home-button;
position: relative;

33
src/components/Header.vue
View File

@ -76,39 +76,6 @@ export default class Header extends Vue {
public onRoute(routeName: String) {
return this.$props.route.name === routeName ? true : false;
}
// computed(){
// pagePosition:function(){
// }
// }
// header = document.getElementById("topHeader");
// sticky = this.header.offsetTop;
// header = null;
// sticky = null;
// created() {
// window.addEventListener("scroll", this.handleScroll);
// }
// destroyed() {
// window.removeEventListener("scroll", this.handleScroll);
// }
// mounted() {
// this.header = document.getElementById("topHeader");
// this.sticky = this.header.offsetTop;
// console.log("window.pageYOffset", window.pageYOffset);
// console.log("sticky", this.sticky);
// }
// handleScroll(event) {
// if (window.pageYOffset < this.sticky) {
// this.header.classList.add("header--sticky");
// } else {
// this.header.classList.remove("header--sticky");
// }
// console.log("func window.pageYOffset", window.pageYOffset);
// console.log("func sticky", this.sticky);
// }
}
</script>