RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix card design

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-01-10 01:03:40 +06:00
parent 1ad480bab5
commit 32483db512
7 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/archive/card.vue
View File

@@ -17,17 +17,17 @@ withDefaults(defineProps<Props>(), {
</script>
<template>
<article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
<NuxtLink :to="link" class="grid grid-cols-1 sm:grid-cols-9 gap-5">
<article class="group border m-2 rounded-2xl overflow-hidden shadow-md text-zinc-700">
<NuxtLink :to="link" class="grid grid-cols-1 sm:grid-cols-9 gap-3">
<div class="sm:col-span-2">
<img
class="lg:h-48 md:h-36 sm:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
class="md:h-full sm:h-36 w-full object-cover object-center rounded-l-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
:src="`${link}/cover.jpg`"
:alt="title"
/>
</div>
<div class="sm:col-span-7">
<h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
<div class="sm:col-span-7 p-5">
<h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
{{ title }}
</h2>
<p class="text-ellipsis line-clamp-2">

44
components/blog/card.vue
View File

@@ -17,35 +17,37 @@ withDefaults(defineProps<Props>(), {
</script>
<template>
<article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
<article class="group border m-2 overflow-hidden rounded-2xl shadow-lg text-zinc-700">
<NuxtLink :to="link">
<img
class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
:src="`${link}/cover.jpg`"
:alt="title"
/>
<div class="text-black text-sm pt-4 pb-2">
<div class="flex items-center">
<LogoDate />
{{ time }}
<div class="p-5">
<div class="text-black text-sm pt-4 pb-2">
<div class="flex items-center">
<LogoDate />
{{ time }}
</div>
<div class="flex items-center gap-1 flex-wrap">
<LogoTag />
<template v-for="tag in tags" :key="tag">
<span>{{ tag }}</span>
</template>
</div>
</div>
<div class="flex items-center gap-1 flex-wrap">
<LogoTag />
<template v-for="tag in tags" :key="tag">
<span>{{ tag }}</span>
</template>
<h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
{{ title }}
</h2>
<p class="text-ellipsis line-clamp-3">
{{ description }}
</p>
<div class="flex group-hover:underline text-sky-600 items-center pt-2">
<p>Read More</p>
<LogoArrow />
</div>
</div>
<h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
{{ title }}
</h2>
<p class="text-ellipsis line-clamp-3">
{{ description }}
</p>
<div class="flex group-hover:underline text-sky-600 items-center pt-2">
<p>Read More</p>
<LogoArrow />
</div>
</NuxtLink>
</article>
</template>