添加页脚

2025-01-05 13:23:31 +08:00 · 2025-01-05 13:23:31 +08:00 · cd5f15db84
commit cd5f15db84
parent f0b70aeaa9
4 changed files with 43 additions and 2 deletions
--- 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>
--- a/src/FooTer.vue
+++ 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>
--- 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;
--- 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')