添加页脚

src/components/items/NotFound.vue

@@ -3,7 +3,11 @@
 </script>
 
 <template>
-404 NOT FOUND
+  <v-empty-state
+      icon="mdi-magnify"
+      text="Try adjusting your search terms or filters. Sometimes less specific terms or broader queries can help you find what you're looking for."
+      title="We couldn't find a match."
+  ></v-empty-state>
 </template>
 
 <style scoped>

src/components/views/HomeView.vue

@@ -98,7 +98,11 @@ function toggleTheme() {
       <v-main class="px-10">
         <router-view/>
       </v-main>
-      <v-footer>footer</v-footer>
+      <v-footer class="home-footer align-center border-t">
+        <v-row>
+          <v-col class="text-center">powered by @S-URL</v-col>
+        </v-row>
+      </v-footer>
     </v-app>
   </v-responsive>
   <v-dialog v-model="showLoginDialog" persistent width="400">
@@ -150,4 +154,9 @@ function toggleTheme() {
 .home-menu-button {
   width: 120px;
 }
+
+.home-footer {
+  max-height: 100px;
+  min-height: 100px;
+}
 </style>

src/components/views/ServiceView.vue

@@ -15,6 +15,10 @@ interface Surls {
 
 const urls = ref<Urls[]>([])
 const selected = ref([])
+const tableHeaderConfig = ref([
+  {title: 'KEY1', value: 'key', key: 'key'},
+  {title: 'URL', value: 'value', key: 'value'}
+])
 
 watch(selected, () => console.log(selected.value))
 
@@ -33,8 +37,8 @@ async function getSurl() {
 <template>
   <v-btn @click="getSurl">get</v-btn>
   <v-data-table :items="urls" :item-value="item => item" show-select v-model="selected"
-                v-slot:header.data-table-select height="400" fixed-header
+                v-slot:header.data-table-select fixed-header density="compact"
-                :headers="[{title: 'KEY', value: 'key', key: 'key', align: 'center'}, {title: 'URL', value: 'value', key: 'value'}]">
+                :headers="tableHeaderConfig" :header-props="{color: 'purple'}">
   </v-data-table>
 </template>
 

src/router.ts

@@ -4,6 +4,7 @@ import InputBox from "./components/items/InputBox.vue";
 import IntroView from "./components/views/IntroView.vue";
 import TestView from "./components/views/TestView.vue";
 import ServiceView from "./components/views/ServiceView.vue";
+import NotFound from "./components/items/NotFound.vue";
 
 const routes = [
     {
@@ -21,6 +22,9 @@ const routes = [
     }, {
         path: '/services',
         component: ServiceView
+    }, {
+        path: '/404',
+        component: NotFound
     }
 ]
 export const router = createRouter({

src/style.css

@@ -11,4 +11,7 @@
 }
 .v-overlay.v-dialog{
   backdrop-filter: blur(6px);
+}
+.v-data-table-footer__items-per-page {
+  width: 200px;
 }