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> <template>
<ADrawer <ADrawer
v-model="isDrawerShown" 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 "> <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> <span style="color: hsla(var(--a-base-c), 0.87); " class="font-bold">{{ $t(nav.title) }}</span>
</ABtn> </ABtn>
@ -60,6 +64,10 @@ const flag: any = {
</div> </div>
</div> </div>
</LocaleNuxtLink> </LocaleNuxtLink>
<div class="p-5">
<div id="pages-sider" class="bg-black/10" />
</div>
</ADrawer> </ADrawer>
<ABtn <ABtn

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

@ -32,59 +32,47 @@ const status = [
</script> </script>
<template> <template>
<div <ClientOnly>
class="fixed bottom-16 right-6 md:hidden" <Teleport to="#pages-sider">
> <ACard
<ABtn shadow="none"
class="text-xl" :title="$t('community.vamx.sider.title')"
icon-only :subtitle="$t('filtrate.discription')"
icon="i-material-symbols-view-headline" class="w-full"
>
<ATooltip
trigger="click"
class="[&_.a-tooltip]-bg-transparent"
> >
<ACard <!-- <img
shadow="none"
:title="$t('community.vamx.sider.title')"
:subtitle="$t('filtrate.discription')"
class="w-300px"
>
<!-- <img
src="/images/demo/minimal-1.jpg" src="/images/demo/minimal-1.jpg"
alt="girl" alt="girl"
> --> > -->
<div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer"> <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
<div class="grid grid-rows-2 gap-y-3"> <div class="grid grid-rows-2 gap-y-3">
<ACheckbox <ACheckbox
v-for="tag in tags" v-for="tag in tags"
:key="tag.value" :key="tag.value"
v-model="data" v-model="data"
:value="tag.value" :value="tag.value"
:label="$t(tag.label)" :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> </div>
</ACard>
</ATooltip> <!-- <ABtn>Read more</ABtn> -->
</ABtn>
</div> <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"> <div class="mt-0 lg:mt-20">
<Section class="flex flex-col gap-4 md:flex-row"> <Section class="flex flex-col gap-4 md:flex-row">
<div> <div>
@ -92,7 +80,7 @@ const status = [
shadow="none" shadow="none"
:title="$t('community.vamx.sider.title')" :title="$t('community.vamx.sider.title')"
:subtitle="$t('filtrate.discription')" :subtitle="$t('filtrate.discription')"
class="hidden w-full md:block md:w-300px" class="hidden lg:(block w-300px)"
> >
<!-- <img <!-- <img
src="/images/demo/minimal-1.jpg" 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> </script>
<template> <template>
<div <ClientOnly>
class="fixed bottom-16 right-6 md:hidden" <Teleport to="#pages-sider">
> <ACard
<ABtn shadow="none"
class="text-xl" :title="$t('community.vamx.join.title')"
icon-only :subtitle="$t('community.vamx.join.discription')"
icon="i-material-symbols-view-headline" class="w-full"
>
<ATooltip
trigger="click"
class="[&_.a-tooltip]-bg-transparent"
> >
<ACard <!-- <img
shadow="none"
:title="$t('community.vamx.join.title')"
:subtitle="$t('community.vamx.join.discription')"
class="w-300px"
>
<!-- <img
src="/images/demo/minimal-1.jpg" src="/images/demo/minimal-1.jpg"
alt="girl" alt="girl"
> --> > -->
<div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer"> <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
<div class="grid grid-rows-2 gap-y-3"> <div class="grid grid-rows-2 gap-y-3">
<ACheckbox <ACheckbox
v-for="tag in tags" v-for="tag in tags"
:key="tag.value" :key="tag.value"
v-model="data" v-model="data"
:value="tag.value" :value="tag.value"
:label="$t(tag.label)" :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> </div>
</ACard>
</ATooltip> <!-- <ABtn>Read more</ABtn> -->
</ABtn> <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
</div> {{ $t('community.vamx.sider.title') }}
<div class="mt-10 md:mt-20"> </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"> <Section class="flex flex-col gap-4 md:flex-row">
<div> <div>
<ACard <ACard
shadow="none" shadow="none"
:title="$t('community.vamx.join.title')" :title="$t('community.vamx.join.title')"
:subtitle="$t('community.vamx.join.discription')" :subtitle="$t('community.vamx.join.discription')"
class="hidden w-full md:block md:w-300px" class="hidden lg:(block w-300px)"
> >
<!-- <img <!-- <img
src="/images/demo/minimal-1.jpg" src="/images/demo/minimal-1.jpg"

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

@ -32,54 +32,43 @@ const status = [
</script> </script>
<template> <template>
<div <ClientOnly>
class="fixed bottom-16 right-6 md:hidden" <Teleport to="#pages-sider">
> <ACard
<ABtn shadow="none"
class="text-xl" :title="$t('community.vamx.news.title')"
icon-only :subtitle="$t('community.vamx.news.discription')"
icon="i-material-symbols-view-headline" class="w-full"
>
<ATooltip
trigger="click"
class="[&_.a-tooltip]-bg-transparent"
> >
<ACard <!-- <img
shadow="none"
:title="$t('community.vamx.news.title')"
:subtitle="$t('community.vamx.news.discription')"
class="w-300px"
>
<!-- <img
src="/images/demo/minimal-1.jpg" src="/images/demo/minimal-1.jpg"
alt="girl" alt="girl"
> --> > -->
<div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer"> <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"> <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
{{ $t('community.vamx.sider.title') }} {{ $t('community.vamx.sider.title') }}
</LocaleNuxtLink> </LocaleNuxtLink>
<LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80"> <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
{{ $t('community.vamx.structure.title') }} {{ $t('community.vamx.structure.title') }}
</LocaleNuxtLink> </LocaleNuxtLink>
<LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80"> <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
{{ $t('community.vamx.join.title') }} {{ $t('community.vamx.join.title') }}
</LocaleNuxtLink> </LocaleNuxtLink>
</div> </div>
</ACard> </ACard>
</ATooltip> </Teleport>
</ABtn> </ClientOnly>
</div> <div class="mt-0 lg:mt-20">
<div class="mt-0 md:mt-20">
<Section class="flex flex-col gap-4 md:flex-row"> <Section class="flex flex-col gap-4 md:flex-row">
<div> <div>
<ACard <ACard
shadow="none" shadow="none"
:title="$t('community.vamx.news.title')" :title="$t('community.vamx.news.title')"
:subtitle="$t('community.vamx.news.discription')" :subtitle="$t('community.vamx.news.discription')"
class="hidden w-full md:block md:w-300px" class="hidden lg:(block w-300px)"
> >
<!-- <img <!-- <img
src="/images/demo/minimal-1.jpg" 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> </script>
<template> <template>
<div <ClientOnly>
class="fixed bottom-16 right-6 md:hidden" <Teleport to="#pages-sider">
> <ACard
<ABtn shadow="none"
class="text-xl" :title="$t('community.vamx.structure.title')"
icon-only :subtitle="$t('community.vamx.structure.discription')"
icon="i-material-symbols-view-headline" class="w-full"
>
<ATooltip
trigger="click"
class="[&_.a-tooltip]-bg-transparent"
> >
<ACard <!-- <img
shadow="none"
:title="$t('community.vamx.structure.title')"
:subtitle="$t('community.vamx.structure.discription')"
class="w-300px"
>
<!-- <img
src="/images/demo/minimal-1.jpg" src="/images/demo/minimal-1.jpg"
alt="girl" alt="girl"
> --> > -->
<div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer"> <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
<div class="grid grid-rows-2 gap-y-3"> <div class="grid grid-rows-2 gap-y-3">
<ACheckbox <ACheckbox
v-for="tag in tags" v-for="tag in tags"
:key="tag.value" :key="tag.value"
v-model="data" v-model="data"
:value="tag.value" :value="tag.value"
:label="$t(tag.label)" :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> </div>
</ACard>
</ATooltip> <!-- <ABtn>Read more</ABtn> -->
</ABtn> <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
</div> {{ $t('community.vamx.sider.title') }}
<div class="mt-10 md:mt-20"> </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"> <Section class="flex flex-col gap-4 md:flex-row">
<div> <div>
<ACard <ACard
shadow="none" shadow="none"
:title="$t('community.vamx.structure.title')" :title="$t('community.vamx.structure.title')"
:subtitle="$t('community.vamx.structure.discription')" :subtitle="$t('community.vamx.structure.discription')"
class="hidden w-full md:block md:w-300px" class="hidden lg:(block w-300px)"
> >
<!-- <img <!-- <img
src="/images/demo/minimal-1.jpg" src="/images/demo/minimal-1.jpg"

31
pages/release/index.vue
View File

@ -19,6 +19,35 @@ const list = computed(() => {
</script> </script>
<template> <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"> <div class="mt-0 lg:mt-20">
<Section class="flex flex-col gap-4 md:flex-row"> <Section class="flex flex-col gap-4 md:flex-row">
<div> <div>
@ -26,7 +55,7 @@ const list = computed(() => {
shadow="none" shadow="none"
:title="$t('filtrate')" :title="$t('filtrate')"
:subtitle="$t('filtrate.discription')" :subtitle="$t('filtrate.discription')"
class="w-full md:w-300px" class="hidden lg:(block w-300px)"
> >
<!-- <img <!-- <img
src="/images/demo/minimal-1.jpg" src="/images/demo/minimal-1.jpg"