96 lines
1.7 KiB
Vue
96 lines
1.7 KiB
Vue
<template>
|
|
<article class="grid-item">
|
|
<router-link :to="`/fruit/${item.id}`">
|
|
<div class="thumbnail">
|
|
<img :src="item.image" :alt="item.name" />
|
|
</div>
|
|
<section>
|
|
<h3>
|
|
{{ item.name }}
|
|
<span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
|
|
</h3>
|
|
|
|
<hr />
|
|
|
|
<p class="price">{{ "$" + item.price }}</p>
|
|
</section>
|
|
</router-link>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
item: Object
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.grid-item {
|
|
border-radius: 10px;
|
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
|
|
overflow: hidden;
|
|
|
|
&:hover .thumbnail img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
|
|
.thumbnail {
|
|
height: 285px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 4px 1px #d2d2f2;
|
|
|
|
img {
|
|
border-radius: 10px 10px 0 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
max-width: 100%;
|
|
transition: transform 0.4s ease-in-out;
|
|
}
|
|
}
|
|
|
|
section {
|
|
padding: 1.5rem 1rem;
|
|
|
|
h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 0.55rem;
|
|
}
|
|
|
|
hr {
|
|
width: 100px;
|
|
color: #cece;
|
|
margin: 1.35rem auto;
|
|
}
|
|
|
|
.tag {
|
|
border-radius: 25px;
|
|
padding: 0.55rem;
|
|
margin-left: 0.75rem;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.price {
|
|
text-align: center;
|
|
margin: 0;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|