874 lines
20 KiB
Plaintext
874 lines
20 KiB
Plaintext
<!-- 管理端 - 个人中心 -->
|
|
<template>
|
|
<view class="admin-profile">
|
|
<!-- 管理员信息头部 -->
|
|
<view class="profile-header">
|
|
<image :src="adminInfo.avatar_url || '/static/default-avatar.png'" class="admin-avatar" @click="editProfile" />
|
|
<view class="admin-info">
|
|
<text class="admin-name">{{ adminInfo.nickname || adminInfo.phone }}</text>
|
|
<text class="admin-role">{{ getAdminRole() }}</text>
|
|
<view class="admin-stats">
|
|
<text class="stat-item">在线时长: {{ onlineHours }}h</text>
|
|
<text class="stat-item">权限等级: {{ adminLevel }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="settings-icon" @click="goToSettings">⚙️</view>
|
|
</view>
|
|
|
|
<!-- 系统概览 -->
|
|
<view class="system-overview">
|
|
<view class="section-title">系统概览</view>
|
|
<view class="overview-grid">
|
|
<view class="overview-card" @click="goToUsers">
|
|
<text class="card-icon">👥</text>
|
|
<text class="card-value">{{ systemStats.users }}</text>
|
|
<text class="card-label">用户总数</text>
|
|
<text class="card-change" :class="{ positive: systemStats.userGrowth > 0 }">
|
|
{{ systemStats.userGrowth > 0 ? '+' : '' }}{{ systemStats.userGrowth }}%
|
|
</text>
|
|
</view>
|
|
<view class="overview-card" @click="goToOrders">
|
|
<text class="card-icon">📋</text>
|
|
<text class="card-value">{{ systemStats.orders }}</text>
|
|
<text class="card-label">订单总数</text>
|
|
<text class="card-change" :class="{ positive: systemStats.orderGrowth > 0 }">
|
|
{{ systemStats.orderGrowth > 0 ? '+' : '' }}{{ systemStats.orderGrowth }}%
|
|
</text>
|
|
</view>
|
|
<view class="overview-card" @click="goToMerchants">
|
|
<text class="card-icon">🏪</text>
|
|
<text class="card-value">{{ systemStats.merchants }}</text>
|
|
<text class="card-label">商家总数</text>
|
|
<text class="card-change" :class="{ positive: systemStats.merchantGrowth > 0 }">
|
|
{{ systemStats.merchantGrowth > 0 ? '+' : '' }}{{ systemStats.merchantGrowth }}%
|
|
</text>
|
|
</view>
|
|
<view class="overview-card" @click="goToRevenue">
|
|
<text class="card-icon">💰</text>
|
|
<text class="card-value">¥{{ systemStats.revenue }}</text>
|
|
<text class="card-label">总营收</text>
|
|
<text class="card-change" :class="{ positive: systemStats.revenueGrowth > 0 }">
|
|
{{ systemStats.revenueGrowth > 0 ? '+' : '' }}{{ systemStats.revenueGrowth }}%
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 待处理事项 -->
|
|
<view class="pending-tasks">
|
|
<view class="section-title">待处理事项</view>
|
|
<view class="task-list">
|
|
<view class="task-item urgent" @click="goToAudit('merchant')">
|
|
<text class="task-icon">🏪</text>
|
|
<view class="task-info">
|
|
<text class="task-title">商家审核</text>
|
|
<text class="task-desc">{{ pendingTasks.merchantAudit }}个商家待审核</text>
|
|
</view>
|
|
<text class="task-badge urgent">{{ pendingTasks.merchantAudit }}</text>
|
|
</view>
|
|
<view class="task-item" @click="goToComplaints">
|
|
<text class="task-icon">📢</text>
|
|
<view class="task-info">
|
|
<text class="task-title">投诉处理</text>
|
|
<text class="task-desc">{{ pendingTasks.complaints }}个投诉待处理</text>
|
|
</view>
|
|
<text class="task-badge">{{ pendingTasks.complaints }}</text>
|
|
</view>
|
|
<view class="task-item" @click="goToRefunds">
|
|
<text class="task-icon">↩️</text>
|
|
<view class="task-info">
|
|
<text class="task-title">退款审核</text>
|
|
<text class="task-desc">{{ pendingTasks.refunds }}个退款待审核</text>
|
|
</view>
|
|
<text class="task-badge">{{ pendingTasks.refunds }}</text>
|
|
</view>
|
|
<view class="task-item" @click="goToReports">
|
|
<text class="task-icon">⚠️</text>
|
|
<view class="task-info">
|
|
<text class="task-title">举报处理</text>
|
|
<text class="task-desc">{{ pendingTasks.reports }}个举报待处理</text>
|
|
</view>
|
|
<text class="task-badge">{{ pendingTasks.reports }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 今日数据 -->
|
|
<view class="today-data">
|
|
<view class="section-title">今日数据</view>
|
|
<view class="data-grid">
|
|
<view class="data-card">
|
|
<text class="data-value">{{ todayData.newUsers }}</text>
|
|
<text class="data-label">新增用户</text>
|
|
</view>
|
|
<view class="data-card">
|
|
<text class="data-value">{{ todayData.newOrders }}</text>
|
|
<text class="data-label">新增订单</text>
|
|
</view>
|
|
<view class="data-card">
|
|
<text class="data-value">¥{{ todayData.revenue }}</text>
|
|
<text class="data-label">平台收入</text>
|
|
</view>
|
|
<view class="data-card">
|
|
<text class="data-value">{{ todayData.activeUsers }}</text>
|
|
<text class="data-label">活跃用户</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 系统健康状态 -->
|
|
<view class="system-health">
|
|
<view class="section-header">
|
|
<text class="section-title">系统健康状态</text>
|
|
<text class="view-more" @click="goToMonitor">详细监控 ></text>
|
|
</view>
|
|
<view class="health-grid">
|
|
<view class="health-item">
|
|
<text class="health-label">服务器状态</text>
|
|
<view class="health-status">
|
|
<view class="status-dot" :class="{ online: systemHealth.server }"></view>
|
|
<text class="status-text">{{ systemHealth.server ? '正常' : '异常' }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="health-item">
|
|
<text class="health-label">数据库状态</text>
|
|
<view class="health-status">
|
|
<view class="status-dot" :class="{ online: systemHealth.database }"></view>
|
|
<text class="status-text">{{ systemHealth.database ? '正常' : '异常' }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="health-item">
|
|
<text class="health-label">缓存状态</text>
|
|
<view class="health-status">
|
|
<view class="status-dot" :class="{ online: systemHealth.cache }"></view>
|
|
<text class="status-text">{{ systemHealth.cache ? '正常' : '异常' }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="health-item">
|
|
<text class="health-label">支付服务</text>
|
|
<view class="health-status">
|
|
<view class="status-dot" :class="{ online: systemHealth.payment }"></view>
|
|
<text class="status-text">{{ systemHealth.payment ? '正常' : '异常' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 最近操作记录 -->
|
|
<view class="recent-operations">
|
|
<view class="section-header">
|
|
<text class="section-title">最近操作</text>
|
|
<text class="view-all" @click="goToOperationLogs">查看全部 ></text>
|
|
</view>
|
|
<view v-if="recentOperations.length > 0" class="operation-list">
|
|
<view v-for="operation in recentOperations" :key="operation.id" class="operation-item">
|
|
<view class="operation-info">
|
|
<text class="operation-title">{{ operation.title }}</text>
|
|
<text class="operation-desc">{{ operation.description }}</text>
|
|
</view>
|
|
<text class="operation-time">{{ formatTime(operation.created_at) }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="no-data">
|
|
<text class="no-data-text">暂无操作记录</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快捷功能 -->
|
|
<view class="quick-functions">
|
|
<view class="section-title">快捷功能</view>
|
|
<view class="function-grid">
|
|
<view class="function-item" @click="goToUserManagement">
|
|
<text class="function-icon">👥</text>
|
|
<text class="function-label">用户管理</text>
|
|
</view>
|
|
<view class="function-item" @click="goToMerchantManagement">
|
|
<text class="function-icon">🏪</text>
|
|
<text class="function-label">商家管理</text>
|
|
</view>
|
|
<view class="function-item" @click="goToProductManagement">
|
|
<text class="function-icon">📦</text>
|
|
<text class="function-label">商品管理</text>
|
|
</view>
|
|
<view class="function-item" @click="goToOrderManagement">
|
|
<text class="function-icon">📋</text>
|
|
<text class="function-label">订单管理</text>
|
|
</view>
|
|
<view class="function-item" @click="goToFinanceManagement">
|
|
<text class="function-icon">💰</text>
|
|
<text class="function-label">财务管理</text>
|
|
</view>
|
|
<view class="function-item" @click="goToSystemSettings">
|
|
<text class="function-icon">⚙️</text>
|
|
<text class="function-label">系统设置</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能菜单 -->
|
|
<view class="function-menu">
|
|
<view class="menu-group">
|
|
<view class="menu-item" @click="goToReports">
|
|
<text class="menu-icon">📊</text>
|
|
<text class="menu-label">数据报表</text>
|
|
<text class="menu-arrow">></text>
|
|
</view>
|
|
<view class="menu-item" @click="goToAnnouncements">
|
|
<text class="menu-icon">📢</text>
|
|
<text class="menu-label">公告管理</text>
|
|
<text class="menu-arrow">></text>
|
|
</view>
|
|
<view class="menu-item" @click="goToPermissions">
|
|
<text class="menu-icon">🔐</text>
|
|
<text class="menu-label">权限管理</text>
|
|
<text class="menu-arrow">></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="menu-group">
|
|
<view class="menu-item" @click="goToHelp">
|
|
<text class="menu-icon">❓</text>
|
|
<text class="menu-label">帮助中心</text>
|
|
<text class="menu-arrow">></text>
|
|
</view>
|
|
<view class="menu-item" @click="goToFeedback">
|
|
<text class="menu-icon">💬</text>
|
|
<text class="menu-label">意见反馈</text>
|
|
<text class="menu-arrow">></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
import type { UserType, ApiResponseType } from '@/types/mall-types'
|
|
|
|
// 响应式数据
|
|
const adminInfo = ref({
|
|
id: '',
|
|
phone: '',
|
|
nickname: '系统管理员',
|
|
avatar_url: ''
|
|
} as UserType)
|
|
|
|
const onlineHours = ref(8.5)
|
|
const adminLevel = ref('超级管理员')
|
|
|
|
const systemStats = ref({
|
|
users: '12,568',
|
|
userGrowth: 12.5,
|
|
orders: '8,932',
|
|
orderGrowth: 8.3,
|
|
merchants: '1,234',
|
|
merchantGrowth: 5.2,
|
|
revenue: '1,256,789',
|
|
revenueGrowth: 15.8
|
|
})
|
|
|
|
const pendingTasks = ref({
|
|
merchantAudit: 8,
|
|
complaints: 15,
|
|
refunds: 12,
|
|
reports: 6
|
|
})
|
|
|
|
const todayData = ref({
|
|
newUsers: 156,
|
|
newOrders: 289,
|
|
revenue: '25,680',
|
|
activeUsers: 3456
|
|
})
|
|
|
|
const systemHealth = ref({
|
|
server: true,
|
|
database: true,
|
|
cache: true,
|
|
payment: true
|
|
})
|
|
|
|
const recentOperations = ref([
|
|
{
|
|
id: 'op001',
|
|
title: '商家审核通过',
|
|
description: '审核通过商家"时尚服饰专营店"',
|
|
created_at: '2024-12-01 14:30:00'
|
|
},
|
|
{
|
|
id: 'op002',
|
|
title: '处理用户投诉',
|
|
description: '处理订单#ORD20241201001投诉',
|
|
created_at: '2024-12-01 13:45:00'
|
|
},
|
|
{
|
|
id: 'op003',
|
|
title: '系统配置更新',
|
|
description: '更新了支付配置参数',
|
|
created_at: '2024-12-01 12:20:00'
|
|
}
|
|
])
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
loadAdminInfo()
|
|
loadSystemStats()
|
|
loadPendingTasks()
|
|
})
|
|
|
|
// 方法
|
|
function loadAdminInfo() {
|
|
// 模拟加载管理员信息
|
|
adminInfo.value = {
|
|
id: 'admin001',
|
|
phone: '13900000000',
|
|
email: 'admin@mall.com',
|
|
nickname: '超级管理员',
|
|
avatar_url: '/static/admin-avatar.png',
|
|
gender: 0,
|
|
user_type: 99,
|
|
status: 1,
|
|
created_at: '2024-01-01'
|
|
}
|
|
}
|
|
|
|
function loadSystemStats() {
|
|
// 模拟加载系统统计
|
|
// 实际应用中从API获取
|
|
}
|
|
|
|
function loadPendingTasks() {
|
|
// 模拟加载待处理任务
|
|
// 实际应用中从API获取
|
|
}
|
|
|
|
function getAdminRole(): string {
|
|
const roleMap = {
|
|
99: '超级管理员',
|
|
98: '系统管理员',
|
|
97: '运营管理员'
|
|
}
|
|
return roleMap[adminInfo.value.user_type] || '管理员'
|
|
}
|
|
|
|
function formatTime(dateStr: string): string {
|
|
const date = new Date(dateStr)
|
|
const now = new Date()
|
|
const diff = now.getTime() - date.getTime()
|
|
const hours = Math.floor(diff / (1000 * 60 * 60))
|
|
|
|
if (hours < 1) {
|
|
return '刚刚'
|
|
} else if (hours < 24) {
|
|
return `${hours}小时前`
|
|
} else {
|
|
return `${Math.floor(hours / 24)}天前`
|
|
}
|
|
}
|
|
|
|
// 导航方法
|
|
function editProfile() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/profile-edit'
|
|
})
|
|
}
|
|
|
|
function goToSettings() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/settings'
|
|
})
|
|
}
|
|
|
|
function goToUsers() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/users'
|
|
})
|
|
}
|
|
|
|
function goToOrders() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/orders'
|
|
})
|
|
}
|
|
|
|
function goToMerchants() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/merchants'
|
|
})
|
|
}
|
|
|
|
function goToRevenue() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/revenue'
|
|
})
|
|
}
|
|
|
|
function goToAudit(type: string) {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/admin/audit?type=${type}`
|
|
})
|
|
}
|
|
|
|
function goToComplaints() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/complaints'
|
|
})
|
|
}
|
|
|
|
function goToRefunds() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/refunds'
|
|
})
|
|
}
|
|
|
|
function goToReports() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/reports'
|
|
})
|
|
}
|
|
|
|
function goToMonitor() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/monitor'
|
|
})
|
|
}
|
|
|
|
function goToOperationLogs() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/operation-logs'
|
|
})
|
|
}
|
|
|
|
function goToUserManagement() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/user-management'
|
|
})
|
|
}
|
|
|
|
function goToMerchantManagement() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/merchant-management'
|
|
})
|
|
}
|
|
|
|
function goToProductManagement() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/product-management'
|
|
})
|
|
}
|
|
|
|
function goToOrderManagement() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/order-management'
|
|
})
|
|
}
|
|
|
|
function goToFinanceManagement() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/finance-management'
|
|
})
|
|
}
|
|
|
|
function goToSystemSettings() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/system-settings'
|
|
})
|
|
}
|
|
|
|
function goToAnnouncements() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/announcements'
|
|
})
|
|
}
|
|
|
|
function goToPermissions() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/admin/permissions'
|
|
})
|
|
}
|
|
|
|
function goToHelp() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/common/help'
|
|
})
|
|
}
|
|
|
|
function goToFeedback() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/common/feedback'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-profile {
|
|
padding: 0 0 120rpx 0;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.profile-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 40rpx 30rpx;
|
|
background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.admin-avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
margin-right: 30rpx;
|
|
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.admin-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.admin-name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.admin-role {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.admin-stats {
|
|
display: flex;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.stat-item {
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.settings-icon {
|
|
font-size: 36rpx;
|
|
color: white;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.system-overview, .pending-tasks, .today-data, .system-health, .recent-operations, .quick-functions, .function-menu {
|
|
margin: 20rpx 30rpx;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.view-all, .view-more {
|
|
font-size: 24rpx;
|
|
color: #a29bfe;
|
|
}
|
|
|
|
.overview-grid {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.overview-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 150rpx;
|
|
padding: 25rpx 15rpx;
|
|
background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.card-change {
|
|
font-size: 20rpx;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.card-change.positive {
|
|
color: #00b894;
|
|
}
|
|
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.task-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background: #f8f9ff;
|
|
border-radius: 15rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.task-item.urgent {
|
|
border-left: 6rpx solid #ff6b6b;
|
|
}
|
|
|
|
.task-icon {
|
|
font-size: 36rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.task-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.task-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.task-desc {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.task-badge {
|
|
background: #a29bfe;
|
|
color: white;
|
|
font-size: 20rpx;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 15rpx;
|
|
min-width: 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.task-badge.urgent {
|
|
background: #ff6b6b;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.data-grid {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.data-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 150rpx;
|
|
padding: 20rpx;
|
|
background: #f8f9ff;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.data-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #a29bfe;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.data-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.health-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.health-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background: #f8f9ff;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.health-label {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.health-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
background: #ff6b6b;
|
|
}
|
|
|
|
.status-dot.online {
|
|
background: #00b894;
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.operation-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.operation-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 20rpx;
|
|
background: #f8f9ff;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.operation-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.operation-title {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.operation-desc {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.operation-time {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.function-grid {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.function-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 140rpx;
|
|
padding: 25rpx 15rpx;
|
|
background: #f8f9ff;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.function-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.function-label {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.menu-group {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.menu-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 25rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.menu-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.menu-icon {
|
|
font-size: 36rpx;
|
|
width: 60rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
|
|
.menu-label {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.menu-arrow {
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 60rpx 0;
|
|
}
|
|
|
|
.no-data-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
</style>
|