master
parent
a755a084f0
commit
ba8e3d1634
|
|
@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
|
|||
Header: typeof import('./src/components/Header.vue')['default']
|
||||
'Header - Copy': typeof import('./src/components/Header - Copy.vue')['default']
|
||||
MainMenu: typeof import('./src/components/MainMenu.vue')['default']
|
||||
Product: typeof import('./src/components/product.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "vite-vue3-tailwind-starter",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite --host --port 2001",
|
||||
"dev": "vite --host --port 2002",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"serve": "vite preview"
|
||||
},
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
|
|
@ -6,32 +6,48 @@
|
|||
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
<div class=" bg-white border-b-2 border-gray-100 ">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6">
|
||||
<div class="flex items-center justify-between py-4 md:justify-start md:space-x-5">
|
||||
<div class="flex justify-start lg:flex-1">
|
||||
|
||||
<router-link to="/" class="flex items-center">
|
||||
<img src="/img/logo.png" class="mr-3 h-6 sm:h-10">
|
||||
<img src="/img/logo.png" class=" h-10">
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="z-50 fixed bottom-0 left-0 w-screen lg:hidden">
|
||||
<div class="m-6">
|
||||
|
||||
<div class=" space-x-5 md:flex uppercase">
|
||||
<div :class="{hidden: isOpen}" class="mobileMenu rounded-md flex flex-col bg-green-700 ">
|
||||
<router-link @click="mobileMenu" v-for="item in mainMenu" :key="item.title" :to="item.link" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" > {{item.title}} </router-link>
|
||||
<!-- <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/administrators" > Administrators </router-link>
|
||||
<router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/resources" > Resources </router-link>
|
||||
<router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/occassion" > Occassion </router-link>
|
||||
<router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/themes" > Themes </router-link>
|
||||
<router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/blog" > Blog </router-link> -->
|
||||
</div>
|
||||
<div @click="mobileMenu" class="mainMenu-active text-center p-2 rounded-md font-medium text-green-100 bg-green-800 hover:bg-green-900 hover:text-white" > Menu </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">New Arrivals </router-link>
|
||||
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Cases & Sleeves </router-link>
|
||||
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Accessories </router-link>
|
||||
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Sale </router-link>
|
||||
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Bags & wallets </router-link>
|
||||
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Home Office </router-link>
|
||||
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Collections </router-link>
|
||||
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Corporate Gifting </router-link>
|
||||
|
||||
|
||||
<div class="hidden lg:block space-x-5 uppercase">
|
||||
<router-link v-for="item in mainMenu" :key="item.title" :to="item.link" class="text-sm font-bold hover:text-black-900" aria-current="page"> {{item.title}} </router-link>
|
||||
<!-- <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">New </router-link>
|
||||
<router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Cases </router-link>
|
||||
<router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Accessories </router-link>
|
||||
<router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Sale </router-link>
|
||||
<router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Bags & wallets </router-link>
|
||||
<router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Home Office </router-link>
|
||||
<router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Collections </router-link> -->
|
||||
<!-- <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Corporate Gifting </router-link> -->
|
||||
</div>
|
||||
<div class=" items-center justify-end md:flex md:flex-1 lg:w-0">
|
||||
|
||||
<a href="#" class="whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-900">
|
||||
<a href="#" class="whitespace-nowrap text-sm font-medium text-gray-500 inline-flex hover:text-gray-900">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16"> <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> </svg>
|
||||
</a>
|
||||
<a href="#"
|
||||
|
|
@ -48,3 +64,39 @@
|
|||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.router-link-exact-active.mainMenu-active{
|
||||
background-color: #f19138bd;
|
||||
color:#ffffff
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
mainMenu: [
|
||||
{ title: 'New', icon: 'dashboard', link: "/new" },
|
||||
{ title: 'Cases', icon: 'dashboard', link: "/cases" },
|
||||
{ title: 'Accessories', icon: 'dashboard', link: "/accessories" },
|
||||
{ title: 'Sale', icon: 'dashboard', link: "/sale" },
|
||||
{ title: 'Bags & wallets', icon: 'dashboard', link: "/bags" },
|
||||
{ title: 'Home Office', icon: 'dashboard', link: "/home-office" },
|
||||
{ title: 'Collections', icon: 'dashboard', link: "/collections" }
|
||||
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mobileMenu: function() {
|
||||
this.isOpen = !this.isOpen;
|
||||
// some code to filter users
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<section>
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="grid-1 bg-blue-400 p-3"><img src="/img/guitarimage.jpg" alt="guitarimage.jpg" width="512px"></div>
|
||||
<div class="grid-2 grid-rows-4 bg-green-400">
|
||||
<div class="text-xl p-3 bg-red-400"><p>REVEL RVL-38C-LGP-BLS Acoustic Guitar Linden Wood Ebony Right Hand Orientation (Blue)</p></div>
|
||||
<div class="text-xl p-3 bg-blue-500"><p>₹2,399</p></div>
|
||||
<div class="grid grid-cols text-xl p-4">Coupons For You
|
||||
<div class="text-sm">Special Price₹100 off with cashback coupon on First Order
|
||||
<button class="T&C text-blue-900 font-semibold">T&C</button>
|
||||
<div class="grid grid-cols text-xl pt-3">Available offers
|
||||
<div class="text-sm">Special PriceGet extra ₹99 off (price inclusive of cashback/coupon)
|
||||
<button class="T&C text-blue-900 font-semibold">T&C</button></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="flex">
|
||||
<button class="add to card bg-orange-400 text-white font-bold p-2">ADD TO CART</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -41,6 +41,8 @@ declare module 'vue-router/auto/routes' {
|
|||
'/item/': RouteRecordInfo<'/item/', '/item/', Record<never, never>, Record<never, never>>,
|
||||
'/item/[id]': RouteRecordInfo<'/item/[id]', '/item/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'/item/demo': RouteRecordInfo<'/item/demo', '/item/demo', Record<never, never>, Record<never, never>>,
|
||||
'/product': RouteRecordInfo<'/product', '/product', Record<never, never>, Record<never, never>>,
|
||||
'/seller/': RouteRecordInfo<'/seller/', '/seller/', Record<never, never>, Record<never, never>>,
|
||||
'/test1': RouteRecordInfo<'/test1', '/test1', Record<never, never>, Record<never, never>>,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue