@coreui/ajax
Version:
Open Source Bootstrap Admin Template
289 lines (275 loc) • 11.3 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="./card-chart1"></require>
<card-chart1></card-chart1>
</div>
</div>
<!--/col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-info">
<require from="./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="./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="./card-chart4"></require>
<card-chart4></card-chart4>
</div>
</div>
<!--/col-->
</div>
<!--/row-->
<div class="card" ng-controller="trafficDemoCtrl">
<require from="./traffic-demo"></require>
<traffic-demo></traffic-demo>
</div>
<!--/.card-->
<div class="row" ng-controller="socialBoxCtrl">
<require from="./social-box"></require>
<social-box></social-box>
</div>
<!--/.row-->
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
Traffic & Sales
</div>
<div class="card-block">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="col-sm-6">
<div class="callout callout-info">
<small class="text-muted">New Clients</small>
<br>
<strong class="h4">9,123</strong>
<require from="./sparkline-chart"></require>
<div class="chart-wrapper" as-element="sparkline-chart" data-index="0">
</div>
</div>
</div>
<!--/.col-->
<div class="col-sm-6">
<div class="callout callout-danger">
<small class="text-muted">New Clients</small>
<br>
<strong class="h4">9,123</strong>
<div class="chart-wrapper" as-element="sparkline-chart" data-index="1"></div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<hr class="mt-0">
<require from="./horizontal-bars"></require>
<ul class="horizontal-bars" as-element="horizontal-bars">
</ul>
</div>
<!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="row">
<div class="col-sm-6">
<div class="callout callout-warning">
<small class="text-muted">New Clients</small>
<br>
<strong class="h4">9,123</strong>
<div class="chart-wrapper" as-element="sparkline-chart" data-index="2">
</div>
</div>
</div>
<!--/.col-->
<div class="col-sm-6">
<div class="callout callout-success">
<small class="text-muted">New Clients</small>
<br>
<strong class="h4">9,123</strong>
<div class="chart-wrapper" as-element="sparkline-chart" data-index="3">
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<hr class="mt-0">
<require from="./horizontal-bars2"></require>
<ul class="horizontal-bars type-2" as-element="horizontal-bars2">
</ul>
</div>
<!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="row">
<div class="col-sm-6">
<div class="callout">
<small class="text-muted">New Clients</small>
<br>
<strong class="h4">9,123</strong>
<div class="chart-wrapper" as-element="sparkline-chart" data-index="4"></div>
</div>
</div>
<!--/.col-->
<div class="col-sm-6">
<div class="callout callout-primary">
<small class="text-muted">New Clients</small>
<br>
<strong class="h4">9,123</strong>
<div class="chart-wrapper" as-element="sparkline-chart" data-index="5"></div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<hr class="mt-0">
<ul class="icons-list">
<li>
<i class="icon-screen-desktop bg-primary"></i>
<div class="desc">
<div class="title">iMac 4k</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>1.924</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
</button>
</div>
</li>
<li>
<i class="icon-screen-smartphone bg-info"></i>
<div class="desc">
<div class="title">Samsung Galaxy Edge</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>1.224</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
</button>
</div>
</li>
<li>
<i class="icon-screen-smartphone bg-warning"></i>
<div class="desc">
<div class="title">iPhone 6S</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>1.163</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
</button>
</div>
</li>
<li>
<i class="icon-user bg-danger"></i>
<div class="desc">
<div class="title">Premium accounts</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>928</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
</button>
</div>
</li>
<li>
<i class="icon-social-spotify bg-success"></i>
<div class="desc">
<div class="title">Spotify Subscriptions</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>893</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
</button>
</div>
</li>
<li>
<i class="icon-cloud-download bg-danger"></i>
<div class="desc">
<div class="title">Ebook</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Downloads</div>
<strong>121.924</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
</button>
</div>
</li>
<li>
<i class="icon-camera bg-warning"></i>
<div class="desc">
<div class="title">Photos</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Uploaded</div>
<strong>12.125</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
</button>
</div>
</li>
<li class="divider text-xs-center">
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip"
data-placement="top" title="show more"><i class="icon-options"></i>
</button>
</li>
</ul>
</div>
<!--/.col-->
</div>
<!--/.row-->
<br/>
<table class="table table-hover table-outline mb-0 hidden-sm-down">
<thead class="thead-default">
<tr>
<th class="text-xs-center"><i class="icon-people"></i>
</th>
<th>User</th>
<th class="text-xs-center">Country</th>
<th>Usage</th>
<th class="text-xs-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<require from="./users-table"></require>
<tbody as-element="users-table">
</tbody>
</table>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
</div>
</template>