save

src/components/Practice/Footer.vue

@@ -101,12 +101,12 @@ onUnmounted(() => {
     box-sizing: border-box;
     border-radius: 10rem;
     background: var(--color-second-bg);
-    padding: 3rem 10rem 10rem 10rem;
+    padding: 3rem var(--space) 6rem var(--space);
     z-index: 2;
     border: 1px solid var(--color-item-border);
 
     .stat {
-      margin-top: 10rem;
+      margin-top: 8rem;
       display: flex;
       justify-content: space-around;
 
@@ -114,13 +114,14 @@ onUnmounted(() => {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 10rem;
+        gap: 5rem;
         width: 80rem;
 
         .line {
           height: 1px;
           width: 100%;
-          background: gainsboro;
+          //background: gainsboro;
+          background: var(--color-font-1);
         }
       }
     }

src/components/toolbar/Toolbar.vue

@@ -60,7 +60,7 @@ watch(() => store.load, n => {
 </script>
 
 <template>
-  <header ref="headerRef" class="anim">
+  <header ref="headerRef">
     <div class="content">
       <div class="dict-name">
         <Tooltip
@@ -191,7 +191,7 @@ watch(() => store.load, n => {
 }
 </style>
 <style scoped lang="scss">
-@import "@/assets/css/variable";
+@import "@/assets/css/style";
 
 .test-enter-active,
 .test-leave-active {
@@ -211,10 +211,11 @@ header {
   margin-bottom: 30rem;
   position: relative;
   z-index: 2;
-  padding: 10rem var(--space);
+  padding: 4rem var(--space);
   box-sizing: border-box;
   gap: 10rem;
   border: 1px solid var(--color-item-border);
+  transition: all var(--anim-time);
 
   .content {
     min-height: var(--toolbar-height);