vue写一个后台管理系统的主页页面
时间: 2023-08-11 13:05:00 浏览: 56
以下是一个简单的后台管理系统主页页面的Vue代码示例:
```
<template>
<div class="home">
<h1>Welcome to Admin Dashboard</h1>
<div class="stats">
<div class="stat">
<p class="stat-title">Total Users</p>
<p class="stat-value">{{ totalUsers }}</p>
</div>
<div class="stat">
<p class="stat-title">Total Orders</p>
<p class="stat-value">{{ totalOrders }}</p>
</div>
<div class="stat">
<p class="stat-title">Total Revenue</p>
<p class="stat-value">{{ totalRevenue }}</p>
</div>
</div>
<div class="chart">
<h2>Daily Sales Chart</h2>
<canvas ref="chart"></canvas>
</div>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
name: 'Home',
data() {
return {
totalUsers: 0,
totalOrders: 0,
totalRevenue: 0,
chartData: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Sales',
data: [50, 70, 90, 80, 110, 100, 120],
backgroundColor: '#3498db',
borderColor: '#2980b9',
borderWidth: 1
}]
}
};
},
mounted() {
// Fetch data from API
this.totalUsers = 500;
this.totalOrders = 1000;
this.totalRevenue = '$50,000';
// Create chart
const ctx = this.$refs.chart.getContext('2d');
new Chart(ctx, {
type: 'line',
data: this.chartData,
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
}
});
}
};
</script>
<style scoped>
.home {
padding: 20px;
}
.stats {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.stat {
flex: 1;
text-align: center;
}
.stat-title {
font-weight: 600;
margin-bottom: 10px;
}
.stat-value {
font-size: 32px;
font-weight: 600;
color: #3498db;
}
.chart {
margin-top: 50px;
}
</style>
```
这个页面包含了一个欢迎语、一些统计数据和一个每日销售图表。在mounted生命周期方法中,我们使用Chart.js创建了一个折线图,并将数据传递给它。请注意,我们从API获取了数据并将其显示在页面上。你可以根据自己的需求修改这个页面的样式和功能。