fix: mask

components/Carousel.vue

@@ -52,7 +52,8 @@ useIntervalFn(() => {
             {{ $t(item.entry) }}
           </ABtn>
         </div>
-        <img style="-webkit-mask-image:linear-gradient(0deg,transparent ,#000 80%, transparent 190%)" :src="item.img">
+        <div class="h-full w-full absolute top-0 left-0" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 80%, hsl(var(--a-body-bg-c)) 101%);" ></div>
+        <img  :src="item.img">
       </div>
       <!-- <ACard
         :title="item.title"

components/header/nav.vue

@@ -1,4 +1,6 @@
 <script setup>
+const { x, y } = useWindowScroll()
+
 const navs = [
   {
     title: 'home',
@@ -28,7 +30,11 @@ const navs = [
 </script>
 
 <template>
-  <nav>
+  <nav
+    :class="{
+      hidden: y > 10,
+    }"
+  >
     <NuxtLink v-for="(nav, i) in navs" :key="i" class="mx-2 border-primary p-1 pb-5 transition-all" :to="nav.href" active-class="border-b-3px">
       <ABtn variant="text" color="white">
         <AMenu v-if="nav.child" color="white" trigger="hover" z-1000 mt-5 placement="bottom">