修改home页面
This commit is contained in:
@@ -1,4 +1,354 @@
|
|||||||
<template>
|
<template>
|
||||||
123
|
<div class="dashboard">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<el-header class="header">
|
||||||
|
<div class="logo">Admin Dashboard</div>
|
||||||
|
<div class="user-info">
|
||||||
|
<el-avatar src="https://picsum.photos/200/200?random=100" />
|
||||||
|
<span class="username">管理员</span>
|
||||||
|
<el-dropdown>
|
||||||
|
<el-button type="text">
|
||||||
|
<el-icon><Setting /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||||
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
|
||||||
|
<!-- 数据概览卡片 -->
|
||||||
|
<el-row :gutter="20" class="overview-cards">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card class="info-card" hoverable>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-value">2.4k</div>
|
||||||
|
<div class="card-label">总访问量</div>
|
||||||
|
<div class="card-trend">
|
||||||
|
<el-icon color="#27AE60"><ArrowUp /></el-icon>
|
||||||
|
<span>12.5%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card class="info-card" hoverable>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-value">568</div>
|
||||||
|
<div class="card-label">新增用户</div>
|
||||||
|
<div class="card-trend">
|
||||||
|
<el-icon color="#27AE60"><ArrowUp /></el-icon>
|
||||||
|
<span>8.3%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card class="info-card" hoverable>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-value">32%</div>
|
||||||
|
<div class="card-label">转化率</div>
|
||||||
|
<div class="card-trend">
|
||||||
|
<el-icon color="#E74C3C"><ArrowDown /></el-icon>
|
||||||
|
<span>2.1%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card class="info-card" hoverable>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-value">¥12.8k</div>
|
||||||
|
<div class="card-label">总收入</div>
|
||||||
|
<div class="card-trend">
|
||||||
|
<el-icon color="#27AE60"><ArrowUp /></el-icon>
|
||||||
|
<span>15.7%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 图表区域 -->
|
||||||
|
<el-row :gutter="20" class="charts-section">
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-card class="chart-card" hoverable>
|
||||||
|
<div class="card-header">流量趋势</div>
|
||||||
|
<div ref="lineChart" class="chart-container" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="chart-card" hoverable>
|
||||||
|
<div class="card-header">用户分布</div>
|
||||||
|
<div ref="pieChart" class="chart-container" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 快捷操作与最近活动 -->
|
||||||
|
<el-row :gutter="20" class="actions-section">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="action-card" hoverable>
|
||||||
|
<div class="card-header">快捷操作</div>
|
||||||
|
<div class="actions-list">
|
||||||
|
<el-button type="primary" icon="Plus" class="action-btn">
|
||||||
|
新建内容
|
||||||
|
</el-button>
|
||||||
|
<el-button type="success" icon="Upload" class="action-btn">
|
||||||
|
数据导入
|
||||||
|
</el-button>
|
||||||
|
<el-button type="info" icon="Download" class="action-btn">
|
||||||
|
数据导出
|
||||||
|
</el-button>
|
||||||
|
<el-button type="warning" icon="Setting" class="action-btn">
|
||||||
|
系统设置
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-card class="activity-card" hoverable>
|
||||||
|
<div class="card-header">最近活动</div>
|
||||||
|
<el-timeline>
|
||||||
|
<el-timeline-item
|
||||||
|
v-for="(item, index) in activities"
|
||||||
|
:key="index"
|
||||||
|
:timestamp="item.time"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<el-card>
|
||||||
|
<h4>{{ item.title }}</h4>
|
||||||
|
<p>{{ item.desc }}</p>
|
||||||
|
</el-card>
|
||||||
|
</el-timeline-item>
|
||||||
|
</el-timeline>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import {
|
||||||
|
ArrowUp,
|
||||||
|
ArrowDown,
|
||||||
|
Setting,
|
||||||
|
Plus,
|
||||||
|
Upload,
|
||||||
|
Download,
|
||||||
|
} from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
// 模拟最近活动数据
|
||||||
|
const activities = ref([
|
||||||
|
{
|
||||||
|
time: '2023-10-01 10:30',
|
||||||
|
title: '系统版本更新',
|
||||||
|
desc: '新增数据导出功能，优化图表加载速度',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2023-09-28 16:45',
|
||||||
|
title: '用户量突破500',
|
||||||
|
desc: '本月新增用户数达到历史新高，环比增长12.5%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2023-09-20 09:15',
|
||||||
|
title: '营销活动上线',
|
||||||
|
desc: '开启“新用户注册送积分”活动，转化率提升8%',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 初始化折线图（流量趋势）
|
||||||
|
const lineChart = ref(null);
|
||||||
|
const initLineChart = () => {
|
||||||
|
const chart = echarts.init(lineChart.value as unknown as HTMLElement);
|
||||||
|
chart.setOption({
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07'],
|
||||||
|
},
|
||||||
|
yAxis: { type: 'value' },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: { color: '#409EFF' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化饼图（用户分布）
|
||||||
|
const pieChart = ref(null);
|
||||||
|
const initPieChart = () => {
|
||||||
|
if (pieChart.value) {
|
||||||
|
const chart = echarts.init(pieChart.value as HTMLElement);
|
||||||
|
chart.setOption({
|
||||||
|
tooltip: { trigger: 'item' },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
data: [
|
||||||
|
{ value: 35, name: 'Web端' },
|
||||||
|
{ value: 25, name: '移动端' },
|
||||||
|
{ value: 20, name: '小程序' },
|
||||||
|
{ value: 20, name: '其他' },
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
color: (params: any) => {
|
||||||
|
const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
|
||||||
|
return colors[params.dataIndex];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 页面挂载后初始化图表
|
||||||
|
onMounted(() => {
|
||||||
|
initLineChart();
|
||||||
|
initPieChart();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dashboard {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部导航 */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 数据概览卡片 */
|
||||||
|
.overview-cards {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
height: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-trend {
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图表区域 */
|
||||||
|
.charts-section {
|
||||||
|
margin: 0 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card {
|
||||||
|
height: 300px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 快捷操作与活动 */
|
||||||
|
.actions-section {
|
||||||
|
margin: 0 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-card,
|
||||||
|
.activity-card {
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-list {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-timeline {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-timeline-item__content {
|
||||||
|
padding-top: 5px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user