mirror of
https://github.com/cq-panda/Vue.NetCore.git
synced 2026-10-20 16:21:27 +08:00
jxx
637 lines
16 KiB
HTML
637 lines
16 KiB
HTML
<link href="../Content/css/bootstrap.css" rel="stylesheet" />
|
|
<link href="../Content/css/font-awesome.min.css" rel="stylesheet" />
|
|
<style>
|
|
.widget {
|
|
border-radius: 5px;
|
|
padding: 15px 20px;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.navy-bg, .bg-primary {
|
|
background-color: #1ab394;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.fa {
|
|
font-size: 5em;
|
|
}
|
|
|
|
.lazur-bg, .bg-info {
|
|
background-color: #23c6c8;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.yellow-bg, .bg-warning {
|
|
background-color: #f8ac59;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.green-bg, .bg-warning {
|
|
background-color: #ed5565;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
|
|
position: relative;
|
|
min-height: 1px;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.row {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.row span {
|
|
font-size: 17px;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.row .col-xs-4 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.row {
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
|
|
background-color: #00c0ef !important;
|
|
}
|
|
|
|
.small-box {
|
|
border-radius: 2px;
|
|
position: relative;
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.small-box > .inner {
|
|
padding: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.small-box h3, .small-box p {
|
|
z-index: 5;
|
|
}
|
|
|
|
.small-box h3 {
|
|
font-size: 38px;
|
|
font-weight: bold;
|
|
margin: 0 0 10px 0;
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.small-box .icon {
|
|
-webkit-transition: all .3s linear;
|
|
-o-transition: all .3s linear;
|
|
transition: all .3s linear;
|
|
position: absolute;
|
|
top: -10px;
|
|
right: 10px;
|
|
z-index: 0;
|
|
font-size: 90px;
|
|
color: rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.small-box > .small-box-footer {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 3px 0;
|
|
color: #fff;
|
|
color: rgba(255,255,255,0.8);
|
|
display: block;
|
|
z-index: 10;
|
|
background: rgba(0,0,0,0.1);
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
|
|
.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
|
|
background-color: #00c0ef !important
|
|
}
|
|
|
|
.info-box {
|
|
height: 90px;
|
|
color: white;
|
|
}
|
|
|
|
.info-box-icon {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 2px;
|
|
display: block;
|
|
float: left;
|
|
height: 90px;
|
|
width: 90px;
|
|
text-align: center;
|
|
font-size: 45px;
|
|
line-height: 90px;
|
|
background: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.info-box-icon {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 2px;
|
|
display: block;
|
|
float: left;
|
|
height: 90px;
|
|
width: 90px;
|
|
text-align: center;
|
|
font-size: 45px;
|
|
line-height: 90px;
|
|
background: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.info-box-content {
|
|
padding: 10px 10px;
|
|
margin-left: 120px;
|
|
}
|
|
|
|
.info-box-text {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.progress-description, .info-box-text {
|
|
display: block;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.info-box-number {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 35px;
|
|
}
|
|
|
|
.info-box .progress, .info-box .progress .progress-bar {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.info-box .progress {
|
|
margin: 5px -10px 5px -10px;
|
|
height: 2px;
|
|
}
|
|
|
|
.progress, .progress > .progress-bar {
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.progress {
|
|
height: 20px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
|
|
}
|
|
|
|
.progress-description {
|
|
margin: 0;
|
|
}
|
|
|
|
.progress-description, .info-box-text {
|
|
display: block;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.right-view {
|
|
padding: 14px 22px;
|
|
right: 40px;
|
|
float: right;
|
|
position: absolute;
|
|
top: 21px;
|
|
border-left: 1px solid;
|
|
height: 50px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.event {
|
|
border-radius: 4px;
|
|
-webkit-border-radius: 4px;
|
|
color: #23c6c8;
|
|
font-size: 12px;
|
|
margin: 0px 30px;
|
|
padding: 2px 0px;
|
|
}
|
|
|
|
.event.received {
|
|
background-color: #00c0ef;
|
|
display: none;
|
|
}
|
|
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
to {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fade {
|
|
from {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
to {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
.blink {
|
|
padding: 20px;
|
|
background: #ffffff;
|
|
animation: fade 3000ms infinite;
|
|
-webkit-animation: fade 3000ms infinite;
|
|
}
|
|
|
|
.test {
|
|
background: red;
|
|
animation: flash .9s linear infinite;
|
|
}
|
|
|
|
@keyframes flash {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.test {
|
|
padding: 20px;
|
|
}
|
|
|
|
|
|
|
|
.box1 {
|
|
font-size: 20px;
|
|
color: #4cc134;
|
|
margin: 10px;
|
|
animation: changeshadow 1s ease-in infinite;
|
|
/* 其它浏览器兼容性前缀 */
|
|
-webkit-animation: changeshadow 1s linear infinite;
|
|
-moz-animation: changeshadow 1s linear infinite;
|
|
-ms-animation: changeshadow 1s linear infinite;
|
|
-o-animation: changeshadow 1s linear infinite;
|
|
}
|
|
|
|
@keyframes changeshadow {
|
|
0% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
|
|
50% {
|
|
text-shadow: 0 0 40px #4cc134
|
|
}
|
|
|
|
100% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
}
|
|
/* 添加兼容性前缀 */
|
|
@-webkit-keyframes changeshadow {
|
|
0% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
|
|
50% {
|
|
text-shadow: 0 0 40px #4cc134
|
|
}
|
|
|
|
100% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes changeshadow {
|
|
0% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
|
|
50% {
|
|
text-shadow: 0 0 40px #4cc134
|
|
}
|
|
|
|
100% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes changeshadow {
|
|
0% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
|
|
50% {
|
|
text-shadow: 0 0 40px #4cc134
|
|
}
|
|
|
|
100% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
}
|
|
|
|
@-o-keyframes changeshadow {
|
|
0% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
|
|
50% {
|
|
text-shadow: 0 0 40px #4cc134
|
|
}
|
|
|
|
100% {
|
|
text-shadow: 0 0 4px #4cc134
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div style="display:none;" class="info-box bg-yellow col-lg-3 ">
|
|
<span class="info-box-icon">
|
|
<i class="glyphicon glyphicon-user"></i>
|
|
</span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-number">5,200</span>
|
|
<span class="progress-description">
|
|
专家申请审核
|
|
</span>
|
|
</div>
|
|
<div class="right-view">
|
|
<span>查看</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="display:none;">
|
|
<div class="col-lg-3 col-xs-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-aqua">
|
|
<div class="inner">
|
|
<h3>150</h3>
|
|
|
|
<p>新订单</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-bag"></i>
|
|
</div>
|
|
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-xs-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-green">
|
|
<div class="inner">
|
|
<h3>53<sup style="font-size: 20px">%</sup></h3>
|
|
|
|
<p>跳出率</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-stats-bars"></i>
|
|
</div>
|
|
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-xs-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-yellow">
|
|
<div class="inner">
|
|
<h3>44</h3>
|
|
|
|
<p>User Registrations</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-person-add"></i>
|
|
</div>
|
|
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-xs-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-red">
|
|
<div class="inner">
|
|
<h3>65</h3>
|
|
|
|
<p>访客</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-pie-graph"></i>
|
|
</div>
|
|
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="border-bottom:1px dotted #e0b0b0;">
|
|
<div class="col-xs-3">
|
|
<div class="widget style1 green-bg">
|
|
<div class="row">
|
|
<div class="col-xs-4">
|
|
<i class="fa icon-shopping-cart fa-5x"></i>
|
|
</div>
|
|
<div class="col-xs-8 text-right">
|
|
<span> 昨日用户点击量 </span>
|
|
<h2 class="font-bold">10780</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-3">
|
|
<div class="widget style1 navy-bg">
|
|
<div class="row">
|
|
<div class="col-xs-4">
|
|
<i class="fa icon-truck fa-5x"></i>
|
|
</div>
|
|
<div class="col-xs-8 text-right">
|
|
<span>昨日用户访问量</span>
|
|
<h2 class="font-bold">28900</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-3">
|
|
<div class="widget style1 lazur-bg">
|
|
<div class="row">
|
|
<div class="col-xs-4">
|
|
<i class="fa icon-cloud fa-5x"></i>
|
|
</div>
|
|
<div class="col-xs-8 text-right">
|
|
<span>昨日提问数量</span>
|
|
<h2 class="font-bold">23</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-3">
|
|
<div class="widget style1 yellow-bg">
|
|
<div class="row">
|
|
<div class="col-xs-4">
|
|
<i class="fa icon-signin fa-5x"></i>
|
|
</div>
|
|
<div class="col-xs-8 text-right">
|
|
<span>昨日回复数量</span>
|
|
<h2 class="font-bold">69</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="">
|
|
<div id="container" style="margin-top:20px; float: left; width: 40%; height: 400px"></div>
|
|
<div id="plot" style="margin-top:20px;float: left; width: 40%; margin-left: 130px; height: 400px;"></div>
|
|
<div class="panel panel-default" style="margin-top:20px;width: 50%;margin-left: 7%;float: left;display:none; ">
|
|
<div class="panel-heading">
|
|
访问最多的功能
|
|
</div>
|
|
<ul class="list-group">
|
|
<li class="list-group-item">系统 <span class="badge" style="background:#ff0000;color:white;">1</span></li>
|
|
<li class="list-group-item">APP首页 <span class="badge" style="background:#1ab394;color:white;">2</span></li>
|
|
<li class="list-group-item">上报肉牛价格<span class="badge" style="background:#f8ac59;color:white;">3</span></li>
|
|
<li class="list-group-item">提问</li>
|
|
<li class="list-group-item">买牛</li>
|
|
<li class="list-group-item">卖牛</li>
|
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script src="../Scripts/jquery-1.10.2.min.js"></script>
|
|
<script src="../Scripts/highchart/highcharts.src.js"></script>
|
|
<script>
|
|
|
|
|
|
$(function () {
|
|
$('#plot').highcharts({
|
|
chart: {
|
|
plotBackgroundColor: null,
|
|
plotBorderWidth: null,
|
|
plotShadow: false
|
|
},
|
|
title: {
|
|
text: '近七天用户点击量'
|
|
},
|
|
tooltip: {
|
|
headerFormat: '{series.name}<br>',
|
|
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: true,
|
|
cursor: 'pointer',
|
|
dataLabels: {
|
|
enabled: true,
|
|
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
|
style: {
|
|
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
name: '数量',
|
|
data: [
|
|
['08/30', 45.0],
|
|
['08/29', 26.8],
|
|
{
|
|
name: '08/25',
|
|
y: 12.8,
|
|
sliced: true,
|
|
selected: true
|
|
},
|
|
['08/28', 8.5],
|
|
['08/27', 6.2],
|
|
['08/26', 0.7]
|
|
]
|
|
}]
|
|
});
|
|
});
|
|
|
|
var chart = new Highcharts.Chart('container', {
|
|
title: {
|
|
text: '近七天APP点击量',
|
|
x: -20
|
|
},
|
|
subtitle: {
|
|
text: '',
|
|
x: -20
|
|
},
|
|
xAxis: {
|
|
categories: ['08/30', '08/29', '08/28', '08/27', '08/26', '08/25', '08/24']
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: '数量K'
|
|
},
|
|
plotLines: [{
|
|
value: 0,
|
|
width: 1,
|
|
color: '#808080'
|
|
}]
|
|
},
|
|
tooltip: {
|
|
valueSuffix: ''
|
|
},
|
|
legend: {
|
|
layout: 'vertical',
|
|
align: 'right',
|
|
verticalAlign: 'middle',
|
|
borderWidth: 0
|
|
},
|
|
series: [{
|
|
name: '数量',
|
|
data: [7000.0, 6000.9, 9000.5, 14000.5, 18000.2, 21000.5, 25000.2, 26000.5, 23000.3, 18000.3, 13000.9, 9000.6]
|
|
}, {
|
|
name: '数量',
|
|
data: [28900, 8000, 5000.7, 11000.3, 17000.0, 22000.0, 24000.8, 24000.1, 20000.1, 14000.1, 8000.6, 2000.5]
|
|
}, {
|
|
name: '数量',
|
|
data: [9123, 6523, 3000.5, 8000.4, 13000.5, 17000.0, 18000.6, 17000.9, 14000.3, 9000.0, 3000.9, 1000.0]
|
|
}, {
|
|
name: '数量',
|
|
data: [3000.9, 4000.2, 5000.7, 8000.5, 11000.9, 15000.2, 17000.0, 16000.6, 14000.2, 10000.3, 6000.6, 4000.8]
|
|
}]
|
|
});
|
|
|
|
</script> |