topverse
/
TOPVERSE_Official
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

侧边栏统一迁移到导航中的侧边栏

This commit is contained in:
胡鑫 2023-06-13 20:39:39 +08:00
parent 8906ef0bf3
commit a68ad78b57
6 changed files with 172 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/header/mobile-nav.vue
View File

@ -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

84
pages/community/vamx/index.vue
View File

@ -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"

83
pages/community/vamx/join.vue
View File

@ -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"

59
pages/community/vamx/news.vue
View File

@ -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"

83
pages/community/vamx/structure.vue
View File

@ -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"

31
pages/release/index.vue
View File

@ -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"