From 0bda04aa7e79de359e470a06d4c81fe510a17702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E9=91=AB?= <1219654535@qq.com>
Date: Mon, 12 Jun 2023 16:49:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Card.vue                 | 58 +++++++++++++++++++++++++++++
 components/ImageHover.vue           | 11 ++++--
 config/pages/release/use-article.ts | 12 ++++++
 pages/community/vamx.vue            | 45 ++++++----------------
 pages/release/index.vue             | 31 ++++++++++++++-
 5 files changed, 120 insertions(+), 37 deletions(-)
 create mode 100644 components/Card.vue

diff --git a/components/Card.vue b/components/Card.vue
new file mode 100644
index 0000000..d8ab3aa
--- /dev/null
+++ b/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>
diff --git a/components/ImageHover.vue b/components/ImageHover.vue
index a840fc1..bd23c1a 100644
--- a/components/ImageHover.vue
+++ b/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>
diff --git a/config/pages/release/use-article.ts b/config/pages/release/use-article.ts
index 85b8632..192817f 100644
--- a/config/pages/release/use-article.ts
+++ b/config/pages/release/use-article.ts
@@ -6,6 +6,9 @@ export function useArticle() {
       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',
     },
     {
@@ -14,6 +17,9 @@ export function useArticle() {
       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',
     },
     {
@@ -22,6 +28,9 @@ export function useArticle() {
       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',
     },
   ]
diff --git a/pages/community/vamx.vue b/pages/community/vamx.vue
index acb5503..665f766 100644
--- a/pages/community/vamx.vue
+++ b/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" />
-          <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>
+          <template #footer>
             <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>
-        </LocaleNuxtLink>
+          </template>
+        </Card>
       </div>
     </Section>
   </div>
diff --git a/pages/release/index.vue b/pages/release/index.vue
index f2e451b..835ad28 100644
--- a/pages/release/index.vue
+++ b/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 m-4 h-150px w-full flex items-center justify-start" :href="item.href">
           <div :href="item.href" class="absolute h-full w-1/3 overflow-hidden rounded bg-light-50/10 transition-all group-hover:(w-full opacity-50) 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>

From a058172830efe8593db98831f5f48b04b59c85c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E9=91=AB?= <1219654535@qq.com>
Date: Mon, 12 Jun 2023 16:51:06 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=B7=AF=E5=BE=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/pages/release/use-article.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/config/pages/release/use-article.ts b/config/pages/release/use-article.ts
index 192817f..59e3639 100644
--- a/config/pages/release/use-article.ts
+++ b/config/pages/release/use-article.ts
@@ -3,7 +3,7 @@ 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',
@@ -14,7 +14,7 @@ export function useArticle() {
     {
       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',
@@ -25,7 +25,7 @@ export function useArticle() {
     {
       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',