[Add] Navigation Header

JunyaoHu · Oct 3, 2023 · 72e4df1 · 72e4df1
1 parent 47cc615
commit 72e4df1
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 16 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,14 +1,13 @@
 <script>
 
-// import Navigation from './components/Navigation.vue'
-// import Header from './components/Header.vue'
+import Header from './components/Header.vue'
 import Main from './components/Main.vue'
 import Footer from './components/Footer.vue'
 
 export default {
   
   components: {
-    // Header,
+    Header,
     Main,
     Footer,
   }
@@ -19,7 +18,7 @@ export default {
   <div class="common-layout">
 
     <el-container>
-      <!-- <el-header><Header/></el-header> -->
+      <el-header><Header/></el-header>
       <el-main><Main/></el-main>
       <el-footer><Footer/></el-footer>
     </el-container>

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -0,0 +1,59 @@
+<script>
+export default {
+  data() {
+    return {
+        home: {
+            name: "Home",
+            link: "https://junyaohu.github.io/",
+        },
+        logo: {
+            name: "Our Project Template is All You Need",
+            link: "#",
+        },
+    }
+  }
+}
+</script>
+
+<template>
+    <el-menu 
+        default-active="1"
+        class="el-menu-demo"
+        mode="horizontal"
+        :ellipsis="false"
+    >
+        <el-menu-item index="0">
+            <a :href=home.link>{{ home.name }} </a>
+        </el-menu-item>
+        <el-menu-item index="1">
+            <a :href=logo.link>{{ logo.name }} </a>
+        </el-menu-item>
+        <div class="flex-grow" />
+            <el-sub-menu index="2">
+            <template #title>More Research</template>
+            <el-menu-item index="2-1"><a href="https://zzcheng.top/MPOT/" target="_blank">Multiple Planar Object Tracking - ICCV 2023</a></el-menu-item>
+            <el-menu-item index="2-2">item two</el-menu-item>
+            <el-menu-item index="2-3">item three</el-menu-item>
+                <el-sub-menu index="2-4">
+                <template #title>item four</template>
+                <el-menu-item index="2-4-1">item one</el-menu-item>
+                <el-menu-item index="2-4-2">item two</el-menu-item>
+                <el-menu-item index="2-4-3">item three</el-menu-item>
+                </el-sub-menu>
+            </el-sub-menu>
+    </el-menu>
+</template>
+
+<style scoped>
+.flex-grow {
+    flex-grow: 1;
+}
+
+a {
+    text-decoration: None;
+    color: inherit;
+}
+
+</style>
+
+
diff --git a/src/components/Main.vue b/src/components/Main.vue
@@ -1,5 +1,4 @@
 <script>
-
 import Title from './sections/Title.vue'
 import Abstract from './sections/Abstract.vue'
 import BibTeX from './sections/BibTeX.vue'
@@ -19,8 +18,8 @@ export default {
 
 <template>
     <Title/>
-    <Video/>
-    <Carousel/>
+    <!-- <Video/> -->
+    <!-- <Carousel/> -->
     <Abstract/>
     <BibTeX/>
 </template>
diff --git a/src/components/sections/Video.vue b/src/components/sections/Video.vue
@@ -1,11 +1,4 @@
 <script>
-export default {
-  data() {
-    return {
-      a: 'bb'
-    }
-  },
-}
 
 </script>
 
@@ -17,12 +10,14 @@ export default {
     </el-row>
 
     <el-row justify="space-evenly">
-        <el-col :xs="20" :sm="20" :md="10" :lg="10" :xl="10">
+      <el-col>
+        <el-col :xs="20" :sm="20" :md="10" :lg="10" :xl="5">
             <iframe src="//player.bilibili.com/player.html?aid=802517980&bvid=BV1qy4y1x7VV&cid=325180260&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
         </el-col>
-        <el-col :xs="20" :sm="20" :md="10" :lg="10" :xl="10">
+        <el-col :xs="20" :sm="20" :md="10" :lg="10" :xl="5">
             <iframe src="https://www.youtube.com/embed/1kE_VJgM4u8?si=JZ_XoMOZNfVG1lAF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
         </el-col>
+      </el-col>
     </el-row>
 
   </div>