feat: change styles of dashboard, widgets and charts to version 3
This commit is contained in:
woothu
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="animated fadeIn">
|
<div class="c-animated c-fadeIn">
|
||||||
<CCardGroup columns class="card-columns cols-2">
|
<CCardGroup columns class="c-card-columns c-cols-2">
|
||||||
<CCard headerHtml="Line Chart" bodyWrapper>
|
<CCard headerHtml="Line Chart" bodyWrapper>
|
||||||
<CChartLineExample/>
|
<CChartLineExample/>
|
||||||
</CCard>
|
</CCard>
|
||||||
|
|||||||
+279
-183
@@ -5,18 +5,21 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="5">
|
<CCol sm="5">
|
||||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
<h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
|
||||||
<div class="small text-muted">November 2017</div>
|
<div class="c-small c-text-muted">November 2017</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="7" class="d-none d-md-block">
|
<CCol sm="7" class="c-d-none c-d-md-block">
|
||||||
<CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
|
<CButton variant="primary" class="c-float-right">
|
||||||
<CButtonGroup class="float-right mr-3">
|
<i class="icon-cloud-download"></i>
|
||||||
<CButton variant="outline-secondary"
|
</CButton>
|
||||||
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
<CButtonGroup class="c-float-right c-mr-3">
|
||||||
:key="key"
|
<CButton
|
||||||
class="mx-0"
|
variant="outline-secondary"
|
||||||
:pressed="value === selected ? true : false"
|
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
||||||
@click="selected = value"
|
:key="key"
|
||||||
|
class="c-mx-0"
|
||||||
|
:pressed="value === selected ? true : false"
|
||||||
|
@click="selected = value"
|
||||||
>
|
>
|
||||||
{{value}}
|
{{value}}
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -26,31 +29,55 @@
|
|||||||
<MainChartExample style="height:300px;margin-top:40px;"/>
|
<MainChartExample style="height:300px;margin-top:40px;"/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CRow class="text-center">
|
<CRow class="c-text-center">
|
||||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
||||||
<div class="text-muted">Visits</div>
|
<div class="c-text-muted">Visits</div>
|
||||||
<strong>29.703 Users (40%)</strong>
|
<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>
|
||||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
|
||||||
<div class="text-muted">Unique</div>
|
<div class="c-text-muted">Unique</div>
|
||||||
<strong>24.093 Users (20%)</strong>
|
<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>
|
||||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
||||||
<div class="text-muted">Pageviews</div>
|
<div class="c-text-muted">Pageviews</div>
|
||||||
<strong>78.706 Views (60%)</strong>
|
<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>
|
||||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
||||||
<div class="text-muted">New Users</div>
|
<div class="c-text-muted">New Users</div>
|
||||||
<strong>22.123 Users (80%)</strong>
|
<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>
|
||||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
|
||||||
<div class="text-muted">Bounce Rate</div>
|
<div class="c-text-muted">Bounce Rate</div>
|
||||||
<strong>Average Rate (40.15%)</strong>
|
<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>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
@@ -64,113 +91,152 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="info">
|
<CCallout variant="info">
|
||||||
<small class="text-muted">New Clients</small><br>
|
<small class="c-text-muted">New Clients</small><br>
|
||||||
<strong class="h4">9,123</strong>
|
<strong class="c-h4">9,123</strong>
|
||||||
</CCallout>
|
</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>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="danger">
|
<CCallout variant="danger">
|
||||||
<small class="text-muted">Recurring Clients</small><br>
|
<small class="c-text-muted">Recurring Clients</small><br>
|
||||||
<strong class="h4">22,643</strong>
|
<strong class="c-h4">22,643</strong>
|
||||||
<!-- <div :style="{ top: '-10px'}">
|
|
||||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
|
||||||
</div> -->
|
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<hr class="mt-0">
|
<hr class="c-mt-0">
|
||||||
<div class="progress-group mb-4">
|
<div class="c-progress-group c-mb-4">
|
||||||
<div class="progress-group-prepend">
|
<div class="c-progress-group-prepend">
|
||||||
<span class="progress-group-text">
|
<span class="c-progress-group-text">
|
||||||
Monday
|
Monday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" variant="info" :value="34" />
|
<CProgress
|
||||||
<CProgress class="progress-xs" variant="danger" :value="78" />
|
class="c-progress-xs"
|
||||||
|
variant="info"
|
||||||
|
:value="34"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
variant="danger"
|
||||||
|
:value="78"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group mb-4">
|
<div class="c-progress-group c-mb-4">
|
||||||
<div class="progress-group-prepend">
|
<div class="c-progress-group-prepend">
|
||||||
<span class="progress-group-text">
|
<span class="c-progress-group-text">
|
||||||
Tuesday
|
Tuesday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="56" variant="info"></CProgress>
|
<CProgress
|
||||||
<CProgress class="progress-xs" :value="94" variant="danger"></CProgress>
|
class="c-progress-xs"
|
||||||
|
:value="56"
|
||||||
|
variant="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="94"
|
||||||
|
variant="danger"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group mb-4">
|
<div class="c-progress-group c-mb-4">
|
||||||
<div class="progress-group-prepend">
|
<div class="c-progress-group-prepend">
|
||||||
<span class="progress-group-text">
|
<span class="c-progress-group-text">
|
||||||
Wednesday
|
Wednesday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="12" variant="info"></CProgress>
|
<CProgress
|
||||||
<CProgress class="progress-xs" :value="67" variant="danger"></CProgress>
|
class="c-progress-xs"
|
||||||
|
:value="12"
|
||||||
|
variant="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="67"
|
||||||
|
variant="danger"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group mb-4">
|
<div class="c-progress-group c-mb-4">
|
||||||
<div class="progress-group-prepend">
|
<div class="c-progress-group-prepend">
|
||||||
<span class="progress-group-text">
|
<span class="c-progress-group-text">
|
||||||
Thursday
|
Thursday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="43" variant="info"></CProgress>
|
<CProgress
|
||||||
<CProgress class="progress-xs" :value="91" variant="danger"></CProgress>
|
class="c-progress-xs"
|
||||||
|
:value="43"
|
||||||
|
variant="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="91"
|
||||||
|
variant="danger"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group mb-4">
|
<div class="c-progress-group mb-4">
|
||||||
<div class="progress-group-prepend">
|
<div class="c-progress-group-prepend">
|
||||||
<span class="progress-group-text">
|
<span class="c-progress-group-text">
|
||||||
Friday
|
Friday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="22" variant="info"></CProgress>
|
<CProgress
|
||||||
<CProgress class="progress-xs" :value="73" variant="danger"></CProgress>
|
class="c-progress-xs"
|
||||||
|
:value="22"
|
||||||
|
variant="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="73"
|
||||||
|
variant="danger"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group mb-4">
|
<div class="c-progress-group c-mb-4">
|
||||||
<div class="progress-group-prepend">
|
<div class="c-progress-group-prepend">
|
||||||
<span class="progress-group-text">
|
<span class="c-progress-group-text">
|
||||||
Saturday
|
Saturday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="53" variant="info"></CProgress>
|
<CProgress
|
||||||
<CProgress class="progress-xs" :value="82" variant="danger"></CProgress>
|
class="c-progress-xs"
|
||||||
|
:value="53"
|
||||||
|
variant="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="82"
|
||||||
|
variant="danger"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group mb-4">
|
<div class="c-progress-group c-mb-4">
|
||||||
<div class="progress-group-prepend">
|
<div class="c-progress-group-prepend">
|
||||||
<span class="progress-group-text">
|
<span class="c-progress-group-text">
|
||||||
Sunday
|
Sunday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="9" variant="info"></CProgress>
|
<CProgress
|
||||||
<CProgress class="progress-xs" :value="69" variant="danger"></CProgress>
|
class="c-progress-xs"
|
||||||
|
:value="9"
|
||||||
|
variant="info"
|
||||||
|
/>
|
||||||
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="69"
|
||||||
|
variant="danger"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="legend text-center">
|
<div class="c-legend c-text-center">
|
||||||
<small>
|
<small>
|
||||||
<sup><CBadge pill variant="info"> </CBadge></sup>
|
<sup><CBadge pill variant="info"> </CBadge></sup>
|
||||||
New clients
|
New clients
|
||||||
@@ -184,155 +250,185 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="warning">
|
<CCallout variant="warning">
|
||||||
<small class="text-muted">Pageviews</small><br>
|
<small class="c-text-muted">Pageviews</small><br>
|
||||||
<strong class="h4">78,623</strong>
|
<strong class="c-h4">78,623</strong>
|
||||||
<!-- <div :style="{ top: '-10px'}">
|
|
||||||
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
|
||||||
</div> -->
|
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="success">
|
<CCallout variant="success">
|
||||||
<small class="text-muted">Organic</small><br>
|
<small class="c-text-muted">Organic</small><br>
|
||||||
<strong class="h4">49,123</strong>
|
<strong class="c-h4">49,123</strong>
|
||||||
<!-- <div :style="{ top: '-10px'}">
|
|
||||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
|
||||||
</div> -->
|
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<hr class="mt-0">
|
<hr class="c-mt-0">
|
||||||
<ul class="horizontal-bars type-2">
|
<ul class="c-horizontal-bars c-type-2">
|
||||||
<div class="progress-group">
|
<div class="c-progress-group">
|
||||||
<div class="progress-group-header">
|
<div class="c-progress-group-header">
|
||||||
<i class="icon-user progress-group-icon"></i>
|
<i class="icon-user c-progress-group-icon"></i>
|
||||||
<span class="title">Male</span>
|
<span class="c-title">Male</span>
|
||||||
<span class="ml-auto font-weight-bold">43%</span>
|
<span class="c-ml-auto c-font-weight-bold">43%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="43" variant="warning"></CProgress>
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="43"
|
||||||
|
variant="warning"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group mb-5">
|
<div class="c-progress-group c-mb-5">
|
||||||
<div class="progress-group-header">
|
<div class="c-progress-group-header">
|
||||||
<i class="icon-user-female progress-group-icon"></i>
|
<i class="icon-user-female c-progress-group-icon"></i>
|
||||||
<span class="title">Female</span>
|
<span class="c-title">Female</span>
|
||||||
<span class="ml-auto font-weight-bold">37%</span>
|
<span class="c-ml-auto c-font-weight-bold">37%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="37" variant="warning"></CProgress>
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="37"
|
||||||
|
variant="warning"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group">
|
<div class="c-progress-group">
|
||||||
<div class="progress-group-header">
|
<div class="c-progress-group-header">
|
||||||
<i class="icon-globe progress-group-icon"></i>
|
<i class="icon-globe c-progress-group-icon"></i>
|
||||||
<span class="title">Organic Search</span>
|
<span class="c-title">Organic Search</span>
|
||||||
<span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span>
|
<span class="c-ml-auto c-font-weight-bold">
|
||||||
|
191,235<span class="text-muted small">(56%)</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="56" variant="success"></CProgress>
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="56"
|
||||||
|
variant="success"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group">
|
<div class="c-progress-group">
|
||||||
<div class="progress-group-header">
|
<div class="c-progress-group-header">
|
||||||
<i class="icon-social-facebook progress-group-icon"></i>
|
<i class="icon-social-facebook c-progress-group-icon"></i>
|
||||||
<span class="title">Facebook</span>
|
<span class="c-title">Facebook</span>
|
||||||
<span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
|
<span class="c-ml-auto c-font-weight-bold">
|
||||||
|
51,223 <span class="c-text-muted small">(15%)</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="15" variant="success"></CProgress>
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="15"
|
||||||
|
variant="success"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group">
|
<div class="c-progress-group">
|
||||||
<div class="progress-group-header">
|
<div class="c-progress-group-header">
|
||||||
<i class="icon-social-twitter progress-group-icon"></i>
|
<i class="icon-social-twitter c-progress-group-icon"></i>
|
||||||
<span class="title">Twitter</span>
|
<span class="c-title">Twitter</span>
|
||||||
<span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
|
<span class="c-ml-auto c-font-weight-bold">
|
||||||
|
37,564 <span class="c-text-muted c-small">(11%)</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="11" variant="success"></CProgress>
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="11"
|
||||||
|
variant="success"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group">
|
<div class="c-progress-group">
|
||||||
<div class="progress-group-header">
|
<div class="c-progress-group-header">
|
||||||
<i class="icon-social-linkedin progress-group-icon"></i>
|
<i class="icon-social-linkedin c-progress-group-icon"></i>
|
||||||
<span class="title">LinkedIn</span>
|
<span class="c-title">LinkedIn</span>
|
||||||
<span class="ml-auto font-weight-bold">27,319 <span class="text-muted small"> (8%)</span></span>
|
<span class="c-ml-auto c-font-weight-bold">
|
||||||
|
27,319 <span class="c-text-muted small"> (8%)</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="c-progress-group-bars">
|
||||||
<CProgress class="progress-xs" :value="8" variant="success"></CProgress>
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
|
:value="8"
|
||||||
|
variant="success"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider text-center">
|
<div class="c-divider c-text-center">
|
||||||
<CButton variant="link" size="sm" class="text-muted"><i class="icon-options"></i></CButton>
|
<CButton variant="link" size="sm" class="c-text-muted">
|
||||||
|
<i class="icon-options"></i>
|
||||||
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<br/>
|
<br/>
|
||||||
<CTable class="mb-0 table-outline"
|
<CTable
|
||||||
hover
|
class="c-mb-0 c-table-outline"
|
||||||
:items="tableItems"
|
hover
|
||||||
:fields="tableFields"
|
:items="tableItems"
|
||||||
head-variant="light"
|
:fields="tableFields"
|
||||||
noSorting
|
head-variant="light"
|
||||||
|
noSorting
|
||||||
>
|
>
|
||||||
<!-- <div slot="activity-header">
|
<!-- <div slot="activity-header">
|
||||||
A tu nic
|
A tu nic
|
||||||
</div> -->
|
</div> -->
|
||||||
<td slot="avatar" class="text-center" slot-scope="{item}">
|
<td slot="avatar" class="c-text-center" slot-scope="{item}">
|
||||||
<div class="avatar">
|
<div class="c-avatar">
|
||||||
<img :src="item.avatar.url" class="img-avatar" alt="">
|
<img :src="item.avatar.url" class="c-img-avatar" alt="">
|
||||||
<span class="avatar-status"
|
<span
|
||||||
:class="item.avatar.status ?
|
class="c-avatar-status"
|
||||||
`bg-${item.avatar.status}` :
|
:class="`c-bg-${item.avatar.status || 'secondary'}`"
|
||||||
'bg-secondary'"
|
|
||||||
></span>
|
></span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td slot="user" slot-scope="{item}">
|
<td slot="user" slot-scope="{item}">
|
||||||
<div>{{item.user.name}}</div>
|
<div>{{item.user.name}}</div>
|
||||||
<div class="small text-muted">
|
<div class="c-small c-text-muted">
|
||||||
<span>
|
<span>
|
||||||
<template v-if="item.user.new">New</template>
|
<template v-if="item.user.new">New</template>
|
||||||
<template v-else>Recurring</template>
|
<template v-else>Recurring</template>
|
||||||
</span> | Registered: {{item.user.registered}}
|
</span> | Registered: {{item.user.registered}}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td slot="country"
|
<td
|
||||||
slot-scope="{item}"
|
slot="country"
|
||||||
class="text-center"
|
slot-scope="{item}"
|
||||||
|
class="text-center"
|
||||||
>
|
>
|
||||||
<i class="h4 mb-0"
|
<i
|
||||||
:class="flag(item.country.flag)"
|
class="c-h4 c-mb-0"
|
||||||
:title="item.country.flag"
|
:class="flag(item.country.flag)"
|
||||||
:id="item.country.flag"
|
:title="item.country.flag"
|
||||||
|
:id="item.country.flag"
|
||||||
></i>
|
></i>
|
||||||
</td>
|
</td>
|
||||||
<!-- <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i> -->
|
|
||||||
<td slot="usage" slot-scope="{item}">
|
<td slot="usage" slot-scope="{item}">
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<div class="float-left">
|
<div class="c-float-left">
|
||||||
<strong>{{item.usage.value}}%</strong>
|
<strong>{{item.usage.value}}%</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="float-right">
|
<div class="c-float-right">
|
||||||
<small class="text-muted">{{item.usage.period}}</small>
|
<small class="c-text-muted">{{item.usage.period}}</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CProgress class="progress-xs" v-model="item.usage.value"
|
<CProgress
|
||||||
|
class="c-progress-xs"
|
||||||
:variant="variant(item.usage.value)"></CProgress>
|
v-model="item.usage.value"
|
||||||
|
:variant="variant(item.usage.value)"
|
||||||
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td slot="payment"
|
<td
|
||||||
slot-scope="{item}"
|
slot="payment"
|
||||||
class="text-center"
|
slot-scope="{item}"
|
||||||
|
class="c-text-center"
|
||||||
>
|
>
|
||||||
<i :class="item.payment.icon"
|
<i :class="item.payment.icon" style="font-size:24px"></i>
|
||||||
style="font-size:24px"
|
|
||||||
></i>
|
|
||||||
</td>
|
</td>
|
||||||
<td slot="activity" slot-scope="{item}">
|
<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>
|
<strong>{{item.activity}}</strong>
|
||||||
</td>
|
</td>
|
||||||
</CTable>
|
</CTable>
|
||||||
|
|||||||
+243
-67
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="animated fadeIn">
|
<div class="c-animated c-fadeIn">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetProgress
|
<CWidgetProgress
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
variant="success"
|
variant="success"
|
||||||
:value="25"
|
:value="25"
|
||||||
class="progress-xs my-3 mb-0"
|
class="c-progress-xs c-my-3 c-mb-0"
|
||||||
/>
|
/>
|
||||||
</CWidgetProgress>
|
</CWidgetProgress>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -24,30 +24,63 @@
|
|||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
<CWidgetProgress
|
||||||
variant="warning" :value="25"/>
|
header="$98.111,00"
|
||||||
|
text="Lorem ipsum..."
|
||||||
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
|
variant="warning"
|
||||||
|
:value="25"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
<CWidgetProgress
|
||||||
variant="danger" :value="25"/>
|
header="2 TB"
|
||||||
|
text="Lorem ipsum..."
|
||||||
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
|
variant="danger"
|
||||||
|
:value="25"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetProgress header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
<CWidgetProgress
|
||||||
variant="success" inverse :value="25"/>
|
header="89.9%"
|
||||||
|
text="Lorem ipsum..."
|
||||||
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
|
variant="success"
|
||||||
|
inverse :value="25"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetProgress header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
<CWidgetProgress
|
||||||
variant="info" inverse :value="25"/>
|
header="12.124"
|
||||||
|
text="Lorem ipsum..."
|
||||||
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
|
variant="info"
|
||||||
|
inverse
|
||||||
|
:value="25"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
<CWidgetProgress
|
||||||
variant="warning" inverse :value="25"/>
|
header="$98.111,00"
|
||||||
|
text="Lorem ipsum..."
|
||||||
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
|
variant="warning"
|
||||||
|
inverse
|
||||||
|
:value="25"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
<CWidgetProgress
|
||||||
variant="danger" inverse :value="25"/>
|
header="2 TB"
|
||||||
|
text="Lorem ipsum..."
|
||||||
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
|
variant="danger"
|
||||||
|
inverse
|
||||||
|
:value="25"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
@@ -55,27 +88,27 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-cogs bg-primary"
|
addIconClasses="fa fa-cogs c-bg-primary"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="3">
|
<CCol col="12" sm="6" lg="3">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
addIconClasses="fa fa-laptop bg-info"
|
addIconClasses="fa fa-laptop c-bg-info"
|
||||||
text="Income"
|
text="Income"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="3">
|
<CCol col="12" sm="6" lg="3">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
addIconClasses="fa fa-moon-o bg-warning"
|
addIconClasses="fa fa-moon-o c-bg-warning"
|
||||||
text="Income"
|
text="Income"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="3">
|
<CCol col="12" sm="6" lg="3">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
addIconClasses="fa fa-bell bg-danger"
|
addIconClasses="fa fa-bell c-bg-danger"
|
||||||
text="Income"
|
text="Income"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -84,7 +117,7 @@
|
|||||||
<CCol col="12" sm="6" lg="3">
|
<CCol col="12" sm="6" lg="3">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
addIconClasses="fa fa-cogs bg-primary"
|
addIconClasses="fa fa-cogs c-bg-primary"
|
||||||
text="Income"
|
text="Income"
|
||||||
link="#"
|
link="#"
|
||||||
/>
|
/>
|
||||||
@@ -92,7 +125,7 @@
|
|||||||
<CCol col="12" sm="6" lg="3">
|
<CCol col="12" sm="6" lg="3">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
addIconClasses="fa fa-laptop bg-info"
|
addIconClasses="fa fa-laptop c-bg-info"
|
||||||
text="Income"
|
text="Income"
|
||||||
link="#"
|
link="#"
|
||||||
/>
|
/>
|
||||||
@@ -100,14 +133,14 @@
|
|||||||
<CCol col="12" sm="6" lg="3">
|
<CCol col="12" sm="6" lg="3">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
addIconClasses="fa fa-moon-o bg-warning bg-primary"
|
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
|
||||||
text="Income" link="#"
|
text="Income" link="#"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="3">
|
<CCol col="12" sm="6" lg="3">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
addIconClasses="fa fa-bell bg-danger"
|
addIconClasses="fa fa-bell c-bg-danger"
|
||||||
text="Income"
|
text="Income"
|
||||||
link="#"
|
link="#"
|
||||||
/>
|
/>
|
||||||
@@ -118,7 +151,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-cogs bg-primary"
|
addIconClasses="fa fa-cogs c-bg-primary"
|
||||||
noPadding
|
noPadding
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -126,7 +159,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-laptop bg-info"
|
addIconClasses="fa fa-laptop c-bg-info"
|
||||||
noPadding
|
noPadding
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -134,7 +167,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-moon-o bg-warning bg-primary"
|
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
|
||||||
noPadding
|
noPadding
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -142,7 +175,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-bell bg-danger"
|
addIconClasses="fa fa-bell c-bg-danger"
|
||||||
noPadding
|
noPadding
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -152,7 +185,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-cogs bg-primary px-5"
|
addIconClasses="fa fa-cogs c-bg-primary c-px-5"
|
||||||
noPadding
|
noPadding
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -160,7 +193,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-laptop bg-info px-5"
|
addIconClasses="fa fa-laptop c-bg-info c-px-5"
|
||||||
noPadding
|
noPadding
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -168,7 +201,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
|
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
|
||||||
noPadding
|
noPadding
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -178,7 +211,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-cogs bg-primary px-5"
|
addIconClasses="fa fa-cogs c-bg-primary c-px-5"
|
||||||
noPadding
|
noPadding
|
||||||
link="#"
|
link="#"
|
||||||
/>
|
/>
|
||||||
@@ -187,7 +220,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-laptop bg-info px-5"
|
addIconClasses="fa fa-laptop c-bg-info c-px-5"
|
||||||
noPadding
|
noPadding
|
||||||
link="#"
|
link="#"
|
||||||
/>
|
/>
|
||||||
@@ -196,7 +229,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
|
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
|
||||||
noPadding
|
noPadding
|
||||||
link="#"
|
link="#"
|
||||||
/>
|
/>
|
||||||
@@ -204,84 +237,227 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<WidgetsSocial noCharts/>
|
<WidgetsSocial noCharts/>
|
||||||
<WidgetsSocial/>
|
<WidgetsSocial/>
|
||||||
<CCardGroup class="mb-4">
|
<CCardGroup class="c-mb-4">
|
||||||
<CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
|
<CWidgetProgressIcon
|
||||||
<CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
iconClasses="icon-people"
|
||||||
<CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
header="87.500"
|
||||||
<CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
text="Visitors"
|
||||||
<CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
|
variant="info"
|
||||||
|
/>
|
||||||
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-user-follow"
|
||||||
|
header="385"
|
||||||
|
text="New Clients"
|
||||||
|
variant="success"
|
||||||
|
/>
|
||||||
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-basket-loaded"
|
||||||
|
header="1238"
|
||||||
|
text="Products sold"
|
||||||
|
variant="warning"
|
||||||
|
/>
|
||||||
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-pie-chart"
|
||||||
|
header="28%"
|
||||||
|
text="Returning Visitors"
|
||||||
|
/>
|
||||||
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-speedometer"
|
||||||
|
header="5:34:11"
|
||||||
|
text="Avg. Time"
|
||||||
|
variant="danger"
|
||||||
|
/>
|
||||||
</CCardGroup>
|
</CCardGroup>
|
||||||
<CCardGroup class="mb-4">
|
<CCardGroup class="c-mb-4">
|
||||||
<CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
|
<CWidgetProgressIcon
|
||||||
<CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
|
iconClasses="icon-people"
|
||||||
<CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
|
header="87.500"
|
||||||
<CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
|
text="Visitors"
|
||||||
<CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
|
variant="info"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-user-follow"
|
||||||
|
header="385"
|
||||||
|
text="New Clients"
|
||||||
|
variant="success"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-basket-loaded"
|
||||||
|
header="1238"
|
||||||
|
text="Products sold"
|
||||||
|
variant="warning"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-pie-chart"
|
||||||
|
header="28%"
|
||||||
|
variant="primary"
|
||||||
|
text="Returning Visitors"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-speedometer"
|
||||||
|
header="5:34:11"
|
||||||
|
text="Avg. Time"
|
||||||
|
variant="danger"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
</CCardGroup>
|
</CCardGroup>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-people"
|
||||||
|
header="87.500"
|
||||||
|
text="visitors"
|
||||||
|
variant="info"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-user-follow"
|
||||||
|
header="385"
|
||||||
|
text="New Clients"
|
||||||
|
variant="success"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-basket-loaded"
|
||||||
|
header="1238"
|
||||||
|
text="Products sold"
|
||||||
|
variant="warning"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-pie-chart"
|
||||||
|
header="28%"
|
||||||
|
text="Returning Visitors"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
|
<CWidgetProgressIcon
|
||||||
<CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
|
iconClasses="icon-speedometer"
|
||||||
|
header="5:34:11"
|
||||||
|
text="Avg. Time"
|
||||||
|
>
|
||||||
|
<CProgress
|
||||||
|
variant="danger"
|
||||||
|
:value="25"
|
||||||
|
class="c-progress-xs c-my-3 c-mb-0"
|
||||||
|
/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-speech"
|
||||||
|
header="972"
|
||||||
|
text="Comments"
|
||||||
|
variant="info"
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-people"
|
||||||
|
header="87.500"
|
||||||
|
text="visitors"
|
||||||
|
variant="info"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-user-follow"
|
||||||
|
header="385"
|
||||||
|
text="New Clients"
|
||||||
|
variant="success"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-basket-loaded"
|
||||||
|
header="1238" text="Products sold"
|
||||||
|
variant="warning"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-pie-chart"
|
||||||
|
header="28%"
|
||||||
|
text="Returning Visitors"
|
||||||
|
variant="primary"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-speedometer"
|
||||||
|
header="5:34:11" text="Avg. Time"
|
||||||
|
variant="danger"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="2">
|
<CCol sm="6" md="2">
|
||||||
<CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
|
<CWidgetProgressIcon
|
||||||
|
iconClasses="icon-speech"
|
||||||
|
header="972"
|
||||||
|
text="Comments"
|
||||||
|
variant="info"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<WidgetsDropdown/>
|
<WidgetsDropdown/>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetSmallText rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
<CWidgetSmallText
|
||||||
|
rightHeader="SALE"
|
||||||
|
rightFooter="Today 6:43 AM"
|
||||||
|
leftHeader="$1.890,65"
|
||||||
|
leftFooter="+432,50 (15,78%)"
|
||||||
|
>
|
||||||
<CChartLineSimple style="height:40px"/>
|
<CChartLineSimple style="height:40px"/>
|
||||||
<CChartBarSimple style="height:40px"/>
|
<CChartBarSimple style="height:40px"/>
|
||||||
</CWidgetSmallText>
|
</CWidgetSmallText>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetSmallText variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
<CWidgetSmallText
|
||||||
|
variant="success"
|
||||||
|
rightHeader="SALE"
|
||||||
|
rightFooter="Today 6:43 AM"
|
||||||
|
leftHeader="$1.890,65"
|
||||||
|
leftFooter="+432,50 (15,78%)"
|
||||||
|
>
|
||||||
<CChartLineSimple style="height:40px"/>
|
<CChartLineSimple style="height:40px"/>
|
||||||
<CChartBarSimple style="height:40px"/>
|
<CChartBarSimple style="height:40px"/>
|
||||||
</CWidgetSmallText>
|
</CWidgetSmallText>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetSmallText variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
<CWidgetSmallText
|
||||||
|
variant="danger"
|
||||||
|
rightHeader="SALE"
|
||||||
|
rightFooter="Today 6:43 AM"
|
||||||
|
leftHeader="$1.890,65"
|
||||||
|
leftFooter="+432,50 (15,78%)"
|
||||||
|
>
|
||||||
<CChartLineSimple style="height:40px"/>
|
<CChartLineSimple style="height:40px"/>
|
||||||
<CChartBarSimple style="height:40px"/>
|
<CChartBarSimple style="height:40px"/>
|
||||||
</CWidgetSmallText>
|
</CWidgetSmallText>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetSmallText variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
<CWidgetSmallText
|
||||||
|
variant="warning"
|
||||||
|
rightHeader="SALE"
|
||||||
|
rightFooter="Today 6:43 AM"
|
||||||
|
leftHeader="$1.890,65"
|
||||||
|
leftFooter="+432,50 (15,78%)"
|
||||||
|
>
|
||||||
<CChartLineSimple style="height:40px"/>
|
<CChartLineSimple style="height:40px"/>
|
||||||
<CChartBarSimple style="height:40px"/>
|
<CChartBarSimple style="height:40px"/>
|
||||||
</CWidgetSmallText>
|
</CWidgetSmallText>
|
||||||
@@ -289,32 +465,32 @@
|
|||||||
</CRow>
|
</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">
|
||||||
<CChartLineSimple style="height:40px" borderColor="danger"/>
|
<CChartLineSimple style="height:40px" borderColor="danger"/>
|
||||||
</CWidgetSimple>
|
</CWidgetSimple>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4" lg="2">
|
<CCol sm="4" lg="2">
|
||||||
<CWidgetSimple header='title' text='1,123'>
|
<CWidgetSimple header="title" text="1,123">
|
||||||
<CChartLineSimple style="height:40px" borderColor="primary"/>
|
<CChartLineSimple style="height:40px" borderColor="primary"/>
|
||||||
</CWidgetSimple>
|
</CWidgetSimple>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4" lg="2">
|
<CCol sm="4" lg="2">
|
||||||
<CWidgetSimple header='title' text='1,123'>
|
<CWidgetSimple header="title" text="1,123">
|
||||||
<CChartLineSimple style="height:40px" borderColor="success"/>
|
<CChartLineSimple style="height:40px" borderColor="success"/>
|
||||||
</CWidgetSimple>
|
</CWidgetSimple>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4" lg="2">
|
<CCol sm="4" lg="2">
|
||||||
<CWidgetSimple header='title' text='1,123'>
|
<CWidgetSimple header="title" text="1,123">
|
||||||
<CChartBarSimple style="height:40px" backgroundColor="danger"/>
|
<CChartBarSimple style="height:40px" backgroundColor="danger"/>
|
||||||
</CWidgetSimple>
|
</CWidgetSimple>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4" lg="2">
|
<CCol sm="4" lg="2">
|
||||||
<CWidgetSimple header='title' text='1,123'>
|
<CWidgetSimple header="title" text="1,123">
|
||||||
<CChartBarSimple style="height:40px" backgroundColor="primary"/>
|
<CChartBarSimple style="height:40px" backgroundColor="primary"/>
|
||||||
</CWidgetSimple>
|
</CWidgetSimple>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4" lg="2">
|
<CCol sm="4" lg="2">
|
||||||
<CWidgetSimple header='title' text='1,123'>
|
<CWidgetSimple header="title" text="1,123">
|
||||||
<CChartBarSimple style="height:40px" backgroundColor="success"/>
|
<CChartBarSimple style="height:40px" backgroundColor="success"/>
|
||||||
</CWidgetSimple>
|
</CWidgetSimple>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
<CWidgetDropdown header="9.823" text="Members online">
|
<CWidgetDropdown header="9.823" text="Members online">
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="float-right"
|
class="c-float-right"
|
||||||
variant="transparent p-0"
|
variant="transparent c-p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='icon-settings'></i>"
|
buttonHtml="<i class='icon-settings'></i>"
|
||||||
>
|
>
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
pointed
|
pointed
|
||||||
class="px-3"
|
class="c-px-3"
|
||||||
style="height:70px"
|
style="height:70px"
|
||||||
:dataPoints="[65, 59, 84, 84, 51, 55, 40]"
|
:dataPoints="[65, 59, 84, 84, 51, 55, 40]"
|
||||||
backgroundColor="primary"
|
backgroundColor="primary"
|
||||||
@@ -30,8 +30,8 @@
|
|||||||
<CWidgetDropdown variant="info" header="9.823" text="Members online">
|
<CWidgetDropdown variant="info" header="9.823" text="Members online">
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="float-right"
|
class="c-float-right"
|
||||||
variant="transparent p-0"
|
variant="transparent c-p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
noCaret
|
noCaret
|
||||||
buttonHtml="<i class='icon-location-pin'></i>"
|
buttonHtml="<i class='icon-location-pin'></i>"
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
pointed
|
pointed
|
||||||
class="px-3"
|
class="c-px-3"
|
||||||
style="height:70px"
|
style="height:70px"
|
||||||
:dataPoints="[1, 18, 9, 17, 34, 22, 11]"
|
:dataPoints="[1, 18, 9, 17, 34, 22, 11]"
|
||||||
backgroundColor="info"
|
backgroundColor="info"
|
||||||
@@ -63,8 +63,8 @@
|
|||||||
|
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="float-right"
|
class="c-float-right"
|
||||||
variant="transparent p-0"
|
variant="transparent c-p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='icon-settings'></i>"
|
buttonHtml="<i class='icon-settings'></i>"
|
||||||
>
|
>
|
||||||
@@ -94,8 +94,8 @@
|
|||||||
|
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="float-right"
|
class="c-float-right"
|
||||||
variant="transparent p-0"
|
variant="transparent c-p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='icon-settings'></i>"
|
buttonHtml="<i class='icon-settings'></i>"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user