学术社区

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

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'],
+      tags: ['Web 3.0'],
-      href: '#',
+      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'],
+      tags: ['Web 3.0'],
-      href: '#',
+      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'],
+      tags: ['Web 3.0'],
-      href: '#',
+      href: '/community/test',
       level: 0,
       avatar: '/imgs/Home-Stories/Circulus.jpg',
       createTime: '2023/6/5',

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>