945 lines
22 KiB
Plaintext
945 lines
22 KiB
Plaintext
<!-- 数据分析端 - 个人中心 -->
|
|
<template>
|
|
<view class="analytics-profile">
|
|
<!-- 分析师信息头部 -->
|
|
<view class="profile-header">
|
|
<image :src="analystInfo.avatar_url || '/static/default-avatar.png'" class="analyst-avatar" @click="editProfile" />
|
|
<view class="analyst-info">
|
|
<text class="analyst-name">{{ analystInfo.nickname || analystInfo.phone }}</text>
|
|
<text class="analyst-role">{{ getAnalystRole() }}</text>
|
|
<view class="analyst-stats">
|
|
<text class="stat-item">工作经验: {{ workExperience }}年</text>
|
|
<text class="stat-item">专业领域: {{ expertise }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="settings-icon" @click="goToSettings">⚙️</view>
|
|
</view>
|
|
|
|
<!-- 数据概览 -->
|
|
<view class="data-overview">
|
|
<view class="section-title">数据概览</view>
|
|
<view class="overview-cards">
|
|
<view class="overview-card" @click="goToReports('sales')">
|
|
<text class="card-icon">💰</text>
|
|
<text class="card-title">销售数据</text>
|
|
<text class="card-value">¥{{ overviewData.totalSales }}</text>
|
|
<text class="card-change positive">+{{ overviewData.salesGrowth }}%</text>
|
|
</view>
|
|
<view class="overview-card" @click="goToReports('users')">
|
|
<text class="card-icon">👥</text>
|
|
<text class="card-title">用户增长</text>
|
|
<text class="card-value">{{ overviewData.totalUsers }}</text>
|
|
<text class="card-change positive">+{{ overviewData.userGrowth }}%</text>
|
|
</view>
|
|
<view class="overview-card" @click="goToReports('orders')">
|
|
<text class="card-icon">📋</text>
|
|
<text class="card-title">订单量</text>
|
|
<text class="card-value">{{ overviewData.totalOrders }}</text>
|
|
<text class="card-change" :class="{ positive: overviewData.orderGrowth > 0 }">
|
|
{{ overviewData.orderGrowth > 0 ? '+' : '' }}{{ overviewData.orderGrowth }}%
|
|
</text>
|
|
</view>
|
|
<view class="overview-card" @click="goToReports('conversion')">
|
|
<text class="card-icon">📈</text>
|
|
<text class="card-title">转化率</text>
|
|
<text class="card-value">{{ overviewData.conversionRate }}%</text>
|
|
<text class="card-change positive">+{{ overviewData.conversionGrowth }}%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 报表管理 -->
|
|
<view class="report-management">
|
|
<view class="section-title">报表管理</view>
|
|
<view class="report-tabs">
|
|
<view class="report-tab" @click="goToReports('all')">
|
|
<text class="tab-icon">📊</text>
|
|
<text class="tab-text">全部报表</text>
|
|
<text v-if="reportCounts.total > 0" class="tab-badge">{{ reportCounts.total }}</text>
|
|
</view>
|
|
<view class="report-tab" @click="goToReports('pending')">
|
|
<text class="tab-icon">⏳</text>
|
|
<text class="tab-text">待生成</text>
|
|
<text v-if="reportCounts.pending > 0" class="tab-badge alert">{{ reportCounts.pending }}</text>
|
|
</view>
|
|
<view class="report-tab" @click="goToReports('scheduled')">
|
|
<text class="tab-icon">📅</text>
|
|
<text class="tab-text">定时报表</text>
|
|
<text v-if="reportCounts.scheduled > 0" class="tab-badge">{{ reportCounts.scheduled }}</text>
|
|
</view>
|
|
<view class="report-tab" @click="goToReports('shared')">
|
|
<text class="tab-icon">🔗</text>
|
|
<text class="tab-text">共享报表</text>
|
|
<text v-if="reportCounts.shared > 0" class="tab-badge">{{ reportCounts.shared }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 今日数据洞察 -->
|
|
<view class="today-insights">
|
|
<view class="section-title">今日洞察</view>
|
|
<view class="insight-grid">
|
|
<view class="insight-card">
|
|
<text class="insight-icon">🔥</text>
|
|
<text class="insight-title">热销商品</text>
|
|
<text class="insight-value">{{ todayInsights.hotProduct }}</text>
|
|
<text class="insight-desc">销量同比增长156%</text>
|
|
</view>
|
|
<view class="insight-card">
|
|
<text class="insight-icon">⚡</text>
|
|
<text class="insight-title">流量峰值</text>
|
|
<text class="insight-value">{{ todayInsights.peakTraffic }}</text>
|
|
<text class="insight-desc">14:30达到峰值</text>
|
|
</view>
|
|
<view class="insight-card">
|
|
<text class="insight-icon">🎯</text>
|
|
<text class="insight-title">转化异常</text>
|
|
<text class="insight-value">{{ todayInsights.conversionAnomaly }}</text>
|
|
<text class="insight-desc">需要关注</text>
|
|
</view>
|
|
<view class="insight-card">
|
|
<text class="insight-icon">📱</text>
|
|
<text class="insight-title">移动端占比</text>
|
|
<text class="insight-value">{{ todayInsights.mobileRatio }}%</text>
|
|
<text class="insight-desc">持续增长</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 最近生成的报表 -->
|
|
<view class="recent-reports">
|
|
<view class="section-header">
|
|
<text class="section-title">最近报表</text>
|
|
<text class="view-all" @click="goToReports('all')">查看全部 ></text>
|
|
</view>
|
|
<view v-if="recentReports.length > 0" class="report-list">
|
|
<view v-for="report in recentReports" :key="report.id" class="report-item" @click="viewReportDetail(report.id)">
|
|
<view class="report-icon">
|
|
<text class="icon-text">📊</text>
|
|
</view>
|
|
<view class="report-info">
|
|
<text class="report-title">{{ report.title }}</text>
|
|
<text class="report-desc">{{ report.description }}</text>
|
|
<text class="report-time">{{ formatTime(report.created_at) }}</text>
|
|
</view>
|
|
<view class="report-status">
|
|
<text class="status-text" :class="'status-' + report.status">{{ getReportStatusText(report.status) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="no-data">
|
|
<text class="no-data-text">暂无最近报表</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数据趋势图表 -->
|
|
<view class="trend-chart">
|
|
<view class="section-header">
|
|
<text class="section-title">数据趋势</text>
|
|
<view class="chart-controls">
|
|
<text class="control-btn" :class="{ active: trendPeriod === 'week' }" @click="changeTrendPeriod('week')">周</text>
|
|
<text class="control-btn" :class="{ active: trendPeriod === 'month' }" @click="changeTrendPeriod('month')">月</text>
|
|
<text class="control-btn" :class="{ active: trendPeriod === 'quarter' }" @click="changeTrendPeriod('quarter')">季</text>
|
|
</view>
|
|
</view>
|
|
<view class="chart-container">
|
|
<view class="chart-legend">
|
|
<view class="legend-item">
|
|
<view class="legend-color sales"></view>
|
|
<text class="legend-text">销售额</text>
|
|
</view>
|
|
<view class="legend-item">
|
|
<view class="legend-color orders"></view>
|
|
<text class="legend-text">订单量</text>
|
|
</view>
|
|
</view>
|
|
<view class="chart-area">
|
|
<view class="chart-bars">
|
|
<view v-for="(data, index) in trendData" :key="index" class="bar-group">
|
|
<view class="bar sales" :style="{ height: (data.sales / maxSales * 100) + '%' }"></view>
|
|
<view class="bar orders" :style="{ height: (data.orders / maxOrders * 100) + '%' }"></view>
|
|
<text class="bar-label">{{ data.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分析工具 -->
|
|
<view class="analysis-tools">
|
|
<view class="section-title">分析工具</view>
|
|
<view class="tool-grid">
|
|
<view class="tool-item" @click="goToTool('dashboard')">
|
|
<text class="tool-icon">📊</text>
|
|
<text class="tool-label">数据看板</text>
|
|
</view>
|
|
<view class="tool-item" @click="goToTool('funnel')">
|
|
<text class="tool-icon">🔽</text>
|
|
<text class="tool-label">转化漏斗</text>
|
|
</view>
|
|
<view class="tool-item" @click="goToTool('cohort')">
|
|
<text class="tool-icon">👥</text>
|
|
<text class="tool-label">用户留存</text>
|
|
</view>
|
|
<view class="tool-item" @click="goToTool('attribution')">
|
|
<text class="tool-icon">🎯</text>
|
|
<text class="tool-label">归因分析</text>
|
|
</view>
|
|
<view class="tool-item" @click="goToTool('segmentation')">
|
|
<text class="tool-icon">🔍</text>
|
|
<text class="tool-label">用户分群</text>
|
|
</view>
|
|
<view class="tool-item" @click="goToTool('prediction')">
|
|
<text class="tool-icon">🔮</text>
|
|
<text class="tool-label">预测分析</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能菜单 -->
|
|
<view class="function-menu">
|
|
<view class="menu-group">
|
|
<view class="menu-item" @click="goToDataSource">
|
|
<text class="menu-icon">🗄️</text>
|
|
<text class="menu-label">数据源管理</text>
|
|
<text class="menu-arrow">></text>
|
|
</view>
|
|
<view class="menu-item" @click="goToAlerts">
|
|
<text class="menu-icon">🚨</text>
|
|
<text class="menu-label">数据预警</text>
|
|
<text class="menu-arrow">></text>
|
|
</view>
|
|
<view class="menu-item" @click="goToExport">
|
|
<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, computed } from 'vue'
|
|
import type { UserType, ApiResponseType } from '@/types/mall-types'
|
|
|
|
// 报表类型定义
|
|
type ReportType = {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
status: number
|
|
created_at: string
|
|
}
|
|
|
|
// 响应式数据
|
|
const analystInfo = ref({
|
|
id: '',
|
|
phone: '',
|
|
nickname: '数据分析师',
|
|
avatar_url: ''
|
|
} as UserType)
|
|
|
|
const workExperience = ref(5)
|
|
const expertise = ref('电商数据')
|
|
|
|
const overviewData = ref({
|
|
totalSales: '2,568,900',
|
|
salesGrowth: 15.6,
|
|
totalUsers: '48,392',
|
|
userGrowth: 12.3,
|
|
totalOrders: '15,678',
|
|
orderGrowth: -3.2,
|
|
conversionRate: 4.8,
|
|
conversionGrowth: 0.5
|
|
})
|
|
|
|
const reportCounts = ref({
|
|
total: 0,
|
|
pending: 0,
|
|
scheduled: 0,
|
|
shared: 0
|
|
})
|
|
|
|
const todayInsights = ref({
|
|
hotProduct: 'iPhone 15',
|
|
peakTraffic: '15,680',
|
|
conversionAnomaly: '下降12%',
|
|
mobileRatio: 78.5
|
|
})
|
|
|
|
const recentReports = ref([] as Array<ReportType>)
|
|
|
|
const trendPeriod = ref('week')
|
|
const trendData = ref([
|
|
{ label: '周一', sales: 125000, orders: 856 },
|
|
{ label: '周二', sales: 148000, orders: 924 },
|
|
{ label: '周三', sales: 167000, orders: 1053 },
|
|
{ label: '周四', sales: 142000, orders: 892 },
|
|
{ label: '周五', sales: 189000, orders: 1284 },
|
|
{ label: '周六', sales: 234000, orders: 1567 },
|
|
{ label: '周日', sales: 198000, orders: 1345 }
|
|
])
|
|
|
|
// 计算属性
|
|
const maxSales = computed(() => {
|
|
return Math.max(...trendData.value.map(item => item.sales))
|
|
})
|
|
|
|
const maxOrders = computed(() => {
|
|
return Math.max(...trendData.value.map(item => item.orders))
|
|
})
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
loadAnalystInfo()
|
|
loadReportCounts()
|
|
loadRecentReports()
|
|
})
|
|
|
|
// 方法
|
|
function loadAnalystInfo() {
|
|
// 模拟加载分析师信息
|
|
analystInfo.value = {
|
|
id: 'analyst001',
|
|
phone: '13777777777',
|
|
email: 'analyst@mall.com',
|
|
nickname: '数据分析专家',
|
|
avatar_url: '/static/analyst-avatar.png',
|
|
gender: 0,
|
|
user_type: 3,
|
|
status: 1,
|
|
created_at: '2024-01-01'
|
|
}
|
|
}
|
|
|
|
function loadReportCounts() {
|
|
// 模拟加载报表统计
|
|
reportCounts.value = {
|
|
total: 156,
|
|
pending: 5,
|
|
scheduled: 12,
|
|
shared: 23
|
|
}
|
|
}
|
|
|
|
function loadRecentReports() {
|
|
// 模拟加载最近报表
|
|
recentReports.value = [
|
|
{
|
|
id: 'report001',
|
|
title: '11月销售业绩分析报告',
|
|
description: '月度销售数据深度分析，包含渠道、品类、地区维度',
|
|
status: 2,
|
|
created_at: '2024-12-01 14:30:00'
|
|
},
|
|
{
|
|
id: 'report002',
|
|
title: '用户行为画像分析',
|
|
description: '基于用户购买行为的精准画像分析',
|
|
status: 1,
|
|
created_at: '2024-12-01 10:20:00'
|
|
},
|
|
{
|
|
id: 'report003',
|
|
title: '商品销售排行榜',
|
|
description: '热销商品TOP100及趋势分析',
|
|
status: 2,
|
|
created_at: '2024-11-30 16:45:00'
|
|
}
|
|
]
|
|
}
|
|
|
|
function getAnalystRole(): string {
|
|
return '高级数据分析师'
|
|
}
|
|
|
|
function getReportStatusText(status: number): string {
|
|
const statusMap = {
|
|
1: '生成中',
|
|
2: '已完成',
|
|
3: '已发布',
|
|
4: '已过期'
|
|
}
|
|
return statusMap[status] || '未知'
|
|
}
|
|
|
|
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 changeTrendPeriod(period: string) {
|
|
trendPeriod.value = period
|
|
|
|
// 根据时间周期更新数据
|
|
if (period === 'month') {
|
|
trendData.value = [
|
|
{ label: '1月', sales: 2850000, orders: 18560 },
|
|
{ label: '2月', sales: 2140000, orders: 14920 },
|
|
{ label: '3月', sales: 3250000, orders: 21530 },
|
|
{ label: '4月', sales: 2980000, orders: 19420 },
|
|
{ label: '5月', sales: 3650000, orders: 24840 },
|
|
{ label: '6月', sales: 3420000, orders: 22670 }
|
|
]
|
|
} else if (period === 'quarter') {
|
|
trendData.value = [
|
|
{ label: 'Q1', sales: 8240000, orders: 55010 },
|
|
{ label: 'Q2', sales: 10050000, orders: 66930 },
|
|
{ label: 'Q3', sales: 11200000, orders: 74520 },
|
|
{ label: 'Q4', sales: 9850000, orders: 65840 }
|
|
]
|
|
} else {
|
|
// 默认周数据
|
|
trendData.value = [
|
|
{ label: '周一', sales: 125000, orders: 856 },
|
|
{ label: '周二', sales: 148000, orders: 924 },
|
|
{ label: '周三', sales: 167000, orders: 1053 },
|
|
{ label: '周四', sales: 142000, orders: 892 },
|
|
{ label: '周五', sales: 189000, orders: 1284 },
|
|
{ label: '周六', sales: 234000, orders: 1567 },
|
|
{ label: '周日', sales: 198000, orders: 1345 }
|
|
]
|
|
}
|
|
}
|
|
|
|
function viewReportDetail(reportId: string) {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/analytics/report-detail?id=${reportId}`
|
|
})
|
|
}
|
|
|
|
// 导航方法
|
|
function editProfile() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/analytics/profile-edit'
|
|
})
|
|
}
|
|
|
|
function goToSettings() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/analytics/settings'
|
|
})
|
|
}
|
|
|
|
function goToReports(type: string) {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/analytics/reports?type=${type}`
|
|
})
|
|
}
|
|
|
|
function goToTool(tool: string) {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/analytics/tools/${tool}`
|
|
})
|
|
}
|
|
|
|
function goToDataSource() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/analytics/data-source'
|
|
})
|
|
}
|
|
|
|
function goToAlerts() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/analytics/alerts'
|
|
})
|
|
}
|
|
|
|
function goToExport() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/analytics/export'
|
|
})
|
|
}
|
|
|
|
function goToHelp() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/common/help'
|
|
})
|
|
}
|
|
|
|
function goToFeedback() {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/common/feedback'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.analytics-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, #fd79a8 0%, #e84393 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.analyst-avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
margin-right: 30rpx;
|
|
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.analyst-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.analyst-name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.analyst-role {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.analyst-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;
|
|
}
|
|
|
|
.data-overview, .report-management, .today-insights, .recent-reports, .trend-chart, .analysis-tools, .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 {
|
|
font-size: 24rpx;
|
|
color: #fd79a8;
|
|
}
|
|
|
|
.overview-cards {
|
|
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, #ffe8f0 0%, #fdd8e8 100%);
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.card-change {
|
|
font-size: 20rpx;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.card-change.positive {
|
|
color: #00b894;
|
|
}
|
|
|
|
.report-tabs {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.report-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.tab-badge {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: 20rpx;
|
|
background: #ff6b6b;
|
|
color: white;
|
|
font-size: 20rpx;
|
|
padding: 4rpx 8rpx;
|
|
border-radius: 10rpx;
|
|
min-width: 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.tab-badge.alert {
|
|
background: #ff4757;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.insight-grid {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.insight-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 150rpx;
|
|
padding: 25rpx 15rpx;
|
|
background: #ffe8f0;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.insight-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.insight-title {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.insight-value {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #fd79a8;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.insight-desc {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
|
|
.report-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.report-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 25rpx;
|
|
background: #f8f9ff;
|
|
border-radius: 15rpx;
|
|
border-left: 6rpx solid #fd79a8;
|
|
}
|
|
|
|
.report-icon {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.icon-text {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.report-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.report-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.report-desc {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.report-time {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.report-status {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 22rpx;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 20rpx;
|
|
background: #e3f2fd;
|
|
color: #1976d2;
|
|
}
|
|
|
|
.status-1 {
|
|
background: #fff3e0;
|
|
color: #f57c00;
|
|
}
|
|
|
|
.status-2 {
|
|
background: #e8f5e8;
|
|
color: #388e3c;
|
|
}
|
|
|
|
.chart-controls {
|
|
display: flex;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.control-btn {
|
|
padding: 10rpx 20rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
background: #f0f0f0;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.control-btn.active {
|
|
background: #fd79a8;
|
|
color: white;
|
|
}
|
|
|
|
.chart-container {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.chart-legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.legend-color.sales {
|
|
background: #fd79a8;
|
|
}
|
|
|
|
.legend-color.orders {
|
|
background: #74b9ff;
|
|
}
|
|
|
|
.legend-text {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.chart-area {
|
|
height: 300rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.chart-bars {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
height: 250rpx;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.bar-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.bar {
|
|
width: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
min-height: 10rpx;
|
|
}
|
|
|
|
.bar.sales {
|
|
background: #fd79a8;
|
|
margin-right: 5rpx;
|
|
}
|
|
|
|
.bar.orders {
|
|
background: #74b9ff;
|
|
}
|
|
|
|
.bar-label {
|
|
font-size: 20rpx;
|
|
color: #666;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.tool-grid {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.tool-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 140rpx;
|
|
padding: 25rpx 15rpx;
|
|
background: #ffe8f0;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.tool-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.tool-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>
|