befly-admin 3.5.31 → 3.5.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -32
- package/package.json +21 -21
- package/src/App.vue +3 -3
- package/src/components/DetailPanel.vue +6 -6
- package/src/layouts/default.vue +139 -24
- package/src/main.js +13 -21
- package/src/plugins/config.js +29 -0
- package/src/plugins/global.js +1 -1
- package/src/plugins/http.js +11 -19
- package/src/plugins/router.js +45 -0
- package/src/plugins/storage.js +5 -12
- package/src/styles/global.scss +1 -1
- package/src/types/auto-imports.d.ts +5 -10
- package/src/types/components.d.ts +0 -18
- package/src/types/typed-router.d.ts +87 -22
- package/src/types/unplugin-vue-router-client.d.ts +3 -0
- package/src/views/dashboard/index.vue +117 -0
- package/src/views/index2.vue +9 -6
- package/vite.config.js +6 -5
- package/src/config/index.js +0 -20
- package/src/router/index.js +0 -86
- package/src/utils/index.js +0 -130
- package/src/views/index3.vue +0 -707
package/src/views/index3.vue
DELETED
|
@@ -1,707 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="dashboard-container">
|
|
3
|
-
<div class="dashboard-header">
|
|
4
|
-
<div class="header-left">
|
|
5
|
-
<h1 class="title">欢迎回来，管理员</h1>
|
|
6
|
-
<p class="subtitle">这里是您的后台管理中心</p>
|
|
7
|
-
</div>
|
|
8
|
-
<div class="header-right">
|
|
9
|
-
<div class="date-info">
|
|
10
|
-
<span class="date">{{ currentDate }}</span>
|
|
11
|
-
<span class="time">{{ currentTime }}</span>
|
|
12
|
-
</div>
|
|
13
|
-
<div class="user-info">
|
|
14
|
-
<t-avatar :size="40" src="https://picsum.photos/id/1005/100/100"></t-avatar>
|
|
15
|
-
<span class="username">管理员</span>
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<!-- 统计卡片 -->
|
|
21
|
-
<div class="stats-grid">
|
|
22
|
-
<t-card class="stat-card">
|
|
23
|
-
<div class="stat-content">
|
|
24
|
-
<div class="stat-left">
|
|
25
|
-
<div class="stat-value">12,345</div>
|
|
26
|
-
<div class="stat-label">总用户数</div>
|
|
27
|
-
</div>
|
|
28
|
-
<div class="stat-right">
|
|
29
|
-
<ILucideUser class="stat-icon" size="24" />
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
<div class="stat-footer">
|
|
33
|
-
<span class="growth positive">+5.2% <ILucideChevronUp /></span>
|
|
34
|
-
<span class="period">较上月</span>
|
|
35
|
-
</div>
|
|
36
|
-
</t-card>
|
|
37
|
-
|
|
38
|
-
<t-card class="stat-card">
|
|
39
|
-
<div class="stat-content">
|
|
40
|
-
<div class="stat-left">
|
|
41
|
-
<div class="stat-value">¥98,765</div>
|
|
42
|
-
<div class="stat-label">总销售额</div>
|
|
43
|
-
</div>
|
|
44
|
-
<div class="stat-right">
|
|
45
|
-
<ILucideDollarSign class="stat-icon" size="24" />
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="stat-footer">
|
|
49
|
-
<span class="growth positive">+12.8% <ILucideChevronUp /></span>
|
|
50
|
-
<span class="period">较上月</span>
|
|
51
|
-
</div>
|
|
52
|
-
</t-card>
|
|
53
|
-
|
|
54
|
-
<t-card class="stat-card">
|
|
55
|
-
<div class="stat-content">
|
|
56
|
-
<div class="stat-left">
|
|
57
|
-
<div class="stat-value">456</div>
|
|
58
|
-
<div class="stat-label">今日订单</div>
|
|
59
|
-
</div>
|
|
60
|
-
<div class="stat-right">
|
|
61
|
-
<ILucideShoppingCart class="stat-icon" size="24" />
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
<div class="stat-footer">
|
|
65
|
-
<span class="growth negative">-2.1% <ILucideChevronDown /></span>
|
|
66
|
-
<span class="period">较昨日</span>
|
|
67
|
-
</div>
|
|
68
|
-
</t-card>
|
|
69
|
-
|
|
70
|
-
<t-card class="stat-card">
|
|
71
|
-
<div class="stat-content">
|
|
72
|
-
<div class="stat-left">
|
|
73
|
-
<div class="stat-value">789</div>
|
|
74
|
-
<div class="stat-label">活跃用户</div>
|
|
75
|
-
</div>
|
|
76
|
-
<div class="stat-right">
|
|
77
|
-
<ILucideBell class="stat-icon" size="24" />
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
<div class="stat-footer">
|
|
81
|
-
<span class="growth positive">+8.5% <ILucideChevronUp /></span>
|
|
82
|
-
<span class="period">较昨日</span>
|
|
83
|
-
</div>
|
|
84
|
-
</t-card>
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<!-- 图表区域 -->
|
|
88
|
-
<div class="charts-grid">
|
|
89
|
-
<t-card class="chart-card">
|
|
90
|
-
<template #header>
|
|
91
|
-
<div class="card-header">
|
|
92
|
-
<span>月度销售趋势</span>
|
|
93
|
-
<t-select v-model="salesPeriod" :style="{ width: '120px' }" size="small">
|
|
94
|
-
<t-option label="本月" value="month" />
|
|
95
|
-
<t-option label="季度" value="quarter" />
|
|
96
|
-
<t-option label="年度" value="year" />
|
|
97
|
-
</t-select>
|
|
98
|
-
</div>
|
|
99
|
-
</template>
|
|
100
|
-
<div class="chart-container">
|
|
101
|
-
<div ref="salesChartRef" class="chart" style="height: 300px"></div>
|
|
102
|
-
</div>
|
|
103
|
-
</t-card>
|
|
104
|
-
|
|
105
|
-
<t-card class="chart-card">
|
|
106
|
-
<template #header>
|
|
107
|
-
<div class="card-header">
|
|
108
|
-
<span>产品销售分布</span>
|
|
109
|
-
<t-button theme="primary" size="small">查看详情</t-button>
|
|
110
|
-
</div>
|
|
111
|
-
</template>
|
|
112
|
-
<div class="chart-container">
|
|
113
|
-
<div ref="productChartRef" class="chart" style="height: 300px"></div>
|
|
114
|
-
</div>
|
|
115
|
-
</t-card>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
<!-- 信息区域 -->
|
|
119
|
-
<div class="info-grid">
|
|
120
|
-
<t-card class="info-card">
|
|
121
|
-
<template #header>
|
|
122
|
-
<div class="card-header">
|
|
123
|
-
<span>最近活动</span>
|
|
124
|
-
<t-link theme="primary" size="small">查看全部</t-link>
|
|
125
|
-
</div>
|
|
126
|
-
</template>
|
|
127
|
-
<div class="activity-list">
|
|
128
|
-
<div class="activity-item" v-for="item in activities" :key="item.id">
|
|
129
|
-
<t-avatar :size="40" :src="item.avatar" class="activity-avatar"></t-avatar>
|
|
130
|
-
<div class="activity-content">
|
|
131
|
-
<div class="activity-text">
|
|
132
|
-
<strong>{{ item.user }}</strong> {{ item.action }}
|
|
133
|
-
<span class="activity-time">{{ item.time }}</span>
|
|
134
|
-
</div>
|
|
135
|
-
<div class="activity-desc">{{ item.description }}</div>
|
|
136
|
-
</div>
|
|
137
|
-
<t-tag :theme="item.status" size="small">{{ item.status }}</t-tag>
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
</t-card>
|
|
141
|
-
|
|
142
|
-
<t-card class="info-card">
|
|
143
|
-
<template #header>
|
|
144
|
-
<div class="card-header">
|
|
145
|
-
<span>任务进度</span>
|
|
146
|
-
<t-button theme="success" size="small">添加任务</t-button>
|
|
147
|
-
</div>
|
|
148
|
-
</template>
|
|
149
|
-
<div class="task-list">
|
|
150
|
-
<div class="task-item" v-for="task in tasks" :key="task.id">
|
|
151
|
-
<div class="task-header">
|
|
152
|
-
<span class="task-title">{{ task.title }}</span>
|
|
153
|
-
<span class="task-deadline">{{ task.deadline }}</span>
|
|
154
|
-
</div>
|
|
155
|
-
<div class="task-progress">
|
|
156
|
-
<t-progress :percentage="task.progress" :color="task.color" :stroke="8" />
|
|
157
|
-
</div>
|
|
158
|
-
<div class="task-meta">
|
|
159
|
-
<t-tag size="small">{{ task.assignee }}</t-tag>
|
|
160
|
-
<t-tag :theme="task.priority" size="small">{{ task.priority }}</t-tag>
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
163
|
-
</div>
|
|
164
|
-
</t-card>
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
</template>
|
|
168
|
-
|
|
169
|
-
<script setup lang="ts">
|
|
170
|
-
import { ref, onMounted, onUnmounted } from 'vue';
|
|
171
|
-
import { Card as TCard, Select as TSelect, Option as TOption, Button as TButton, Avatar as TAvatar, Tag as TTag, Progress as TProgress, Link as TLink } from 'tdesign-vue-next';
|
|
172
|
-
import ILucideUser from '~icons/lucide/user';
|
|
173
|
-
import ILucideDollarSign from '~icons/lucide/dollar-sign';
|
|
174
|
-
import ILucideShoppingCart from '~icons/lucide/shopping-cart';
|
|
175
|
-
import ILucideBell from '~icons/lucide/bell';
|
|
176
|
-
import ILucideChevronUp from '~icons/lucide/chevron-up';
|
|
177
|
-
import ILucideChevronDown from '~icons/lucide/chevron-down';
|
|
178
|
-
import * as echarts from 'echarts';
|
|
179
|
-
|
|
180
|
-
const currentDate = ref(new Date().toLocaleDateString('zh-CN'));
|
|
181
|
-
const currentTime = ref(new Date().toLocaleTimeString('zh-CN'));
|
|
182
|
-
|
|
183
|
-
// 时间更新
|
|
184
|
-
let timeInterval: number | null = null;
|
|
185
|
-
|
|
186
|
-
onMounted(() => {
|
|
187
|
-
timeInterval = window.setInterval(() => {
|
|
188
|
-
currentDate.value = new Date().toLocaleDateString('zh-CN');
|
|
189
|
-
currentTime.value = new Date().toLocaleTimeString('zh-CN');
|
|
190
|
-
}, 1000);
|
|
191
|
-
|
|
192
|
-
initSalesChart();
|
|
193
|
-
initProductChart();
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
onUnmounted(() => {
|
|
197
|
-
if (timeInterval) {
|
|
198
|
-
clearInterval(timeInterval);
|
|
199
|
-
}
|
|
200
|
-
});
|
|
201
|
-
|
|
202
|
-
// 销售图表
|
|
203
|
-
const salesChartRef = ref<HTMLElement | null>(null);
|
|
204
|
-
const salesPeriod = ref('month');
|
|
205
|
-
|
|
206
|
-
const initSalesChart = () => {
|
|
207
|
-
if (!salesChartRef.value) return;
|
|
208
|
-
|
|
209
|
-
const chart = echarts.init(salesChartRef.value);
|
|
210
|
-
|
|
211
|
-
const option = {
|
|
212
|
-
tooltip: {
|
|
213
|
-
trigger: 'axis',
|
|
214
|
-
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
215
|
-
borderColor: '#e0e0e0',
|
|
216
|
-
borderWidth: 1,
|
|
217
|
-
textStyle: { color: '#333' }
|
|
218
|
-
},
|
|
219
|
-
grid: {
|
|
220
|
-
left: '3%',
|
|
221
|
-
right: '4%',
|
|
222
|
-
bottom: '3%',
|
|
223
|
-
containLabel: true
|
|
224
|
-
},
|
|
225
|
-
xAxis: {
|
|
226
|
-
type: 'category',
|
|
227
|
-
boundaryGap: false,
|
|
228
|
-
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'],
|
|
229
|
-
axisLine: { lineStyle: { color: '#f0f0f0' } },
|
|
230
|
-
axisTick: { show: false }
|
|
231
|
-
},
|
|
232
|
-
yAxis: {
|
|
233
|
-
type: 'value',
|
|
234
|
-
axisLine: { show: false },
|
|
235
|
-
axisTick: { show: false },
|
|
236
|
-
splitLine: { lineStyle: { color: '#f0f0f0' } }
|
|
237
|
-
},
|
|
238
|
-
series: [
|
|
239
|
-
{
|
|
240
|
-
name: '销售额',
|
|
241
|
-
type: 'line',
|
|
242
|
-
smooth: true,
|
|
243
|
-
areaStyle: {
|
|
244
|
-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
245
|
-
{ offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
|
|
246
|
-
{ offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
|
|
247
|
-
])
|
|
248
|
-
},
|
|
249
|
-
lineStyle: { color: '#409EFF', width: 3 },
|
|
250
|
-
itemStyle: { color: '#409EFF' },
|
|
251
|
-
data: [12000, 21348, 18900, 23400, 29000, 33000, 27800, 25600, 34900, 31000, 38000, 36400, 40000, 38700, 42300]
|
|
252
|
-
}
|
|
253
|
-
]
|
|
254
|
-
};
|
|
255
|
-
|
|
256
|
-
chart.setOption(option);
|
|
257
|
-
|
|
258
|
-
// 响应式
|
|
259
|
-
window.addEventListener('resize', () => {
|
|
260
|
-
chart.resize();
|
|
261
|
-
});
|
|
262
|
-
};
|
|
263
|
-
|
|
264
|
-
// 产品图表
|
|
265
|
-
const productChartRef = ref<HTMLElement | null>(null);
|
|
266
|
-
|
|
267
|
-
const initProductChart = () => {
|
|
268
|
-
if (!productChartRef.value) return;
|
|
269
|
-
|
|
270
|
-
const chart = echarts.init(productChartRef.value);
|
|
271
|
-
|
|
272
|
-
const option = {
|
|
273
|
-
tooltip: {
|
|
274
|
-
trigger: 'axis',
|
|
275
|
-
axisPointer: { type: 'shadow' },
|
|
276
|
-
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
277
|
-
borderColor: '#e0e0e0',
|
|
278
|
-
borderWidth: 1,
|
|
279
|
-
textStyle: { color: '#333' }
|
|
280
|
-
},
|
|
281
|
-
grid: {
|
|
282
|
-
left: '3%',
|
|
283
|
-
right: '4%',
|
|
284
|
-
bottom: '3%',
|
|
285
|
-
containLabel: true
|
|
286
|
-
},
|
|
287
|
-
xAxis: {
|
|
288
|
-
type: 'category',
|
|
289
|
-
data: ['产品A', '产品B', '产品C', '产品D', '产品E', '产品F'],
|
|
290
|
-
axisLine: { lineStyle: { color: '#f0f0f0' } },
|
|
291
|
-
axisTick: { show: false }
|
|
292
|
-
},
|
|
293
|
-
yAxis: {
|
|
294
|
-
type: 'value',
|
|
295
|
-
axisLine: { show: false },
|
|
296
|
-
axisTick: { show: false },
|
|
297
|
-
splitLine: { lineStyle: { color: '#f0f0f0' } }
|
|
298
|
-
},
|
|
299
|
-
series: [
|
|
300
|
-
{
|
|
301
|
-
name: '销售量',
|
|
302
|
-
type: 'bar',
|
|
303
|
-
barWidth: '60%',
|
|
304
|
-
itemStyle: {
|
|
305
|
-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
306
|
-
{ offset: 0, color: '#67C23A' },
|
|
307
|
-
{ offset: 1, color: '#E6F7FF' }
|
|
308
|
-
]),
|
|
309
|
-
borderRadius: [4, 4, 0, 0]
|
|
310
|
-
},
|
|
311
|
-
data: [120, 200, 150, 80, 70, 110]
|
|
312
|
-
}
|
|
313
|
-
]
|
|
314
|
-
};
|
|
315
|
-
|
|
316
|
-
chart.setOption(option);
|
|
317
|
-
|
|
318
|
-
// 响应式
|
|
319
|
-
window.addEventListener('resize', () => {
|
|
320
|
-
chart.resize();
|
|
321
|
-
});
|
|
322
|
-
};
|
|
323
|
-
|
|
324
|
-
// 模拟数据
|
|
325
|
-
const activities = [
|
|
326
|
-
{
|
|
327
|
-
id: 1,
|
|
328
|
-
user: '张三',
|
|
329
|
-
action: '完成了订单',
|
|
330
|
-
time: '10分钟前',
|
|
331
|
-
description: '订单号：#20230415001，金额¥1299.00',
|
|
332
|
-
status: 'success',
|
|
333
|
-
avatar: 'https://picsum.photos/id/1005/100/100'
|
|
334
|
-
},
|
|
335
|
-
{
|
|
336
|
-
id: 2,
|
|
337
|
-
user: '李四',
|
|
338
|
-
action: '添加了新用户',
|
|
339
|
-
time: '30分钟前',
|
|
340
|
-
description: '用户邮箱：user@example.com，角色：管理员',
|
|
341
|
-
status: 'info',
|
|
342
|
-
avatar: 'https://picsum.photos/id/1006/100/100'
|
|
343
|
-
},
|
|
344
|
-
{
|
|
345
|
-
id: 3,
|
|
346
|
-
user: '王五',
|
|
347
|
-
action: '修改了产品',
|
|
348
|
-
time: '1小时前',
|
|
349
|
-
description: '产品名称：智能手表，价格调整为¥1599.00',
|
|
350
|
-
status: 'warning',
|
|
351
|
-
avatar: 'https://picsum.photos/id/1007/100/100'
|
|
352
|
-
},
|
|
353
|
-
{
|
|
354
|
-
id: 4,
|
|
355
|
-
user: '赵六',
|
|
356
|
-
action: '删除了日志',
|
|
357
|
-
time: '2小时前',
|
|
358
|
-
description: '删除了2023-04-14的系统日志',
|
|
359
|
-
status: 'danger',
|
|
360
|
-
avatar: 'https://picsum.photos/id/1008/100/100'
|
|
361
|
-
},
|
|
362
|
-
{
|
|
363
|
-
id: 5,
|
|
364
|
-
user: '孙七',
|
|
365
|
-
action: '发布了公告',
|
|
366
|
-
time: '3小时前',
|
|
367
|
-
description: '新功能上线通知：新增数据分析模块',
|
|
368
|
-
status: 'success',
|
|
369
|
-
avatar: 'https://picsum.photos/id/1009/100/100'
|
|
370
|
-
}
|
|
371
|
-
];
|
|
372
|
-
|
|
373
|
-
const tasks = [
|
|
374
|
-
{
|
|
375
|
-
id: 1,
|
|
376
|
-
title: '完成系统架构设计',
|
|
377
|
-
deadline: '2023-04-20',
|
|
378
|
-
progress: 85,
|
|
379
|
-
color: '#409EFF',
|
|
380
|
-
assignee: '张三',
|
|
381
|
-
priority: 'danger'
|
|
382
|
-
},
|
|
383
|
-
{
|
|
384
|
-
id: 2,
|
|
385
|
-
title: '开发用户管理模块',
|
|
386
|
-
deadline: '2023-04-25',
|
|
387
|
-
progress: 55,
|
|
388
|
-
color: '#67C23A',
|
|
389
|
-
assignee: '李四',
|
|
390
|
-
priority: 'warning'
|
|
391
|
-
},
|
|
392
|
-
{
|
|
393
|
-
id: 3,
|
|
394
|
-
title: '测试支付系统',
|
|
395
|
-
deadline: '2023-04-30',
|
|
396
|
-
progress: 30,
|
|
397
|
-
color: '#E6A23C',
|
|
398
|
-
assignee: '王五',
|
|
399
|
-
priority: 'success'
|
|
400
|
-
}
|
|
401
|
-
];
|
|
402
|
-
</script>
|
|
403
|
-
|
|
404
|
-
<style scoped>
|
|
405
|
-
.dashboard-container {
|
|
406
|
-
padding: 20px;
|
|
407
|
-
background-color: #f5f7fa;
|
|
408
|
-
min-height: 100vh;
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
.dashboard-header {
|
|
412
|
-
display: flex;
|
|
413
|
-
justify-content: space-between;
|
|
414
|
-
align-items: center;
|
|
415
|
-
margin-bottom: 24px;
|
|
416
|
-
padding: 20px;
|
|
417
|
-
background-color: white;
|
|
418
|
-
border-radius: 8px;
|
|
419
|
-
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.title {
|
|
423
|
-
font-size: 28px;
|
|
424
|
-
font-weight: 600;
|
|
425
|
-
margin: 0;
|
|
426
|
-
color: #303133;
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
.subtitle {
|
|
430
|
-
font-size: 14px;
|
|
431
|
-
color: #909399;
|
|
432
|
-
margin: 4px 0 0;
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
.date-info {
|
|
436
|
-
text-align: right;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.date {
|
|
440
|
-
display: block;
|
|
441
|
-
font-size: 18px;
|
|
442
|
-
font-weight: 500;
|
|
443
|
-
color: #303133;
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
.time {
|
|
447
|
-
display: block;
|
|
448
|
-
font-size: 14px;
|
|
449
|
-
color: #909399;
|
|
450
|
-
margin-top: 4px;
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
.user-info {
|
|
454
|
-
display: flex;
|
|
455
|
-
align-items: center;
|
|
456
|
-
margin-left: 32px;
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
.username {
|
|
460
|
-
margin-left: 12px;
|
|
461
|
-
font-size: 14px;
|
|
462
|
-
font-weight: 500;
|
|
463
|
-
color: #303133;
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
.stats-grid {
|
|
467
|
-
display: grid;
|
|
468
|
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
469
|
-
gap: 20px;
|
|
470
|
-
margin-bottom: 24px;
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
.stat-card {
|
|
474
|
-
border-radius: 12px;
|
|
475
|
-
border: none;
|
|
476
|
-
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
477
|
-
transition: all 0.3s ease;
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
.stat-card:hover {
|
|
481
|
-
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
|
482
|
-
transform: translateY(-2px);
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
.stat-content {
|
|
486
|
-
display: flex;
|
|
487
|
-
justify-content: space-between;
|
|
488
|
-
align-items: center;
|
|
489
|
-
padding: 20px;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
.stat-left {
|
|
493
|
-
flex: 1;
|
|
494
|
-
}
|
|
495
|
-
|
|
496
|
-
.stat-value {
|
|
497
|
-
font-size: 40px;
|
|
498
|
-
font-weight: 600;
|
|
499
|
-
color: #303133;
|
|
500
|
-
margin-bottom: 8px;
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
.stat-label {
|
|
504
|
-
font-size: 14px;
|
|
505
|
-
color: #909399;
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
.stat-right {
|
|
509
|
-
padding-left: 20px;
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
.stat-icon {
|
|
513
|
-
color: #409eff;
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
.stat-footer {
|
|
517
|
-
display: flex;
|
|
518
|
-
justify-content: space-between;
|
|
519
|
-
align-items: center;
|
|
520
|
-
padding: 12px 20px;
|
|
521
|
-
border-top: 1px solid #f0f0f0;
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
.growth {
|
|
525
|
-
font-size: 14px;
|
|
526
|
-
font-weight: 500;
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
.growth.positive {
|
|
530
|
-
color: #67c23a;
|
|
531
|
-
}
|
|
532
|
-
|
|
533
|
-
.growth.negative {
|
|
534
|
-
color: #f56c6c;
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
.period {
|
|
538
|
-
font-size: 12px;
|
|
539
|
-
color: #909399;
|
|
540
|
-
}
|
|
541
|
-
|
|
542
|
-
.charts-grid {
|
|
543
|
-
display: grid;
|
|
544
|
-
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
|
545
|
-
gap: 20px;
|
|
546
|
-
margin-bottom: 24px;
|
|
547
|
-
}
|
|
548
|
-
|
|
549
|
-
.info-grid {
|
|
550
|
-
display: grid;
|
|
551
|
-
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
552
|
-
gap: 20px;
|
|
553
|
-
}
|
|
554
|
-
|
|
555
|
-
.chart-card,
|
|
556
|
-
.info-card {
|
|
557
|
-
border-radius: 12px;
|
|
558
|
-
border: none;
|
|
559
|
-
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
.card-header {
|
|
563
|
-
display: flex;
|
|
564
|
-
justify-content: space-between;
|
|
565
|
-
align-items: center;
|
|
566
|
-
font-size: 16px;
|
|
567
|
-
font-weight: 600;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
.chart-container {
|
|
571
|
-
padding: 10px 0;
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
.activity-list {
|
|
575
|
-
max-height: 350px;
|
|
576
|
-
overflow-y: auto;
|
|
577
|
-
}
|
|
578
|
-
|
|
579
|
-
.activity-item {
|
|
580
|
-
display: flex;
|
|
581
|
-
align-items: flex-start;
|
|
582
|
-
padding: 16px 0;
|
|
583
|
-
border-bottom: 1px solid #f0f0f0;
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
.activity-item:last-child {
|
|
587
|
-
border-bottom: none;
|
|
588
|
-
}
|
|
589
|
-
|
|
590
|
-
.activity-avatar {
|
|
591
|
-
margin-right: 12px;
|
|
592
|
-
flex-shrink: 0;
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
.activity-content {
|
|
596
|
-
flex: 1;
|
|
597
|
-
min-width: 0;
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
.activity-text {
|
|
601
|
-
display: flex;
|
|
602
|
-
justify-content: space-between;
|
|
603
|
-
align-items: center;
|
|
604
|
-
margin-bottom: 4px;
|
|
605
|
-
}
|
|
606
|
-
|
|
607
|
-
.activity-time {
|
|
608
|
-
font-size: 12px;
|
|
609
|
-
color: #909399;
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
.activity-desc {
|
|
613
|
-
font-size: 13px;
|
|
614
|
-
color: #606266;
|
|
615
|
-
line-height: 1.4;
|
|
616
|
-
}
|
|
617
|
-
|
|
618
|
-
.task-list {
|
|
619
|
-
padding: 10px 0;
|
|
620
|
-
}
|
|
621
|
-
|
|
622
|
-
.task-item {
|
|
623
|
-
margin-bottom: 24px;
|
|
624
|
-
}
|
|
625
|
-
|
|
626
|
-
.task-item:last-child {
|
|
627
|
-
margin-bottom: 0;
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
.task-header {
|
|
631
|
-
display: flex;
|
|
632
|
-
justify-content: space-between;
|
|
633
|
-
align-items: center;
|
|
634
|
-
margin-bottom: 12px;
|
|
635
|
-
}
|
|
636
|
-
|
|
637
|
-
.task-title {
|
|
638
|
-
font-size: 14px;
|
|
639
|
-
font-weight: 500;
|
|
640
|
-
color: #303133;
|
|
641
|
-
}
|
|
642
|
-
|
|
643
|
-
.task-deadline {
|
|
644
|
-
font-size: 12px;
|
|
645
|
-
color: #909399;
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
.task-progress {
|
|
649
|
-
margin-bottom: 12px;
|
|
650
|
-
}
|
|
651
|
-
|
|
652
|
-
.task-meta {
|
|
653
|
-
display: flex;
|
|
654
|
-
gap: 8px;
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
/* 响应式设计 */
|
|
658
|
-
@media (max-width: 960px) {
|
|
659
|
-
.dashboard-header {
|
|
660
|
-
flex-direction: column;
|
|
661
|
-
align-items: flex-start;
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
.header-right {
|
|
665
|
-
display: flex;
|
|
666
|
-
justify-content: space-between;
|
|
667
|
-
width: 100%;
|
|
668
|
-
margin-top: 16px;
|
|
669
|
-
}
|
|
670
|
-
|
|
671
|
-
.stats-grid {
|
|
672
|
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
673
|
-
}
|
|
674
|
-
|
|
675
|
-
.charts-grid {
|
|
676
|
-
grid-template-columns: 1fr;
|
|
677
|
-
}
|
|
678
|
-
|
|
679
|
-
.info-grid {
|
|
680
|
-
grid-template-columns: 1fr;
|
|
681
|
-
}
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
@media (max-width: 576px) {
|
|
685
|
-
.dashboard-container {
|
|
686
|
-
padding: 10px;
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
.title {
|
|
690
|
-
font-size: 22px;
|
|
691
|
-
}
|
|
692
|
-
|
|
693
|
-
.stats-grid {
|
|
694
|
-
grid-template-columns: repeat(2, 1fr);
|
|
695
|
-
gap: 12px;
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
.stat-value {
|
|
699
|
-
font-size: 24px;
|
|
700
|
-
}
|
|
701
|
-
|
|
702
|
-
.activity-item {
|
|
703
|
-
flex-direction: column;
|
|
704
|
-
align-items: flex-start;
|
|
705
|
-
}
|
|
706
|
-
}
|
|
707
|
-
</style>
|