refactor: update base views
This commit is contained in:
woothu
@@ -78,6 +78,6 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-icon {
|
.c-icon {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.3rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
+315
-310
@@ -85,363 +85,368 @@
|
|||||||
<WidgetsBrand/>
|
<WidgetsBrand/>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol md="12">
|
<CCol md="12">
|
||||||
<CCard header-html="Traffic & Sales" body-wrapper>
|
<CCard>
|
||||||
<CRow>
|
<CCardHeader>
|
||||||
<CCol sm="12" lg="6">
|
Traffic & Sales
|
||||||
<CRow>
|
</CCardHeader>
|
||||||
<CCol sm="6">
|
<CCardBody>
|
||||||
<CCallout color="info">
|
<CRow>
|
||||||
<small class="text-muted">New Clients</small><br>
|
<CCol sm="12" lg="6">
|
||||||
<strong class="h4">9,123</strong>
|
<CRow>
|
||||||
</CCallout>
|
<CCol sm="6">
|
||||||
</CCol>
|
<CCallout color="info">
|
||||||
<CCol sm="6">
|
<small class="text-muted">New Clients</small><br>
|
||||||
<CCallout color="danger">
|
<strong class="h4">9,123</strong>
|
||||||
<small class="text-muted">Recurring Clients</small><br>
|
</CCallout>
|
||||||
<strong class="h4">22,643</strong>
|
</CCol>
|
||||||
</CCallout>
|
<CCol sm="6">
|
||||||
</CCol>
|
<CCallout color="danger">
|
||||||
</CRow>
|
<small class="text-muted">Recurring Clients</small><br>
|
||||||
<hr class="mt-0">
|
<strong class="h4">22,643</strong>
|
||||||
<div class="progress-group mb-4">
|
</CCallout>
|
||||||
<div class="progress-group-prepend">
|
</CCol>
|
||||||
<span class="progress-group-text">
|
</CRow>
|
||||||
Monday
|
<hr class="mt-0">
|
||||||
</span>
|
<div class="progress-group mb-4">
|
||||||
</div>
|
<div class="progress-group-prepend">
|
||||||
<div class="progress-group-bars">
|
<span class="progress-group-text">
|
||||||
<CProgress
|
Monday
|
||||||
class="progress-xs"
|
</span>
|
||||||
color="info"
|
|
||||||
:value="34"
|
|
||||||
/>
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
color="danger"
|
|
||||||
:value="78"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group mb-4">
|
|
||||||
<div class="progress-group-prepend">
|
|
||||||
<span class="progress-group-text">
|
|
||||||
Tuesday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group-bars">
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="56"
|
|
||||||
color="info"
|
|
||||||
/>
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="94"
|
|
||||||
color="danger"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group mb-4">
|
|
||||||
<div class="progress-group-prepend">
|
|
||||||
<span class="progress-group-text">
|
|
||||||
Wednesday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group-bars">
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="12"
|
|
||||||
color="info"
|
|
||||||
/>
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="67"
|
|
||||||
color="danger"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group mb-4">
|
|
||||||
<div class="progress-group-prepend">
|
|
||||||
<span class="progress-group-text">
|
|
||||||
Thursday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group-bars">
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="43"
|
|
||||||
color="info"
|
|
||||||
/>
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="91"
|
|
||||||
color="danger"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group mb-4">
|
|
||||||
<div class="progress-group-prepend">
|
|
||||||
<span class="progress-group-text">
|
|
||||||
Friday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group-bars">
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="22"
|
|
||||||
color="info"
|
|
||||||
/>
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="73"
|
|
||||||
color="danger"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group mb-4">
|
|
||||||
<div class="progress-group-prepend">
|
|
||||||
<span class="progress-group-text">
|
|
||||||
Saturday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group-bars">
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="53"
|
|
||||||
color="info"
|
|
||||||
/>
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="82"
|
|
||||||
color="danger"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group mb-4">
|
|
||||||
<div class="progress-group-prepend">
|
|
||||||
<span class="progress-group-text">
|
|
||||||
Sunday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group-bars">
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="9"
|
|
||||||
color="info"
|
|
||||||
/>
|
|
||||||
<CProgress
|
|
||||||
class="progress-xs"
|
|
||||||
:value="69"
|
|
||||||
color="danger"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="legend text-center">
|
|
||||||
<small>
|
|
||||||
<sup><CBadge shape="pill" color="info"> </CBadge></sup>
|
|
||||||
New clients
|
|
||||||
|
|
||||||
<sup><CBadge shape="pill" color="danger"> </CBadge></sup>
|
|
||||||
Recurring clients
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="12" lg="6">
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="6">
|
|
||||||
<CCallout color="warning">
|
|
||||||
<small class="text-muted">Pageviews</small><br>
|
|
||||||
<strong class="h4">78,623</strong>
|
|
||||||
</CCallout>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6">
|
|
||||||
<CCallout color="success">
|
|
||||||
<small class="text-muted">Organic</small><br>
|
|
||||||
<strong class="h4">49,123</strong>
|
|
||||||
</CCallout>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<hr class="mt-0">
|
|
||||||
<ul class="horizontal-bars type-2">
|
|
||||||
<div class="progress-group">
|
|
||||||
<div class="progress-group-header">
|
|
||||||
<CIcon name="user" class="progress-group-icon"/>
|
|
||||||
<span class="title">Male</span>
|
|
||||||
<span class="ml-auto font-weight-bold">43%</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="43"
|
color="info"
|
||||||
color="warning"
|
:value="34"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group mb-5">
|
|
||||||
<div class="progress-group-header">
|
|
||||||
<CIcon name="user-female" class="progress-group-icon"/>
|
|
||||||
<span class="title">Female</span>
|
|
||||||
<span class="ml-auto font-weight-bold">37%</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-group-bars">
|
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="37"
|
color="danger"
|
||||||
color="warning"
|
:value="78"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group">
|
<div class="progress-group mb-4">
|
||||||
<div class="progress-group-header">
|
<div class="progress-group-prepend">
|
||||||
<CIcon name="globe-alt" class="progress-group-icon"/>
|
<span class="progress-group-text">
|
||||||
<span class="title">Organic Search</span>
|
Tuesday
|
||||||
<span class="ml-auto font-weight-bold">
|
|
||||||
191,235<span class="text-muted small">(56%)</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="56"
|
:value="56"
|
||||||
color="success"
|
color="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="94"
|
||||||
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group">
|
<div class="progress-group mb-4">
|
||||||
<div class="progress-group-header">
|
<div class="progress-group-prepend">
|
||||||
<CIcon
|
<span class="progress-group-text">
|
||||||
name="facebook"
|
Wednesday
|
||||||
height="17"
|
|
||||||
class="progress-group-icon"
|
|
||||||
/>
|
|
||||||
<span class="title">Facebook</span>
|
|
||||||
<span class="ml-auto font-weight-bold">
|
|
||||||
51,223 <span class="text-muted small">(15%)</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="15"
|
:value="12"
|
||||||
color="success"
|
color="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="67"
|
||||||
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group">
|
<div class="progress-group mb-4">
|
||||||
<div class="progress-group-header">
|
<div class="progress-group-prepend">
|
||||||
<CIcon
|
<span class="progress-group-text">
|
||||||
name="twitter"
|
Thursday
|
||||||
height="17"
|
|
||||||
class="progress-group-icon"
|
|
||||||
/>
|
|
||||||
<span class="title">Twitter</span>
|
|
||||||
<span class="ml-auto font-weight-bold">
|
|
||||||
37,564 <span class="text-muted small">(11%)</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="11"
|
:value="43"
|
||||||
color="success"
|
color="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="91"
|
||||||
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group">
|
<div class="progress-group mb-4">
|
||||||
<div class="progress-group-header">
|
<div class="progress-group-prepend">
|
||||||
<CIcon
|
<span class="progress-group-text">
|
||||||
name="linkedin"
|
Friday
|
||||||
height="17"
|
|
||||||
class="progress-group-icon"
|
|
||||||
/>
|
|
||||||
<span class="title">LinkedIn</span>
|
|
||||||
<span class="ml-auto font-weight-bold">
|
|
||||||
27,319 <span class="text-muted small"> (8%)</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="8"
|
:value="22"
|
||||||
color="success"
|
color="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="73"
|
||||||
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider text-center">
|
<div class="progress-group mb-4">
|
||||||
<CButton color="link" size="sm" class="text-muted">
|
<div class="progress-group-prepend">
|
||||||
<CIcon name="options"/>
|
<span class="progress-group-text">
|
||||||
</CButton>
|
Saturday
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group-bars">
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="53"
|
||||||
|
color="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="82"
|
||||||
|
color="danger"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
<div class="progress-group mb-4">
|
||||||
</CCol>
|
<div class="progress-group-prepend">
|
||||||
</CRow>
|
<span class="progress-group-text">
|
||||||
<br/>
|
Sunday
|
||||||
<CDataTable
|
</span>
|
||||||
class="mb-0 table-outline"
|
</div>
|
||||||
hover
|
<div class="progress-group-bars">
|
||||||
:items="tableItems"
|
<CProgress
|
||||||
:fields="tableFields"
|
class="progress-xs"
|
||||||
head-color="light"
|
:value="9"
|
||||||
no-sorting
|
color="info"
|
||||||
>
|
/>
|
||||||
<td slot="avatar" class="text-center" slot-scope="{item}">
|
<CProgress
|
||||||
<div class="c-avatar">
|
class="progress-xs"
|
||||||
<img :src="item.avatar.url" class="c-avatar-img" alt="">
|
:value="69"
|
||||||
<span
|
color="danger"
|
||||||
class="c-avatar-status"
|
/>
|
||||||
:class="`bg-${item.avatar.status || 'secondary'}`"
|
</div>
|
||||||
></span>
|
</div>
|
||||||
</div>
|
<div class="legend text-center">
|
||||||
</td>
|
<small>
|
||||||
<td slot="user" slot-scope="{item}">
|
<sup><CBadge shape="pill" color="info"> </CBadge></sup>
|
||||||
<div>{{item.user.name}}</div>
|
New clients
|
||||||
<div class="small text-muted">
|
|
||||||
<span>
|
<sup><CBadge shape="pill" color="danger"> </CBadge></sup>
|
||||||
<template v-if="item.user.new">New</template>
|
Recurring clients
|
||||||
<template v-else>Recurring</template>
|
</small>
|
||||||
</span> | Registered: {{item.user.registered}}
|
</div>
|
||||||
</div>
|
</CCol>
|
||||||
</td>
|
<CCol sm="12" lg="6">
|
||||||
<td
|
<CRow>
|
||||||
slot="country"
|
<CCol sm="6">
|
||||||
slot-scope="{item}"
|
<CCallout color="warning">
|
||||||
class="text-center"
|
<small class="text-muted">Pageviews</small><br>
|
||||||
|
<strong class="h4">78,623</strong>
|
||||||
|
</CCallout>
|
||||||
|
</CCol>
|
||||||
|
<CCol sm="6">
|
||||||
|
<CCallout color="success">
|
||||||
|
<small class="text-muted">Organic</small><br>
|
||||||
|
<strong class="h4">49,123</strong>
|
||||||
|
</CCallout>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
<hr class="mt-0">
|
||||||
|
<ul class="horizontal-bars type-2">
|
||||||
|
<div class="progress-group">
|
||||||
|
<div class="progress-group-header">
|
||||||
|
<CIcon name="user" class="progress-group-icon"/>
|
||||||
|
<span class="title">Male</span>
|
||||||
|
<span class="ml-auto font-weight-bold">43%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group-bars">
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="43"
|
||||||
|
color="warning"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group mb-5">
|
||||||
|
<div class="progress-group-header">
|
||||||
|
<CIcon name="user-female" class="progress-group-icon"/>
|
||||||
|
<span class="title">Female</span>
|
||||||
|
<span class="ml-auto font-weight-bold">37%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group-bars">
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="37"
|
||||||
|
color="warning"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group">
|
||||||
|
<div class="progress-group-header">
|
||||||
|
<CIcon name="globe-alt" class="progress-group-icon"/>
|
||||||
|
<span class="title">Organic Search</span>
|
||||||
|
<span class="ml-auto font-weight-bold">
|
||||||
|
191,235<span class="text-muted small">(56%)</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group-bars">
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="56"
|
||||||
|
color="success"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group">
|
||||||
|
<div class="progress-group-header">
|
||||||
|
<CIcon
|
||||||
|
name="facebook"
|
||||||
|
height="17"
|
||||||
|
class="progress-group-icon"
|
||||||
|
/>
|
||||||
|
<span class="title">Facebook</span>
|
||||||
|
<span class="ml-auto font-weight-bold">
|
||||||
|
51,223 <span class="text-muted small">(15%)</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group-bars">
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="15"
|
||||||
|
color="success"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group">
|
||||||
|
<div class="progress-group-header">
|
||||||
|
<CIcon
|
||||||
|
name="twitter"
|
||||||
|
height="17"
|
||||||
|
class="progress-group-icon"
|
||||||
|
/>
|
||||||
|
<span class="title">Twitter</span>
|
||||||
|
<span class="ml-auto font-weight-bold">
|
||||||
|
37,564 <span class="text-muted small">(11%)</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group-bars">
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="11"
|
||||||
|
color="success"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group">
|
||||||
|
<div class="progress-group-header">
|
||||||
|
<CIcon
|
||||||
|
name="linkedin"
|
||||||
|
height="17"
|
||||||
|
class="progress-group-icon"
|
||||||
|
/>
|
||||||
|
<span class="title">LinkedIn</span>
|
||||||
|
<span class="ml-auto font-weight-bold">
|
||||||
|
27,319 <span class="text-muted small"> (8%)</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-group-bars">
|
||||||
|
<CProgress
|
||||||
|
class="progress-xs"
|
||||||
|
:value="8"
|
||||||
|
color="success"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="divider text-center">
|
||||||
|
<CButton color="link" size="sm" class="text-muted">
|
||||||
|
<CIcon name="options"/>
|
||||||
|
</CButton>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
<br/>
|
||||||
|
<CDataTable
|
||||||
|
class="mb-0 table-outline"
|
||||||
|
hover
|
||||||
|
:items="tableItems"
|
||||||
|
:fields="tableFields"
|
||||||
|
head-color="light"
|
||||||
|
no-sorting
|
||||||
>
|
>
|
||||||
<CIcon
|
<td slot="avatar" class="text-center" slot-scope="{item}">
|
||||||
:name="item.country.flag"
|
<div class="c-avatar">
|
||||||
height="25"
|
<img :src="item.avatar.url" class="c-avatar-img" alt="">
|
||||||
/>
|
<span
|
||||||
</td>
|
class="c-avatar-status"
|
||||||
<td slot="usage" slot-scope="{item}">
|
:class="`bg-${item.avatar.status || 'secondary'}`"
|
||||||
<div class="clearfix">
|
></span>
|
||||||
<div class="float-left">
|
|
||||||
<strong>{{item.usage.value}}%</strong>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="float-right">
|
</td>
|
||||||
<small class="text-muted">{{item.usage.period}}</small>
|
<td slot="user" slot-scope="{item}">
|
||||||
|
<div>{{item.user.name}}</div>
|
||||||
|
<div class="small text-muted">
|
||||||
|
<span>
|
||||||
|
<template v-if="item.user.new">New</template>
|
||||||
|
<template v-else>Recurring</template>
|
||||||
|
</span> | Registered: {{item.user.registered}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
<CProgress
|
<td
|
||||||
class="progress-xs"
|
slot="country"
|
||||||
v-model="item.usage.value"
|
slot-scope="{item}"
|
||||||
:color="color(item.usage.value)"
|
class="text-center"
|
||||||
/>
|
>
|
||||||
</td>
|
<CIcon
|
||||||
<td
|
:name="item.country.flag"
|
||||||
slot="payment"
|
height="25"
|
||||||
slot-scope="{item}"
|
/>
|
||||||
class="text-center"
|
</td>
|
||||||
>
|
<td slot="usage" slot-scope="{item}">
|
||||||
<CIcon
|
<div class="clearfix">
|
||||||
:name="item.payment.icon"
|
<div class="float-left">
|
||||||
height="25"
|
<strong>{{item.usage.value}}%</strong>
|
||||||
/>
|
</div>
|
||||||
</td>
|
<div class="float-right">
|
||||||
<td slot="activity" slot-scope="{item}">
|
<small class="text-muted">{{item.usage.period}}</small>
|
||||||
<div class="small text-muted">Last login</div>
|
</div>
|
||||||
<strong>{{item.activity}}</strong>
|
</div>
|
||||||
</td>
|
<CProgress
|
||||||
</CDataTable>
|
class="progress-xs"
|
||||||
|
v-model="item.usage.value"
|
||||||
|
:color="color(item.usage.value)"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
slot="payment"
|
||||||
|
slot-scope="{item}"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<CIcon
|
||||||
|
:name="item.payment.icon"
|
||||||
|
height="25"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td slot="activity" slot-scope="{item}">
|
||||||
|
<div class="small text-muted">Last login</div>
|
||||||
|
<strong>{{item.activity}}</strong>
|
||||||
|
</td>
|
||||||
|
</CDataTable>
|
||||||
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|||||||
+63
-56
@@ -22,7 +22,10 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
|
<CCard>
|
||||||
|
<CCardFooter>Card Footer</CCardFooter>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -74,80 +77,84 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard border-color="primary">
|
||||||
header="Card outline primary"
|
<CCardHeader>Card outline primary</CCardHeader>
|
||||||
border-color="primary"
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
:body-html="loremIpsum"
|
|
||||||
/>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="4">
|
|
||||||
<CCard
|
|
||||||
header="Card outline secondary"
|
|
||||||
border-color="secondary"
|
|
||||||
:body-html="loremIpsum"
|
|
||||||
/>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="4">
|
|
||||||
<CCard
|
|
||||||
header="Card outline success"
|
|
||||||
border-color="success"
|
|
||||||
body-wrapper
|
|
||||||
>
|
|
||||||
{{loremIpsum}}
|
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline info" border-color="info" body-wrapper>
|
<CCard border-color="secondary">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card outline secondary</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline warning" border-color="warning" body-wrapper>
|
<CCard border-color="success">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card outline success</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline danger" border-color="danger" body-wrapper>
|
<CCard border-color="info">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card outline info</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
<CCol sm="6" md="4">
|
||||||
|
<CCard border-color="warning">
|
||||||
|
<CCardHeader>Card outline warning</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
<CCol sm="6" md="4">
|
||||||
|
<CCard border-color="danger">
|
||||||
|
<CCardHeader>Card outline danger</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
|
<CCard accent-color="primary">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card with primary accent</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
|
<CCard accent-color="secondary">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card with secondary accent</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="card-accent-success" header="Card with success accent" body-wrapper>
|
<CCard accent-color="success">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card with success accent</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="card-accent-info" header="Card with info accent" body-wrapper>
|
<CCard accent-color="info">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card with info accent</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
|
<CCard accent-color="info">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card with info accent</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
|
<CCard accent-color="danger">
|
||||||
{{loremIpsum}}
|
<CCardHeader>Card with danger accent</CCardHeader>
|
||||||
|
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="bg-primary text-center" body-wrapper>
|
<CCard color="primary" class="text-center" body-wrapper>
|
||||||
<blockquote class="card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
@@ -157,7 +164,7 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="bg-success text-center" body-wrapper>
|
<CCard color="success" class="text-center" body-wrapper>
|
||||||
<blockquote class="card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
@@ -167,7 +174,7 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="bg-info text-center" body-wrapper>
|
<CCard color="info" class="text-center" body-wrapper>
|
||||||
<blockquote class="card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
@@ -177,7 +184,7 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="bg-warning text-center" body-wrapper>
|
<CCard color="warning" class="text-center" body-wrapper>
|
||||||
<blockquote class="card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
@@ -187,7 +194,7 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="bg-danger text-center" body-wrapper>
|
<CCard color="danger" class="text-center" body-wrapper>
|
||||||
<blockquote class="card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
@@ -197,7 +204,7 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="bg-secondary text-center" body-wrapper>
|
<CCard color="secondary" class="text-center" body-wrapper>
|
||||||
<blockquote class="card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
@@ -209,33 +216,33 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="bg-primary" body-wrapper>
|
<CCard color="primary" body-wrapper>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="bg-success" body-wrapper>
|
<CCard color="success" body-wrapper>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="bg-info" body-wrapper>
|
<CCard color="info" body-wrapper>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="bg-warning" body-wrapper>
|
<CCard color="warning" body-wrapper>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="bg-danger" body-wrapper>
|
<CCard color="danger" body-wrapper>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
<CCard class="bg-secondary" v-if="show">
|
<CCard v-if="show" color="secondary">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with header actions
|
Card with header actions
|
||||||
<div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
</CButton>
|
</CButton>
|
||||||
<CCollapse :show="collapse" class="mt-2">
|
<CCollapse :show="collapse" class="mt-2">
|
||||||
<CCard body-wrapper>
|
<CCard body-wrapper>
|
||||||
<p class="card-text">Collapse contents Here</p>
|
<CCardText>Collapse contents Here</CCardText>
|
||||||
<CButton
|
<CButton
|
||||||
@click="innerCollapse = !innerCollapse"
|
@click="innerCollapse = !innerCollapse"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|||||||
@@ -188,20 +188,26 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCardGroup deck>
|
<CCardGroup deck>
|
||||||
<CCard headerHtml="<b>Card with list group</b>">
|
<CCard>
|
||||||
<CListGroup>
|
<CCardHeader>
|
||||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
<b>Card with list group</b>
|
||||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
</CCardHeader>
|
||||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
<CCardBody>
|
||||||
</CListGroup>
|
<CListGroup>
|
||||||
<p class="card-text mt-2">
|
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
</CListGroup>
|
||||||
ad sit ipsum anim Lorem.
|
<CCardText class="mt-2">
|
||||||
</p>
|
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||||
|
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||||
|
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||||
|
ad sit ipsum anim Lorem.
|
||||||
|
</CCardText>
|
||||||
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header="<b>Card with flush list group</b>">
|
<CCard>
|
||||||
|
<CCardHeader><b>Card with flush list group</b></CCardHeader>
|
||||||
<CListGroup flush>
|
<CListGroup flush>
|
||||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||||
|
|||||||
@@ -15,6 +15,7 @@
|
|||||||
:items-per-page="small ? 10 : 5"
|
:items-per-page="small ? 10 : 5"
|
||||||
:dark="dark"
|
:dark="dark"
|
||||||
pagination
|
pagination
|
||||||
|
items-per-page-select
|
||||||
>
|
>
|
||||||
<template #status="{item}">
|
<template #status="{item}">
|
||||||
<td>
|
<td>
|
||||||
|
|||||||
@@ -18,21 +18,21 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CTabs>
|
<CTabs>
|
||||||
<CTab title-html="Home" active>
|
<CTab title="Home" active>
|
||||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
officia deserunt mollit anim id est laborum.
|
officia deserunt mollit anim id est laborum.
|
||||||
</CTab>
|
</CTab>
|
||||||
<CTab title-html="Profile">
|
<CTab title="Profile">
|
||||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
officia deserunt mollit anim id est laborum.
|
officia deserunt mollit anim id est laborum.
|
||||||
</CTab>
|
</CTab>
|
||||||
<CTab title-html="Disabled" disabled>
|
<CTab title="Disabled" disabled>
|
||||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
@@ -50,21 +50,21 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CTabs variant="pills">
|
<CTabs variant="pills">
|
||||||
<CTab title-html="Home" active>
|
<CTab title="Home" active>
|
||||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
officia deserunt mollit anim id est laborum.
|
officia deserunt mollit anim id est laborum.
|
||||||
</CTab>
|
</CTab>
|
||||||
<CTab title-html="Profile">
|
<CTab title="Profile">
|
||||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
officia deserunt mollit anim id est laborum.
|
officia deserunt mollit anim id est laborum.
|
||||||
</CTab>
|
</CTab>
|
||||||
<CTab title-html="Disabled" disabled>
|
<CTab title="Disabled" disabled>
|
||||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
|||||||
+26
-16
@@ -19,29 +19,39 @@
|
|||||||
<CChartLineExample/>
|
<CChartLineExample/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Bar Chart" body-wrapper>
|
<CCard>
|
||||||
<CChartBarExample/>
|
<CCardHeader>Bar Chart</CCardHeader>
|
||||||
|
<CCardBody><CChartBarExample/></CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Doughnut Chart" body-wrapper>
|
<CCard>
|
||||||
<CChartDoughnutExample/>
|
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||||
|
<CCardBody><CChartDoughnutExample/></CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Radar Chart" body-wrapper>
|
<CCard>
|
||||||
<CChartRadarExample/>
|
<CCardHeader>Radar Chart</CCardHeader>
|
||||||
|
<CCardBody><CChartRadarExample/></CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Pie Chart" body-wrapper>
|
<CCard>
|
||||||
<CChartPieExample/>
|
<CCardHeader>Pie Chart</CCardHeader>
|
||||||
|
<CCardBody><CChartPieExample/></CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Polar Area Chart" body-wrapper>
|
<CCard>
|
||||||
<CChartPolarAreaExample/>
|
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||||
|
<CCardBody><CChartPolarAreaExample/></CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Simple line chart" body-wrapper>
|
<CCard>
|
||||||
<CChartLineSimple border-color="success" labels="months"/>
|
<CCardHeader>Simple line chart</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CChartLineSimple border-color="success" labels="months"/>
|
||||||
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Simple pointed chart" body-wrapper>
|
<CCard>
|
||||||
<CChartLineSimple pointed border-color="warning"/>
|
<CCardHeader>Simple pointed chart</CCardHeader>
|
||||||
|
<CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Simple bar chart" body-wrapper>
|
<CCard>
|
||||||
<CChartBarSimple background-color="danger"/>
|
<CCardHeader>Simple bar chart</CCardHeader>
|
||||||
|
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCardGroup>
|
</CCardGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -33,7 +33,9 @@
|
|||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard
|
<CCard
|
||||||
class="text-white text-center bg-primary py-5 d-md-down-none"
|
color="primary"
|
||||||
|
text-color="white"
|
||||||
|
class="text-center py-5 d-md-down-none"
|
||||||
style="width:44%"
|
style="width:44%"
|
||||||
body-wrapper
|
body-wrapper
|
||||||
>
|
>
|
||||||
|
|||||||
+30
-25
@@ -2,32 +2,37 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12" xl="8">
|
<CCol col="12" xl="8">
|
||||||
<transition name="slide">
|
<transition name="slide">
|
||||||
<CCard header-html="Users" body-wrapper>
|
<CCard>
|
||||||
<CDataTable
|
<CCardHeader>
|
||||||
hover
|
Users
|
||||||
striped
|
</CCardHeader>
|
||||||
:items="items"
|
<CCardBody>
|
||||||
:fields="fields"
|
<CDataTable
|
||||||
:items-per-page="perPage"
|
hover
|
||||||
@row-clicked="rowClicked"
|
striped
|
||||||
:pagination="$options.paginationProps"
|
:items="items"
|
||||||
index-column
|
:fields="fields"
|
||||||
clickable-rows
|
:items-per-page="perPage"
|
||||||
>
|
@row-clicked="rowClicked"
|
||||||
<template #username="data">
|
:pagination="$options.paginationProps"
|
||||||
<td>
|
index-column
|
||||||
<strong>{{data.item.username}}</strong>
|
clickable-rows
|
||||||
</td>
|
>
|
||||||
</template>
|
<template #username="data">
|
||||||
|
<td>
|
||||||
|
<strong>{{data.item.username}}</strong>
|
||||||
|
</td>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template #status="data">
|
<template #status="data">
|
||||||
<td>
|
<td>
|
||||||
<CBadge :color="getBadge(data.item.status)">
|
<CBadge :color="getBadge(data.item.status)">
|
||||||
{{data.item.status}}
|
{{data.item.status}}
|
||||||
</CBadge>
|
</CBadge>
|
||||||
</td>
|
</td>
|
||||||
</template>
|
</template>
|
||||||
</CDataTable>
|
</CDataTable>
|
||||||
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</transition>
|
</transition>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|||||||
@@ -453,56 +453,6 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<WidgetsDropdown/>
|
<WidgetsDropdown/>
|
||||||
<CRow>
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetHeaderDetails
|
|
||||||
color="primary"
|
|
||||||
right-header="SALE"
|
|
||||||
right-footer="Today 6:43 AM"
|
|
||||||
left-header="$1.890,65"
|
|
||||||
left-footer="+432,50 (15,78%)"
|
|
||||||
>
|
|
||||||
<CChartLineSimple style="height:40px"/>
|
|
||||||
<CChartBarSimple style="height:40px"/>
|
|
||||||
</CWidgetHeaderDetails>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetHeaderDetails
|
|
||||||
color="success"
|
|
||||||
right-header="SALE"
|
|
||||||
right-footer="Today 6:43 AM"
|
|
||||||
left-header="$1.890,65"
|
|
||||||
left-footer="+432,50 (15,78%)"
|
|
||||||
>
|
|
||||||
<CChartLineSimple style="height:40px"/>
|
|
||||||
<CChartBarSimple style="height:40px"/>
|
|
||||||
</CWidgetHeaderDetails>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetHeaderDetails
|
|
||||||
color="danger"
|
|
||||||
right-header="SALE"
|
|
||||||
right-footer="Today 6:43 AM"
|
|
||||||
left-header="$1.890,65"
|
|
||||||
left-footer="+432,50 (15,78%)"
|
|
||||||
>
|
|
||||||
<CChartLineSimple style="height:40px"/>
|
|
||||||
<CChartBarSimple style="height:40px"/>
|
|
||||||
</CWidgetHeaderDetails>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetHeaderDetails
|
|
||||||
color="warning"
|
|
||||||
right-header="SALE"
|
|
||||||
right-footer="Today 6:43 AM"
|
|
||||||
left-header="$1.890,65"
|
|
||||||
left-footer="+432,50 (15,78%)"
|
|
||||||
>
|
|
||||||
<CChartLineSimple style="height:40px"/>
|
|
||||||
<CChartBarSimple style="height:40px"/>
|
|
||||||
</CWidgetHeaderDetails>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="4" lg="2">
|
<CCol sm="4" lg="2">
|
||||||
<CWidgetSimple header="title" text="1,123">
|
<CWidgetSimple header="title" text="1,123">
|
||||||
|
|||||||
Reference in New Issue
Block a user