init
This commit is contained in:
466
pages/testt.vue
Normal file
466
pages/testt.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user