@coreui/ajax
Version:
Open Source Bootstrap Admin Template
674 lines (630 loc) • 24.7 kB
HTML
<template>
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<require from="../dashboard/card-chart1"></require>
<card-chart1></card-chart1>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<require from="../dashboard/card-chart2"></require>
<card-chart2></card-chart2>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-warning">
<require from="../dashboard/card-chart3"></require>
<card-chart3></card-chart3>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-danger">
<require from="../dashboard/card-chart4"></require>
<card-chart4></card-chart4>
</div>
</div>
<!--/col-->
</div>
<!--/row-->
<require from="./card-chart11"></require>
<div class="row">
<div class="col-sm-6 col-lg-3">
<card-chart11 color-class="card-header-primary"></card-chart11>
</div>
<div class="col-sm-6 col-lg-3">
<card-chart11 color-class="card-header-danger"></card-chart11>
</div>
<div class="col-sm-6 col-lg-3">
<card-chart11 color-class="card-header-success"></card-chart11>
</div>
<div class="col-sm-6 col-lg-3">
<card-chart11 color-class="card-header-warning"></card-chart11>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-block">
<div class="h4 m-0">89.9%</div>
<div class="pb-1">Lorem ipsum...</div>
<progress class="progress progress-xs progress-success" value="25" max="100">25%</progress>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-block">
<div class="h4 m-0">12.124</div>
<div class="pb-1">Lorem ipsum...</div>
<progress class="progress progress-xs progress-info" value="25" max="100">25%</progress>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-block">
<div class="h4 m-0">$98.111,00</div>
<div class="pb-1">Lorem ipsum...</div>
<progress class="progress progress-xs progress-warning" value="25" max="100">25%</progress>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-block">
<div class="h4 m-0">2 TB</div>
<div class="pb-1">Lorem ipsum...</div>
<progress class="progress progress-xs progress-danger" value="25" max="100">25%</progress>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div>
<!--/col-->
</div>
<!--/row-->
<div class="row">
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 m-0">89.9%</div>
<div class="pb-1">Lorem ipsum...</div>
<progress class="progress progress-xs progress-success" value="25" max="100">25%</progress>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-warning">
<div class="card-block">
<div class="h4 m-0">12.124</div>
<div class="pb-1">Lorem ipsum...</div>
<progress class="progress progress-xs progress-info" value="25" max="100">25%</progress>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-danger">
<div class="card-block">
<div class="h4 m-0">$98.111,00</div>
<div class="pb-1">Lorem ipsum...</div>
<progress class="progress progress-xs progress-warning" value="25" max="100">25%</progress>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-info">
<div class="card-block">
<div class="h4 m-0">2 TB</div>
<div class="pb-1">Lorem ipsum...</div>
<progress class="progress progress-xs progress-danger" value="25" max="100">25%</progress>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div>
<!--/col-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-2 col-sm-4">
<require from="./card-chart5"></require>
<card-chart5></card-chart5>
</div>
<!--/col-->
<div class="col-md-2 col-sm-4">
<require from="./card-chart6"></require>
<card-chart6></card-chart6>
</div>
<!--/col-->
<div class="col-md-2 col-sm-4">
<require from="./card-chart7"></require>
<card-chart7></card-chart7>
</div>
<!--/col-->
<div class="col-md-2 col-sm-4">
<require from="./card-chart8"></require>
<card-chart8></card-chart8>
</div>
<!--/col-->
<div class="col-md-2 col-sm-4">
<require from="./card-chart9"></require>
<card-chart9></card-chart9>
</div>
<!--/col-->
<div class="col-md-2 col-sm-4">
<require from="./card-chart10"></require>
<card-chart10></card-chart10>
</div>
<!--/col-->
</div>
<!--/row-->
<div class="row">
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-1 clearfix">
<i class="fa fa-cogs bg-primary p-1 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-primary mb-0 mt-h">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-1 clearfix">
<i class="fa fa-laptop bg-info p-1 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-info mb-0 mt-h">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-1 clearfix">
<i class="fa fa-moon-o bg-warning p-1 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-warning mb-0 mt-h">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-1 clearfix">
<i class="fa fa-bell bg-danger p-1 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-danger mb-0 mt-h">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-1 clearfix">
<i class="fa fa-cogs bg-primary p-1 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-primary mb-0 mt-h">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
<div class="card-footer px-1 py-h">
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i
class="fa fa-angle-right float-xs-right font-lg"></i></a>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-1 clearfix">
<i class="fa fa-laptop bg-info p-1 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-info mb-0 mt-h">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
<div class="card-footer px-1 py-h">
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i
class="fa fa-angle-right float-xs-right font-lg"></i></a>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-1 clearfix">
<i class="fa fa-moon-o bg-warning p-1 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-warning mb-0 mt-h">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
<div class="card-footer px-1 py-h">
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i
class="fa fa-angle-right float-xs-right font-lg"></i></a>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-1 clearfix">
<i class="fa fa-bell bg-danger p-1 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-danger mb-0 mt-h">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
<div class="card-footer px-1 py-h">
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i
class="fa fa-angle-right float-xs-right font-lg"></i></a>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<div class="row">
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-0 clearfix">
<i class="fa fa-cogs bg-primary p-2 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-primary mb-0 pt-1">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-0 clearfix">
<i class="fa fa-laptop bg-info p-2 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-info mb-0 pt-1">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-0 clearfix">
<i class="fa fa-moon-o bg-warning p-2 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-warning mb-0 pt-1">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-0 clearfix">
<i class="fa fa-bell bg-danger p-2 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-danger mb-0 pt-1">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-0 clearfix">
<i class="fa fa-cogs bg-primary p-2 px-3 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-primary mb-0 pt-1">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-0 clearfix">
<i class="fa fa-laptop bg-info p-2 px-3 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-info mb-0 pt-1">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-0 clearfix">
<i class="fa fa-moon-o bg-warning p-2 px-3 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-warning mb-0 pt-1">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
<div class="col-xxs-12 col-xs-6 col-lg-3">
<div class="card">
<div class="card-block p-0 clearfix">
<i class="fa fa-bell bg-danger p-2 px-3 font-2xl mr-1 float-xs-left"></i>
<div class="h5 text-danger mb-0 pt-1">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="social-box facebook">
<i class="fa fa-facebook"></i>
<ul>
<li>
<strong>89k</strong>
<span>friends</span>
</li>
<li>
<strong>459</strong>
<span>feeds</span>
</li>
</ul>
</div>
<!--/social-box-->
</div>
<!--/col-->
<div class="col-md-3 col-sm-6">
<div class="social-box twitter">
<i class="fa fa-twitter"></i>
<ul>
<li>
<strong>973k</strong>
<span>followers</span>
</li>
<li>
<strong>1.792</strong>
<span>tweets</span>
</li>
</ul>
</div>
<!--/social-box-->
</div>
<!--/col-->
<div class="col-md-3 col-sm-6">
<div class="social-box linkedin">
<i class="fa fa-linkedin"></i>
<ul>
<li>
<strong>500+</strong>
<span>contacts</span>
</li>
<li>
<strong>292</strong>
<span>feeds</span>
</li>
</ul>
</div>
<!--/social-box-->
</div>
<!--/col-->
<div class="col-md-3 col-sm-6">
<div class="social-box google-plus">
<i class="fa fa-google-plus"></i>
<ul>
<li>
<strong>894</strong>
<span>followers</span>
</li>
<li>
<strong>92</strong>
<span>circles</span>
</li>
</ul>
</div>
<!--/social-box-->
</div>
<!--/col-->
</div>
<!--/row-->
<div class="card-group">
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-info mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-success mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-warning mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-primary mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-danger mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-info mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-success mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-warning mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-primary mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-danger mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<i class="icon-speech"></i>
</div>
<div class="h4 mb-0">972</div>
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
<progress class="progress progress-xs progress-info mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="card card-inverse card-info">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-info mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card card-inverse card-success">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-success mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card card-inverse card-warning">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-warning mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-primary mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card card-inverse card-danger">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<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>
<progress class="progress progress-xs progress-danger mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="card card-inverse card-info">
<div class="card-block">
<div class="h1 text-muted text-xs-right mb-2">
<i class="icon-speech"></i>
</div>
<div class="h4 mb-0">972</div>
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
<progress class="progress progress-xs progress-info mt-1 mb-0" value="25" max="100">25%</progress>
</div>
</div>
</div>
</div>
</div>
</template>