From a68ad78b57eddae0e51d116eb532212d1e8df8a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E9=91=AB?= <1219654535@qq.com>
Date: Tue, 13 Jun 2023 20:39:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=E5=88=B0=E5=AF=BC=E8=88=AA=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/header/mobile-nav.vue   | 12 ++++-
 pages/community/vamx/index.vue     | 84 +++++++++++++-----------------
 pages/community/vamx/join.vue      | 83 +++++++++++++----------------
 pages/community/vamx/news.vue      | 59 +++++++++------------
 pages/community/vamx/structure.vue | 83 +++++++++++++----------------
 pages/release/index.vue            | 31 ++++++++++-
 6 files changed, 172 insertions(+), 180 deletions(-)

diff --git a/components/header/mobile-nav.vue b/components/header/mobile-nav.vue
index 4f04460..cb5681a 100644
--- a/components/header/mobile-nav.vue
+++ b/components/header/mobile-nav.vue
@@ -28,10 +28,14 @@ const flag: any = {
 <template>
   <ADrawer
     v-model="isDrawerShown"
-    class="!w-80%"
+    class="h-screen overflow-y-scroll px-2 scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-4px !w-80% scrollbar scrollbar-rounded"
   >
+    <div class="flex justify-center">
+      <BrandLogo />
+    </div>
+    <Divider class="mb-5" />
     <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class="ml-3px block w-full shadow-transparent transition-all" :href="nav.href" active-class="active-nav ">
-      <ABtn v-if="!nav.child" variant="text" class="w-full text-xl [&_.a-btn-content]:(w-full justify-start px-2)">
+      <ABtn v-if="!nav.child" variant="text" class="w-full text-lg [&_.a-btn-content]:(w-full justify-start px-2)">
         <span style="color: hsla(var(--a-base-c), 0.87); " class="font-bold">{{ $t(nav.title) }}</span>
       </ABtn>
 
@@ -60,6 +64,10 @@ const flag: any = {
         </div>
       </div>
     </LocaleNuxtLink>
+
+    <div class="p-5">
+      <div id="pages-sider" class="bg-black/10" />
+    </div>
   </ADrawer>
 
   <ABtn
diff --git a/pages/community/vamx/index.vue b/pages/community/vamx/index.vue
index 99a3e6a..542d7ab 100644
--- a/pages/community/vamx/index.vue
+++ b/pages/community/vamx/index.vue
@@ -32,59 +32,47 @@ const status = [
 </script>
 
 <template>
-  <div
-    class="fixed bottom-16 right-6 md:hidden"
-  >
-    <ABtn
-      class="text-xl"
-      icon-only
-      icon="i-material-symbols-view-headline"
-    >
-      <ATooltip
-        trigger="click"
-        class="[&_.a-tooltip]-bg-transparent"
+  <ClientOnly>
+    <Teleport to="#pages-sider">
+      <ACard
+        shadow="none"
+        :title="$t('community.vamx.sider.title')"
+        :subtitle="$t('filtrate.discription')"
+        class="w-full"
       >
-        <ACard
-          shadow="none"
-          :title="$t('community.vamx.sider.title')"
-          :subtitle="$t('filtrate.discription')"
-          class="w-300px"
-        >
-          <!-- <img
+        <!-- <img
             src="/images/demo/minimal-1.jpg"
             alt="girl"
           > -->
 
-          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-            <div class="grid grid-rows-2 gap-y-3">
-              <ACheckbox
-                v-for="tag in tags"
-                :key="tag.value"
-                v-model="data"
-                :value="tag.value"
-                :label="$t(tag.label)"
-                class="mx-auto"
-              />
-            </div>
-
-            <!-- <ABtn>Read more</ABtn> -->
-
-            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.news.title') }}
-            </LocaleNuxtLink>
-
-            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.structure.title') }}
-            </LocaleNuxtLink>
-
-            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.join.title') }}
-            </LocaleNuxtLink>
+        <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+          <div class="grid grid-rows-2 gap-y-3">
+            <ACheckbox
+              v-for="tag in tags"
+              :key="tag.value"
+              v-model="data"
+              :value="tag.value"
+              :label="$t(tag.label)"
+            />
           </div>
-        </ACard>
-      </ATooltip>
-    </ABtn>
-  </div>
+
+          <!-- <ABtn>Read more</ABtn> -->
+
+          <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.news.title') }}
+          </LocaleNuxtLink>
+
+          <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.structure.title') }}
+          </LocaleNuxtLink>
+
+          <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.join.title') }}
+          </LocaleNuxtLink>
+        </div>
+      </ACard>
+    </Teleport>
+  </ClientOnly>
   <div class="mt-0 lg:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
@@ -92,7 +80,7 @@ const status = [
           shadow="none"
           :title="$t('community.vamx.sider.title')"
           :subtitle="$t('filtrate.discription')"
-          class="hidden w-full md:block md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"
diff --git a/pages/community/vamx/join.vue b/pages/community/vamx/join.vue
index c748f24..b3fcf70 100644
--- a/pages/community/vamx/join.vue
+++ b/pages/community/vamx/join.vue
@@ -9,65 +9,54 @@ const { data } = await useAsyncData(`content-${path}`, () => {
 </script>
 
 <template>
-  <div
-    class="fixed bottom-16 right-6 md:hidden"
-  >
-    <ABtn
-      class="text-xl"
-      icon-only
-      icon="i-material-symbols-view-headline"
-    >
-      <ATooltip
-        trigger="click"
-        class="[&_.a-tooltip]-bg-transparent"
+  <ClientOnly>
+    <Teleport to="#pages-sider">
+      <ACard
+        shadow="none"
+        :title="$t('community.vamx.join.title')"
+        :subtitle="$t('community.vamx.join.discription')"
+        class="w-full"
       >
-        <ACard
-          shadow="none"
-          :title="$t('community.vamx.join.title')"
-          :subtitle="$t('community.vamx.join.discription')"
-          class="w-300px"
-        >
-          <!-- <img
+        <!-- <img
             src="/images/demo/minimal-1.jpg"
             alt="girl"
           > -->
 
-          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-            <div class="grid grid-rows-2 gap-y-3">
-              <ACheckbox
-                v-for="tag in tags"
-                :key="tag.value"
-                v-model="data"
-                :value="tag.value"
-                :label="$t(tag.label)"
-              />
-            </div>
-
-            <!-- <ABtn>Read more</ABtn> -->
-            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.sider.title') }}
-            </LocaleNuxtLink>
-
-            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.news.title') }}
-            </LocaleNuxtLink>
-
-            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.structure.title') }}
-            </LocaleNuxtLink>
+        <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+          <div class="grid grid-rows-2 gap-y-3">
+            <ACheckbox
+              v-for="tag in tags"
+              :key="tag.value"
+              v-model="data"
+              :value="tag.value"
+              :label="$t(tag.label)"
+            />
           </div>
-        </ACard>
-      </ATooltip>
-    </ABtn>
-  </div>
-  <div class="mt-10 md:mt-20">
+
+          <!-- <ABtn>Read more</ABtn> -->
+          <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.sider.title') }}
+          </LocaleNuxtLink>
+
+          <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.news.title') }}
+          </LocaleNuxtLink>
+
+          <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.structure.title') }}
+          </LocaleNuxtLink>
+        </div>
+      </ACard>
+    </Teleport>
+  </ClientOnly>
+  <div class="mt-0 lg:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
         <ACard
           shadow="none"
           :title="$t('community.vamx.join.title')"
           :subtitle="$t('community.vamx.join.discription')"
-          class="hidden w-full md:block md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"
diff --git a/pages/community/vamx/news.vue b/pages/community/vamx/news.vue
index 5ee12e7..ce20f2f 100644
--- a/pages/community/vamx/news.vue
+++ b/pages/community/vamx/news.vue
@@ -32,54 +32,43 @@ const status = [
 </script>
 
 <template>
-  <div
-    class="fixed bottom-16 right-6 md:hidden"
-  >
-    <ABtn
-      class="text-xl"
-      icon-only
-      icon="i-material-symbols-view-headline"
-    >
-      <ATooltip
-        trigger="click"
-        class="[&_.a-tooltip]-bg-transparent"
+  <ClientOnly>
+    <Teleport to="#pages-sider">
+      <ACard
+        shadow="none"
+        :title="$t('community.vamx.news.title')"
+        :subtitle="$t('community.vamx.news.discription')"
+        class="w-full"
       >
-        <ACard
-          shadow="none"
-          :title="$t('community.vamx.news.title')"
-          :subtitle="$t('community.vamx.news.discription')"
-          class="w-300px"
-        >
-          <!-- <img
+        <!-- <img
             src="/images/demo/minimal-1.jpg"
             alt="girl"
           > -->
 
-          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.sider.title') }}
-            </LocaleNuxtLink>
+        <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+          <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.sider.title') }}
+          </LocaleNuxtLink>
 
-            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.structure.title') }}
-            </LocaleNuxtLink>
+          <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.structure.title') }}
+          </LocaleNuxtLink>
 
-            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.join.title') }}
-            </LocaleNuxtLink>
-          </div>
-        </ACard>
-      </ATooltip>
-    </ABtn>
-  </div>
-  <div class="mt-0 md:mt-20">
+          <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.join.title') }}
+          </LocaleNuxtLink>
+        </div>
+      </ACard>
+    </Teleport>
+  </ClientOnly>
+  <div class="mt-0 lg:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
         <ACard
           shadow="none"
           :title="$t('community.vamx.news.title')"
           :subtitle="$t('community.vamx.news.discription')"
-          class="hidden w-full md:block md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"
diff --git a/pages/community/vamx/structure.vue b/pages/community/vamx/structure.vue
index 255dc80..092ba97 100644
--- a/pages/community/vamx/structure.vue
+++ b/pages/community/vamx/structure.vue
@@ -9,65 +9,54 @@ const { data } = await useAsyncData(`content-${path}`, () => {
 </script>
 
 <template>
-  <div
-    class="fixed bottom-16 right-6 md:hidden"
-  >
-    <ABtn
-      class="text-xl"
-      icon-only
-      icon="i-material-symbols-view-headline"
-    >
-      <ATooltip
-        trigger="click"
-        class="[&_.a-tooltip]-bg-transparent"
+  <ClientOnly>
+    <Teleport to="#pages-sider">
+      <ACard
+        shadow="none"
+        :title="$t('community.vamx.structure.title')"
+        :subtitle="$t('community.vamx.structure.discription')"
+        class="w-full"
       >
-        <ACard
-          shadow="none"
-          :title="$t('community.vamx.structure.title')"
-          :subtitle="$t('community.vamx.structure.discription')"
-          class="w-300px"
-        >
-          <!-- <img
+        <!-- <img
             src="/images/demo/minimal-1.jpg"
             alt="girl"
           > -->
 
-          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-            <div class="grid grid-rows-2 gap-y-3">
-              <ACheckbox
-                v-for="tag in tags"
-                :key="tag.value"
-                v-model="data"
-                :value="tag.value"
-                :label="$t(tag.label)"
-              />
-            </div>
-
-            <!-- <ABtn>Read more</ABtn> -->
-            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.sider.title') }}
-            </LocaleNuxtLink>
-
-            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.news.title') }}
-            </LocaleNuxtLink>
-
-            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
-              {{ $t('community.vamx.join.title') }}
-            </LocaleNuxtLink>
+        <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+          <div class="grid grid-rows-2 gap-y-3">
+            <ACheckbox
+              v-for="tag in tags"
+              :key="tag.value"
+              v-model="data"
+              :value="tag.value"
+              :label="$t(tag.label)"
+            />
           </div>
-        </ACard>
-      </ATooltip>
-    </ABtn>
-  </div>
-  <div class="mt-10 md:mt-20">
+
+          <!-- <ABtn>Read more</ABtn> -->
+          <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.sider.title') }}
+          </LocaleNuxtLink>
+
+          <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.news.title') }}
+          </LocaleNuxtLink>
+
+          <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+            {{ $t('community.vamx.join.title') }}
+          </LocaleNuxtLink>
+        </div>
+      </ACard>
+    </Teleport>
+  </ClientOnly>
+  <div class="mt-0 lg:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
         <ACard
           shadow="none"
           :title="$t('community.vamx.structure.title')"
           :subtitle="$t('community.vamx.structure.discription')"
-          class="hidden w-full md:block md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"
diff --git a/pages/release/index.vue b/pages/release/index.vue
index fcafd2b..3f70a38 100644
--- a/pages/release/index.vue
+++ b/pages/release/index.vue
@@ -19,6 +19,35 @@ const list = computed(() => {
 </script>
 
 <template>
+  <ClientOnly>
+    <Teleport to="#pages-sider">
+      <ACard
+        shadow="none"
+        :title="$t('filtrate')"
+        :subtitle="$t('filtrate.discription')"
+        class="w-full"
+      >
+        <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+        <div class="a-card-body a-card-spacer">
+          <div class="grid grid-rows-2 gap-y-3">
+            <ACheckbox
+              v-for="tag in tags"
+              :key="tag.value"
+              v-model="data"
+              :value="tag.value"
+              :label="$t(tag.label)"
+            />
+          </div>
+
+        <!-- <ABtn>Read more</ABtn> -->
+        </div>
+      </ACard>
+    </Teleport>
+  </ClientOnly>
   <div class="mt-0 lg:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
@@ -26,7 +55,7 @@ const list = computed(() => {
           shadow="none"
           :title="$t('filtrate')"
           :subtitle="$t('filtrate.discription')"
-          class="w-full md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"