92 lines
1.5 KiB
Vue
92 lines
1.5 KiB
Vue
<script setup>
|
|
defineProps({
|
|
blog: Object,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<router-link :to="'/blog/'+blog.id">
|
|
<div class="blog-box">
|
|
<img :src="blog.image" alt="Blog image" class="blog-image" />
|
|
<div class="blog-details">
|
|
<h3>{{ blog.title }}</h3>
|
|
<p class="author">By {{ blog.author }}</p>
|
|
<p class="time"> {{ blog.creatTime }}</p>
|
|
<div class="tags">
|
|
<span v-for="tag in blog.tags" :key="tag" class="tag">{{ tag }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.blog-box {
|
|
width: 250px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border: 1px solid #ccc;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.blog-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.blog-details {
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.blog-details h3 {
|
|
margin: 5px 0;
|
|
font-size: 18px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.author {
|
|
font-size: 14px;
|
|
color: #555;
|
|
margin-top: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.time {
|
|
font-size: 12px;
|
|
color: #555;
|
|
margin-top: 5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tag {
|
|
padding: 3px 8px;
|
|
border: 1px solid #007bff;
|
|
border-radius: 15px;
|
|
font-size: 12px;
|
|
color: #007bff;
|
|
}
|
|
|
|
.theme-light .blog-box {
|
|
border-color: #ffb74d;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.theme-light .tag {
|
|
border-color: #ffb74d;
|
|
color: #ffb74d;
|
|
}
|
|
</style>
|