dashboard 优化
This commit is contained in:
pushuo
parent
93cdb22fb9
commit
a7377c7e9f
|
|
@ -6782,7 +6782,7 @@
|
|||
--bs-primary: #fd560f;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-info: #1a8eff;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
|
|
@ -6790,7 +6790,7 @@
|
|||
--bs-primary-rgb: 253, 86, 15;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-info-rgb: 26, 142, 255;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
|
|
@ -8582,15 +8582,15 @@ progress {
|
|||
}
|
||||
|
||||
.table-info {
|
||||
--bs-table-bg: #cff4fc;
|
||||
--bs-table-striped-bg: #c5e8ef;
|
||||
--bs-table-bg: #d1e8ff;
|
||||
--bs-table-striped-bg: #c7dcf2;
|
||||
--bs-table-striped-color: #000;
|
||||
--bs-table-active-bg: #badce3;
|
||||
--bs-table-active-bg: #bcd1e6;
|
||||
--bs-table-active-color: #000;
|
||||
--bs-table-hover-bg: #bfe2e9;
|
||||
--bs-table-hover-bg: #c1d7ec;
|
||||
--bs-table-hover-color: #000;
|
||||
color: #000;
|
||||
border-color: #badce3;
|
||||
border-color: #bcd1e6;
|
||||
}
|
||||
|
||||
.table-warning {
|
||||
|
|
@ -9624,32 +9624,32 @@ textarea.form-control-lg {
|
|||
|
||||
.btn-info {
|
||||
color: #000;
|
||||
background-color: #0dcaf0;
|
||||
border-color: #0dcaf0;
|
||||
background-color: #1a8eff;
|
||||
border-color: #1a8eff;
|
||||
}
|
||||
.btn-info:hover {
|
||||
color: #000;
|
||||
background-color: #31d2f2;
|
||||
border-color: #25cff2;
|
||||
background-color: #3c9fff;
|
||||
border-color: #3199ff;
|
||||
}
|
||||
.btn-check:focus + .btn-info, .btn-info:focus {
|
||||
color: #000;
|
||||
background-color: #31d2f2;
|
||||
border-color: #25cff2;
|
||||
box-shadow: 0 0 0 0 rgba(11, 172, 204, 0.5);
|
||||
background-color: #3c9fff;
|
||||
border-color: #3199ff;
|
||||
box-shadow: 0 0 0 0 rgba(22, 121, 217, 0.5);
|
||||
}
|
||||
.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
|
||||
color: #000;
|
||||
background-color: #3dd5f3;
|
||||
border-color: #25cff2;
|
||||
background-color: #48a5ff;
|
||||
border-color: #3199ff;
|
||||
}
|
||||
.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0 rgba(11, 172, 204, 0.5);
|
||||
box-shadow: 0 0 0 0 rgba(22, 121, 217, 0.5);
|
||||
}
|
||||
.btn-info:disabled, .btn-info.disabled {
|
||||
color: #000;
|
||||
background-color: #0dcaf0;
|
||||
border-color: #0dcaf0;
|
||||
background-color: #1a8eff;
|
||||
border-color: #1a8eff;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
|
|
@ -9848,27 +9848,27 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.btn-outline-info {
|
||||
color: #0dcaf0;
|
||||
border-color: #0dcaf0;
|
||||
color: #1a8eff;
|
||||
border-color: #1a8eff;
|
||||
}
|
||||
.btn-outline-info:hover {
|
||||
color: #000;
|
||||
background-color: #0dcaf0;
|
||||
border-color: #0dcaf0;
|
||||
background-color: #1a8eff;
|
||||
border-color: #1a8eff;
|
||||
}
|
||||
.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
|
||||
box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.5);
|
||||
box-shadow: 0 0 0 0 rgba(26, 142, 255, 0.5);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
|
||||
color: #000;
|
||||
background-color: #0dcaf0;
|
||||
border-color: #0dcaf0;
|
||||
background-color: #1a8eff;
|
||||
border-color: #1a8eff;
|
||||
}
|
||||
.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
|
||||
box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.5);
|
||||
box-shadow: 0 0 0 0 rgba(26, 142, 255, 0.5);
|
||||
}
|
||||
.btn-outline-info:disabled, .btn-outline-info.disabled {
|
||||
color: #0dcaf0;
|
||||
color: #1a8eff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -11454,12 +11454,12 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.alert-info {
|
||||
color: #055160;
|
||||
background-color: #cff4fc;
|
||||
border-color: #b6effb;
|
||||
color: #105599;
|
||||
background-color: #d1e8ff;
|
||||
border-color: #baddff;
|
||||
}
|
||||
.alert-info .alert-link {
|
||||
color: #04414d;
|
||||
color: #0d447a;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
|
|
@ -11815,17 +11815,17 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.list-group-item-info {
|
||||
color: #055160;
|
||||
background-color: #cff4fc;
|
||||
color: #105599;
|
||||
background-color: #d1e8ff;
|
||||
}
|
||||
.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
|
||||
color: #055160;
|
||||
background-color: #badce3;
|
||||
color: #105599;
|
||||
background-color: #bcd1e6;
|
||||
}
|
||||
.list-group-item-info.list-group-item-action.active {
|
||||
color: #fff;
|
||||
background-color: #055160;
|
||||
border-color: #055160;
|
||||
background-color: #105599;
|
||||
border-color: #105599;
|
||||
}
|
||||
|
||||
.list-group-item-warning {
|
||||
|
|
@ -12944,10 +12944,10 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.link-info {
|
||||
color: #0dcaf0;
|
||||
color: #1a8eff;
|
||||
}
|
||||
.link-info:hover, .link-info:focus {
|
||||
color: #3dd5f3;
|
||||
color: #48a5ff;
|
||||
}
|
||||
|
||||
.link-warning {
|
||||
|
|
@ -13388,7 +13388,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.border-info {
|
||||
border-color: #0dcaf0 !important;
|
||||
border-color: #1a8eff !important;
|
||||
}
|
||||
|
||||
.border-warning {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
//
|
||||
|
||||
$primary: #fd560f;
|
||||
$info: #1a8eff;
|
||||
|
||||
$border-radius: 0;
|
||||
$font-size-base: 0.82rem;
|
||||
$form-check-input-width: 1.2em;
|
||||
|
|
|
|||
|
|
@ -83,9 +83,18 @@
|
|||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">订单统计</div>
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<div>订单统计</div>
|
||||
<div class="orders-right">
|
||||
<div class="btn-group" role="group" aria-label="Basic outlined example">
|
||||
<button type="button" class="btn btn-sm btn-outline-info btn-info text-white" data-type="30">一个月</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-info" data-type="7">一周</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-info" data-type="12">一年</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="orders-chart" style="max-height: 420px"></canvas>
|
||||
<canvas id="orders-chart" style="max-height: 380px"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -94,7 +103,7 @@
|
|||
<div class="card mb-4">
|
||||
<div class="card-header">客户统计</div>
|
||||
<div class="card-body">
|
||||
<canvas id="customer-chart" style="max-height: 420px"></canvas>
|
||||
<canvas id="customer-chart" style="max-height: 380px"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -102,7 +111,7 @@
|
|||
<div class="card mb-4">
|
||||
<div class="card-header">客户统计</div>
|
||||
<div class="card-body">
|
||||
<canvas id="customer-chart-1" style="max-height: 420px"></canvas>
|
||||
<canvas id="customer-chart-1" style="max-height: 380px"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,133 +122,150 @@
|
|||
|
||||
@push('footer')
|
||||
<script>
|
||||
const ctx = document.getElementById('customer-chart').getContext('2d');
|
||||
const ctx1 = document.getElementById('customer-chart-1').getContext('2d');
|
||||
const orders = document.getElementById('orders-chart').getContext('2d');
|
||||
const myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['新注册', '最近访问', '活跃用户', '近期下单'],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
// backgroundColor: '#ffadb9',
|
||||
// borderColor: '#f7072b',
|
||||
// barThickness: 30,
|
||||
// borderRadius: 20, // This will round the corners
|
||||
// borderSkipped: false, // To make all side rounded
|
||||
data: [12, 19, 3, 5],
|
||||
// borderRadius: 5,
|
||||
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)',
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
const ctx = document.getElementById('customer-chart').getContext('2d');
|
||||
const ctx1 = document.getElementById('customer-chart-1').getContext('2d');
|
||||
const orders = document.getElementById('orders-chart').getContext('2d');
|
||||
|
||||
const myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['新注册', '最近访问', '活跃用户', '近期下单'],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
// backgroundColor: '#ffadb9',
|
||||
// borderColor: '#f7072b',
|
||||
// barThickness: 30,
|
||||
// borderRadius: 20, // This will round the corners
|
||||
// borderSkipped: false, // To make all side rounded
|
||||
data: [12, 19, 3, 5],
|
||||
// borderRadius: 5,
|
||||
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)',
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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,
|
||||
backgroundColor: ['#2c7be4','#a5c5f7','#d2ddec',],
|
||||
borderWidth: 0
|
||||
}]
|
||||
}
|
||||
});
|
||||
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,
|
||||
backgroundColor: ['#2c7be4','#a5c5f7','#d2ddec',],
|
||||
borderWidth: 0
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 420);
|
||||
gradient.addColorStop(0, 'rgba(180,223,253,1)');
|
||||
gradient.addColorStop(1, 'rgba(180,223,253,0)');
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 380);
|
||||
gradient.addColorStop(0, 'rgba(180,223,253,1)');
|
||||
gradient.addColorStop(1, 'rgba(180,223,253,0)');
|
||||
|
||||
const ordersChart = new Chart(orders, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: Array.from({length: 30}, (v, k) => k + 1),
|
||||
datasets: [{
|
||||
// label: ["订单数"],
|
||||
fill: true,
|
||||
backgroundColor : gradient, // Put the gradient here as a fill color
|
||||
borderColor : "#4da4f9",
|
||||
borderWidth: 2,
|
||||
pointColor : "#fff",
|
||||
pointStrokeColor : "#ff6c23",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "#ff6c23",
|
||||
data: Array.from({length: 30}, () => Math.floor(Math.random() * 23.7)),
|
||||
// borderDash: [],
|
||||
const ordersChart = new Chart(orders, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: Array.from({length: 30}, (v, k) => k + 1),
|
||||
datasets: [{
|
||||
// label: ["订单数"],
|
||||
fill: true,
|
||||
backgroundColor : gradient, // Put the gradient here as a fill color
|
||||
borderColor : "#4da4f9",
|
||||
borderWidth: 2,
|
||||
pointColor : "#fff",
|
||||
pointStrokeColor : "#ff6c23",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "#ff6c23",
|
||||
data: Array.from({length: 30}, () => Math.floor(Math.random() * 23.7)),
|
||||
// borderDash: [],
|
||||
responsive: true,
|
||||
lineTension: 0.4,
|
||||
datasetStrokeWidth : 3,
|
||||
pointDotStrokeWidth : 4,
|
||||
pointHoverBorderWidth: 8,
|
||||
// pointRadius: 3,
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
lineTension: 0.4,
|
||||
datasetStrokeWidth : 3,
|
||||
pointDotStrokeWidth : 4,
|
||||
pointHoverBorderWidth: 8,
|
||||
// pointRadius: 3,
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: false // Hide legend
|
||||
},
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
// axis: 'x',
|
||||
intersect: false,
|
||||
// includeInvisible: true,
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
borderDash: [3],
|
||||
// tickMarkLength:1,
|
||||
// drawOnChartArea: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: false // Hide legend
|
||||
},
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
// drawOnChartArea: false,
|
||||
display: false
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
// axis: 'x',
|
||||
intersect: false,
|
||||
// includeInvisible: true,
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
borderDash: [3],
|
||||
// tickMarkLength:1,
|
||||
// drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
// drawOnChartArea: false,
|
||||
display: false
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
// console.log(ordersChart)
|
||||
|
||||
function upDate(chart, label, data) {
|
||||
chart.data.labels = label;
|
||||
chart.data.datasets[0].data = data;
|
||||
chart.update();
|
||||
}
|
||||
});
|
||||
|
||||
$('.orders-right .btn-group > .btn').on('click', function() {
|
||||
const day = $(this).data('type'); // 天数
|
||||
const labels = Array.from({length: day}, (v, k) => k + 1);
|
||||
const data = Array.from({length: day}, () => Math.floor(Math.random() * 123.7));
|
||||
$(this).addClass('btn-info text-white').siblings().removeClass('btn-info text-white');
|
||||
|
||||
upDate(ordersChart, labels, data);
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -26,19 +26,20 @@
|
|||
<h5 class="card-title">修改个人信息</h5>
|
||||
</div>
|
||||
<div class="card-body h-600">
|
||||
<form>
|
||||
<div class="bg-light rounded-3 p-4 mb-4" style="background: #f6f9fc;">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="rounded-3" id="avatar" src="{{ image_resize($customer->avatar, 200, 200) }}" width="90">
|
||||
<div class="ps-3">
|
||||
<label class="btn btn-light shadow-sm bg-body mb-2" data-toggle="tooltip" title="Change your avatar">
|
||||
<i class="bi bi-arrow-repeat"></i> 修改头像
|
||||
<input type="file" class="d-none" id="update-btn" name="avatar" accept="image/*">
|
||||
</label>
|
||||
<div class="p mb-0 fs-ms text-muted">上传JPG、GIF或PNG图片。需要300 x 300。</div>
|
||||
</div>
|
||||
<div class="bg-light rounded-3 p-4 mb-4" style="background: #f6f9fc;">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="rounded-3" id="avatar" src="{{ image_resize($customer->avatar, 200, 200) }}" width="90">
|
||||
<div class="ps-3">
|
||||
<label class="btn btn-light shadow-sm bg-body mb-2" data-toggle="tooltip" title="Change your avatar">
|
||||
<i class="bi bi-arrow-repeat"></i> 修改头像
|
||||
<input type="file" class="d-none" id="update-btn" name="avatar" accept="image/*">
|
||||
</label>
|
||||
<div class="p mb-0 fs-ms text-muted">上传JPG、GIF或PNG图片。需要300 x 300。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form action="{{ shop_route('account.edit.index') }}" method="POST">
|
||||
@csrf
|
||||
<div class="row gx-4 gy-3">
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label">名称</label>
|
||||
|
|
@ -53,7 +54,7 @@
|
|||
<input class="form-control" type="password" placeholder="留空则保持原密码不变" name="password" value="">
|
||||
</div>
|
||||
<div class="col-12 mt-4">
|
||||
<button class="btn btn-primary mt-sm-0" type="button">提交</button>
|
||||
<button class="btn btn-primary mt-sm-0" type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue