feat: Bootstrap Vue components changed to Coreui-Vue components
This commit is contained in:
woothu
+253
-212
@@ -1,187 +1,210 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 header="9.823" text="Members online">
|
||||
<template slot="dropdown">
|
||||
<CDropdown class="float-right"
|
||||
variant="transparent p-0"
|
||||
right
|
||||
button-content="<i class='icon-settings'></i>"
|
||||
tag="div"
|
||||
>
|
||||
<!-- <template slot="button-content">
|
||||
|
||||
</template> -->
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' label='Members' pointHoverColor='primary'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="info" header="9.823" text="Members online">
|
||||
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
|
||||
<i slot="button-content"
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 variant="info" header="9.823" text="Members online">
|
||||
<CDropdown slot="dropdown"
|
||||
class="float-right"
|
||||
variant="transparent p-0"
|
||||
right
|
||||
no-caret
|
||||
button-content="<i class='icon-location-pin'></i>"
|
||||
tag="div"
|
||||
>
|
||||
<!-- <i slot="button-content"
|
||||
class="icon-location-pin"
|
||||
></i>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
></i> -->
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CSimplePointedChart class="px-3"
|
||||
:data="[1, 18, 9, 17, 34, 22, 11]"
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style="height:70px"
|
||||
label="Members"
|
||||
:options="{elements: {line: {tension: 0.00001}}}"
|
||||
:options="{ elements: { line: { tension: 0.00001 }}}"
|
||||
pointHoverColor="info"
|
||||
/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="warning" header="9.823" text="Members online">
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 variant="warning" header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<CDropdown class="float-right"
|
||||
variant="transparent p-0"
|
||||
right
|
||||
button-content="<i class='icon-settings'></i>"
|
||||
tag="div"
|
||||
>
|
||||
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
<CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
|
||||
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="danger" header="9.823" text="Members online">
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 variant="danger" header="9.823" text="Members online">
|
||||
<template slot="dropdown">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<CDropdown class="float-right"
|
||||
variant="transparent p-0"
|
||||
right
|
||||
button-content="<i class='icon-settings'></i>"
|
||||
>
|
||||
<!-- <template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template> -->
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
<CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Members' color='rgb(250, 152, 152)' style='height:70px' />
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<b-card>
|
||||
<b-row>
|
||||
<b-col sm="5">
|
||||
<CCard>
|
||||
<CRow>
|
||||
<CCol sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2017</div>
|
||||
</b-col>
|
||||
<b-col sm="7" class="d-none d-md-block">
|
||||
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
|
||||
<b-button-toolbar class="float-right" aria-label="Toolbar with buttons group">
|
||||
<b-form-radio-group class="mr-3" id="radiosBtn" buttons button-variant="outline-secondary" v-model="selected" name="radiosBtn">
|
||||
<b-form-radio class="mx-0" value="Day">Day</b-form-radio>
|
||||
<b-form-radio class="mx-0" value="Month">Month</b-form-radio>
|
||||
<b-form-radio class="mx-0" value="Year">Year</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
</b-button-toolbar>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<main-chart-example style="height:300px;margin-top:40px;" height="300"></main-chart-example>
|
||||
<div slot="footer">
|
||||
<b-row class="text-center">
|
||||
<b-col class="mb-sm-2 mb-0">
|
||||
</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"
|
||||
>
|
||||
{{value}}
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
|
||||
<CCardFooter slot="footer">
|
||||
<CRow class="text-center">
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
|
||||
</b-col>
|
||||
<b-col class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="success" :value="40"></CProgress>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress>
|
||||
</b-col>
|
||||
<b-col class="mb-sm-2 mb-0">
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="info" :value="20"></CProgress>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
|
||||
</b-col>
|
||||
<b-col class="mb-sm-2 mb-0">
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></CProgress>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
|
||||
</b-col>
|
||||
<b-col class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></CProgress>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-row>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<c-simple-line-chart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
<CProgress class="progress-xs mt-2" :precision="1" :value="40"></CProgress>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CRow>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<CSimpleLineChart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<c-simple-line-chart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<CSimpleLineChart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<CSimpleLineChart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
|
||||
<c-simple-line-chart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
|
||||
<CSimpleLineChart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col md="12">
|
||||
<b-card header="Traffic & Sales">
|
||||
<b-row>
|
||||
<b-col sm="12" lg="6">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCard header="Traffic & Sales">
|
||||
<CRow>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<Callout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
|
||||
<!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
|
||||
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<Callout variant="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
@@ -190,8 +213,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress class="progress-xs" variant="info" :value="34" height={} />
|
||||
<b-progress class="progress-xs" variant="danger" :value="78" height={} />
|
||||
<CProgress class="progress-xs" variant="info" :value="34" />
|
||||
<CProgress class="progress-xs" variant="danger" :value="78" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -201,8 +224,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="56" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="94" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="56" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="94" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -212,8 +235,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="12" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="67" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="12" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="67" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -223,8 +246,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="43" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="91" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="43" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="91" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -234,8 +257,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="22" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="73" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="22" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="73" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -245,8 +268,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="53" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="82" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="53" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="82" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -256,41 +279,41 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="9" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="69" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="9" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="69" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend text-center">
|
||||
<small>
|
||||
<sup><b-badge pill variant="info"> </b-badge></sup>
|
||||
<sup><CBadge pill variant="info"> </CBadge></sup>
|
||||
New clients
|
||||
|
||||
<sup><b-badge pill variant="danger"> </b-badge></sup>
|
||||
<sup><CBadge pill variant="danger"> </CBadge></sup>
|
||||
Recurring clients
|
||||
</small>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col sm="12" lg="6">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
</CCol>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<Callout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
||||
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<Callout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<div class="progress-group">
|
||||
@@ -300,7 +323,7 @@
|
||||
<span class="ml-auto font-weight-bold">43%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="43" variant="warning"></b-progress>
|
||||
<CProgress class="progress-xs" :value="43" variant="warning"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-5">
|
||||
@@ -310,7 +333,7 @@
|
||||
<span class="ml-auto font-weight-bold">37%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="37" variant="warning"></b-progress>
|
||||
<CProgress class="progress-xs" :value="37" variant="warning"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
@@ -320,7 +343,7 @@
|
||||
<span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="56" variant="success"></b-progress>
|
||||
<CProgress class="progress-xs" :value="56" variant="success"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
@@ -330,7 +353,7 @@
|
||||
<span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="15" variant="success"></b-progress>
|
||||
<CProgress class="progress-xs" :value="15" variant="success"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
@@ -340,7 +363,7 @@
|
||||
<span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="11" variant="success"></b-progress>
|
||||
<CProgress class="progress-xs" :value="11" variant="success"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
@@ -350,52 +373,85 @@
|
||||
<span class="ml-auto font-weight-bold">27,319 <span class="text-muted small"> (8%)</span></span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="8" variant="success"></b-progress>
|
||||
<CProgress class="progress-xs" :value="8" variant="success"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider text-center">
|
||||
<b-button variant="link" size="sm" class="text-muted"><i class="icon-options"></i></b-button>
|
||||
<CButton variant="link" size="sm" class="text-muted"><i class="icon-options"></i></CButton>
|
||||
</div>
|
||||
</ul>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<br/>
|
||||
<b-table class="mb-0 table-outline" responsive="sm" hover :items="tableItems" :fields="tableFields" head-variant="light">
|
||||
<div slot="avatar" class="avatar" slot-scope="item">
|
||||
<img :src="item.value.url" class="img-avatar" alt="">
|
||||
<span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success', 'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
|
||||
</div>
|
||||
<div slot="user" slot-scope="item">
|
||||
<div>{{item.value.name}}</div>
|
||||
<CTable class="mb-0 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'"
|
||||
></span>
|
||||
</div>
|
||||
</td>
|
||||
<td slot="user" slot-scope="{item}">
|
||||
<div>{{item.user.name}}</div>
|
||||
<div class="small text-muted">
|
||||
<span>
|
||||
<template v-if="item.value.new">New</template>
|
||||
<template v-if="item.user.new">New</template>
|
||||
<template v-else>Recurring</template>
|
||||
</span> | Registered: {{item.value.registered}}
|
||||
</span> | Registered: {{item.user.registered}}
|
||||
</div>
|
||||
</div>
|
||||
<i slot="country" class="h4 mb-0" :class="flag(item.value.flag)" slot-scope="item" :title="item.value.flag" :id="item.value.flag"></i>
|
||||
<i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i>
|
||||
<div slot="usage" slot-scope="item">
|
||||
</td>
|
||||
<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>
|
||||
</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">
|
||||
<strong>{{item.value.value}}%</strong>
|
||||
<strong>{{item.usage.value}}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">{{item.value.period}}</small>
|
||||
<small class="text-muted">{{item.usage.period}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<b-progress height={} class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
|
||||
</div>
|
||||
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
|
||||
<div slot="activity" slot-scope="item">
|
||||
<CProgress class="progress-xs" v-model="item.usage.value"
|
||||
|
||||
:variant="variant(item.usage.value)"></CProgress>
|
||||
</td>
|
||||
<td slot="payment"
|
||||
slot-scope="{item}"
|
||||
class="text-center"
|
||||
>
|
||||
<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>
|
||||
<strong>{{item.value}}</strong>
|
||||
</div>
|
||||
</b-table>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<strong>{{item.activity}}</strong>
|
||||
</td>
|
||||
</CTable>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -464,29 +520,14 @@ export default {
|
||||
activity: 'Last week'
|
||||
}
|
||||
],
|
||||
tableFields: {
|
||||
avatar: {
|
||||
label: '<i class="icon-people"></i>',
|
||||
class: 'text-center'
|
||||
},
|
||||
user: {
|
||||
label: 'User'
|
||||
},
|
||||
country: {
|
||||
label: 'Country',
|
||||
class: 'text-center'
|
||||
},
|
||||
usage: {
|
||||
label: 'Usage'
|
||||
},
|
||||
payment: {
|
||||
label: 'Payment method',
|
||||
class: 'text-center'
|
||||
},
|
||||
activity: {
|
||||
label: 'Activity'
|
||||
}
|
||||
}
|
||||
tableFields: [
|
||||
{ key: 'avatar', label: '<i class="icon-people"></i>',},
|
||||
{ key: 'user' },
|
||||
{ key: 'country' },
|
||||
{ key: 'usage' },
|
||||
{ key: 'payment', label: 'Payment method' },
|
||||
{ key: 'activity' },
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
Reference in New Issue
Block a user