From 10fe8503fb9cce72a94ff8d6b0fb127ded701f5f Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Sun, 30 Mar 2025 02:10:43 +0800
Subject: [PATCH] update: homepage

---
 public/vue.svg            |  1 +
 src/App.vue               | 16 +++++++++-------
 src/components/Footer.vue |  2 +-
 src/style.css             |  8 ++++++++
 src/views/HomeView.vue    | 39 ++++++++++++++++++++++++++++++++++++---
 5 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 public/vue.svg

diff --git a/public/vue.svg b/public/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 4bd2ee3..d6d7acb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,11 +15,13 @@ router.afterEach(() => {
 
 <template>
   <Navbar />
-  <RouterView v-slot="{ Component }">
-    <KeepAlive>
-      <component :is="Component" v-if="$route.meta.keepAlive" />
-    </KeepAlive>
-    <component :is="Component" v-if="!$route.meta.keepAlive" />
-  </RouterView>
-  <!-- <Footer :visitCount="visitCount" /> -->
+  <div style="flex: 1;">
+    <RouterView v-slot="{ Component }">
+      <KeepAlive>
+        <component :is="Component" v-if="$route.meta.keepAlive" />
+      </KeepAlive>
+      <component :is="Component" v-if="!$route.meta.keepAlive" />
+    </RouterView>
+  </div>
+  <Footer :visitCount="visitCount" />
 </template>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 341411b..6695c0e 100644
--- a/src/components/Footer.vue
+++ b/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>
diff --git a/src/style.css b/src/style.css
index e69de29..fb2876b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,8 @@
+html, body, #app {
+  height: 100%;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b0a54bd..cd8e1a1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,38 @@
+<script setup>
+</script>
+
 <template>
-  <div class="ts-container">
-    Home
+  <div class="ts-container center has-full-height">
+    <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>
\ No newline at end of file
+</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>
\ No newline at end of file