dwd-projects
/
amigo-lifestyle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

master
Kar 2022-10-03 01:06:40 +05:30
parent 5ffc7af543
commit 3a683d8f63
5 changed files with 133 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/featured.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
public/img/footer-payment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
public/img/footer-return.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

364
src/pages/index.vue
View File

@ -6,248 +6,97 @@
}
</route>
<!-- <script>
export default {
data() {
return {
post: {}
}
},
}
</script> -->
<template>
<div class="bg-gray-50">
<div class="p-6" style="background-color:#E7E7E7 ;"> <img class="rounded-md" style="width: 100%;" src="/img/banner-1.png" > </div>
<div class="grid grid-cols-2 gap-4 bg-local bg-conatin" style="background-image: url(/img/banner-2.jpg);background-repeat: repeat-x; height:300px;">
<div></div>
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
<p class="text-4xl font-bold uppercase " style="color: #efc7c7;">Watchbands</p>
<div class="flex justify-center">
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
Shop Now
</button>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 bg-local bg-conatin" style="background-image: url(/img/banner-4.jpg);background-repeat: repeat-x; height:300px;">
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
<p class="text-2xl font-bold uppercase " style="color: #efc7c7;">Platform Collection</p>
<div class="flex justify-center">
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
Shop Now
</button>
</div>
</div>
<div></div>
</div>
<div class="grid grid-cols-2 gap-4 bg-local bg-conatin" style="background-image: url(/img/banner-3.jpg);background-repeat: repeat-x; height:300px;">
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;color: #efc7c7;">
<p class="text-4xl font-bold uppercase " >Hand Bags</p>
<div class="flex justify-center">
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
Shop Now
</button>
</div>
</div>
<div></div>
</div>
<!-- <div class="grid grid-cols-2 place-content-stretch h-48 ...">
<div>
<img class="object-cover" src="/img/banner-1.png" >
<div class="absolute -my-10 bottom-0 text-white text-xs text-center " >
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
<p class="text-4xl font-bold uppercase " style="color: #efc7c7;">Watchbands</p>
<div class="flex justify-center">
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
Shop Now
</button>
</div>
</div>
</div>
</div>
<div>
<img class="object-cover" src="/img/banner-1.png" >
<div class="absolute mt-2 bottom-0 bg-blue-400 text-white text-xs text-center ">this is a text</div>
</div>
</div> -->
<div class=" p-1" style="height: 100px; overflow: hidden;overflow-x: scroll;">
<div >
<div class="grid grid-cols-1 place-content-center float-left rounded-r-full mr-10 p-5" style="height: 80px;background-color: #e32320b5;color: #f5e6e6;">
<div class="text-2xl font-bold uppercase">New Arrivals</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat1.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Bag</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat2.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Mobile</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat3.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Laptop</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat5.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Watch</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
<div class="grid grid-cols-2">
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
<div class="grid grid-cols-1 place-content-center ml-2">
<div class="text-xl font-bold uppercase">Tab</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-4 bg-local bg-conatin" style="background-image: url(/img/banner-5.jpg);background-repeat: repeat-x; height:300px;">
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
<p class="text-2xl font-bold uppercase " style="color: #efc7c7;">Cloths Collection</p>
<div class="flex justify-center">
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
Shop Now
</button>
</div>
</div>
</div>
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals for {{this.$route.params.id}}</h1>
<hr class="">
<!-- <h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals for {{this.$route.params.id}}</h1>
<hr class=""> -->
<!-- <div v-if="loading" class="loading">Loading...</div> -->
<!-- <div v-if="error" class="error">{{ error }}</div> -->
<div v-if="itemByCategory.data" class="w-full">
<div v-for="(item, index) in itemByCategory.data" class="">
<router-link :to="'/item/' + item.slug">
<div class="relative">
<img class="w-full" :src="'https://api8.siliconpin.com/assets/'+item.img" >
<div class="absolute bottom-0 w-full">
<div v-if="ecomm55Banner.data" class="w-full">
<div v-for="(item, index) in ecomm55Banner.data" class="">
<router-link :to="'/item/' + item.slug">
<div class="relative">
<img class="w-full" :src="'https://api8.siliconpin.com/assets/'+item.img" >
<div v-if="item.name" class="absolute bottom-0 w-full">
<div class="flex justify-left" >
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
<p class="text-2xl font-bold uppercase " style="color: #efc7c7;">Cloths Collection</p>
<p class="text-2xl font-bold uppercase " style="color: #efc7c7;">{{item.name}} </p>
<div class="flex justify-center">
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
Shop Now
</button>
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 "> {{item.btn}} </button>
</div>
</div>
</div>
<!-- <button class="absolute top-0 bg-blue-500 text-white p-2 rounded hover:bg-blue-800 m-2">Button</button> -->
</div>
</div>
</div>
</router-link>
<!-- <router-link :to="'/item/' + item.slug">
<div class="flex items-center justify-center ">
<img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="Image" class=" h-48 space-x-4 flex items-center justify-center" />
</div>
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
<p class="text-center">Qty - 2 </p>
<p class="text-center">Price - Rs. {{ item.price }} </p>
</router-link> -->
</router-link>
</div>
</div>
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600"> SHOP BY CATEGORY</h1>
<hr class="">
<div v-if="ecom55Cat.data" style="width: 100%; overflow:scroll;" >
<table style="width: 140%; overflow:scroll;" >
<tr>
<td v-for="(item, index) in ecom55Cat.data" class="">
<router-link :to="'/category/' + item.slug">
<img class="w-full p-2" :src="'https://api8.siliconpin.com/assets/'+item.img" >
</router-link>
</td>
</tr>
<tr>
<td v-for="(item, index) in ecom55Cat.data" class="">
<router-link :to="'/category/' + item.slug">
<div class="text-center"> {{item.name}} </div>
</router-link>
</td>
</tr>
</table>
</div>
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">@amigo_official </h1>
<hr class="">
<div v-if="ecom55Official.data" style="width: 100%; overflow:hidden;" >
<table style="width: 140%; overflow:scroll;" class=" animate-marquee" >
<tr>
<td v-for="(item, index) in ecom55Official.data" class="">
<router-link :to="'/category/' + item.slug">
<img class="w-full p-2" :src="'https://api8.siliconpin.com/assets/'+item.img" >
</router-link>
</td>
</tr>
</table>
</div>
<section class="hero container max-w-screen-lg mx-auto pb-10 pt-10">
<img class="mx-auto" src="/img/featured.png" >
</section>
<section class="hero container max-w-screen-lg mx-auto pb-5 pt-5">
<form>
<label class="block">
<input type="email" class="peer w-full"/>
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
Please provide a valid email address.
</p>
</label>
</form>
</section>
<section class="hero container max-w-screen-lg mx-auto pb-10 pt-10">
<img class="mx-auto" src="/img/footer-return.png" >
</section>
<section class="hero container max-w-screen-lg mx-auto pb-10 pt-10">
<img class="mx-auto" src="/img/footer-payment.png" >
</section>
</div>
</template>
@ -257,7 +106,10 @@ export default {
return {
post: {},
err:null,
itemByCategory: {},
errorMessage:null,
ecomm55Banner: null,
ecom55Cat:null,
ecom55Official:null,
totalVuePackages:null
}
},
@ -270,42 +122,64 @@ export default {
// },
created() {
// GET request using fetch with error handling
fetch("https://api8.siliconpin.com/items/ecomm55banner")
.then(async response => {
const data = await response.json();
// check for error response
if (!response.ok) {
// get error message from body or default to response statusText
const error = (data && data.message) || response.statusText;
this.err=error
// return Promise.reject(error);
}
else{
this.itemByCategory=data
this.ecomm55Banner=data
console.log(data)
}
// this.totalVuePackages = data;
// console.log(data)
})
.catch(error => {
this.errorMessage = error;
this.err=error
// console.error("There was an error!", error);
});
fetch("https://api8.siliconpin.com/items/ecom55cat")
.then(async response => {
const data = await response.json();
if (!response.ok) {
const error = (data && data.message) || response.statusText;
this.err=error
// return Promise.reject(error);
}
else{
this.ecom55Cat=data
// console.log(data)
}
})
.catch(error => {
this.errorMessage = error;
});
fetch("https://api8.siliconpin.com/items/ecom55official")
.then(async response => {
const data = await response.json();
if (!response.ok) {
const error = (data && data.message) || response.statusText;
this.err=error
// return Promise.reject(error);
}
else{
this.ecom55Official=data
// console.log(data)
}
})
.catch(error => {
this.errorMessage = error;
});
},
methods: {
getItemByCategory() {
fetch('https://api8.siliconpin.com/items/ecomm55banner' )
// fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=' + this.$route.params.id)
// fetch('https://api7.siliconpin.com/items/ecom55')
.then(response => response.json())
.then(data => this.itemByCategory = data)
console.log(response)
// getItemByCategory() {
// fetch('https://api8.siliconpin.com/items/ecomm55banner' )
// // fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=' + this.$route.params.id)
// .then(response => response.json())
// .then(data => this.itemByCategory = data)
// console.log(response)
}
// }
}
}
</script>

14
tailwind.config.js
View File

@ -5,6 +5,20 @@ module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts}'],
theme: {
extend: {
animation: {
marquee: 'marquee 50s linear infinite',
marquee2: 'marquee2 25s linear infinite',
},
keyframes: {
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-40%)' },
},
marquee2: {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(0%)' },
},
},
fontFamily: {
sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
},