排版修改

This commit is contained in:
胡鑫 2023-06-08 10:42:29 +08:00
parent 8de170e14b
commit 536dee50af
9 changed files with 97 additions and 73 deletions

View File

@ -33,8 +33,8 @@ onMounted(() => {
<Typography
text-color="white"
link-btn-class="scale-150"
topic-class="text-5xl lg:text-7xl text-dark dark:text-white "
description-class="text-2xl lg:text-4xl text-dark dark:text-white "
topic-class="text-5xl lg:text-7xl text-dark dark:text-white mb-5"
description-class="text-2xl lg:text-4xl text-dark dark:text-white mb-10"
:topic="$t(carousels[pages].title)" :description="$t(carousels[pages].description)" :link="{
...carousels[pages].link,
name: $t(carousels[pages].link.name),

View File

@ -1,15 +1,15 @@
export function useCommunityTag() {
return [
{
label: 'nav.solutions.child.land.service[0]',
value: 'Publications',
label: 'community.vamx.sider.condition[0]',
value: 'Publication',
},
{
label: 'nav.solutions.child.land.service[1]',
value: 'Projects',
label: 'community.vamx.sider.condition[1]',
value: 'Project',
},
{
label: 'nav.solutions.child.land.service[2]',
label: 'community.vamx.sider.condition[2]',
value: 'Research',
},
]

View File

@ -31,14 +31,14 @@
"home": {
"carousel": {
"topic": ["Sakura City: Code the New World",
"VAMX Digital Tech Research Team: The Grand Launch",
"TOKEN 2049 Singapore: Creator Party-verse",
"HoloWater®Water Station Digital Twin"],
"VAMX Digital Tech Research Team: The Grand Launch",
"TOKEN 2049 Singapore: Creator Party-verse",
"HoloWater®Water Station Digital Twin"],
"description": ["New MR Gaming Experience",
"Academic Community for VR/AR/MR/XR Developers and Creators",
"PARCEL Creatorverse Highlight Project",
"Industrial Mixed Reality Built within Hololens 2"],
"link": ["Details", "Details","Details", "Details"]
"link": ["Details", "Details", "Details", "Details"]
},
"sectionOne": {
"topic": "World-Leading Web 3.0 Builders and AR/VR/MR Developers",
@ -50,8 +50,8 @@
}
},
"sectionTwo": {
"content":{
"title":["Client and Partner", "Digital Content Platform and Ecosystem", "Technical Development and Professional Association"]
"content": {
"title": ["Client and Partner", "Digital Content Platform and Ecosystem", "Technical Development and Professional Association"]
},
"title": "Our Partners & Cooperations",
"description": "With WHOM and WHICH Platform We've Been Built"
@ -179,6 +179,16 @@
"description": "Get involved in this revolution and enjoy"
}
},
"community": {
"vamx": {
"sider": {
"title": "社区内容",
"condition": [
"学术论文", "实践项目", "学术研究"
]
}
}
},
"foot": {
"copyright": "TOPVERSE LAB © Copyright 2019-2023 All rights reserved",
"release": "London I Beijing I Shanghai I Hongkong",

View File

@ -25,16 +25,16 @@
"home": {
"carousel": {
"topic": ["Sakura City立“码”浸入新宇宙",
"VAMX数研组成立企划",
"创作者聚会Party-verse",
"绿色双碳水务工作站混合现实数字孪生"
"VAMX数研组成立企划",
"创作者聚会Party-verse",
"绿色双碳水务工作站混合现实数字孪生"
],
"description": ["TOPVERSE x MUA x Ultiverse元宇宙再次集结",
"VR/AR/MR/XR多生态开发者与创作者的开放学术社区",
"在全球最大元宇宙平台Decentraland相聚",
"基于微软HoloLens 2的工业元宇宙"],
"link": ["相关文章","相关文章","相关文章","相关文章"]
"VR/AR/MR/XR多生态开发者与创作者的开放学术社区",
"在全球最大元宇宙平台Decentraland相聚",
"基于微软HoloLens 2的工业元宇宙"],
"link": ["相关文章", "相关文章", "相关文章", "相关文章"]
},
"sectionOne": {
"topic": "世界领先Web 3.0领域应用及多现实混合应用技术研发",
@ -172,6 +172,16 @@
"description": "参与到这场全新的变革中并享受他吧!"
}
},
"community": {
"vamx": {
"sider": {
"title": "社区内容",
"condition": [
"学术论文", "实践项目", "学术研究"
]
}
}
},
"foot": {
"copyright": "TOPVERSE LAB 奇点拓界 © 版权所有 2019-2023 All rights reserved",
"release": "伦敦 I 北京 I 上海 I 香港",
@ -200,4 +210,5 @@
"level": [
"入门", "中级", "专家"
]
}

View File

@ -1,15 +0,0 @@
<script setup lang="ts">
const router = useRouter()
</script>
<template>
<main p="x4 y-50" text="center teal-700 dark:gray-200">
<div text-4xl>
<div i-carbon-warning inline-block />
</div>
<h2 p-12 text-4xl uppercase>
{{ $t('notfound') }}
</h2>
</main>
</template>

View File

@ -0,0 +1,41 @@
<script setup>
const route = useRoute()
const { locale } = useI18n()
const path = `/${locale.value}/community/${route.params.id.join('/')}`
const { data, error } = await useAsyncData(`content-${path}`, () => {
return queryContent().where({ _path: path }).findOne()
})
</script>
<template>
<div v-if="!error">
<SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
<main class="m-auto prose xl:max-w-900px">
<ContentRenderer v-if="data" :value="data" />
</main>
<div class="m-auto my-30 flex flex-col text-right text-right prose xl:max-w-900px">
<span class="text-lg font-bold">
{{ data?.author }}
</span>
<small class="opacity-80">
{{ data?.resume }}
</small>
<span class="pt-5">
{{ data?.publish }}
</span>
</div>
</div>
<div v-else>
<main p="x4 y-50" text="center teal-700 dark:gray-200">
<div text-4xl>
<div i-carbon-warning inline-block />
</div>
<h2 p-12 text-4xl uppercase>
{{ $t('notfound') }}
</h2>
</main>
</div>
</template>

View File

@ -1,28 +0,0 @@
<script setup>
const route = useRoute()
const { locale } = useI18n()
const path = `/${locale.value}/community/${route.params.id}`
const { data } = await useAsyncData(`content-${path}`, () => {
return queryContent().where({ _path: path }).findOne()
})
</script>
<template>
<SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
<main class="m-auto prose xl:max-w-900px">
<ContentRenderer v-if="data" :value="data" />
</main>
<div class="m-auto my-30 flex flex-col text-right text-right prose xl:max-w-900px">
<span class="text-lg font-bold">
{{ data?.author }}
</span>
<small class="opacity-80">
{{ data?.resume }}
</small>
<span class="pt-5">
{{ data?.publish }}
</span>
</div>
</template>

View File

@ -6,8 +6,6 @@ const items = useCommunityArticle()
const tags = useCommunityTag()
const data = ref([])
const { text, copy, copied, isSupported } = useClipboard()
const list = computed(() => {
if (!data.value.length)
return items
@ -39,7 +37,7 @@ const status = [
<div>
<ACard
shadow="none"
:title="$t('filtrate')"
:title="$t('community.vamx.sider.title')"
:subtitle="$t('filtrate.discription')"
class="w-full md:w-300px"
>
@ -72,22 +70,26 @@ const status = [
:href="item.href"
class="w-full overflow-hidden rounded bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))]"
>
<ImageLoading style="-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);" :src="item.img" class="rounded-b-3xl" height="400" fit="cover" loading="lazy" />
<ImageLoading style="-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);" :src="item.img" class="h-250px w-full rounded-b-3xl" fit="cover" loading="lazy" />
<div class="relative w-full">
<div class="absolute bottom-0 left-70px">
<h3 class="text-h4 font-bold">
<h3 class="w-200px truncate text-h4 font-bold" :title="item.title">
{{ item.title }}
</h3>
</div>
</div>
<div class="flex items-center justify-between gap-2 p-3 pt-5">
<AAvatar :src="item.avatar" />
<AAvatar :src="item.avatar" class="flex-shrink-0" />
<div class="flex-grow pl-2">
<h4>
{{ item.author }}
</h4>
<div
class="h-80px flex items-center"
>
<h4 class="line-clamp-3" :title="item.author">
{{ item.author }}
</h4>
</div>
<p>
<small>
<small class="truncate">
{{ item.profession }}
</small>
</p>

View File

@ -68,6 +68,7 @@ const sectionNine = useSectionNine()
v-for="(content, i) in sectionThree.contentPrimary"
:key="i"
:href="content.href" :img="content.img" :topic="content.topic"
class="min-h-200px"
:class="[`animated-delay-${i * 100}ms`, {
'animated animated-fade-in-up animated-faster': sectionThreeVis,
}]"
@ -78,6 +79,7 @@ const sectionNine = useSectionNine()
v-for="(content, i) in sectionThree.contentSecondary"
:key="i"
:href="content.href" :img="content.img" :topic="content.topic"
class="min-h-200px"
:class="[`animated-delay-${i * 100}ms`, {
'animated animated-fade-in-up animated-faster': sectionThreeVis,
}]"
@ -88,6 +90,7 @@ const sectionNine = useSectionNine()
v-for="(content, i) in sectionThree.contentThird"
:key="i"
:href="content.href" :img="content.img" :topic="content.topic"
class="min-h-200px"
:class="[`animated-delay-${i * 100}ms`, {
'animated animated-fade-in-up': sectionThreeVis,
}]"