Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-08 22:53:24 +00:00
Code Issues Projects Releases Wiki Activity

Adding a Product Card with Overlapping image

Browse Source
This commit is contained in:
Harsh Bharvada
2020-05-09 23:38:29 +05:30
parent 6dcfda68d4
commit 9199adbd3d
3 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Models/data.js
View File

@@ -16,6 +16,7 @@ export default [
{ name: 'Article card' },
{ name: 'Article card with image' },
{ name: 'Product card' },
{ name: 'Product card with price' },
{ name: 'Product card with evaluation' },
{ name: 'Testimonial card' },
{ name: 'User card' },

2
src/components/Master.vue
View File

@@ -52,6 +52,7 @@
import ArticleCard from "./UI/Cards/ArticleCard";
import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
import ProductCard from "./UI/Cards/ProductCard";
import ProductCardWithPrice from "./UI/Cards/ProductCardWithPrice";
import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
import TestimonialCard from "./UI/Cards/TestimonialCard";
import UserCard from "./UI/Cards/UserCard";
@@ -90,6 +91,7 @@
ArticleCard,
ArticleCardWithImage,
ProductCard,
ProductCardWithPrice,
ProductCardWithEvaluation,
TestimonialCard,
UserCard,

29
src/components/UI/Cards/ProductCardWithPrice.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div :id="name | toId">
<div class="flex w-full h-full justify-center items-center">
<div class="flex flex-col w-2/5 h-auto justify-center items-center cursor-pointer">
<div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
class="flex bg-gray-300 h-32 md:h-56 w-24 md:w-4/5 mx-2 rounded-sm shadow-md bg-cover bg-top">
</div>
<div class="flex flex-col h-20 w-2/3 bg-white text-xs md:text-base -mt-10 text-center shadow-lg rounded-md justify-center items-center">
<span class="flex w-full h-10 justify-center items-center font-bold ">Nike Revolt</span>
<div class="flex flex-row w-full h-10 bg-gray-200 rounded-b-lg ">
<span class="flex w-1/3 h-full rounded-bl-lg justify-center items-center md:font-black md:text-lg"> $150 </span>
<div class="flex w-2/3 h-full bg-indigo-700 rounded-br-lg text-white justify-center items-center ">Add to Cart</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Product Card with Price',
}
}
}
</script>