Merge branch 'main' of https://github.com/TOPVERSE/TOPVERSE_Official

components/Card.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+$defineProps<{
+  href: string
+  img: string
+  title: string
+  avatar: string
+  author: string
+  description?: string
+  profession: string
+  createTime: string
+}>()
+</script>
+
+<template>
+  <div
+    class="w-full overflow-hidden rounded-lg bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))] animated animated-fade-in-up animated-faster"
+  >
+    <ImageHover
+      :href="href"
+      :description="description"
+      :img="img"
+      :topic="title"
+      img-class="h-250px w-full "
+      class="rounded-b-3xl"
+    />
+    <!-- <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="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="avatar" class="flex-shrink-0" />
+      <div class="flex-grow pl-2">
+        <div
+          class="h-80px flex items-center"
+        >
+          <h4 class="line-clamp-3" :title="author">
+            {{ author }}
+          </h4>
+        </div>
+        <p>
+          <small class="truncate">
+            {{ profession }}
+          </small>
+        </p>
+        <p>
+          <small>
+            {{ createTime }}
+          </small>
+        </p>
+      </div>
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

components/ImageHover.vue

@@ -2,22 +2,27 @@
 $defineProps<{
   img: string
   topic: string
+  description?: string
   href: string
+  imgClass: string
 }>()
 </script>
 
 <template>
   <LocaleNuxtLink
     :href="href"
-    class="group h-min-200px relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
+    class="group h-min-200px relative block h-full w-full overflow-hidden overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
   >
     <!-- <NuxtImg loading="lazy" :src="img" class="h-full w-full" fit="cover" width="300" height="180" /> -->
-    <ImageLoading :src="img" class="h-full w-full transition-all group-hover:(scale-110 blur)" />
+    <ImageLoading :src="img" :class="imgClass" class="h-full w-full transition-all group-hover:(scale-110 blur)" />
     <div class="mask-img h-50px bg-dark-700/70 transition-all group-hover:(h-full)">
-      <div class="text-h6 flex-grow">
+      <div class="flex-grow text-h6">
         <p :title="$t(topic)" class="line-clamp-1 w-full text-white group-hover:(line-clamp-3 h-full)">
           {{ $t(topic) }}
         </p>
+        <small v-if="description" class="hidden group-hover:block">
+          {{ description }}
+        </small>
       </div>
       <div i-solar-arrow-right-linear mx-2 stroke-3 font-bold text-white />
     </div>

config/pages/release/use-article.ts

@@ -3,25 +3,34 @@ export function useArticle() {
     {
       title: 'TOPVERSE与UCL Bartlett第九研究室共同成立VAMX数研组',
       subtitle: 'VR/AR/MR/XR工程师、设计师与开发者开放学术社区',
-      img: '/imgs/release/vamxlaunch/008.png',
+      img: '/imgs/Release/vamxlaunch/008.png',
       tags: ['Mixed Reality'],
       href: '/release/vamxlaunch',
+      author: 'Xin Lu',
+      profession: 'UCL Bartlett RC9',
+      avatar: '/imgs/Community/Avatar/caadria.png',
       createTime: '2023/6/6',
     },
     {
       title: '立“码”浸入新宇宙',
       subtitle: '全新VR游戏体验《樱花城》登录Meta Quest',
-      img: '/imgs/release/sakuracity/20230607-135223.jpg',
+      img: '/imgs/Release/sakuracity/20230607-135223.jpg',
       tags: ['Web 3.0', 'Mixed Reality'],
       href: '/release/sakuracity',
+      author: 'Xin Lu',
+      profession: 'UCL Bartlett RC9',
+      avatar: '/imgs/Community/Avatar/caadria.png',
       createTime: '2023/6/6',
     },
     {
       title: 'TOPVERSE联合中国铁塔入围数字中国城市设计元宇宙RAR赛道百景新锐',
       subtitle: '2023数字中国创新大赛',
-      img: '/imgs/release/dcic2023/001.png',
+      img: '/imgs/Release/dcic2023/001.png',
       tags: ['Web 3.0', 'Digital Twins'],
       href: '/release/dcic2023',
+      author: 'Xin Lu',
+      profession: 'UCL Bartlett RC9',
+      avatar: '/imgs/Community/Avatar/caadria.png',
       createTime: '2023/04/21',
     },
     {
@@ -30,6 +39,9 @@ export function useArticle() {
       img: '/imgs/Release/2023annualreview/s00.jpg',
       tags: ['Web 3.0', 'Digital Twins'],
       href: '/release/annualreview2023',
+      author: 'Xin Lu',
+      profession: 'UCL Bartlett RC9',
+      avatar: '/imgs/Community/Avatar/caadria.png',
       createTime: '2022/1/18',
     },
   ]

pages/community/vamx.vue

@@ -64,47 +64,26 @@ const status = [
 
       <div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
         <!-- 👉 2nd card -->
-        <LocaleNuxtLink
+        <Card
           v-for="(item, i) in list"
           :key="i"
+          :class="[`animated-delay-${i * 100}ms`]"
+          :title="item.title"
           :href="item.href"
-          class="w-full overflow-hidden rounded bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))]"
+          :description="item.subtitle"
+          :img="item.img"
+          :avatar="item.avatar"
+          :author="item.author"
+          :profession="item.profession"
+          :create-time="item.createTime"
         >
-          <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" />
+          <template #footer>
-          <div class="relative w-full">
-            <div class="absolute bottom-0 left-70px">
-              <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" class="flex-shrink-0" />
-            <div class="flex-grow pl-2">
-              <div
-                class="h-80px flex items-center"
-              >
-                <h4 class="line-clamp-3" :title="item.author">
-                  {{ item.author }}
-                </h4>
-              </div>
-              <p>
-                <small class="truncate">
-                  {{ item.profession }}
-                </small>
-              </p>
-              <p>
-                <small>
-                  {{ item.createTime }}
-                </small>
-              </p>
-            </div>
             <div class="flex flex-shrink-0 items-center gap-2">
               <div class="h-10px w-10px rounded-full" :class="status[item.level].color" />
               {{ $t(status[item.level].text) }}
             </div>
-          </div>
+          </template>
-        </LocaleNuxtLink>
+        </Card>
       </div>
     </Section>
   </div>

pages/release/index.vue

@@ -49,6 +49,35 @@ const list = computed(() => {
         </ACard>
       </div>
 
+      <div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+        <!-- 👉 2nd card -->
+        <Card
+          v-for="(item, i) in list"
+          :key="i"
+          :class="[`animated-delay-${i * 100}ms`]"
+          :title="item.title"
+          :description="item.subtitle"
+          :img="item.img"
+          :href="item.href"
+          :avatar="item?.avatar"
+          :author="item?.author"
+          :profession="item?.profession"
+          :create-time="item?.createTime"
+        >
+          <template #footer>
+            <ABtn
+              variant="text" icon="i-bx-link-external" icon-only class="h-50px w-20px"
+              @click.prevent="copy(`http://www.topverse.world${item.href}`)"
+            >
+              <ATooltip
+                transition="fade"
+                :text="$t('copylink')"
+              />
+            </ABtn>
+          </template>
+        </Card>
+      </div>
+      <!--
       <ACard w-full shadow="none" class="divide-y divide-dark-50/10">
         <LocaleNuxtLink v-for="(item, i) in list" :key="i" class="group relative my-4 h-350px w-full flex flex-col items-center justify-start md:mx-4 md:h-150px md:flex-row" :href="item.href">
           <div :href="item.href" class="h-200px w-full overflow-hidden rounded bg-light-50/10 transition-all md:absolute group-hover:(w-full opacity-50) md:h-full md:w-1/2" style="mask-image:linear-gradient(270deg, transparent, #000);-webkit-mask-image:linear-gradient(290deg, transparent 12%, #000 80%);">
@@ -81,7 +110,7 @@ const list = computed(() => {
         <div v-if="!list.length" class="flex items-center justify-center py-20 text-7xl font-bold text-dark-50/10">
           EMPTY
         </div>
-      </ACard>
+      </ACard> -->
     </Section>
   </div>
 </template>