Untitled
user_9363972
javascript
a month ago
1.1 kB
2
Indexable
Never
<script setup> defineProps({ recipeList: Array, }); </script> <template> <div class="d-flex flex-row justify-content-around gap-3 w-100 flex-wrap"> <div v-for="item in recipeList" :key="item.id"> <div class="card text-decoration-none col-12 position-relative" style="padding-top: 12px; padding-bottom: 12px; height: 398px" > <img :src="item.imageLink" class="card-img-top" alt="Food" height="240" width="285" style="object-fit: fill" /> <div class="card-body" style="color: #0a0a0a"> <p class="mb-0">{{ item.category }}</p> <div class="h-50"> <h4 class="fs-5 mb-0">{{ item.name }}</h4> </div> <p>Recipe By {{ item.username }}</p> </div> </div> <div class="position-absolute text-secondary bg-light px-2 py-1 rounded-circle top-0 end-0 m-4 like-icon" > <i class="fas fa-heart"></i> </div> </div> </div> </template> <style scoped></style>
Leave a Comment