feat: 更新页脚布局和样式以适应新的备案链接

Author: hello8693

src/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-footer height="40" app>
+  <v-footer height="auto" app>
     <a
       key="ClassIsland"
       href="https://classisland.tech/"
@@ -30,15 +30,18 @@
       style="position: absolute; right: 16px"
     >
       &copy; 2023-{{ new Date().getFullYear() }}
-      <span class="d-none d-sm-inline-block">DSZ Dev Team</span>
+      <span class="d-none d-sm-inline-block">ClassIsland</span>
+      &nbsp;|&nbsp;
+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="beian-link">沪ICP备2024084943号</a>
+      &nbsp;|&nbsp;
+      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678" target="_blank" rel="noopener noreferrer" class="beian-link">沪公网安备31012002006157号</a>
     </div>
   </v-footer>
 </template>
 
 <script setup lang="ts">
 import SvgIcon from './SvgIcon.vue';
 
-
 const items = [
   {
     title: "QQ群",
@@ -54,7 +57,6 @@ const items = [
 </script>
 
 <style scoped lang="sass">
-
 .social-link :deep(.v-icon)
   color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
   text-decoration: none
@@ -63,6 +65,11 @@ const items = [
   &:hover
     color: rgba(25, 118, 210, 1)
 
+.beian-link
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
+  text-decoration: none
+  transition: .2s ease-in-out
 
-
+  &:hover
+    color: rgba(25, 118, 210, 1)
 </style>