|
|
@extends("admin.layouts.layout")
|
|
|
|
|
|
@php
|
|
|
$pageTitle = "首页";
|
|
|
@endphp
|
|
|
|
|
|
@push("header")
|
|
|
<style>
|
|
|
.toll-free-box i {
|
|
|
transform: none !important;
|
|
|
left: 1rem;
|
|
|
bottom: .4rem;
|
|
|
}
|
|
|
.static-container {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.static-container > .card1 {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.static-container > .card1 + .card1 {
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
.static-container > .card1:nth-child(1) {
|
|
|
flex-basis: 60%;
|
|
|
}
|
|
|
.static-container > .card1:nth-child(2) {
|
|
|
flex-basis: calc(40% - 20px);
|
|
|
}
|
|
|
.static-container > .card1:nth-child(3) {
|
|
|
flex: 1;
|
|
|
height: 300px;
|
|
|
}
|
|
|
.card1 {
|
|
|
background: #fff;
|
|
|
border-radius: 4px;
|
|
|
font-size: 14px;
|
|
|
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
}
|
|
|
.card1::before {
|
|
|
content: "";
|
|
|
height: 28px;
|
|
|
width: 28px;
|
|
|
border-radius: 100%;
|
|
|
background: #78d3a9;
|
|
|
opacity: .25;
|
|
|
position: absolute;
|
|
|
bottom: -14px;
|
|
|
right: 12px;
|
|
|
}
|
|
|
.card1::after {
|
|
|
content: "";
|
|
|
height: 42px;
|
|
|
width: 42px;
|
|
|
border-radius: 100%;
|
|
|
background: #78d3a9;
|
|
|
opacity: .25;
|
|
|
position: absolute;
|
|
|
bottom: -4px;
|
|
|
right: -14px;
|
|
|
}
|
|
|
.card1-title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
border-bottom: 1px solid #e8eaec;
|
|
|
padding: 12px 14px;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
.card1-title > div:nth-child(1) {
|
|
|
color: #333;
|
|
|
position: relative;
|
|
|
}
|
|
|
.card1-title > div:nth-child(1)::before {
|
|
|
content: '';
|
|
|
height: 14px;
|
|
|
width: 140px;
|
|
|
background: radial-gradient(12px 9px at 10px 40%,#7ed3b155 20%,#0000 70%) 0 0/12px 12px no-repeat,
|
|
|
radial-gradient(120px 9px at 10px 40%,#7ed3b155 20%,#0000 70%) 12px 0/130px 12px no-repeat;
|
|
|
|
|
|
position: absolute;
|
|
|
bottom: -6px;
|
|
|
left: -6px;
|
|
|
}
|
|
|
.card1-title__arrow {
|
|
|
padding-right: 20px;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
}
|
|
|
.card1-title__arrow::before {
|
|
|
content: "\F142";
|
|
|
display: inline-block;
|
|
|
font-family: 'Material Design Icons';
|
|
|
text-rendering: auto;
|
|
|
font-size: 1.1rem;
|
|
|
-webkit-transform: translate(0, 0);
|
|
|
transform: translate(0, 0);
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
right: 0;
|
|
|
}
|
|
|
.card1-body {
|
|
|
padding: 7px;
|
|
|
}
|
|
|
.card1-body .static1, .card1-body .static2{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.static1 .static1__item, .static2 .static2__item{
|
|
|
margin: 14px;
|
|
|
padding-left: 20px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.static1 .static1__item .static1__item--label,.static2 .static2__item .static2__item--label {
|
|
|
color: #666;
|
|
|
|
|
|
position: relative;
|
|
|
}
|
|
|
.static1 .static1__item .static1__item--label::before {
|
|
|
content: "";
|
|
|
width: 4px;
|
|
|
height: 78%;
|
|
|
background: #73cdb9;
|
|
|
border-radius: 4px;
|
|
|
transform: translateY(11%);
|
|
|
|
|
|
position: absolute;
|
|
|
left: -10px;
|
|
|
top: 0;
|
|
|
}
|
|
|
.static2 .static2__item--label {
|
|
|
padding-left: 4px;
|
|
|
}
|
|
|
.static2 .static2__item .static2__item--label::before {
|
|
|
content: "";
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
background: #f2b34e;
|
|
|
border-radius: 100%;
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
position: absolute;
|
|
|
left: -10px;
|
|
|
top: 50%;
|
|
|
}
|
|
|
.static2 .static2__item:nth-child(2) .static2__item--label::before {
|
|
|
background: #548fee;
|
|
|
}
|
|
|
.static2 .static2__item:nth-child(3) .static2__item--label::before {
|
|
|
background: #78d3a9;
|
|
|
}
|
|
|
.static1 .static1__item .static1__item--value,.static2 .static2__item .static2__item--value {
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
line-height: 2;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
.static2 .static2__item .static2__item--value {
|
|
|
text-align: center;
|
|
|
}
|
|
|
.card1-body:has(#pie-chart) {
|
|
|
height: calc(100% - 39px);
|
|
|
}
|
|
|
#pie-chart {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
#bar-chart {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
</style>
|
|
|
@endpush
|
|
|
|
|
|
@section("content")
|
|
|
<div class="static-container">
|
|
|
|
|
|
<div class="card1">
|
|
|
<div class="card1-title">
|
|
|
<div>数据统计</div>
|
|
|
<div>
|
|
|
<span class="card1-title__arrow">更多</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card1-body">
|
|
|
<div class="static1">
|
|
|
<div class="static1__item">
|
|
|
<div class="static1__item--label">今日应收（元）</div>
|
|
|
<div class="static1__item--value">9040.00</div>
|
|
|
</div>
|
|
|
<div class="static1__item">
|
|
|
<div class="static1__item--label">今日应收（元）</div>
|
|
|
<div class="static1__item--value">9040.00</div>
|
|
|
</div>
|
|
|
<div class="static1__item">
|
|
|
<div class="static1__item--label">今日应收（元）</div>
|
|
|
<div class="static1__item--value">9040.00</div>
|
|
|
</div>
|
|
|
<div class="static1__item">
|
|
|
<div class="static1__item--label">今日应收（元）</div>
|
|
|
<div class="static1__item--value">9040.00</div>
|
|
|
</div>
|
|
|
<div class="static1__item">
|
|
|
<div class="static1__item--label">今日应收（元）</div>
|
|
|
<div class="static1__item--value">9040.00</div>
|
|
|
</div>
|
|
|
<div class="static1__item">
|
|
|
<div class="static1__item--label">今日应收（元）</div>
|
|
|
<div class="static1__item--value">9040.00</div>
|
|
|
</div>
|
|
|
<div class="static1__item">
|
|
|
<div class="static1__item--label">今日应收（元）</div>
|
|
|
<div class="static1__item--value">9040.00</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="static2">
|
|
|
<div class="static2__item">
|
|
|
<div class="static2__item--label">待处理</div>
|
|
|
<div class="static2__item--value">0</div>
|
|
|
</div>
|
|
|
<div class="static2__item">
|
|
|
<div class="static2__item--label">待处理</div>
|
|
|
<div class="static2__item--value">0</div>
|
|
|
</div>
|
|
|
<div class="static2__item">
|
|
|
<div class="static2__item--label">待处理</div>
|
|
|
<div class="static2__item--value">0</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card1">
|
|
|
<div class="card1-title">
|
|
|
<div>各产品占比</div>
|
|
|
<div>
|
|
|
<span class="card1-title__arrow">更多</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card1-body">
|
|
|
<div id="pie-chart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card1">
|
|
|
<div class="card1-title">
|
|
|
<div>营收</div>
|
|
|
<div>
|
|
|
<span class="card1-title__arrow">更多</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card1-body">
|
|
|
<div id="bar-chart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@endsection
|
|
|
|
|
|
<script>
|
|
|
function jump(url){
|
|
|
window.open(url)
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
@push("footer")
|
|
|
<script src="/plugins/echarts/echarts.min.js"></script>
|
|
|
<script>
|
|
|
function initPieChart () {
|
|
|
var datas = [
|
|
|
////////////////////////////////////////
|
|
|
[
|
|
|
{ name: '圣彼得堡来客', value: 5.6 },
|
|
|
{ name: '陀思妥耶夫斯基全集', value: 1 },
|
|
|
{ name: '史记精注全译（全6册）', value: 0.8 },
|
|
|
{ name: '加德纳艺术通史', value: 0.5 },
|
|
|
{ name: '表象与本质', value: 0.5 },
|
|
|
{ name: '其它', value: 3.8 }
|
|
|
],
|
|
|
// ////////////////////////////////////////
|
|
|
[
|
|
|
{ name: '银河帝国5：迈向基地', value: 3.8 },
|
|
|
{ name: '俞军产品方法论', value: 2.3 },
|
|
|
{ name: '艺术的逃难', value: 2.2 },
|
|
|
{ name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
|
|
|
{ name: 'Scrum 精髓', value: 1.2 },
|
|
|
{ name: '其它', value: 5.7 }
|
|
|
],
|
|
|
////////////////////////////////////////
|
|
|
[
|
|
|
{ name: '克莱因壶', value: 3.5 },
|
|
|
{ name: '投资最重要的事', value: 2.8 },
|
|
|
{ name: '简读中国史', value: 1.7 },
|
|
|
{ name: '你当像鸟飞往你的山', value: 1.4 },
|
|
|
{ name: '表象与本质', value: 0.5 },
|
|
|
{ name: '其它', value: 3.8 }
|
|
|
]
|
|
|
];
|
|
|
var pieChart = echarts.init(document.querySelector("#pie-chart"));
|
|
|
var option = {
|
|
|
series: datas.map(function (data, idx) {
|
|
|
var left = idx * 33.3;
|
|
|
return {
|
|
|
type: 'pie',
|
|
|
radius: [20, 60],
|
|
|
top: 'center',
|
|
|
height: '33.33%',
|
|
|
left: left + '%',
|
|
|
width: '33.33%',
|
|
|
itemStyle: {
|
|
|
borderColor: '#fff',
|
|
|
borderWidth: 1
|
|
|
},
|
|
|
label: {
|
|
|
show: false,
|
|
|
position: 'center'
|
|
|
},
|
|
|
data: data
|
|
|
};
|
|
|
})
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
pieChart.setOption(option);
|
|
|
}
|
|
|
function initBarChart () {
|
|
|
var barChart = echarts.init(document.querySelector("#bar-chart"));
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: '销售额趋势'
|
|
|
},
|
|
|
tooltip: {},
|
|
|
legend: {
|
|
|
data: ['销量']
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
|
|
},
|
|
|
yAxis: {},
|
|
|
series: [
|
|
|
{
|
|
|
name: '销量',
|
|
|
type: 'bar',
|
|
|
data: [5, 20, 36, 10, 10, 20]
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
barChart.setOption(option)
|
|
|
}
|
|
|
(function () {
|
|
|
initPieChart()
|
|
|
initBarChart()
|
|
|
})()
|
|
|
</script>
|
|
|
@endpush
|
