225 lines
9.4 KiB
HTML
225 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>ok-admin v2.0 | 很赞的后台模版</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<script type="text/javascript" src="../lib/echarts/echarts.min.js"></script>
|
||
<script type="text/javascript" src="../lib/echarts/echarts.theme.js"></script>
|
||
<script type="text/javascript" src="../lib/echarts/world/js/china.js"></script>
|
||
<!--<link rel="stylesheet" href="../css/console.css" media="all"/>-->
|
||
<link rel="stylesheet" href="../css/sub.css" media="all"/>
|
||
<style>
|
||
.yskj-card-body{padding:20px;position:relative;width:100%;box-sizing:border-box}
|
||
.yskj-card-body-tb{padding:20px 0;position:relative;width:100%;box-sizing:border-box}
|
||
.home .layui-card{-webkit-box-shadow:0 0 20px rgba(0,0,0,.08);box-shadow:0 0 20px rgba(0,0,0,.08);border-radius:5px}
|
||
.cart-data .stat-text{color:#455a64;font-size:24px;padding-bottom:5px}
|
||
.cart-data .stat-heading{color:#99abb4}
|
||
.cart-data .img-box{display:inline-block;vertical-align:middle;padding-right:20px}
|
||
.cart-data .img-box img{width:60px}
|
||
.cart-data .cart-r{display:inline-block;vertical-align:middle}
|
||
.my-card-title{color:#212529;font-size:16px;padding-bottom:20px;font-weight:bolder}
|
||
.map-body{height:360px}
|
||
.map-china{height:360px}
|
||
.progress-box{margin-bottom:20px;display:flex}
|
||
.progress-box .por-title{font-weight:600;color:#868e96;padding-bottom:5px}
|
||
.progress-box .por-txt{font-size:13px;padding-bottom:5px}
|
||
.progress-box .pro-head{width:50px;height:50px;line-height:50px;display:inline-block;vertical-align:middle;float:left;overflow:hidden;padding-right:20px}
|
||
.progress-box .pro-head img{background:#bea8ab;width:100%;height:100%;border-radius:100%}
|
||
.progress-box .pro-data{display:inline-block;vertical-align:middle;flex:1}
|
||
#calendar .layui-laydate{border-radius:5px;border:0;-webkit-box-shadow:0 0 20px rgba(0,0,0,.08);box-shadow:0 0 20px rgba(0,0,0,.08)}
|
||
.data-body{display:flex;padding:20px;padding-bottom:0;color:#333}
|
||
.data-body .media-cont{-ms-flex-align:center!important;align-items:center!important;-ms-flex:1 1 auto;flex:1 1 auto}
|
||
.data-body .media-cont .tit{font-size:16px;padding-bottom:5px}
|
||
.data-body .media-cont .num{font-size:24px;line-height:22px}
|
||
.data-body .w-img{width:60px;height:60px}
|
||
.data-body .w-img img{width:100%;height:100%}
|
||
.line-home-a{height:60px}
|
||
.cart-data .stat-text{color:#455a64;font-size:24px;padding-bottom:5px}
|
||
.extra-small-font{font-size:12px}
|
||
.cart-data .stat-heading{color:#99abb4}
|
||
.cart-data .img-box{display:inline-block;vertical-align:middle}
|
||
.cart-data .img-box img{width:60px}
|
||
.cart-data .cart-r{display:inline-block;vertical-align:middle;padding-left:20px}
|
||
.my-card-title{color:#212529;font-size:16px;padding-bottom:20px;font-weight:bolder}
|
||
|
||
.ok-card-body{padding:20px;position:relative;width:100%;box-sizing:border-box}
|
||
</style>
|
||
</head>
|
||
<body class="ok-body home ok-body-scroll">
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-xs6 layui-col-md3">
|
||
<div class="layui-card">
|
||
<div class="ok-card-body clearfix cart-data">
|
||
<div class="img-box" ok-pc-in-show>
|
||
<img src="../images/home-01.png" alt="none"/>
|
||
</div>
|
||
<div class="cart-r">
|
||
<div class="stat-text incomes-num">0</div>
|
||
<div class="stat-heading">收入</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs6 layui-col-md3">
|
||
<div class="layui-card">
|
||
<div class="ok-card-body clearfix cart-data">
|
||
<div class="img-box" ok-pc-in-show>
|
||
<img src="../images/home-02.png" alt="none"/>
|
||
</div>
|
||
<div class="cart-r">
|
||
<div class="stat-text goods-num">0</div>
|
||
<div class="stat-heading">商品</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs6 layui-col-md3">
|
||
<div class="layui-card">
|
||
<div class="ok-card-body clearfix cart-data">
|
||
<div class="img-box" ok-pc-in-show>
|
||
<img src="../images/home-03.png" alt="none"/>
|
||
</div>
|
||
<div class="cart-r">
|
||
<div class="stat-text blogs-num">0</div>
|
||
<div class="stat-heading">博客</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs6 layui-col-md3">
|
||
<div class="layui-card">
|
||
<div class="ok-card-body clearfix cart-data">
|
||
<div class="img-box" ok-pc-in-show>
|
||
<img src="../images/home-04.png" alt="none"/>
|
||
</div>
|
||
<div class="cart-r">
|
||
<div class="stat-text fans-num">0</div>
|
||
<div class="stat-heading">用户</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md8">
|
||
<div class="layui-card">
|
||
<div class="ok-card-body map-body">
|
||
<div style="height: 100%;" id="userSourceMap"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-md4">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
<div class="ok-card-title">用户排行榜</div>
|
||
</div>
|
||
<div class="ok-card-body map-body" style="height: 320px">
|
||
<div class="progress-box clearfix">
|
||
<div class="pro-head">
|
||
<img src="../images/face.jpg" alt="none"/>
|
||
</div>
|
||
<div class="pro-data">
|
||
<h4 class="por-title">Visits</h4>
|
||
<div class="por-txt pro-a">用户比例</div>
|
||
<div class="layui-progress" lay-filter="pro-a">
|
||
<div class="layui-progress-bar per-bg-a" lay-percent="35%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-box clearfix">
|
||
<div class="pro-head">
|
||
<img src="../images/face.jpg" alt="none"/>
|
||
</div>
|
||
<div class="pro-data">
|
||
<h4 class="por-title">Visits</h4>
|
||
<div class="por-txt pro-a">用户比例</div>
|
||
<div class="layui-progress" lay-filter="pro-b">
|
||
<div class="layui-progress-bar per-bg-b" lay-percent="15%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-box clearfix">
|
||
<div class="pro-head">
|
||
<img src="../images/face.jpg" alt="none"/>
|
||
</div>
|
||
<div class="pro-data">
|
||
<h4 class="por-title">Visits</h4>
|
||
<div class="por-txt pro-c">用户比例</div>
|
||
<div class="layui-progress" lay-filter="pro-c">
|
||
<div class="layui-progress-bar per-bg-c" lay-percent="20%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-box clearfix">
|
||
<div class="pro-head">
|
||
<img src="../images/face.jpg" alt="none"/>
|
||
</div>
|
||
<div class="pro-data">
|
||
<h4 class="por-title">Visits</h4>
|
||
<div class="por-txt pro-d">用户比例</div>
|
||
<div class="layui-progress" lay-filter="pro-d">
|
||
<div class="layui-progress-bar per-bg-d" lay-percent="30%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="ok-card-body clearfix">
|
||
<table id="userData" lay-filter="userdata"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="ok-card-body clearfix">
|
||
<div class="map-china" id="userLocationMap"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<script type="text/javascript" src="../lib/layui/layui.js"></script>
|
||
<script type="text/javascript" src="../js/console.js"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|