update: homepage

public/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/App.vue

@@ -15,11 +15,13 @@ router.afterEach(() => {
 
 <template>
   <Navbar />
-  <RouterView v-slot="{ Component }">
+  <div style="flex: 1;">
-    <KeepAlive>
+    <RouterView v-slot="{ Component }">
-      <component :is="Component" v-if="$route.meta.keepAlive" />
+      <KeepAlive>
-    </KeepAlive>
+        <component :is="Component" v-if="$route.meta.keepAlive" />
-    <component :is="Component" v-if="!$route.meta.keepAlive" />
+      </KeepAlive>
-  </RouterView>
+      <component :is="Component" v-if="!$route.meta.keepAlive" />
-  <!-- <Footer :visitCount="visitCount" /> -->
+    </RouterView>
+  </div>
+  <Footer :visitCount="visitCount" />
 </template>

src/components/Footer.vue

@@ -3,7 +3,7 @@ defineProps(['visitCount']);
 </script>
 
 <template>
-  <div class="ts-content is-center-aligned is-vertically-very-padded">
+  <div class="ts-content is-center-aligned is-vertically-padded">
     <div class="ts-container">
       <div class="ts-text is-secondary">Total Visitor: {{ visitCount }}</div>
     </div>

src/style.css

@@ -0,0 +1,8 @@
+html, body, #app {
+  height: 100%;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+}

src/views/HomeView.vue

@@ -1,5 +1,38 @@
+<script setup>
+</script>
+
 <template>
-  <div class="ts-container">
+  <div class="ts-container center has-full-height">
-    Home
+    <div>
+      <a href="https://vite.dev" target="_blank">
+        <img src="/vite.svg" class="logo" alt="Vite logo" />
+      </a>
+      <a href="https://vuejs.org/" target="_blank">
+        <img src="/vue.svg" class="logo vue" alt="Vue logo" />
+      </a>
+    </div>
+    <div class="ts-header is-huge is-center-aligned">Vite + Vue</div>
   </div>
-</template>
+</template>
+
+<style scoped>
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 128px;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>