排版修改

components/Carousel.vue

@@ -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 "
+        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 "
+        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),

config/pages/community/use-community-tag.ts

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

locales/en-UK.json

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

locales/zh-CN.json

@@ -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": [
     "入门", "中级", "专家"
   ]
+
 }

pages/community/[...all].vue

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

pages/community/[...id].vue

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

pages/community/[id].vue

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

pages/community/vamx.vue

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

pages/index.vue

@@ -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,
           }]"