857 lines
17 KiB
Vue
857 lines
17 KiB
Vue
<template>
|
|
<div class="dashboard">
|
|
<!-- 左侧导航栏 -->
|
|
<aside class="sidebar">
|
|
<div class="logo">
|
|
<div class="logo-icon"></div>
|
|
<span>LOGO</span>
|
|
</div>
|
|
<nav class="nav-menu">
|
|
<div class="nav-item active">
|
|
<el-icon><Grid /></el-icon>
|
|
<span>数据仪表台</span>
|
|
</div>
|
|
<div class="nav-item" @click="goToUsers">
|
|
<el-icon><User /></el-icon>
|
|
<span>会员管理</span>
|
|
</div>
|
|
<div class="nav-item" @click="goToOrders">
|
|
<el-icon><ShoppingCart /></el-icon>
|
|
<span>订单管理</span>
|
|
</div>
|
|
<div class="nav-item" @click="goToAPI">
|
|
<el-icon><Document /></el-icon>
|
|
<span>API管理</span>
|
|
</div>
|
|
<div class="nav-item" @click="goToTasks">
|
|
<el-icon><Document /></el-icon>
|
|
<span>生成任务记录</span>
|
|
</div>
|
|
<div class="nav-item" @click="goToSettings">
|
|
<el-icon><Setting /></el-icon>
|
|
<span>系统设置</span>
|
|
</div>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<div class="online-users">
|
|
当前在线用户: <span class="highlight">{{ systemStatus.onlineUsers }}/500</span>
|
|
</div>
|
|
<div class="system-uptime">
|
|
系统运行时间: <span class="highlight">{{ systemStatus.systemUptime }}</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 主内容区域 -->
|
|
<main class="main-content">
|
|
<!-- 顶部搜索栏 -->
|
|
<header class="top-header">
|
|
<div class="search-bar">
|
|
<el-icon class="search-icon"><Search /></el-icon>
|
|
<input type="text" placeholder="搜索你的想要的内容" class="search-input" />
|
|
</div>
|
|
<div class="header-actions">
|
|
<el-icon class="notification-icon"><Bell /></el-icon>
|
|
<div class="user-avatar">
|
|
<img src="/images/backgrounds/welcome.jpg" alt="用户头像" />
|
|
<el-icon class="dropdown-icon"><ArrowDown /></el-icon>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- KPI 卡片区域 -->
|
|
<section class="kpi-section">
|
|
<div class="kpi-card">
|
|
<div class="kpi-icon user-icon">
|
|
<el-icon><User /></el-icon>
|
|
</div>
|
|
<div class="kpi-content">
|
|
<div class="kpi-title">用户总数</div>
|
|
<div class="kpi-value">{{ formatNumber(dashboardData.totalUsers) }}</div>
|
|
<div class="kpi-trend positive">+12% 较上月同期</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kpi-card">
|
|
<div class="kpi-icon paid-user-icon">
|
|
<el-icon><User /></el-icon>
|
|
<div class="currency-symbol">¥</div>
|
|
</div>
|
|
<div class="kpi-content">
|
|
<div class="kpi-title">付费用户数</div>
|
|
<div class="kpi-value">{{ formatNumber(dashboardData.paidUsers) }}</div>
|
|
<div class="kpi-trend negative">-5% 较上月同期</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kpi-card">
|
|
<div class="kpi-icon revenue-icon">
|
|
<el-icon><Money /></el-icon>
|
|
</div>
|
|
<div class="kpi-content">
|
|
<div class="kpi-title">今日收入</div>
|
|
<div class="kpi-value">{{ formatCurrency(dashboardData.todayRevenue) }}</div>
|
|
<div class="kpi-trend positive">+15% 较上月同期</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 图表区域 -->
|
|
<section class="charts-section">
|
|
<!-- 日活用户趋势图 -->
|
|
<DailyActiveUsersChart />
|
|
|
|
<!-- 用户转化率图 -->
|
|
<div class="chart-card full-width">
|
|
<div class="chart-header">
|
|
<h3>用户转化率</h3>
|
|
<div class="year-selector">
|
|
<span>2025年</span>
|
|
<el-icon><ArrowDown /></el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="bar-chart">
|
|
<div class="bar" style="height: 15%;"></div>
|
|
<div class="bar" style="height: 25%;"></div>
|
|
<div class="bar" style="height: 20%;"></div>
|
|
<div class="bar" style="height: 30%;"></div>
|
|
<div class="bar" style="height: 18%;"></div>
|
|
<div class="bar" style="height: 22%;"></div>
|
|
<div class="bar" style="height: 28%;"></div>
|
|
<div class="bar" style="height: 35%;"></div>
|
|
<div class="bar active" style="height: 40%;"></div>
|
|
<div class="bar" style="height: 25%;"></div>
|
|
<div class="bar" style="height: 20%;"></div>
|
|
<div class="bar" style="height: 18%;"></div>
|
|
</div>
|
|
<div class="chart-x-axis">
|
|
<span>1月</span>
|
|
<span>2月</span>
|
|
<span>3月</span>
|
|
<span>4月</span>
|
|
<span>5月</span>
|
|
<span>6月</span>
|
|
<span>7月</span>
|
|
<span>8月</span>
|
|
<span>9月</span>
|
|
<span>10月</span>
|
|
<span>11月</span>
|
|
<span>12月</span>
|
|
</div>
|
|
<div class="chart-y-axis">
|
|
<span>20%</span>
|
|
<span>15%</span>
|
|
<span>10%</span>
|
|
<span>5%</span>
|
|
<span>0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { ElMessage } from 'element-plus'
|
|
import {
|
|
Grid,
|
|
User,
|
|
ShoppingCart,
|
|
Document,
|
|
Setting,
|
|
Search,
|
|
Bell,
|
|
ArrowDown,
|
|
Money
|
|
} from '@element-plus/icons-vue'
|
|
import * as dashboardAPI from '@/api/dashboard'
|
|
import DailyActiveUsersChart from '@/components/DailyActiveUsersChart.vue'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
// 数据状态
|
|
const loading = ref(false)
|
|
const selectedYear = ref('2024')
|
|
const dashboardData = ref({
|
|
totalUsers: 0,
|
|
paidUsers: 0,
|
|
todayRevenue: 0,
|
|
totalOrders: 0,
|
|
totalRevenue: 0,
|
|
monthRevenue: 0
|
|
})
|
|
|
|
const monthlyData = ref([])
|
|
const conversionData = ref({
|
|
totalUsers: 0,
|
|
paidUsers: 0,
|
|
conversionRate: 0,
|
|
membershipStats: []
|
|
})
|
|
|
|
const systemStatus = ref({
|
|
onlineUsers: 0,
|
|
systemUptime: '0小时0分',
|
|
databaseStatus: '正常',
|
|
serviceStatus: '运行中'
|
|
})
|
|
|
|
// 清理未使用的图表相关代码
|
|
|
|
// 导航功能
|
|
const goToUsers = () => {
|
|
router.push('/member-management')
|
|
}
|
|
|
|
const goToOrders = () => {
|
|
if (userStore.isAuthenticated) {
|
|
router.push('/orders')
|
|
} else {
|
|
ElMessage.warning('请先登录')
|
|
router.push('/login')
|
|
}
|
|
}
|
|
|
|
const goToAPI = () => {
|
|
router.push('/api-management')
|
|
}
|
|
|
|
const goToTasks = () => {
|
|
router.push('/generate-task-record')
|
|
}
|
|
|
|
const goToSettings = () => {
|
|
router.push('/system-settings')
|
|
}
|
|
|
|
// 加载仪表盘数据
|
|
const loadDashboardData = async () => {
|
|
try {
|
|
loading.value = true
|
|
|
|
// 并行加载所有数据
|
|
const [overviewRes, monthlyRes, conversionRes, statusRes] = await Promise.all([
|
|
dashboardAPI.getDashboardOverview(),
|
|
dashboardAPI.getMonthlyRevenue(selectedYear.value),
|
|
dashboardAPI.getConversionRate(),
|
|
dashboardAPI.getSystemStatus()
|
|
])
|
|
|
|
// 处理概览数据
|
|
if (overviewRes) {
|
|
dashboardData.value = {
|
|
totalUsers: overviewRes.totalUsers || 0,
|
|
paidUsers: overviewRes.paidUsers || 0,
|
|
todayRevenue: overviewRes.todayRevenue || 0,
|
|
totalOrders: overviewRes.totalOrders || 0,
|
|
totalRevenue: overviewRes.totalRevenue || 0,
|
|
monthRevenue: overviewRes.monthRevenue || 0
|
|
}
|
|
}
|
|
|
|
// 处理月度数据
|
|
if (monthlyRes && monthlyRes.monthlyData) {
|
|
monthlyData.value = monthlyRes.monthlyData
|
|
}
|
|
|
|
// 处理转化率数据
|
|
if (conversionRes) {
|
|
conversionData.value = {
|
|
totalUsers: conversionRes.totalUsers || 0,
|
|
paidUsers: conversionRes.paidUsers || 0,
|
|
conversionRate: conversionRes.conversionRate || 0,
|
|
membershipStats: conversionRes.membershipStats || []
|
|
}
|
|
}
|
|
|
|
// 处理系统状态
|
|
if (statusRes) {
|
|
systemStatus.value = {
|
|
onlineUsers: statusRes.onlineUsers || 0,
|
|
systemUptime: statusRes.systemUptime || '0小时0分',
|
|
databaseStatus: statusRes.databaseStatus || '正常',
|
|
serviceStatus: statusRes.serviceStatus || '运行中'
|
|
}
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('加载仪表盘数据失败:', error)
|
|
ElMessage.error('加载仪表盘数据失败')
|
|
|
|
// 使用默认数据作为后备
|
|
dashboardData.value = {
|
|
totalUsers: 10,
|
|
paidUsers: 8,
|
|
todayRevenue: 0,
|
|
totalOrders: 180,
|
|
totalRevenue: 0,
|
|
monthRevenue: 0
|
|
}
|
|
|
|
monthlyData.value = [
|
|
{ month: 1, revenue: 0, orderCount: 0 },
|
|
{ month: 2, revenue: 0, orderCount: 0 },
|
|
{ month: 3, revenue: 0, orderCount: 0 },
|
|
{ month: 4, revenue: 0, orderCount: 0 },
|
|
{ month: 5, revenue: 0, orderCount: 0 },
|
|
{ month: 6, revenue: 0, orderCount: 0 },
|
|
{ month: 7, revenue: 0, orderCount: 0 },
|
|
{ month: 8, revenue: 0, orderCount: 0 },
|
|
{ month: 9, revenue: 0, orderCount: 0 },
|
|
{ month: 10, revenue: 0, orderCount: 0 },
|
|
{ month: 11, revenue: 0, orderCount: 0 },
|
|
{ month: 12, revenue: 0, orderCount: 0 }
|
|
]
|
|
|
|
conversionData.value = {
|
|
totalUsers: 10,
|
|
paidUsers: 8,
|
|
conversionRate: 80,
|
|
membershipStats: []
|
|
}
|
|
|
|
systemStatus.value = {
|
|
onlineUsers: 50,
|
|
systemUptime: '48小时32分',
|
|
databaseStatus: '正常',
|
|
serviceStatus: '运行中'
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 格式化数字
|
|
const formatNumber = (num) => {
|
|
if (num >= 10000) {
|
|
return (num / 10000).toFixed(1) + '万'
|
|
}
|
|
return num.toLocaleString()
|
|
}
|
|
|
|
// 格式化金额
|
|
const formatCurrency = (amount) => {
|
|
return '¥' + amount.toLocaleString()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadDashboardData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background: #f8fafc;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
/* 左侧导航栏 */
|
|
.sidebar {
|
|
width: 320px;
|
|
background: white;
|
|
border-right: 1px solid #e2e8f0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 28px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #3b82f6;
|
|
border-radius: 4px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.logo span {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.nav-menu {
|
|
flex: 1;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 18px 24px;
|
|
margin-bottom: 6px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
color: #64748b;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: #f1f5f9;
|
|
color: #334155;
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: #eff6ff;
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.nav-item .el-icon {
|
|
margin-right: 16px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.nav-item span {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 0 32px 20px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.online-users,
|
|
.system-uptime {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
margin-bottom: 10px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.highlight {
|
|
color: #3b82f6;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* 主内容区域 */
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* 顶部搜索栏 */
|
|
.top-header {
|
|
background: white;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.search-bar {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
color: #94a3b8;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 300px;
|
|
padding: 8px 12px 8px 40px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
background: #f8fafc;
|
|
outline: none;
|
|
}
|
|
|
|
.search-input:focus {
|
|
border-color: #3b82f6;
|
|
background: white;
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.notification-icon {
|
|
font-size: 20px;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-avatar img {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.dropdown-icon {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
/* KPI 卡片区域 */
|
|
.kpi-section {
|
|
padding: 24px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
.kpi-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.kpi-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.kpi-icon .el-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.user-icon {
|
|
background: #fef3c7;
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.paid-user-icon {
|
|
background: #dbeafe;
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.paid-user-icon .currency-symbol {
|
|
position: absolute;
|
|
bottom: -2px;
|
|
right: -2px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #3b82f6;
|
|
color: white;
|
|
border-radius: 50%;
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.revenue-icon {
|
|
background: #fce7f3;
|
|
color: #ec4899;
|
|
}
|
|
|
|
.kpi-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.kpi-title {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.kpi-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.kpi-trend {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.kpi-trend.positive {
|
|
color: #059669;
|
|
}
|
|
|
|
.kpi-trend.negative {
|
|
color: #dc2626;
|
|
}
|
|
|
|
/* 图表区域 */
|
|
.charts-section {
|
|
padding: 0 24px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.chart-card.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.chart-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.chart-header h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
margin: 0;
|
|
}
|
|
|
|
.year-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #64748b;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
/* 日活用户趋势图 - SVG曲线图 */
|
|
.line-chart {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 200px;
|
|
margin-bottom: 20px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chart-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.chart-line-path {
|
|
stroke-dasharray: 1000;
|
|
stroke-dashoffset: 1000;
|
|
animation: drawLine 2s ease-in-out forwards;
|
|
}
|
|
|
|
.chart-dot {
|
|
opacity: 0;
|
|
animation: fadeInDots 0.5s ease-in-out forwards;
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.highlight-dot {
|
|
opacity: 0;
|
|
animation: highlightDot 0.5s ease-in-out forwards;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.highlight-ring {
|
|
opacity: 0;
|
|
animation: highlightRing 1s ease-in-out infinite;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.tooltip-group {
|
|
opacity: 0;
|
|
animation: fadeInTooltip 0.5s ease-in-out forwards;
|
|
animation-delay: 2.5s;
|
|
}
|
|
|
|
.tooltip-bg {
|
|
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
|
|
}
|
|
|
|
.tooltip-arrow {
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
/* 动画效果 */
|
|
@keyframes drawLine {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDots {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes highlightDot {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes highlightRing {
|
|
0%, 100% {
|
|
opacity: 0.2;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInTooltip {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 悬停效果 */
|
|
.chart-dot:hover {
|
|
r: 6;
|
|
fill: #2563eb;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.highlight-dot:hover {
|
|
r: 8;
|
|
fill: #2563eb;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.chart-x-axis {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.chart-y-axis {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
/* 用户转化率图 */
|
|
.bar-chart {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
height: 200px;
|
|
margin-bottom: 20px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.bar {
|
|
width: 20px;
|
|
background: #dbeafe;
|
|
border-radius: 2px 2px 0 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.bar.active {
|
|
background: #3b82f6;
|
|
}
|
|
|
|
.bar:hover {
|
|
background: #2563eb;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1024px) {
|
|
.kpi-section {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.nav-item {
|
|
white-space: nowrap;
|
|
margin-right: 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
display: none;
|
|
}
|
|
|
|
.search-input {
|
|
width: 200px;
|
|
}
|
|
|
|
.kpi-section {
|
|
padding: 16px;
|
|
}
|
|
|
|
.charts-section {
|
|
padding: 0 16px 16px;
|
|
}
|
|
}
|
|
</style>
|