466 lines
16 KiB
Vue
466 lines
16 KiB
Vue
<template>
|
|
<v-carousel cycle>
|
|
<v-carousel-item
|
|
|
|
|
|
reverse-transition="fade-transition"
|
|
transition="fade-transition"
|
|
>
|
|
<!-- /////////////////////////////////////////////////////////////////////// -->
|
|
<div><v-img height="50" :src="`https://api7.siliconpin.com/assets/${catVegetables[0].img}`" gradient="to bottom, rgba(13, 191, 43,.1), rgba(15, 43, 20,.9)">
|
|
<h1 class="text-center mt-1 white--text">
|
|
সবজি ।
|
|
</h1></v-img>
|
|
<v-row>
|
|
<v-col cols="12" lg="6" sm="12" md="12">
|
|
<v-card flat tile class="mx-auto mb-1 pa-2 ">
|
|
<v-img height="300" :src="`https://api7.siliconpin.com/assets/${catVegetables[0].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
<v-card-text>
|
|
<h3> {{catVegetables[0].name}}</h3>
|
|
</v-card-text>
|
|
<v-rating half-increments dense size="20" v-model="catVegetables[0].rating" class="px-2 ma-0"
|
|
background-color="orange lighten-3" color="orange"></v-rating>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catVegetables[0].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catVegetables[0].price}} টাকা ।</span>
|
|
<span v-if="catVegetables[0].p2" style="font-weight:bold"> মূল্য {{catVegetables[0].p2}} টাকা ।</span>
|
|
</p>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" sm="12" md="12">
|
|
<v-row>
|
|
<v-col cols="12" lg="12" sm="12" md="12">
|
|
<v-row>
|
|
<v-col lg="12" sm="12" md="12">
|
|
<v-card flat tile class="my-2 pa-1">
|
|
<v-row>
|
|
<v-col cols="12" lg="6" md="12" sm="12">
|
|
<v-img height="180" :src="`https://api7.siliconpin.com/assets/${catVegetables[1].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" md="12" sm="12">
|
|
<h3> {{catVegetables[1].name}}</h3>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catVegetables[1].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catVegetables[1].price}} টাকা ।</span>
|
|
<span v-if="catVegetables[1].p2" style="font-weight:bold"> মূল্য {{catVegetables[1].p2}} টাকা
|
|
।</span>
|
|
</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
<v-col lg="12" sm="12" md="12">
|
|
<v-card flat tile class="my-2 pa-1">
|
|
<v-row>
|
|
<v-col cols="12" md="12" lg="6" sm="12">
|
|
<v-img height="180" :src="`https://api7.siliconpin.com/assets/${catVegetables[2].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" sm="12">
|
|
<h3> {{catVegetables[2].name}}</h3>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catVegetables[2].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catVegetables[2].price}} টাকা ।</span>
|
|
<span v-if="catVegetables[2].p2" style="font-weight:bold"> মূল্য {{catVegetables[2].p2}} টাকা
|
|
।</span>
|
|
</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
|
|
|
|
|
|
</v-row>
|
|
|
|
|
|
|
|
|
|
</v-col>
|
|
|
|
|
|
<v-col lg="12" sm="12" md="12">
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ///////////////////////////////////////////////////////////////////////// -->
|
|
</v-carousel-item>
|
|
<!-- ///////////////////////////////////////////////////////////////////////// -->
|
|
|
|
<v-carousel-item
|
|
|
|
|
|
reverse-transition="fade-transition"
|
|
transition="fade-transition"
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ///////////////////////////////////////////////////////////////////////// -->
|
|
<div><v-img height="50" :src="`https://api7.siliconpin.com/assets/${catFruits[0].img}`" gradient="to bottom, rgba(13, 191, 43,.1), rgba(15, 43, 20,.9)">
|
|
<h1 class="text-center mt-1 white--text">
|
|
ফল ।
|
|
</h1></v-img>
|
|
<v-row>
|
|
<v-col cols="12" lg="6" sm="12" md="12">
|
|
<v-card class="mx-auto mb-1 pa-2 ">
|
|
<v-img height="300" :src="`https://api7.siliconpin.com/assets/${catFruits[0].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
<v-card-text>
|
|
<h3> {{catFruits[0].name}}</h3>
|
|
</v-card-text>
|
|
<v-rating half-increments dense size="20" v-model="catFruits[0].rating" class="px-2 ma-0"
|
|
background-color="orange lighten-3" color="orange"></v-rating>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catFruits[0].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catFruits[0].price}} টাকা ।</span>
|
|
<span v-if="catFruits[0].p2" style="font-weight:bold"> মূল্য {{catFruits[0].p2}} টাকা ।</span>
|
|
</p>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" sm="12" md="12">
|
|
<v-row>
|
|
<v-col cols="12" lg="12" sm="12" md="12">
|
|
<v-row>
|
|
<v-col lg="12" sm="12" md="12">
|
|
<v-card class="my-2 pa-1">
|
|
<v-row>
|
|
<v-col cols="12" lg="6" md="12" sm="12">
|
|
<v-img height="180" :src="`https://api7.siliconpin.com/assets/${catFruits[1].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" md="12" sm="12">
|
|
<h3> {{catFruits[1].name}}</h3>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catFruits[1].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catFruits[1].price}} টাকা ।</span>
|
|
<span v-if="catFruits[1].p2" style="font-weight:bold"> মূল্য {{catFruits[1].p2}} টাকা
|
|
।</span>
|
|
</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
<v-col lg="12" sm="12" md="12">
|
|
<v-card class="my-2 pa-1">
|
|
<v-row>
|
|
<v-col cols="12" md="12" lg="6" sm="12">
|
|
<v-img height="180" :src="`https://api7.siliconpin.com/assets/${catFruits[2].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" sm="12">
|
|
<h3> {{catFruits[2].name}}</h3>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catFruits[2].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catFruits[2].price}} টাকা ।</span>
|
|
<span v-if="catFruits[2].p2" style="font-weight:bold"> মূল্য {{catFruits[2].p2}} টাকা
|
|
।</span>
|
|
</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
|
|
|
|
|
|
</v-row>
|
|
|
|
|
|
|
|
|
|
</v-col>
|
|
|
|
|
|
<v-col lg="12" sm="12" md="12">
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</div>
|
|
</v-carousel-item>
|
|
<!-- //////////////////////////////////////////////////////////// -->
|
|
<v-carousel-item
|
|
|
|
|
|
reverse-transition="fade-transition"
|
|
transition="fade-transition"
|
|
>
|
|
<div><v-img height="50" :src="`https://api7.siliconpin.com/assets/${catJewlry[0].img}`" gradient="to bottom, rgba(13, 191, 43,.1), rgba(15, 43, 20,.9)">
|
|
<h1 class="text-center mt-1 white--text">
|
|
জুয়েলারি ।
|
|
</h1></v-img>
|
|
<v-row>
|
|
<v-col cols="12" lg="6" sm="12" md="12">
|
|
<v-card class="mx-auto mb-1 pa-2 ">
|
|
<v-img height="300" :src="`https://api7.siliconpin.com/assets/${catJewlry[0].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
<v-card-text>
|
|
<h3> {{catJewlry[0].name}}</h3>
|
|
</v-card-text>
|
|
<v-rating half-increments dense size="20" v-model="catJewlry[0].rating" class="px-2 ma-0"
|
|
background-color="orange lighten-3" color="orange"></v-rating>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catJewlry[0].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catJewlry[0].price}} টাকা ।</span>
|
|
<span v-if="catJewlry[0].p2" style="font-weight:bold"> মূল্য {{catJewlry[0].p2}} টাকা ।</span>
|
|
</p>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" sm="12" md="12">
|
|
<v-row>
|
|
<v-col cols="12" lg="12" sm="12" md="12">
|
|
<v-row>
|
|
<v-col lg="12" sm="12" md="12">
|
|
<v-card class="my-2 pa-1">
|
|
<v-row>
|
|
<v-col cols="12" lg="6" md="12" sm="12">
|
|
<v-img height="150" :src="`https://api7.siliconpin.com/assets/${catJewlry[1].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" md="12" sm="12">
|
|
<h3> {{catJewlry[1].name}}</h3>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catJewlry[1].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catJewlry[1].price}} টাকা ।</span>
|
|
<span v-if="catJewlry[1].p2" style="font-weight:bold"> মূল্য {{catJewlry[1].p2}} টাকা
|
|
।</span>
|
|
</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
<v-col lg="12" sm="12" md="12">
|
|
<v-card class="my-2 pa-1">
|
|
<v-row>
|
|
<v-col cols="12" md="12" lg="6" sm="12">
|
|
<v-img height="150" :src="`https://api7.siliconpin.com/assets/${catJewlry[2].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" sm="12">
|
|
<h3> {{catJewlry[2].name}}</h3>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catJewlry[2].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catJewlry[2].price}} টাকা ।</span>
|
|
<span v-if="catJewlry[2].p2" style="font-weight:bold"> মূল্য {{catJewlry[2].p2}} টাকা
|
|
।</span>
|
|
</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
|
|
|
|
|
|
</v-row>
|
|
|
|
|
|
|
|
|
|
</v-col>
|
|
|
|
|
|
<v-col lg="12" sm="12" md="12">
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</div>
|
|
</v-carousel-item>
|
|
<!-- //////////////////////////////////////////////// -->
|
|
<v-carousel-item
|
|
|
|
|
|
reverse-transition="fade-transition"
|
|
transition="fade-transition"
|
|
>
|
|
<div><v-img height="50" :src="`https://api7.siliconpin.com/assets/${catCosmetics[0].img}`" gradient="to bottom, rgba(13, 191, 43,.1), rgba(15, 43, 20,.9)">
|
|
<h1 class="text-center mt-1 white--text">
|
|
প্রসাধন ।
|
|
</h1></v-img>
|
|
<v-row>
|
|
<v-col cols="12" lg="6" sm="12" md="12">
|
|
<v-card class="mx-auto mb-1 pa-2 ">
|
|
<v-img height="300" :src="`https://api7.siliconpin.com/assets/${catCosmetics[0].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
<v-card-text>
|
|
<h3> {{catCosmetics[0].name}}</h3>
|
|
</v-card-text>
|
|
<v-rating half-increments dense size="20" v-model="catCosmetics[0].rating" class="px-2 ma-0"
|
|
background-color="orange lighten-3" color="orange"></v-rating>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catCosmetics[0].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catCosmetics[0].price}} টাকা ।</span>
|
|
<span v-if="catCosmetics[0].p2" style="font-weight:bold"> মূল্য {{catCosmetics[0].p2}} টাকা ।</span>
|
|
</p>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" sm="12" md="12">
|
|
<v-row>
|
|
<v-col cols="12" lg="12" sm="12" md="12">
|
|
<v-row>
|
|
<v-col lg="12" sm="12" md="12">
|
|
<v-card class="my-2 pa-1">
|
|
<v-row>
|
|
<v-col cols="12" lg="6" md="12" sm="12">
|
|
<v-img height="180" :src="`https://api7.siliconpin.com/assets/${catCosmetics[1].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" md="12" sm="12">
|
|
<h3> {{catCosmetics[1].name}}</h3>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catCosmetics[1].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catCosmetics[1].price}} টাকা ।</span>
|
|
<span v-if="catCosmetics[1].p2" style="font-weight:bold"> মূল্য {{catCosmetics[1].p2}} টাকা
|
|
।</span>
|
|
</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
<v-col lg="12" sm="12" md="12">
|
|
<v-card class="my-2 pa-1">
|
|
<v-row>
|
|
<v-col cols="12" md="12" lg="6" sm="12">
|
|
<v-img height="180" :src="`https://api7.siliconpin.com/assets/${catCosmetics[2].img}`" aspect-ratio="1.2">
|
|
</v-img>
|
|
|
|
</v-col>
|
|
<v-col cols="12" lg="6" sm="12">
|
|
<h3> {{catCosmetics[2].name}}</h3>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{catCosmetics[2].description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{catCosmetics[2].price}} টাকা ।</span>
|
|
<span v-if="catCosmetics[2].p2" style="font-weight:bold"> মূল্য {{catCosmetics[2].p2}} টাকা
|
|
।</span>
|
|
</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-card>
|
|
|
|
</v-col>
|
|
|
|
|
|
|
|
</v-row>
|
|
|
|
|
|
|
|
|
|
</v-col>
|
|
|
|
|
|
<v-col lg="12" sm="12" md="12">
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</v-carousel-item>
|
|
<!-- //////////////////////////////////////////////// -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</v-carousel>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
smProducts: [],
|
|
catFruits: [],
|
|
catVegetables: [],
|
|
catGrocery: [],
|
|
catServices: [],
|
|
catJewlry: [],
|
|
catCosmetics: [],
|
|
catCloths: []
|
|
}
|
|
},
|
|
async fetch() {
|
|
this.smProducts = await fetch(
|
|
'https://api7.siliconpin.com/items/swarnamath?offset=0&limit=90'
|
|
).then(res => res.json())
|
|
|
|
this.catFruits = this.smProducts.data.filter(item => { if (item.cat == "fruits") return item });
|
|
this.catVegetables = this.smProducts.data.filter(item => { if (item.cat == "vegetables") return item });
|
|
this.catGrocery = this.smProducts.data.filter(item => { if (item.cat == "grocery") return item });
|
|
this.catServices = this.smProducts.data.filter(item => { if (item.cat == "services") return item });
|
|
this.catJewlry = this.smProducts.data.filter(item => { if (item.cat == "jewlry") return item });
|
|
this.catCosmetics = this.smProducts.data.filter(item => { if (item.cat == "cosmetics") return item });
|
|
this.catCloths = this.smProducts.data.filter(item => { if (item.cat == "cloths") return item });
|
|
// console.log(this.catFruits)
|
|
}
|
|
}
|
|
</script> |