[Add] add header in home

src/assets/scss/color.scss

@@ -5,3 +5,7 @@ $dark-slate-blue: #1f4163;
 $dark-sky-blue: #3d93e9;
 $slate-blue: #5f7a95;
 $sky-blue: #9dc5ec;
+
+//home
+$indigo-blue: #1060ff;
+$black: black;

src/assets/scss/home/header.scss

@@ -0,0 +1,99 @@
+@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;
+
+  &--sticky {
+    position: fixed;
+    z-index: 99;
+    left: 6%;
+    top: 65px;
+  }
+  &__left {
+    float: left;
+    width: 20%;
+  }
+
+  &-logo {
+    position: absolute;
+    left: 40px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__right {
+    float: right;
+    // background-color: violet;
+    width: 80%;
+  }
+
+  &-link {
+    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%;
+        height: 100%;
+        display: block;
+
+        a {
+          font-size: 12pt;
+          color: $black;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+  }
+
+  &-apply {
+    width: 92px;
+    height: 38px;
+    // margin: 0 0 11px 58px;
+    // padding: 9px 27px 10px;
+    border-radius: 38px;
+    background-color: $indigo-blue;
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    a {
+      color: $white;
+      font-size: 13pt;
+      position: absolute;
+      top: 50%;
+      left: 40%;
+      transform: translateX(-35%) translateY(-50%);
+    }
+  }
+}

src/assets/scss/home/home.scss

@@ -0,0 +1,3 @@
+.home {
+  height: 900px;
+}

src/components/Header.vue

@@ -0,0 +1,69 @@
+<template>
+  <!-- <div id="topHeader" class="header"> -->
+  <div id="topHeader" class="header header--sticky">
+    <div class="header__left">
+      <div class="header-logo">
+        sitcon21
+      </div>
+    </div>
+    <div class="header__right">
+      <div class="header-link">
+        <ul>
+          <li><a href="">議程與活動</a></li>
+          <li><a href="">交通方式</a></li>
+          <li><a href="">會場地圖</a></li>
+          <li><a href="">贊助資訊</a></li>
+          <li><a href="">籌備團隊</a></li>
+        </ul>
+      </div>
+      <div class="header-apply">
+        <a href="">
+          報名去
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+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);
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/home/header";
+</style>

src/pages/Home.vue

@@ -1,11 +1,26 @@
 <template>
+  <div>
+    <Header />
+    <div class="home">
+      home
+    </div>
+  </div>
 </template>
-<script>
-import { Component, Prop, Vue } from 'vue-property-decorator';
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import Header from "@/components/Header.vue";
 
 @Component({
+  components: {
+    Header,
+  },
 })
-export default class Home extends Vue {
-
+export default class CFP extends Vue {
+  @Prop() private msg!: string;
 }
 </script>
+
+<style lang="scss">
+@import "@/assets/scss/home/home";
+</style>