Watch 4 Star 8 Fork 6

linzening / learunHTML

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
LeaRun后台管理系统 spread retract

Clone or download
default.html 17.74 KB
Copy Edit Web IDE Raw Blame History
linzening authored 2018-06-11 20:00 . 更新修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>后台管理系统</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery/jQuery-2.2.4.min.js"></script>
<script src="js/charts/Chart.js"></script>
<script>
$(function () {
Canvas1();
Canvas2();
Canvas3();
});
function Canvas1() {
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var doughnutData = [
{
value: randomScalingFactor(),
color: "#F7464A",
highlight: "#FF5A5E",
label: "事假"
},
{
value: randomScalingFactor(),
color: "#46BFBD",
highlight: "#5AD3D1",
label: "病假"
},
{
value: randomScalingFactor(),
color: "#FDB45C",
highlight: "#FFC870",
label: "公休假"
},
{
value: randomScalingFactor(),
color: "#949FB1",
highlight: "#A8B3C5",
label: "调休假"
}
];
var ctx = document.getElementById("Canvas1").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: false });
}
function Canvas2() {
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData = {
labels: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
datasets: [
{
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
}
var ctx = document.getElementById("Canvas2").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
bezierCurve: false,
});
}
function Canvas3() {
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData = {
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "8月", "10月", "11月", "12月"],
datasets: [
{
fillColor: "#578ebe",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
}
var ctx = document.getElementById("Canvas3").getContext("2d");
window.myLine = new Chart(ctx).Bar(lineChartData, {
bezierCurve: false,
});
}
</script>
</head>
<body>
<div id="areascontent">
<div class="rows" style="margin-bottom: 0.8%; overflow: hidden;">
<div style="float: left; width: 69.2%;">
<div style="height: 100%; border: 1px solid #e6e6e6; overflow: hidden;">
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #578ebe;">
<div class="stat-icon">
<i class="fa fa-clock-o"></i>
</div>
<h2 class="m-top-none">17<span></span></h2>
<h5>待办未处理</h5>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #e35b5a;">
<h2 class="m-top-none">12<span></span></h2>
<h5>预警信息未读</h5>
<div class="stat-icon">
<i class="fa fa-bell"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #44b6ae;">
<h2 class="m-top-none">20<span></span></h2>
<h5>邮件未读</h5>
<div class="stat-icon">
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #8775a7; margin-right: 0px;">
<h2 class="m-top-none">6</h2>
<h5>对公待签收任务</h5>
<div class="stat-icon">
<i class="fa fa-gavel"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #4f5c65; margin-bottom: 0px;">
<h2 class="m-top-none">324<span></span></h2>
<h5>今日订单数</h5>
<div class="stat-icon">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #14aae4; margin-bottom: 0px;">
<h2 class="m-top-none">525<span></span></h2>
<h5>昨日订单数</h5>
<div class="stat-icon">
<i class="fa fa-file-text-o"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #949FB1; margin-bottom: 0px;">
<h2 class="m-top-none">355<span></span></h2>
<h5>回退订单数</h5>
<div class="stat-icon">
<i class="fa fa-coffee"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #f29503; margin-right: 0px; margin-bottom: 0px;">
<h2 class="m-top-none">3335<span></span></h2>
<h5>昨日成交金额</h5>
<div class="stat-icon">
<i class="fa fa-rmb" style="padding-left: 10px;"></i>
</div>
</div>
</div>
</div>
</div>
<div style="float: right; width: 30%;">
<div style="height: 221px; border: 1px solid #e6e6e6; background-color: #fff;">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>成交订单</div>
<div class="panel-body">
<canvas id="Canvas2" style="height: 165px; width: 100%;"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="rows" style="margin-bottom: 0.8%; overflow: hidden;">
<div style="float: left; width: 69.2%;">
<div style="height: 290px; border: 1px solid #e6e6e6; background-color: #fff;">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-bar-chart fa-lg" style="padding-right: 5px;"></i>柱状图</div>
<div class="panel-body">
<canvas id="Canvas3" style="height: 230px; width: 100%;"></canvas>
</div>
</div>
</div>
</div>
<div style="float: right; width: 30%;">
<div style="height: 290px; border: 1px solid #e6e6e6; background-color: #fff;">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-pie-chart fa-lg" style="padding-right: 5px;"></i>请假统计</div>
<div class="panel-body">
<canvas id="Canvas1" style="height: 180px; width: 100%; margin-top: 10px;"></canvas>
<div style="text-align: center; padding-top: 15px;">
<span><i class="fa fa-square" style="color: #F7464A; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>事假</span>
<span style="margin-left: 10px;"><i class="fa fa-square" style="color: #46BFBD; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>病假</span>
<span style="margin-left: 10px;"><i class="fa fa-square" style="color: #FDB45C; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>公休假</span>
<span style="margin-left: 10px;"><i class="fa fa-square" style="color: #949FB1; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>调休假</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rows" style="overflow: hidden;">
<div style="float: left; width: 33.8%; margin-right: 0.8%;">
<div style="height: 240px; border: 1px solid #e6e6e6; background-color: #fff;">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-send fa-lg" style="padding-right: 5px;"></i>企业文化</div>
<div class="panel-body">
<ul>
<li><a href="index.html" target="_blank">武大|我在樱花烂漫时遇见你</a><span class="time">2018-07-02</span></li>
<li><a href="index.html" target="_blank">现代国有企业道德体系初构</a><span class="time">2018-06-18</span></li>
<li><a href="index.html" target="_blank">国有企业文化问题根源及文化重塑任务分析</a><span class="time">2018-06-26</span></li>
<li><a href="index.html" target="_blank">国有企业文化建设必须突出员工文化</a><span class="time">2018-04-20</span></li>
<li><a href="index.html" target="_blank">加强企业公民建设 推进企业和谐发展</a><span class="time">2018-03-08</span></li>
<li><a href="index.html" target="_blank">不断提升大庆精神 实现企业持续发展</a><span class="time">2018-02-22</span></li>
<li><a href="index.html" target="_blank">科学发展作指导 人水和谐路更宽</a><span class="time">2018-02-15</span></li>
</ul>
</div>
</div>
</div>
</div>
<div style="float: left; width: 34.6%; margin-right: 0.8%;">
<div style="height: 240px; border: 1px solid #e6e6e6; background-color: #fff;">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-rss fa-lg" style="padding-right: 5px;"></i>通知公告</div>
<div class="panel-body">
<ul>
<li><a href="index.html" target="_blank">【通知】武大|我在樱花烂漫时遇见你</a><span class="time">2018-07-21</span></li>
<li><a href="index.html" target="_blank">【公告】OA办公使用指南</a><span class="time">2018-07-21</span></li>
<li><a href="index.html" target="_blank">【公告】劳动节集体出游指南</a><span class="time">2018-07-21</span></li>
<li><a href="index.html" target="_blank">【通知】2018年G20财长和央行行</a><span class="time">2018-07-21</span></li>
<li><a href="index.html" target="_blank">【通知】2018年G20财长和央行行</a><span class="time">2018-07-21</span></li>
<li><a href="index.html" target="_blank">【通知】品牌价值的最佳选择</a><span class="time">2018-07-21</span></li>
<li><a href="index.html" target="_blank">【公告】采购商城全新升级自营业正品</a><span class="time">2018-07-21</span></li>
</ul>
</div>
</div>
</div>
</div>
<div style="float: right; width: 30%;">
<div style="height: 240px; border: 1px solid #e6e6e6; background-color: #fff;">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-thumbs-o-up fa-lg" style="padding-right: 5px;"></i>最新签约</div>
<div class="panel-body">
<ul>
<li><a href="index.html" target="_blank">武大|我在樱花烂漫时遇见你</a><span class="time">2018-07-21</span></li>
<li><a href="index.html" target="_blank">曲靖市绿能燃气运输有限公司</a><span class="time">2018-07-20</span></li>
<li><a href="index.html" target="_blank">青海航天信息有限公司</a><span class="time">2018-07-19</span></li>
<li><a href="index.html" target="_blank">吉林省蔬菜花卉科学研究院</a><span class="time">2018-07-17</span></li>
<li><a href="index.html" target="_blank">青海省广播电视信息网络股份有限公司</a><span class="time">2018-07-17</span></li>
<li><a href="index.html" target="_blank">国营长空精密机械制造公司</a><span class="time">2018-07-13</span></li>
<li><a href="index.html" target="_blank">广东友元国土信息工程有限公司</a><span class="time">2018-07-12</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#copyrightcontent {
height: 30px;
line-height: 29px;
overflow: hidden;
position: absolute;
top: 100%;
margin-top: -30px;
width: 100%;
background-color: #fff;
border: 1px solid #e6e6e6;
padding-left: 10px;
padding-right: 10px;
}
.dashboard-stats {
float: left;
width: 25%;
}
.dashboard-stats-item {
position: relative;
overflow: hidden;
color: #fff;
cursor: pointer;
height: 105px;
margin-right: 10px;
margin-bottom: 10px;
padding-left: 15px;
padding-top: 20px;
}
.dashboard-stats-item .m-top-none {
margin-top: 5px;
}
.dashboard-stats-item h2 {
font-size: 28px;
font-family: inherit;
line-height: 1.1;
font-weight: 500;
padding-left: 70px;
}
.dashboard-stats-item h2 span {
font-size: 12px;
padding-left: 5px;
}
.dashboard-stats-item h5 {
font-size: 12px;
font-family: inherit;
margin-top: 1px;
line-height: 1.1;
padding-left: 70px;
}
.dashboard-stats-item .stat-icon {
position: absolute;
top: 18px;
font-size: 50px;
opacity: .3;
}
.dashboard-stats i.fa.stats-icon {
width: 50px;
padding: 20px;
font-size: 50px;
text-align: center;
color: #fff;
height: 50px;
border-radius: 10px;
}
.panel-default {
border: none;
border-radius: 0px;
margin-bottom: 0px;
box-shadow: none;
-webkit-box-shadow: none;
}
.panel-default > .panel-heading {
color: #777;
background-color: #fff;
border-color: #e6e6e6;
padding: 10px 10px;
}
.panel-default > .panel-body {
padding: 10px;
padding-bottom: 0px;
}
.panel-default > .panel-body ul {
overflow: hidden;
padding: 0;
margin: 0px;
margin-top: -5px;
}
.panel-default > .panel-body ul li {
line-height: 27px;
list-style-type: none;
white-space: nowrap;
text-overflow: ellipsis;
}
.panel-default > .panel-body ul li .time {
color: #a1a1a1;
float: right;
padding-right: 5px;
}
</style>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

HTML
1
https://gitee.com/linzening/learun.git
git@gitee.com:linzening/learun.git
linzening
learun
learun
master

Search