diff --git a/index.html b/index.html
index 812cd02..6fa940b 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <div id="footer"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/FooTer.vue b/src/FooTer.vue
new file mode 100644
index 0000000..27b92f4
--- /dev/null
+++ b/src/FooTer.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const year = ref(new Date().getFullYear())
+</script>
+
+<template>
+  <div class="footer-wrapper">
+    <div class="footer">版权所有 &copy; 2023-{{ year }} 荆棘鸟文学社</div>
+  </div>
+</template>
+
+<style scoped>
+.footer-wrapper {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-items: center;
+  justify-content: space-evenly;
+  align-items: center;
+  .footer {
+    font-size: 14px;
+    margin-top: 8px;
+    margin-left: 16px;
+    margin-right: 16px;
+    margin-bottom: 8px;
+    display: block;
+  }
+}
+</style>
diff --git a/src/assets/main.css b/src/assets/main.css
index dc135bd..86a27c0 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -7,8 +7,14 @@
   font-weight: normal;
 }
 
-a,
-.blue {
+#footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
+
+a {
   text-decoration: none;
   color: rgb(0, 129, 204);
   transition: 0.4s;
diff --git a/src/main.ts b/src/main.ts
index 0ac3a5f..26d44fb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,7 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import FooTer from './FooTer.vue'
 
 createApp(App).mount('#app')
+createApp(FooTer).mount('#footer')
