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 { .header {
position: relative;
z-index: 99; z-index: 99;
position: relative;
top: 40px;
left: 6%; left: 6%;
top: 60px;
width: 88%; width: 88%;
height: 62px; height: 62px;
border-radius: 73px; border-radius: 73px;
@ -35,11 +35,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
background-color: $white; background-color: $white;
&--sticky { &--sticky {
// position: fixed;
position: sticky; position: sticky;
z-index: 99; z-index: 99;
left: 6%; left: 6%;
top: 65px; margin-top: 60px;
} }
&__left { &__left {
float: left; float: left;
@ -57,15 +56,12 @@ $font-header-apply: "Noto Serif CJK TC -Black";
&__right { &__right {
float: right; float: right;
width: 80%; width: 80%;
// background-color: lightgoldenrodyellow;
} }
&-links { &-links {
// background-color: lightgray;
font-family: $font-header-link; font-family: $font-header-link;
float: right; float: right;
@include headerLinksWidth; @include headerLinksWidth;
// width: 600px;
margin-right: 92px; margin-right: 92px;
height: 100%; height: 100%;
height: 50px; height: 50px;
@ -85,9 +81,6 @@ $font-header-apply: "Noto Serif CJK TC -Black";
height: 100%; height: 100%;
display: block; display: block;
text-align: left; text-align: left;
// &:active {
// border-bottom: $indigo-blue solid 5px;
// }
a { a {
@include headerLinksFontSize; @include headerLinksFontSize;
@ -99,7 +92,6 @@ $font-header-apply: "Noto Serif CJK TC -Black";
} }
&-link--active { &-link--active {
// padding-bottom: 10px;
border-bottom: $indigo-blue solid 3.5px; 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 { .section {
&-title { &-title {
margin-top: 88px; margin-top: 20px;
@include sectionTitleHeight; @include sectionTitleHeight;
// background-color: chartreuse; // background-color: chartreuse;
} }
@ -144,9 +144,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
font-family: $font-home; font-family: $font-home;
position: relative; position: relative;
&__title { &__title {
// width: 600px;
width: 75%; width: 75%;
// width: 60%;
text-align: center; text-align: center;
// background-color: cornflowerblue; // background-color: cornflowerblue;
margin: 0 auto; margin: 0 auto;
@ -159,7 +157,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
margin-bottom: 20px; margin-bottom: 20px;
// background-color: chocolate; // background-color: chocolate;
height: 80px; height: 80px;
// width: 600px;
width: 100%; width: 100%;
p { p {
@include homeTitleFontsize; @include homeTitleFontsize;
@ -175,7 +172,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
text-align: center; text-align: center;
// background-color: chocolate; // background-color: chocolate;
height: 80px; height: 80px;
// width: 600px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
margin-top: 80px; margin-top: 80px;
@ -241,7 +237,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
} }
&-button { &-button {
// transform: scale(2);
font-size: 12.5pt; font-size: 12.5pt;
font-family: $font-home-button; font-family: $font-home-button;
position: relative; position: relative;

33
src/components/Header.vue
View File

@ -76,39 +76,6 @@ export default class Header extends Vue {
public onRoute(routeName: String) { public onRoute(routeName: String) {
return this.$props.route.name === routeName ? true : false; 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> </script>