feat: change styles of dashboard, widgets and charts to version 3
This commit is contained in:
woothu
+279
-183
@@ -5,18 +5,21 @@
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2017</div>
|
||||
<h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
|
||||
<div class="c-small c-text-muted">November 2017</div>
|
||||
</CCol>
|
||||
<CCol sm="7" class="d-none d-md-block">
|
||||
<CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
|
||||
<CButtonGroup class="float-right mr-3">
|
||||
<CButton variant="outline-secondary"
|
||||
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
||||
:key="key"
|
||||
class="mx-0"
|
||||
:pressed="value === selected ? true : false"
|
||||
@click="selected = value"
|
||||
<CCol sm="7" class="c-d-none c-d-md-block">
|
||||
<CButton variant="primary" class="c-float-right">
|
||||
<i class="icon-cloud-download"></i>
|
||||
</CButton>
|
||||
<CButtonGroup class="c-float-right c-mr-3">
|
||||
<CButton
|
||||
variant="outline-secondary"
|
||||
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
||||
:key="key"
|
||||
class="c-mx-0"
|
||||
:pressed="value === selected ? true : false"
|
||||
@click="selected = value"
|
||||
>
|
||||
{{value}}
|
||||
</CButton>
|
||||
@@ -26,31 +29,55 @@
|
||||
<MainChartExample style="height:300px;margin-top:40px;"/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CRow class="text-center">
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Visits</div>
|
||||
<CRow class="c-text-center">
|
||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
||||
<div class="c-text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="success" :value="40"></CProgress>
|
||||
<CProgress
|
||||
class="c-progress-xs c-mt-2"
|
||||
:precision="1"
|
||||
variant="success"
|
||||
:value="40"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Unique</div>
|
||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
|
||||
<div class="c-text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="info" :value="20"></CProgress>
|
||||
<CProgress
|
||||
class="c-progress-xs c-mt-2"
|
||||
:precision="1"
|
||||
variant="info"
|
||||
:value="20"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
||||
<div class="c-text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></CProgress>
|
||||
<CProgress
|
||||
class="c-progress-xs c-mt-2"
|
||||
:precision="1"
|
||||
variant="warning"
|
||||
:value="60"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">New Users</div>
|
||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
||||
<div class="c-text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></CProgress>
|
||||
<CProgress
|
||||
class="c-progress-xs c-mt-2"
|
||||
:precision="1"
|
||||
variant="danger"
|
||||
:value="80"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
|
||||
<div class="c-text-muted">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<CProgress class="progress-xs mt-2" :precision="1" :value="40"></CProgress>
|
||||
<CProgress
|
||||
class="c-progress-xs c-mt-2"
|
||||
:precision="1"
|
||||
:value="40"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
@@ -64,113 +91,152 @@
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCallout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<small class="c-text-muted">New Clients</small><br>
|
||||
<strong class="c-h4">9,123</strong>
|
||||
</CCallout>
|
||||
<!-- <CCallout variant="info" class="d-inline">
|
||||
<div class="d-inline">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
</div>
|
||||
<div class="d-inline">
|
||||
<CChartLineSimple
|
||||
:data="[35, 23, 56, 22, 97, 23, 64]"
|
||||
borderColor="info"
|
||||
style="width:80px !important"
|
||||
:options="{ maintainAspectRatio: true, aspectRatio: 3 }"
|
||||
/>
|
||||
</div>
|
||||
</CCallout> -->
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCallout variant="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<!-- <div :style="{ top: '-10px'}">
|
||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
||||
</div> -->
|
||||
<small class="c-text-muted">Recurring Clients</small><br>
|
||||
<strong class="c-h4">22,643</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
<hr class="c-mt-0">
|
||||
<div class="c-progress-group c-mb-4">
|
||||
<div class="c-progress-group-prepend">
|
||||
<span class="c-progress-group-text">
|
||||
Monday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" variant="info" :value="34" />
|
||||
<CProgress class="progress-xs" variant="danger" :value="78" />
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
variant="info"
|
||||
:value="34"
|
||||
/>
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
variant="danger"
|
||||
:value="78"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
<div class="c-progress-group c-mb-4">
|
||||
<div class="c-progress-group-prepend">
|
||||
<span class="c-progress-group-text">
|
||||
Tuesday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="56" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="94" variant="danger"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="56"
|
||||
variant="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="94"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
<div class="c-progress-group c-mb-4">
|
||||
<div class="c-progress-group-prepend">
|
||||
<span class="c-progress-group-text">
|
||||
Wednesday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="12" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="67" variant="danger"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="12"
|
||||
variant="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="67"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
<div class="c-progress-group c-mb-4">
|
||||
<div class="c-progress-group-prepend">
|
||||
<span class="c-progress-group-text">
|
||||
Thursday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="43" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="91" variant="danger"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="43"
|
||||
variant="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="91"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
<div class="c-progress-group mb-4">
|
||||
<div class="c-progress-group-prepend">
|
||||
<span class="c-progress-group-text">
|
||||
Friday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="22" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="73" variant="danger"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="22"
|
||||
variant="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="73"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
<div class="c-progress-group c-mb-4">
|
||||
<div class="c-progress-group-prepend">
|
||||
<span class="c-progress-group-text">
|
||||
Saturday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="53" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="82" variant="danger"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="53"
|
||||
variant="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="82"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
<div class="c-progress-group c-mb-4">
|
||||
<div class="c-progress-group-prepend">
|
||||
<span class="c-progress-group-text">
|
||||
Sunday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="9" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="69" variant="danger"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="9"
|
||||
variant="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="69"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend text-center">
|
||||
<div class="c-legend c-text-center">
|
||||
<small>
|
||||
<sup><CBadge pill variant="info"> </CBadge></sup>
|
||||
New clients
|
||||
@@ -184,155 +250,185 @@
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCallout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<!-- <div :style="{ top: '-10px'}">
|
||||
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
||||
</div> -->
|
||||
<small class="c-text-muted">Pageviews</small><br>
|
||||
<strong class="c-h4">78,623</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCallout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<!-- <div :style="{ top: '-10px'}">
|
||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
||||
</div> -->
|
||||
<small class="c-text-muted">Organic</small><br>
|
||||
<strong class="c-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">
|
||||
<i class="icon-user progress-group-icon"></i>
|
||||
<span class="title">Male</span>
|
||||
<span class="ml-auto font-weight-bold">43%</span>
|
||||
<hr class="c-mt-0">
|
||||
<ul class="c-horizontal-bars c-type-2">
|
||||
<div class="c-progress-group">
|
||||
<div class="c-progress-group-header">
|
||||
<i class="icon-user c-progress-group-icon"></i>
|
||||
<span class="c-title">Male</span>
|
||||
<span class="c-ml-auto c-font-weight-bold">43%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="43" variant="warning"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="43"
|
||||
variant="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-5">
|
||||
<div class="progress-group-header">
|
||||
<i class="icon-user-female progress-group-icon"></i>
|
||||
<span class="title">Female</span>
|
||||
<span class="ml-auto font-weight-bold">37%</span>
|
||||
<div class="c-progress-group c-mb-5">
|
||||
<div class="c-progress-group-header">
|
||||
<i class="icon-user-female c-progress-group-icon"></i>
|
||||
<span class="c-title">Female</span>
|
||||
<span class="c-ml-auto c-font-weight-bold">37%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="37" variant="warning"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="37"
|
||||
variant="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<i class="icon-globe progress-group-icon"></i>
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span>
|
||||
<div class="c-progress-group">
|
||||
<div class="c-progress-group-header">
|
||||
<i class="icon-globe c-progress-group-icon"></i>
|
||||
<span class="c-title">Organic Search</span>
|
||||
<span class="c-ml-auto c-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" variant="success"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="56"
|
||||
variant="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<i class="icon-social-facebook progress-group-icon"></i>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
|
||||
<div class="c-progress-group">
|
||||
<div class="c-progress-group-header">
|
||||
<i class="icon-social-facebook c-progress-group-icon"></i>
|
||||
<span class="c-title">Facebook</span>
|
||||
<span class="c-ml-auto c-font-weight-bold">
|
||||
51,223 <span class="c-text-muted small">(15%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="15" variant="success"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="15"
|
||||
variant="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<i class="icon-social-twitter progress-group-icon"></i>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
|
||||
<div class="c-progress-group">
|
||||
<div class="c-progress-group-header">
|
||||
<i class="icon-social-twitter c-progress-group-icon"></i>
|
||||
<span class="c-title">Twitter</span>
|
||||
<span class="c-ml-auto c-font-weight-bold">
|
||||
37,564 <span class="c-text-muted c-small">(11%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="11" variant="success"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="11"
|
||||
variant="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<i class="icon-social-linkedin progress-group-icon"></i>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="ml-auto font-weight-bold">27,319 <span class="text-muted small"> (8%)</span></span>
|
||||
<div class="c-progress-group">
|
||||
<div class="c-progress-group-header">
|
||||
<i class="icon-social-linkedin c-progress-group-icon"></i>
|
||||
<span class="c-title">LinkedIn</span>
|
||||
<span class="c-ml-auto c-font-weight-bold">
|
||||
27,319 <span class="c-text-muted small"> (8%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress class="progress-xs" :value="8" variant="success"></CProgress>
|
||||
<div class="c-progress-group-bars">
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
:value="8"
|
||||
variant="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider text-center">
|
||||
<CButton variant="link" size="sm" class="text-muted"><i class="icon-options"></i></CButton>
|
||||
<div class="c-divider c-text-center">
|
||||
<CButton variant="link" size="sm" class="c-text-muted">
|
||||
<i class="icon-options"></i>
|
||||
</CButton>
|
||||
</div>
|
||||
</ul>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<br/>
|
||||
<CTable class="mb-0 table-outline"
|
||||
hover
|
||||
:items="tableItems"
|
||||
:fields="tableFields"
|
||||
head-variant="light"
|
||||
noSorting
|
||||
<CTable
|
||||
class="c-mb-0 c-table-outline"
|
||||
hover
|
||||
:items="tableItems"
|
||||
:fields="tableFields"
|
||||
head-variant="light"
|
||||
noSorting
|
||||
>
|
||||
<!-- <div slot="activity-header">
|
||||
A tu nic
|
||||
</div> -->
|
||||
<td slot="avatar" class="text-center" slot-scope="{item}">
|
||||
<div class="avatar">
|
||||
<img :src="item.avatar.url" class="img-avatar" alt="">
|
||||
<span class="avatar-status"
|
||||
:class="item.avatar.status ?
|
||||
`bg-${item.avatar.status}` :
|
||||
'bg-secondary'"
|
||||
<td slot="avatar" class="c-text-center" slot-scope="{item}">
|
||||
<div class="c-avatar">
|
||||
<img :src="item.avatar.url" class="c-img-avatar" alt="">
|
||||
<span
|
||||
class="c-avatar-status"
|
||||
:class="`c-bg-${item.avatar.status || 'secondary'}`"
|
||||
></span>
|
||||
</div>
|
||||
</td>
|
||||
<td slot="user" slot-scope="{item}">
|
||||
<div>{{item.user.name}}</div>
|
||||
<div class="small text-muted">
|
||||
<div class="c-small c-text-muted">
|
||||
<span>
|
||||
<template v-if="item.user.new">New</template>
|
||||
<template v-else>Recurring</template>
|
||||
</span> | Registered: {{item.user.registered}}
|
||||
</div>
|
||||
</td>
|
||||
<td slot="country"
|
||||
slot-scope="{item}"
|
||||
class="text-center"
|
||||
<td
|
||||
slot="country"
|
||||
slot-scope="{item}"
|
||||
class="text-center"
|
||||
>
|
||||
<i class="h4 mb-0"
|
||||
:class="flag(item.country.flag)"
|
||||
:title="item.country.flag"
|
||||
:id="item.country.flag"
|
||||
<i
|
||||
class="c-h4 c-mb-0"
|
||||
:class="flag(item.country.flag)"
|
||||
:title="item.country.flag"
|
||||
:id="item.country.flag"
|
||||
></i>
|
||||
</td>
|
||||
<!-- <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i> -->
|
||||
<td slot="usage" slot-scope="{item}">
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<div class="c-float-left">
|
||||
<strong>{{item.usage.value}}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">{{item.usage.period}}</small>
|
||||
<div class="c-float-right">
|
||||
<small class="c-text-muted">{{item.usage.period}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress class="progress-xs" v-model="item.usage.value"
|
||||
|
||||
:variant="variant(item.usage.value)"></CProgress>
|
||||
<CProgress
|
||||
class="c-progress-xs"
|
||||
v-model="item.usage.value"
|
||||
:variant="variant(item.usage.value)"
|
||||
/>
|
||||
</td>
|
||||
<td slot="payment"
|
||||
slot-scope="{item}"
|
||||
class="text-center"
|
||||
<td
|
||||
slot="payment"
|
||||
slot-scope="{item}"
|
||||
class="c-text-center"
|
||||
>
|
||||
<i :class="item.payment.icon"
|
||||
style="font-size:24px"
|
||||
></i>
|
||||
<i :class="item.payment.icon" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td slot="activity" slot-scope="{item}">
|
||||
<div class="small text-muted">Last login</div>
|
||||
<div class="c-small c-text-muted">Last login</div>
|
||||
<strong>{{item.activity}}</strong>
|
||||
</td>
|
||||
</CTable>
|
||||
|
||||
Reference in New Issue
Block a user