From b856015e4769e2b5df205318a9bb3326142f8d62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E9=91=AB?= <1219654535@qq.com>
Date: Tue, 6 Jun 2023 16:17:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E6=9C=AF=E7=A4=BE=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ImageLoading.vue                   |  2 +-
 .../pages/community/use-community-article.ts  | 26 ++++++++++++-------
 pages/community/vamx.vue                      | 11 ++++++--
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/components/ImageLoading.vue b/components/ImageLoading.vue
index 5f18dfc..5277e5f 100644
--- a/components/ImageLoading.vue
+++ b/components/ImageLoading.vue
@@ -11,7 +11,7 @@ const { isLoading, error } = useImage({ src: avatarUrl })
 </script>
 
 <template>
-  <div v-if="isLoading" class="h-full w-full flex animate-pulse items-center justify-center bg-slate/10">
+  <div v-if="isLoading" class="h-min-200px h-full w-full flex animate-pulse items-center justify-center bg-slate/10">
     <div class="i-line-md-loading-twotone-loop" />
   </div>
   <!-- <div v-if="error" class="animate-pulse w-full h-full bg-rose/10 flex items-center justify-center">
diff --git a/config/pages/community/use-community-article.ts b/config/pages/community/use-community-article.ts
index e1b189f..b0a8060 100644
--- a/config/pages/community/use-community-article.ts
+++ b/config/pages/community/use-community-article.ts
@@ -2,7 +2,9 @@ export function useCommunityArticle() {
   return [
     {
       title: 'Decor',
-      subtitle: 'Fine Art, Dining',
+      subtitle: 'asdasdasfasfasfasfasfasfaf',
+      author: 'Author',
+      profession: 'Fine Art, Dining',
       img: '/imgs/Home-Stories/Circulus.jpg',
       tags: ['Web 3.0'],
       href: '/community/test',
@@ -12,30 +14,34 @@ export function useCommunityArticle() {
     },
     {
       title: 'Decor',
-      subtitle: 'Fine Art, Dining',
+      author: 'Author',
+      subtitle: 'asdasdasfasfasfasfasfasfaf',
+      profession: 'Fine Art, Dining',
       img: '/imgs/Home-Stories/Circulus.jpg',
-      tags: ['Web 3.0', 'Digital Twins'],
-      href: '#',
+      tags: ['Web 3.0'],
+      href: '/community/test',
       level: 1,
       avatar: '/imgs/Home-Stories/Circulus.jpg',
       createTime: '2023/6/5',
     },
     {
       title: 'Decor',
-      subtitle: 'Fine Art, Dining',
+      author: 'Author',
+      profession: 'Fine Art, Dining',
       img: '/imgs/Home-Stories/Circulus.jpg',
-      tags: ['Web 3.0', 'Digital Twins'],
-      href: '#',
+      tags: ['Web 3.0'],
+      href: '/community/test',
       level: 2,
       avatar: '/imgs/Home-Stories/Circulus.jpg',
       createTime: '2023/6/5',
     },
     {
       title: 'Decor',
-      subtitle: 'Fine Art, Dining',
+      author: 'Author',
+      profession: 'Fine Art, Dining',
       img: '/imgs/Home-Stories/Circulus.jpg',
-      tags: ['Web 3.0', 'Digital Twins'],
-      href: '#',
+      tags: ['Web 3.0'],
+      href: '/community/test',
       level: 0,
       avatar: '/imgs/Home-Stories/Circulus.jpg',
       createTime: '2023/6/5',
diff --git a/pages/community/vamx.vue b/pages/community/vamx.vue
index 2e2fab3..55314cf 100644
--- a/pages/community/vamx.vue
+++ b/pages/community/vamx.vue
@@ -73,15 +73,22 @@ const status = [
           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" />
+          <div class="relative w-full">
+            <div class="absolute bottom-0 left-70px">
+              <h3 class="text-h4 font-bold">
+                {{ item.title }}
+              </h3>
+            </div>
+          </div>
           <div class="flex items-center justify-between gap-2 p-3 pt-5">
             <AAvatar :src="item.avatar" />
             <div class="flex-grow pl-2">
               <h4>
-                {{ item.title }}
+                {{ item.author }}
               </h4>
               <p>
                 <small>
-                  {{ item.subtitle }}
+                  {{ item.profession }}
                 </small>
               </p>
               <p>