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

s5

master
dev dwd 2022-10-26 21:10:27 +05:30
parent ba8e3d1634
commit 11b55095b1
7 changed files with 296 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -16,5 +16,6 @@ declare module '@vue/runtime-core' {
Product: typeof import('./src/components/product.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SellerHeader: typeof import('./src/components/SellerHeader.vue')['default']
}
}

BIN
public/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

10
src/App.vue
View File

@ -1,13 +1,5 @@
<script setup>
</script>
<template>
<div>
<Header />
<main>
<router-view />
</main>
<router-view />
</div>
<Footer />
</template>

23
src/components/Header.vue
View File

@ -1,12 +1,6 @@
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<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">
@ -18,32 +12,15 @@
</div>
<div class="z-50 fixed bottom-0 left-0 w-screen lg:hidden">
<div class="m-6">
<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>
<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">

82
src/components/SellerHeader.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<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=" h-10">
</router-link>
</div>
<div class="z-50 fixed bottom-0 left-0 w-screen lg:hidden">
<div class="m-6">
<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>
</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>
<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>
</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 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="#"
class="ml-8 inline-flex items-center justify-center whitespace-nowrap rounded-md text-gray-500 hover:text-gray-900 px-4 py-2 text-base font-medium">
<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 18V17C7 14.2386 9.23858 12 12 12V12C14.7614 12 17 14.2386 17 17V18" stroke="currentColor" stroke-linecap="round"/> <path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/> </svg>
</a>
</div>
</div>
</div>
</div>
</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: 'Manage Category', icon: 'dashboard', link: "/seller/category" },
{ title: 'Products', icon: 'dashboard', link: "/seller/products" },
{ title: 'Orders', icon: 'dashboard', link: "/seller/orders" },
{ title: 'Transactions', icon: 'dashboard', link: "/seller/transactions" },
{ title: 'Manage Tickets', icon: 'dashboard', link: "/seller/tickets" }
],
}
},
methods: {
mobileMenu: function() {
this.isOpen = !this.isOpen;
// some code to filter users
}
}
}
</script>

5
src/pages/index.vue
View File

@ -1,5 +1,7 @@
<template>
<div>
<Header />
<main>
<!-- <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=""> -->
@ -89,6 +91,9 @@
</section>
</main>
<Footer />
</div>
</template>

207
src/pages/seller/index.vue
View File

@ -1,10 +1,213 @@
<template>
<div>
<SellerHeader />
<div class="container-fluid bg-gray-100 mt-4">
<div class="p-3 text-2xl font-semibold text-center text-gray-600"> Seller Dashboard </div>
</div>
<div class="container">
</div>
<div >
</div>
<section class="antialiased bg-gray-100 text-gray-600">
<div class="flex flex-col justify-center h-full">
<!-- Table -->
<div class="w-full max-w-2xl mx-auto bg-white shadow-lg rounded-sm border border-gray-200">
<header class="px-5 py-4 border-b border-gray-100">
<h2 class="font-semibold text-gray-800">Customers</h2>
</header>
<div class="p-3">
<div class="overflow-x-auto">
<table class="table-auto w-full">
<thead class="text-xs font-semibold uppercase text-gray-400 bg-gray-50">
<tr>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-left">Name</div>
</th>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-left">Email</div>
</th>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-left">Spent</div>
</th>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-center">Country</div>
</th>
</tr>
</thead>
<tbody class="text-sm divide-y divide-gray-100">
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-05.jpg" width="40" height="40" alt="Alex Shatov"></div>
<div class="font-medium text-gray-800">Alex Shatov</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">alexshatov@gmail.com</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">&#8377;2890</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">??</div>
</td>
</tr>
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-06.jpg" width="40" height="40" alt="Philip Harbach"></div>
<div class="font-medium text-gray-800">Philip Harbach</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">philip.h@gmail.com</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500"> &#8377;2767</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">??</div>
</td>
</tr>
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-07.jpg" width="40" height="40" alt="Mirko Fisuk"></div>
<div class="font-medium text-gray-800">Mirko Fisuk</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">mirkofisuk@gmail.com</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">&#8377;2996</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">??</div>
</td>
</tr>
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-08.jpg" width="40" height="40" alt="Olga Semklo"></div>
<div class="font-medium text-gray-800">Olga Semklo</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">olga.s@cool.design</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">&#8377;1220</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">??</div>
</td>
</tr>
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-09.jpg" width="40" height="40" alt="Burak Long"></div>
<div class="font-medium text-gray-800">Burak Long</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">longburak@gmail.com</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">&#8377;1890</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">??</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gray-100">
<div class="container px-6 py-10 mx-auto">
<div class="p-3 text-2xl font-semibold text-center text-gray-600"> Commerce details</div>
<div class="grid grid-cols-1 gap-8 mt-8 md:mt-16 md:grid-cols-2">
<div class="lg:flex">
<img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1509315703195-529879416a7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" alt="">
<div class="flex flex-col justify-between py-6 lg:mx-6">
<a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
All Order Details
</a>
<span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
</div>
</div>
<div class="lg:flex">
<img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="flex flex-col justify-between py-6 lg:mx-6">
<a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
Pending Orders
</a>
<span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
</div>
</div>
<div class="lg:flex">
<img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1544654803-b69140b285a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="flex flex-col justify-between py-6 lg:mx-6">
<a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
Delivered Orders
</a>
<span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
</div>
</div>
<div class="lg:flex">
<img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1530099486328-e021101a494a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1547&q=80" alt="">
<div class="flex flex-col justify-between py-6 lg:mx-6">
<a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
Cancelled Orders
</a>
<span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
</div>
</div>
<div class="lg:flex">
<img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1484&q=80" alt="">
<div class="flex flex-col justify-between py-6 lg:mx-6">
<a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
All Products on sale
</a>
<span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
</div>
</div>
<div class="lg:flex">
<img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1624996379697-f01d168b1a52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="flex flex-col justify-between py-6 lg:mx-6">
<a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
Earnings
</a>
<span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
</div>
</div>
</div>
</div>
</section>
<Footer />
</div>
</template>