Untitled
user_9363972
javascript
7 days ago
2.5 kB
4
Indexable
Never
<template> <div class="my-2 p-4 d-flex flex-column-reverse flex-lg-row justify-content-between border border-secondary-sublet rounded" > <div class="pe-lg-4"> <h2>{{ recipeDetail.name }}</h2> <p> {{ recipeDetail.description }} </p> <!-- Phone Device --> <div class="d-flex d-lg-none flex-column justify-content-between border border-primary rounded bg-color-detail" > <div class="w-75 my-3 pb-3 mx-auto pe-lg-4 ps-lg-3 border-bottom border-primary" > <p class="my-0">Preptime</p> <p class="my-0">{{ recipeDetail.prepTime }} Mins</p> </div> <div class="w-75 px-lg-4 pb-3 mx-auto border-bottom border-primary"> <p class="my-0">Cooktime</p> <p class="my-0">{{ recipeDetail.cookTime }} Mins</p> </div> <div class="w-75 my-3 mx-auto ps-lg-4 pe-3"> <p class="my-0">Total</p> <p class="my-0">{{ recipeDetail.cookTime }} Mins</p> </div> </div> <!-- PC Device --> <div class="d-none d-lg-flex flex-lg-row justify-content-between border border-primary rounded bg-color-detail" > <div class="w-75 my-3 pb-3 mx-auto pe-lg-4 ps-lg-3 border-end border-primary" > <p class="my-0">Preptime</p> <p class="my-0">{{ recipeDetail.prepTime }} Mins</p> </div> <div class="w-75 my-3 px-lg-4 mx-auto border-end border-primary"> <p class="my-0">Cooktime</p> <p class="my-0">{{ recipeDetail.cookTime }} Mins</p> </div> <div class="w-75 my-3 mx-auto ps-lg-4 pe-3"> <p class="my-0">Total</p> <p class="my-0">{{ recipeDetail.cookTime }} Mins</p> </div> </div> <p class="my-3">Recipe By {{ recipeDetail.username }}</p> <div> <button class="btn fav-btn px-3 py-2 rounded-pill"> <i class="far fa-heart pe-2"></i>Add To Favorite </button> </div> </div> <div class="ps-lg-4"> <img :src="recipeDetail.imageLink" alt="Food" class="recipe__detail-img rounded mx-auto" style="object-fit: cover" /> </div> </div> </template> <script setup> import { computed } from "vue"; import { useStore } from "vuex"; const store = useStore(); const recipeDetail = computed(() => { return store.state.recipe.recipeDetail; }); </script>
Leave a Comment