wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

后台首页图表

This commit is contained in:
pushuo 2022-07-29 17:19:22 +08:00
parent 55a57244f9
commit d36e991ab0
5 changed files with 241 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
beike/Admin/View/Components/Sidebar.php
View File

@ -33,6 +33,11 @@ class Sidebar extends Component
$routeNameWithPrefix = request()->route()->getName();
$routeName = str_replace($adminName . '.', '', $routeNameWithPrefix);
if (Str::startsWith($routeName, ['home.'])) {
$this->addLink('首页装修', admin_route('design.index'), 'fa fa-tachometer-alt', $this->equalRoute('design.index'), true);
$this->addLink('插件列表', admin_route('plugins.index'), 'fa fa-tachometer-alt', $this->equalRoute('plugins.index'));
}
if (Str::startsWith($routeName, ['products.', 'categories.', 'brands.'])) {
$this->addLink('商品分类', admin_route('categories.index'), 'fa fa-tachometer-alt', $this->equalRoute('categories.index'));
$this->addLink('商品列表', admin_route('products.index'), 'fa fa-tachometer-alt', $this->equalRoute('products.index'));

124
public/build/beike/admin/css/bootstrap.css vendored
View File

@ -6803,7 +6803,7 @@
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 0.92rem;
--bs-body-font-size: 0.82rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
@ -6855,47 +6855,42 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
}
h1, .h1 {
font-size: calc(1.355rem + 1.26vw);
font-size: calc(1.33rem + 0.96vw);
}
@media (min-width: 1200px) {
h1, .h1 {
font-size: 2.3rem;
font-size: 2.05rem;
}
}
h2, .h2 {
font-size: calc(1.309rem + 0.708vw);
font-size: calc(1.289rem + 0.468vw);
}
@media (min-width: 1200px) {
h2, .h2 {
font-size: 1.84rem;
font-size: 1.64rem;
}
}
h3, .h3 {
font-size: calc(1.286rem + 0.432vw);
font-size: calc(1.2685rem + 0.222vw);
}
@media (min-width: 1200px) {
h3, .h3 {
font-size: 1.61rem;
font-size: 1.435rem;
}
}
h4, .h4 {
font-size: calc(1.263rem + 0.156vw);
}
@media (min-width: 1200px) {
h4, .h4 {
font-size: 1.38rem;
}
font-size: 1.23rem;
}
h5, .h5 {
font-size: 1.15rem;
font-size: 1.025rem;
}
h6, .h6 {
font-size: 0.92rem;
font-size: 0.82rem;
}
p {
@ -7055,7 +7050,7 @@ table {
caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: #6c757d;
color: #95aac9;
text-align: left;
}
@ -7234,7 +7229,7 @@ progress {
}
.lead {
font-size: 1.15rem;
font-size: 1.025rem;
font-weight: 300;
}
@ -7328,7 +7323,7 @@ progress {
.blockquote {
margin-bottom: 1rem;
font-size: 1.15rem;
font-size: 1.025rem;
}
.blockquote > :last-child {
margin-bottom: 0;
@ -8916,26 +8911,26 @@ progress {
.col-form-label-lg {
padding-top: calc(0.5rem + 1px);
padding-bottom: calc(0.5rem + 1px);
font-size: 1.15rem;
font-size: 1.025rem;
}
.col-form-label-sm {
padding-top: calc(0.25rem + 1px);
padding-bottom: calc(0.25rem + 1px);
font-size: 0.805rem;
font-size: 0.7175rem;
}
.form-text {
margin-top: 0.25rem;
font-size: 0.875em;
color: #6c757d;
color: #95aac9;
}
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 0.92rem;
font-size: 0.82rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
@ -9076,7 +9071,7 @@ progress {
.form-control-sm {
min-height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem;
font-size: 0.805rem;
font-size: 0.7175rem;
border-radius: 0.2rem;
}
.form-control-sm::-webkit-file-upload-button {
@ -9101,7 +9096,7 @@ progress {
.form-control-lg {
min-height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem;
font-size: 1.15rem;
font-size: 1.025rem;
border-radius: 0.3rem;
}
.form-control-lg::-webkit-file-upload-button {
@ -9155,7 +9150,7 @@ textarea.form-control-lg {
width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-moz-padding-start: calc(0.75rem - 3px);
font-size: 0.92rem;
font-size: 0.82rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
@ -9197,7 +9192,7 @@ textarea.form-control-lg {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.805rem;
font-size: 0.7175rem;
border-radius: 0.2rem;
}
@ -9205,13 +9200,13 @@ textarea.form-control-lg {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
font-size: 1.15rem;
font-size: 1.025rem;
border-radius: 0.3rem;
}
.form-check {
display: block;
min-height: 1.38rem;
min-height: 1.23rem;
padding-left: 1.7em;
margin-bottom: 0.125rem;
}
@ -9509,7 +9504,7 @@ textarea.form-control-lg {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 0.92rem;
font-size: 0.82rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
@ -9525,7 +9520,7 @@ textarea.form-control-lg {
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.15rem;
font-size: 1.025rem;
border-radius: 0.3rem;
}
@ -9534,7 +9529,7 @@ textarea.form-control-lg {
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.805rem;
font-size: 0.7175rem;
border-radius: 0.2rem;
}
@ -9575,7 +9570,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.805rem;
font-size: 0.7175rem;
color: #fff;
background-color: rgba(25, 135, 84, 0.9);
border-radius: 0;
@ -9664,7 +9659,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.805rem;
font-size: 0.7175rem;
color: #fff;
background-color: rgba(220, 53, 69, 0.9);
border-radius: 0;
@ -9752,7 +9747,7 @@ textarea.form-control-lg {
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 0.92rem;
font-size: 0.82rem;
border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@ -10227,13 +10222,13 @@ textarea.form-control-lg {
.btn-lg, .btn-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.15rem;
font-size: 1.025rem;
border-radius: 0.3rem;
}
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.805rem;
font-size: 0.7175rem;
border-radius: 0.2rem;
}
@ -10305,7 +10300,7 @@ textarea.form-control-lg {
min-width: 10rem;
padding: 0.5rem 0;
margin: 0;
font-size: 0.92rem;
font-size: 0.82rem;
color: #212529;
text-align: left;
list-style: none;
@ -10539,7 +10534,7 @@ textarea.form-control-lg {
display: block;
padding: 0.5rem 1rem;
margin-bottom: 0;
font-size: 0.805rem;
font-size: 0.7175rem;
color: #6c757d;
white-space: nowrap;
}
@ -10792,10 +10787,10 @@ textarea.form-control-lg {
justify-content: space-between;
}
.navbar-brand {
padding-top: 0.3275rem;
padding-bottom: 0.3275rem;
padding-top: 0.34625rem;
padding-bottom: 0.34625rem;
margin-right: 1rem;
font-size: 1.15rem;
font-size: 1.025rem;
white-space: nowrap;
}
.navbar-nav {
@ -10826,7 +10821,7 @@ textarea.form-control-lg {
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.15rem;
font-size: 1.025rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
@ -11412,7 +11407,7 @@ textarea.form-control-lg {
align-items: center;
width: 100%;
padding: 1rem 1.25rem;
font-size: 0.92rem;
font-size: 0.82rem;
color: #212529;
text-align: left;
background-color: #fff;
@ -11600,7 +11595,7 @@ textarea.form-control-lg {
.pagination-lg .page-link {
padding: 0.75rem 1.5rem;
font-size: 1.15rem;
font-size: 1.025rem;
}
.pagination-lg .page-item:first-child .page-link {
border-top-left-radius: 0.3rem;
@ -11613,7 +11608,7 @@ textarea.form-control-lg {
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
font-size: 0.805rem;
font-size: 0.7175rem;
}
.pagination-sm .page-item:first-child .page-link {
border-top-left-radius: 0.2rem;
@ -11634,7 +11629,7 @@ textarea.form-control-lg {
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0;
border-radius: 2px;
}
.badge:empty {
display: none;
@ -11759,7 +11754,7 @@ textarea.form-control-lg {
display: flex;
height: 1rem;
overflow: hidden;
font-size: 0.69rem;
font-size: 0.615rem;
background-color: #e9ecef;
border-radius: 0;
}
@ -12515,7 +12510,7 @@ textarea.form-control-lg {
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.805rem;
font-size: 0.7175rem;
word-wrap: break-word;
opacity: 0;
}
@ -12617,7 +12612,7 @@ textarea.form-control-lg {
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.805rem;
font-size: 0.7175rem;
word-wrap: break-word;
background-color: #fff;
background-clip: padding-box;
@ -12711,7 +12706,7 @@ textarea.form-control-lg {
.popover-header {
padding: 0.5rem 1rem;
margin-bottom: 0;
font-size: 0.92rem;
font-size: 0.82rem;
background-color: #f0f0f0;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-top-left-radius: calc(0.3rem - 1px);
@ -14336,27 +14331,27 @@ textarea.form-control-lg {
}
.fs-1 {
font-size: calc(1.355rem + 1.26vw) !important;
font-size: calc(1.33rem + 0.96vw) !important;
}
.fs-2 {
font-size: calc(1.309rem + 0.708vw) !important;
font-size: calc(1.289rem + 0.468vw) !important;
}
.fs-3 {
font-size: calc(1.286rem + 0.432vw) !important;
font-size: calc(1.2685rem + 0.222vw) !important;
}
.fs-4 {
font-size: calc(1.263rem + 0.156vw) !important;
font-size: 1.23rem !important;
}
.fs-5 {
font-size: 1.15rem !important;
font-size: 1.025rem !important;
}
.fs-6 {
font-size: 0.92rem !important;
font-size: 0.82rem !important;
}
.fst-italic {
@ -14511,7 +14506,7 @@ textarea.form-control-lg {
.text-muted {
--bs-text-opacity: 1;
color: #6c757d !important;
color: #95aac9 !important;
}
.text-black-50 {
@ -17970,19 +17965,15 @@ textarea.form-control-lg {
}
@media (min-width: 1200px) {
.fs-1 {
font-size: 2.3rem !important;
font-size: 2.05rem !important;
}
.fs-2 {
font-size: 1.84rem !important;
font-size: 1.64rem !important;
}
.fs-3 {
font-size: 1.61rem !important;
}
.fs-4 {
font-size: 1.38rem !important;
font-size: 1.435rem !important;
}
}
@media print {
@ -18041,3 +18032,8 @@ textarea.form-control-lg {
width: 3em;
height: 1.6em;
}
.badge.bg-success-soft {
color: #00d97e;
background-color: #ccf7e5;
}

13
public/vendor/chart/chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
resources/beike/admin/css/bootstrap/bootstrap.scss vendored
View File

@ -10,7 +10,7 @@
$primary: #fd560f;
$border-radius: 0;
$font-size-base: 0.92rem;
$font-size-base: 0.82rem;
$form-check-input-width: 1.2em;
$form-switch-width: 2.6em;
$link-decoration: none;
@ -23,6 +23,8 @@ $btn-focus-width: 0;
$table-border-color: #e9ecef;
$border-color: #e2e2e2;
$input-border-color: #e2e2e2;
$badge-border-radius: 2px;
$text-muted: #95aac9;
@import './bootstrap-icons';
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
@ -43,4 +45,9 @@ $input-border-color: #e2e2e2;
width: 3em;
height: 1.6em;
}
}
.badge.bg-success-soft {
color: #00d97e;
background-color: #ccf7e5;
}

187
resources/beike/admin/views/pages/home.blade.php
View File

@ -2,45 +2,168 @@
@section('title', '后台管理')
@section('content')
<div class="card mb-3">
<div class="card-header">产品统计</div>
<div class="card-body">
<div><ul>
<li>产品总数</li>
<li>查看次数排序</li>
<li>卖出总额排序</li>
</ul>
</div>
</div>
</div>
@push('header')
<script src="{{ asset('vendor/chart/chart.min.js') }}"></script>
@endpush
<div class="card mb-3">
@section('content')
<div class="row">
<div class="col-lg-3 col-6">
<div class="card mb-4">
{{-- <div class="card-header">产品总数</div> --}}
<div class="card-body">
<h6 class="text-uppercase text-black-50 mb-3">产品总数</h6>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="fs-2 lh-1 fw-bold">90</div><span class="mt-n1 ms-2 badge bg-success-soft">+3.5%</span>
</div>
<div><i class="fs-4 bi bi-cart"></i></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card mb-4">
{{-- <div class="card-header">订单总数</div> --}}
<div class="card-body">
<h6 class="text-uppercase text-black-50 mb-3">订单总数</h6>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="fs-2 lh-1 fw-bold">190</div>
</div>
<div><i class="fs-4 bi bi-journal-text"></i></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card mb-4">
{{-- <div class="card-header">会员总数</div> --}}
<div class="card-body">
<h6 class="text-uppercase text-black-50 mb-3">会员总数</h6>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="fs-2 lh-1 fw-bold">190</div>
</div>
<div><i class="fs-4 bi bi-person"></i></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card mb-4">
{{-- <div class="card-header">会员总数</div> --}}
<div class="card-body">
<h6 class="text-uppercase text-black-50 mb-3">XXXXX</h6>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="fs-2 lh-1 fw-bold">190</div>
</div>
<div><i class="fs-4 bi bi-person"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-12">
<div class="card mb-4">
<div class="card-header">客户统计</div>
<div class="card-body">
<div><ul>
<li>新注册</li>
<li>最近访问</li>
<li>活跃用户</li>
<li>近期下单</li>
<li>订单总额排序</li>
<li>订单总数排序</li>
</ul>
</div>
<canvas id="customer-chart"></canvas>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">订单统计</div>
<div class="col-lg-4 col-12">
<div class="card mb-4">
<div class="card-header">客户统计</div>
<div class="card-body">
<div><ul>
<li>新订单</li>
<li>已付款</li>
<li>已发货</li>
<li>已完成</li>
</ul>
</div>
<canvas id="customer-chart-1"></canvas>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">订单统计</div>
<div class="card-body">
<div>
<ul>
<li>新订单</li>
<li>已付款</li>
<li>已发货</li>
<li>已完成</li>
</ul>
</div>
</div>
</div>
@endsection
@push('footer')
<script>
const ctx = document.getElementById('customer-chart').getContext('2d');
const ctx1 = document.getElementById('customer-chart-1').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['新注册', '最近访问', '活跃用户', '近期下单'],
datasets: [{
label: '# of Votes',
data: [112, 19, 3, 5, 2, 3],
// borderRadius: 5,
borderWidth: 2,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
const myChart1 = new Chart(ctx1, {
type: 'doughnut',
data: {
labels: ['Red', 'Orange', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [112, 19, 3],
cutout: '80%',
radius: '80%',
spacing: 6,
hoverOffset: 4,
// weight: 1,
// hoverBorderWidth: 5,
// borderRadius: 5,
backgroundColor: [
'#2c7be4',
'#a5c5f7',
'#d2ddec',
],
borderWidth: 0
}]
}
});
</script>
@endpush