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