91 lines
2.5 KiB
Vue
91 lines
2.5 KiB
Vue
<script>
|
|
import Layout from '../../layouts/main'
|
|
import PageHeader from '../../components/page-header'
|
|
|
|
import { shopsData } from './data-shops'
|
|
|
|
/**
|
|
* Shops component
|
|
*/
|
|
export default {
|
|
components: { Layout, PageHeader },
|
|
data() {
|
|
return {
|
|
shopsData: shopsData,
|
|
title: 'Shops',
|
|
items: [
|
|
{
|
|
text: 'Ecommerce',
|
|
href: '/',
|
|
},
|
|
{
|
|
text: 'Shops',
|
|
active: true,
|
|
},
|
|
],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Layout>
|
|
<PageHeader :title="title" :items="items" />
|
|
<div class="row">
|
|
<div v-for="shops in shopsData" :key="shops.id" class="col-xl-4 col-sm-6">
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="col-xl-5">
|
|
<div class="text-center p-4 border-end">
|
|
<div class="avatar-sm mx-auto mb-3 mt-1">
|
|
<span
|
|
:class="`avatar-title rounded-circle bg-soft bg-${shops.color} text-${shops.color} font-size-16`"
|
|
>{{shops.avatar}}</span>
|
|
</div>
|
|
<h5 class="text-truncate pb-1">{{shops.name}}</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-7">
|
|
<div class="p-4 text-center text-xl-start">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div>
|
|
<p class="text-muted mb-2 text-truncate">Products</p>
|
|
<h5>{{shops.products}}</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div>
|
|
<p class="text-muted mb-2 text-truncate">Wallet Balance</p>
|
|
<h5>{{shops.balance}}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<a href="#" class="text-decoration-underline text-reset">See Profile
|
|
<i class="mdi mdi-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="text-center my-3">
|
|
<a href="javascript:void(0);" class="text-success">
|
|
<i class="bx bx-loader bx-spin font-size-18 align-middle me-2"></i> Load more
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- end col-->
|
|
</div>
|
|
<!-- end row -->
|
|
</Layout>
|
|
</template>
|