From 62dc75091011aa5c1887aed35676778a7bcb5ab8 Mon Sep 17 00:00:00 2001 From: barrystone Date: Wed, 24 Mar 2021 21:50:02 +0800 Subject: [PATCH] [Update] apply header in app.vue, and update home --- src/App.vue | 29 ++++++--- src/assets/images/home/home-headerIcon.svg | 25 ++++++++ src/assets/images/home/home-icon-apple.svg | 17 +++++ src/assets/images/home/home-icon-square.svg | 6 ++ src/assets/images/home/home-topic.svg | 53 ++++++++++++++++ src/assets/scss/home/header.scss | 19 ++---- src/assets/scss/home/home.scss | 47 +++++++++++++- src/components/Header.vue | 70 ++++++++++----------- src/pages/Agenda.vue | 14 ++--- src/pages/Home.vue | 28 +++++++-- src/pages/Sponsor.vue | 14 ++--- src/pages/Team.vue | 14 ++--- src/pages/Traffic.vue | 14 ++--- src/pages/Venue.vue | 14 ++--- 14 files changed, 254 insertions(+), 110 deletions(-) create mode 100644 src/assets/images/home/home-headerIcon.svg create mode 100644 src/assets/images/home/home-icon-apple.svg create mode 100644 src/assets/images/home/home-icon-square.svg create mode 100644 src/assets/images/home/home-topic.svg diff --git a/src/App.vue b/src/App.vue index b2f0798..3744696 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,22 +1,35 @@ \ No newline at end of file + diff --git a/src/assets/images/home/home-headerIcon.svg b/src/assets/images/home/home-headerIcon.svg new file mode 100644 index 0000000..00c7176 --- /dev/null +++ b/src/assets/images/home/home-headerIcon.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/home-icon-apple.svg b/src/assets/images/home/home-icon-apple.svg new file mode 100644 index 0000000..4821847 --- /dev/null +++ b/src/assets/images/home/home-icon-apple.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/home-icon-square.svg b/src/assets/images/home/home-icon-square.svg new file mode 100644 index 0000000..b45e5ab --- /dev/null +++ b/src/assets/images/home/home-icon-square.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/images/home/home-topic.svg b/src/assets/images/home/home-topic.svg new file mode 100644 index 0000000..fd6ff55 --- /dev/null +++ b/src/assets/images/home/home-topic.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/scss/home/header.scss b/src/assets/scss/home/header.scss index 3f1a996..e12bc99 100644 --- a/src/assets/scss/home/header.scss +++ b/src/assets/scss/home/header.scss @@ -1,15 +1,12 @@ @import "../color.scss"; .header { - // position: fixed; position: relative; z-index: 99; left: 6%; top: 60px; width: 88%; height: 62px; - // margin: 0 0 98px; - // padding: 18px 26px 0 46.4px; border-radius: 73px; box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22); background-color: $white; @@ -27,14 +24,13 @@ &-logo { position: absolute; - left: 40px; + left: 35px; top: 50%; transform: translateY(-50%); } &__right { float: right; - // background-color: violet; width: 80%; } @@ -42,34 +38,29 @@ float: right; width: 600px; margin-right: 92px; - // background-color: turquoise; height: 100%; height: 50px; top: 6px; - // width: 85%; ul { - // background-color: yellowgreen; margin: 0; padding: 0; width: 100%; height: 100%; li { - // background-color: lightpink; float: left; margin: 0; padding: 0; - width: 20%; + padding: 22px 20px; height: 100%; display: block; + text-align: left; a { font-size: 12pt; color: $black; - position: absolute; - top: 50%; - transform: translateY(-50%); + padding-bottom: 15px; } } } @@ -78,8 +69,6 @@ &-apply { width: 92px; height: 38px; - // margin: 0 0 11px 58px; - // padding: 9px 27px 10px; border-radius: 38px; background-color: $indigo-blue; position: absolute; diff --git a/src/assets/scss/home/home.scss b/src/assets/scss/home/home.scss index 7d5dbea..515c116 100644 --- a/src/assets/scss/home/home.scss +++ b/src/assets/scss/home/home.scss @@ -1,3 +1,46 @@ -.home { - height: 900px; +.section { + &-title { + margin-top: 150px; + height: 500px; + // background-color: chartreuse; + } +} + +.home { + position: relative; + text-align: center; + &__title { + width: 500px; + // background-color: cornflowerblue; + margin: 0 auto; + position: relative; + + &-box1 { + position: relative; + + margin-top: 100px; + // background-color: chocolate; + height: 80px; + width: 500px; + span { + font-size: 16pt; + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + } + } + + &-topic { + } + + &-box2 { + // background-color: chocolate; + height: 80px; + width: 500px; + p { + font-size: 16pt; + } + } + } } diff --git a/src/components/Header.vue b/src/components/Header.vue index 672e8a8..95141bd 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -3,17 +3,23 @@
@@ -32,35 +38,29 @@ import { Component, Vue } from "vue-property-decorator"; export default class Header extends Vue { // 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); - } + // 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); + // } } diff --git a/src/pages/Agenda.vue b/src/pages/Agenda.vue index cb40fb6..f1b714e 100644 --- a/src/pages/Agenda.vue +++ b/src/pages/Agenda.vue @@ -1,11 +1,7 @@ - + \ No newline at end of file +@Component({}) +export default class Agenda extends Vue {} + diff --git a/src/pages/Home.vue b/src/pages/Home.vue index 98b426e..3725926 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -1,9 +1,27 @@ diff --git a/src/pages/Sponsor.vue b/src/pages/Sponsor.vue index 755d265..1a273a7 100644 --- a/src/pages/Sponsor.vue +++ b/src/pages/Sponsor.vue @@ -1,11 +1,7 @@ - + \ No newline at end of file +@Component({}) +export default class Sponsor extends Vue {} + diff --git a/src/pages/Team.vue b/src/pages/Team.vue index d2c3b76..cc22743 100644 --- a/src/pages/Team.vue +++ b/src/pages/Team.vue @@ -1,11 +1,7 @@ - + \ No newline at end of file +@Component({}) +export default class Team extends Vue {} + diff --git a/src/pages/Traffic.vue b/src/pages/Traffic.vue index c971af6..cf81a75 100644 --- a/src/pages/Traffic.vue +++ b/src/pages/Traffic.vue @@ -1,11 +1,7 @@ - + \ No newline at end of file +@Component({}) +export default class Traffic extends Vue {} + diff --git a/src/pages/Venue.vue b/src/pages/Venue.vue index 9985248..79981bc 100644 --- a/src/pages/Venue.vue +++ b/src/pages/Venue.vue @@ -1,11 +1,7 @@ - + \ No newline at end of file +@Component({}) +export default class Venue extends Vue {} +