添加页脚

This commit is contained in:
狮子耗耗 2025-01-05 13:23:31 +08:00
parent f0b70aeaa9
commit cd5f15db84
4 changed files with 43 additions and 2 deletions

View File

@ -8,6 +8,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<div id="footer"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

32
src/FooTer.vue Normal file
View File

@ -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>

View File

@ -7,8 +7,14 @@
font-weight: normal; font-weight: normal;
} }
a, #footer {
.blue { position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
a {
text-decoration: none; text-decoration: none;
color: rgb(0, 129, 204); color: rgb(0, 129, 204);
transition: 0.4s; transition: 0.4s;

View File

@ -2,5 +2,7 @@ import './assets/main.css'
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import FooTer from './FooTer.vue'
createApp(App).mount('#app') createApp(App).mount('#app')
createApp(FooTer).mount('#footer')