Widgets converted to components
This commit is contained in:
woothu
+66
-440
@@ -1,490 +1,116 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="6" lg="3">
|
<widget01 header="89.9%" variant="success"/>
|
||||||
<b-card>
|
<widget01 header="12.124" variant="info"/>
|
||||||
<div class="h4 m-0">89.9%</div>
|
<widget01 header="$98.111,00" variant="warning"/>
|
||||||
<div>Lorem ipsum...</div>
|
<widget01 header="2 TB" variant="danger"/>
|
||||||
<b-progress height={} class="progress-xs my-3" variant="success" :value="25"/>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col sm="6" lg="3">
|
|
||||||
<b-card>
|
|
||||||
<div class="h4 m-0">12.124</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<b-progress height={} class="progress-xs my-3" variant="info" :value="25"/>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col sm="6" lg="3">
|
|
||||||
<b-card>
|
|
||||||
<div class="h4 m-0">$98.111,00</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<b-progress height={} class="progress-xs my-3" variant="warning" :value="25"/>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col sm="6" lg="3">
|
|
||||||
<b-card>
|
|
||||||
<div class="h4 m-0">2 TB</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<b-progress height={} class="progress-xs my-3" variant="danger" :value="25"/>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row><!--/.row-->
|
</b-row><!--/.row-->
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="6" lg="3">
|
<widget01 header="89.9%" variant="background-success"/>
|
||||||
<b-card class="text-white bg-primary">
|
<widget01 header="12.124" variant="background-info"/>
|
||||||
<div class="h4 m-0">89.9%</div>
|
<widget01 header="$98.111,00" variant="background-warning"/>
|
||||||
<div>Lorem ipsum...</div>
|
<widget01 header="2 TB" variant="background-danger"/>
|
||||||
<b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col sm="6" lg="3">
|
|
||||||
<b-card class="text-white bg-warning">
|
|
||||||
<div class="h4 m-0">12.124</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col sm="6" lg="3">
|
|
||||||
<b-card class="text-white bg-danger">
|
|
||||||
<div class="h4 m-0">$98.111,00</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col sm="6" lg="3">
|
|
||||||
<b-card class="text-white bg-info">
|
|
||||||
<div class="h4 m-0">2 TB</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row><!--/.row-->
|
</b-row><!--/.row-->
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col cols="12" sm="6" lg="3">
|
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
|
||||||
<b-card :no-body="true">
|
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
|
||||||
<b-card-body class="p-3 clearfix">
|
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
|
||||||
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
|
||||||
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-3 clearfix">
|
|
||||||
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-3 clearfix">
|
|
||||||
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-3 clearfix">
|
|
||||||
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
|
||||||
<b-card-body class="p-3 clearfix">
|
|
||||||
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
<div slot="footer">
|
|
||||||
<b-link class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
|
|
||||||
</div>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
|
||||||
<b-card-body class="p-3 clearfix">
|
|
||||||
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
<div slot="footer">
|
|
||||||
<b-link class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
|
|
||||||
</div>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
|
||||||
<b-card-body class="p-3 clearfix">
|
|
||||||
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
<div slot="footer">
|
|
||||||
<b-link class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
|
|
||||||
</div>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
|
||||||
<b-card-body class="p-3 clearfix">
|
|
||||||
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
<div slot="footer">
|
|
||||||
<b-link class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
|
|
||||||
</div>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row><!--/.row-->
|
</b-row><!--/.row-->
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col cols="12" sm="6" lg="3">
|
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
|
||||||
<b-card :no-body="true">
|
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
|
||||||
<b-card-body class="p-0 clearfix">
|
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
|
||||||
<i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i>
|
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
|
||||||
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-0 clearfix">
|
|
||||||
<i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-0 clearfix">
|
|
||||||
<i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-0 clearfix">
|
|
||||||
<i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-0 clearfix">
|
|
||||||
<i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-0 clearfix">
|
|
||||||
<i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-0 clearfix">
|
|
||||||
<i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" sm="6" lg="3">
|
|
||||||
<b-card :no-body="true">
|
|
||||||
<b-card-body class="p-0 clearfix">
|
|
||||||
<i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row><!--/.row-->
|
</b-row><!--/.row-->
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col md="3" sm="6">
|
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
|
||||||
<div class="brand-card">
|
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
|
||||||
<div class="brand-card-header bg-facebook">
|
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
|
||||||
<i class="fa fa-facebook"></i>
|
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
|
||||||
<div class="chart-wrapper">
|
</b-row><!--/.row-->
|
||||||
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" />
|
<b-row>
|
||||||
</div>
|
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
|
||||||
</div>
|
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
|
||||||
<div class="brand-card-body">
|
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
|
||||||
<div>
|
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
|
||||||
<div class="text-value">89k</div>
|
</b-row><!--/.row-->
|
||||||
<div class="text-uppercase text-muted small">friends</div>
|
<b-row>
|
||||||
</div>
|
<social-media-widget type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
|
||||||
<div>
|
rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
|
||||||
<div class="text-value">459</div>
|
<social-media-widget type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
|
||||||
<div class="text-uppercase text-muted small">feeds</div>
|
rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
|
||||||
</div>
|
<social-media-widget type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
|
||||||
</div>
|
rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
|
||||||
</div>
|
<social-media-widget type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
|
||||||
</b-col>
|
rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
|
||||||
<b-col md="3" sm="6">
|
|
||||||
<div class="brand-card">
|
|
||||||
<div class="brand-card-header bg-twitter">
|
|
||||||
<i class="fa fa-twitter"></i>
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="brand-card-body">
|
|
||||||
<div>
|
|
||||||
<div class="text-value">973k</div>
|
|
||||||
<div class="text-uppercase text-muted small">followers</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="text-value">1.792</div>
|
|
||||||
<div class="text-uppercase text-muted small">tweets</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
<b-col md="3" sm="6">
|
|
||||||
<div class="brand-card">
|
|
||||||
<div class="brand-card-header bg-linkedin">
|
|
||||||
<i class="fa fa-linkedin"></i>
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="brand-card-body">
|
|
||||||
<div>
|
|
||||||
<div class="text-value">500+</div>
|
|
||||||
<div class="text-uppercase text-muted small">contacts</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="text-value">292</div>
|
|
||||||
<div class="text-uppercase text-muted small">feeds</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
<b-col md="3" sm="6">
|
|
||||||
<div class="brand-card">
|
|
||||||
<div class="brand-card-header bg-google-plus">
|
|
||||||
<i class="fa fa-google-plus"></i>
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="brand-card-body">
|
|
||||||
<div>
|
|
||||||
<div class="text-value">894</div>
|
|
||||||
<div class="text-uppercase text-muted small">followers</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="text-value">92</div>
|
|
||||||
<div class="text-uppercase text-muted small">circles</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row><!--/.row-->
|
</b-row><!--/.row-->
|
||||||
<b-card-group class="mb-4">
|
<b-card-group class="mb-4">
|
||||||
<b-card>
|
<widget04 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||||
<i class="icon-people"></i>
|
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||||
</div>
|
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||||
<div class="h4 mb-0">87.500</div>
|
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
<b-card>
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-user-follow"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">385</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
<b-card>
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-basket-loaded"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">1238</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
<b-card>
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-pie-chart"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">28%</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
<b-card>
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speedometer"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">5:34:11</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-card-group>
|
</b-card-group>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card>
|
<widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-people"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">87.500</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card>
|
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-user-follow"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">385</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card>
|
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-basket-loaded"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">1238</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card>
|
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-pie-chart"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">28%</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card>
|
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speedometer"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">5:34:11</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card>
|
<widget04 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speech"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">972</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
|
|
||||||
<b-progress height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row><!--/.row-->
|
</b-row>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card class="text-white bg-info">
|
<widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-people"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">87.500</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
|
||||||
<b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card class="text-white bg-success">
|
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-user-follow"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">385</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
|
||||||
<b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card class="text-white bg-warning">
|
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-basket-loaded"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">1238</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
|
||||||
<b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card class="text-white bg-primary">
|
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-pie-chart"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">28%</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
|
||||||
<b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card class="text-white bg-danger">
|
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speedometer"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">5:34:11</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
|
||||||
<b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="2">
|
<b-col sm="6" md="2">
|
||||||
<b-card class="text-white bg-info">
|
<widget04 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speech"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">972</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
|
|
||||||
<b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row><!--/.row-->
|
</b-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
|
import Widget01 from './widgets/Widget01'
|
||||||
|
import Widget02 from './widgets/Widget02'
|
||||||
|
import Widget03 from './widgets/Widget03'
|
||||||
|
import SocialMediaWidget from './widgets/SocialMediaWidget'
|
||||||
|
import Widget04 from './widgets/Widget04'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'widgets',
|
name: 'widgets',
|
||||||
components: {
|
components: {
|
||||||
SocialBoxChartExample
|
Widget01,
|
||||||
|
Widget02,
|
||||||
|
Widget03,
|
||||||
|
SocialMediaWidget,
|
||||||
|
Widget04
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<b-col md="3" sm="6">
|
||||||
|
<div class="brand-card">
|
||||||
|
<div :class="'bg-' + type" class="brand-card-header bg-facebook">
|
||||||
|
<i class="fa" :class="'fa-'+ type"></i>
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<social-box-chart-example :data="dataPoints" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-card-body">
|
||||||
|
<div>
|
||||||
|
<div class="text-value">{{rightHeader}}</div>
|
||||||
|
<div class="text-uppercase text-muted small">{{rightFooter}}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-value">{{leftHeader}}</div>
|
||||||
|
<div class="text-uppercase text-muted small">{{leftFooter}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SocialMediaWidget',
|
||||||
|
components: {
|
||||||
|
SocialBoxChartExample
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'facebook'
|
||||||
|
},
|
||||||
|
dataPoints: {
|
||||||
|
type: Array,
|
||||||
|
default: [65, 59, 84, 84, 51, 55, 40]
|
||||||
|
},
|
||||||
|
rightHeader: {
|
||||||
|
type: String,
|
||||||
|
default: '89k'
|
||||||
|
},
|
||||||
|
rightFooter: {
|
||||||
|
type: String,
|
||||||
|
default: 'friends'
|
||||||
|
},
|
||||||
|
leftHeader: {
|
||||||
|
type: String,
|
||||||
|
default: '459'
|
||||||
|
},
|
||||||
|
leftFooter: {
|
||||||
|
type: String,
|
||||||
|
default: 'feeds'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<b-col sm="6" lg="3">
|
||||||
|
<b-card :class="styleClasses">
|
||||||
|
<div class="h4 m-0">{{header}}</div>
|
||||||
|
<div>{{text}}</div>
|
||||||
|
<b-progress height={} :variant="variant" :value="value"
|
||||||
|
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||||
|
<small class="text-muted">{{footer}}</small>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Widget01',
|
||||||
|
data () {
|
||||||
|
return{
|
||||||
|
backgroundColor: '',
|
||||||
|
styleClasses: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
if(this.variant.includes('background')){
|
||||||
|
this.backgroundColor = this.variant.replace('background-','');
|
||||||
|
this.styleClasses = 'text-white bg-' + this.backgroundColor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
header: {
|
||||||
|
type: String,
|
||||||
|
default: 'Lorem ipsum...'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: 'Lorem ipsum...'
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
type: String,
|
||||||
|
default: 'Lorem ipsum dolor sit amet enim.'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: 25
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<b-col cols="12" sm="6" lg="3">
|
||||||
|
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||||
|
<b-card-body class="p-3 clearfix">
|
||||||
|
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||||
|
<div class="h5 text-primary mb-0 mt-2">{{header}}</div>
|
||||||
|
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||||
|
</b-card-body>
|
||||||
|
<div slot="footer" v-if="showLink">
|
||||||
|
<b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
|
||||||
|
</div>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Widget02',
|
||||||
|
props: {
|
||||||
|
iconClasses: {
|
||||||
|
type: String,
|
||||||
|
default: 'fa fa-cogs bg-primary'
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
type: String,
|
||||||
|
default: 'Lorem ipsum...'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: 'Income'
|
||||||
|
},
|
||||||
|
showLink: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
type: String,
|
||||||
|
default: '#'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,31 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class={classes}>
|
<b-col cols="12" sm="6" lg="3">
|
||||||
<div class={classCardHeader}>
|
<b-card :no-body="true">
|
||||||
<i class={icon}></i>
|
<b-card-body class="p-0 clearfix">
|
||||||
{children}
|
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
|
||||||
</div>
|
<div class="h5 text-primary mb-0 pt-3">{{header}}</div>
|
||||||
<div class={classCardBody}>
|
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||||
<div>
|
</b-card-body>
|
||||||
<div class="text-value">{vals[1]}</div>
|
</b-card>
|
||||||
<div class="text-uppercase text-muted small">{keys[1]}</div>
|
</b-col>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="text-value">{vals[2]}</div>
|
|
||||||
<div class="text-uppercase text-muted small">{keys[2]}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Widget03',
|
name: 'Widget03',
|
||||||
props: {
|
props: {
|
||||||
value: {
|
iconClasses: {
|
||||||
type: Boolean,
|
type: String,
|
||||||
default: true
|
default: 'fa fa-cogs bg-primary'
|
||||||
}
|
},
|
||||||
|
header: {
|
||||||
|
type: String,
|
||||||
|
default: 'Lorem ipsum...'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: 'Income'
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<b-card :class="styleClasses">
|
||||||
|
<div class="h1 text-muted text-right mb-4">
|
||||||
|
<i :class="iconClasses"></i>
|
||||||
|
</div>
|
||||||
|
<div class="h4 mb-0">{{header}}</div>
|
||||||
|
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
|
||||||
|
<b-progress height={} :variant="variant" :value="value"
|
||||||
|
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||||
|
</b-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Widget04',
|
||||||
|
data () {
|
||||||
|
return{
|
||||||
|
backgroundColor: '',
|
||||||
|
styleClasses: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
if(this.variant.includes('background')){
|
||||||
|
this.backgroundColor = this.variant.replace('background-','');
|
||||||
|
this.styleClasses = 'text-white bg-' + this.backgroundColor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
iconClasses: {
|
||||||
|
type: String,
|
||||||
|
default: 'icon-people'
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
type: String,
|
||||||
|
default: 'Lorem ipsum...'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: 'Lorem ipsum...'
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: 25
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user