update ui and add notice collect dialog

src/pages/practice/Footer.vue

@@ -104,6 +104,7 @@ onUnmounted(() => {
     padding: 3rem var(--space) 6rem var(--space);
     z-index: 2;
     border: 1px solid var(--color-item-border);
+    box-shadow: var(--shadow);
 
     .stat {
       margin-top: 8rem;

src/pages/practice/Panel.vue

@@ -272,6 +272,7 @@ $header-height: 50rem;
   transition: all .3s;
   z-index: 1;
   border: 1px solid var(--color-item-border);
+  box-shadow: var(--shadow);
 
 
   & > header {

src/pages/test.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 
 import {splitEnArticle} from "@/hooks/article.ts";
+import BaseButton from "@/components/BaseButton.vue";
+import {useSettingStore} from "@/stores/setting.ts";
 
 let data = {
   "title": "A cold welcome",
@@ -25,14 +27,21 @@ let data = {
 //   "id": "TdAAqD"
 // }
 splitEnArticle(data.text)
+const settingStore = useSettingStore()
 </script>
 
 <template>
-  <div>
+  <div class="page">
     test
+    <BaseButton @click="settingStore.load = !settingStore.load">test</BaseButton>
   </div>
 </template>
 
 <style scoped lang="scss">
-
+.page {
+  position: relative;
+  z-index: 1;
+  font-size: 14rem;
+  color: black;
+}
 </style>