首页
This commit is contained in:
125
components/analytics/AnalyticsAreaChart.uvue
Normal file
125
components/analytics/AnalyticsAreaChart.uvue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view class="chart-wrap" :style="{ height: heightPx }">
|
||||
<EChartsView :option="chartOption" class="chart" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EChartsView
|
||||
},
|
||||
props: {
|
||||
xLabels: { type: Array, default: () => [] },
|
||||
data: { type: Array, default: () => [] },
|
||||
height: { type: Number, default: 300 }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
heightPx: '300px',
|
||||
chartOption: {} as any
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
xLabels: { handler() { this.updateOption() }, deep: true },
|
||||
data: { handler() { this.updateOption() }, deep: true },
|
||||
height: {
|
||||
handler() {
|
||||
this.heightPx = `${this.height}px`
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.heightPx = `${this.height}px`
|
||||
setTimeout(() => {
|
||||
this.updateOption()
|
||||
}, 150)
|
||||
},
|
||||
methods: {
|
||||
toPlainObject(obj: any): any {
|
||||
if (obj == null) return null
|
||||
if (typeof obj !== 'object') return obj
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item) => this.toPlainObject(item))
|
||||
}
|
||||
const plain: any = {}
|
||||
for (const key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
const value = obj[key]
|
||||
if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
|
||||
continue
|
||||
}
|
||||
if (value != null && typeof value === 'object' && !Array.isArray(value)) {
|
||||
let isSimple = true
|
||||
for (const k in value) {
|
||||
if (typeof value[k] === 'object' && value[k] !== null) {
|
||||
isSimple = false
|
||||
break
|
||||
}
|
||||
}
|
||||
plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
|
||||
} else {
|
||||
plain[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
return plain
|
||||
},
|
||||
updateOption() {
|
||||
if (!this.xLabels || !this.data || this.xLabels.length === 0 || this.data.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const x = (this.xLabels as Array<any>).map((s) => String(s))
|
||||
const d = (this.data as Array<any>).map((v) => {
|
||||
const n = Number(v)
|
||||
return isFinite(n) ? n : 0
|
||||
})
|
||||
|
||||
const option = {
|
||||
grid: { left: 40, right: 20, top: 20, bottom: 40 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: x,
|
||||
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
|
||||
axisLabel: { color: 'rgba(0,0,0,0.45)', fontSize: 10, interval: 'auto' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
splitLine: { lineStyle: { color: 'rgba(0,0,0,0.05)' } },
|
||||
axisLabel: { color: 'rgba(0,0,0,0.45)', fontSize: 10 }
|
||||
},
|
||||
series: [{
|
||||
data: d,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 0,
|
||||
lineStyle: { width: 2, color: '#1890ff' },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(24, 144, 255, 0.2)' },
|
||||
{ offset: 1, color: 'rgba(24, 144, 255, 0.01)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
this.chartOption = this.toPlainObject(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-wrap { width: 100%; position: relative; overflow: hidden; }
|
||||
.chart { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
|
||||
</style>
|
||||
|
||||
@@ -129,7 +129,7 @@ export default {
|
||||
let result = params[0].name + '<br/>'
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
const p = params[i]
|
||||
if (p.seriesName === 'GMV') {
|
||||
if (p.seriesName === '订单金额' || p.seriesName === 'GMV') {
|
||||
const val = Number(p.value)
|
||||
const formatted = val >= 10000 ? (val / 10000).toFixed(1) + '万' : val.toFixed(0)
|
||||
result += `${p.marker} ${p.seriesName}: ¥${formatted}<br/>`
|
||||
@@ -142,11 +142,11 @@ export default {
|
||||
},
|
||||
legend: {
|
||||
top: 8,
|
||||
left: 8,
|
||||
left: 'center',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: { fontSize: 12 },
|
||||
data: ['GMV', '订单数'],
|
||||
data: ['订单金额', '订单数'],
|
||||
bottom: 'auto'
|
||||
},
|
||||
xAxis: {
|
||||
@@ -156,14 +156,14 @@ export default {
|
||||
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.12)' } },
|
||||
axisLabel: {
|
||||
color: 'rgba(0,0,0,0.55)',
|
||||
rotate: x.length > 12 ? 45 : 0,
|
||||
interval: 0
|
||||
rotate: x.length > 20 ? 45 : 0,
|
||||
interval: x.length > 15 ? 1 : 0
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'GMV（元）',
|
||||
name: '金额',
|
||||
position: 'left',
|
||||
axisLine: { show: false },
|
||||
splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } },
|
||||
@@ -171,7 +171,7 @@ export default {
|
||||
color: 'rgba(0,0,0,0.55)',
|
||||
formatter: (value: number) => {
|
||||
if (value >= 10000) {
|
||||
return (value / 10000).toFixed(1) + '万'
|
||||
return (value / 10000).toFixed(0) + '万'
|
||||
}
|
||||
return String(Math.round(value))
|
||||
}
|
||||
@@ -179,7 +179,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '订单数',
|
||||
name: '数量',
|
||||
position: 'right',
|
||||
alignTicks: true,
|
||||
axisLine: { show: false },
|
||||
@@ -192,14 +192,14 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'GMV',
|
||||
name: '订单金额',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: bar,
|
||||
barMaxWidth: 14,
|
||||
barCategoryGap: '35%',
|
||||
itemStyle: {
|
||||
borderRadius: [6, 6, 0, 0],
|
||||
borderRadius: [2, 2, 0, 0],
|
||||
color: '#3b82f6'
|
||||
}
|
||||
},
|
||||
@@ -208,7 +208,7 @@ export default {
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: line,
|
||||
smooth: true,
|
||||
smooth: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
|
||||
115
components/analytics/AnalyticsPieChart.uvue
Normal file
115
components/analytics/AnalyticsPieChart.uvue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<view class="chart-wrap" :style="{ height: heightPx }">
|
||||
<EChartsView :option="chartOption" class="chart" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EChartsView
|
||||
},
|
||||
props: {
|
||||
items: { type: Array, default: () => [] },
|
||||
height: { type: Number, default: 300 }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
heightPx: '300px',
|
||||
chartOption: {} as any
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
items: { handler() { this.updateOption() }, deep: true },
|
||||
height: {
|
||||
handler() {
|
||||
this.heightPx = `${this.height}px`
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.heightPx = `${this.height}px`
|
||||
setTimeout(() => {
|
||||
this.updateOption()
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
toPlainObject(obj: any): any {
|
||||
if (obj == null) return null
|
||||
if (typeof obj !== 'object') return obj
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item) => this.toPlainObject(item))
|
||||
}
|
||||
const plain: any = {}
|
||||
for (const key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
const value = obj[key]
|
||||
if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
|
||||
continue
|
||||
}
|
||||
if (value != null && typeof value === 'object' && !Array.isArray(value)) {
|
||||
let isSimple = true
|
||||
for (const k in value) {
|
||||
if (typeof value[k] === 'object' && value[k] !== null) {
|
||||
isSimple = false
|
||||
break
|
||||
}
|
||||
}
|
||||
plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
|
||||
} else {
|
||||
plain[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
return plain
|
||||
},
|
||||
updateOption() {
|
||||
if (!this.items || this.items.length === 0) return
|
||||
|
||||
const data = (this.items as Array<any>).map((it) => {
|
||||
return {
|
||||
name: String(it.name),
|
||||
value: Number(it.value),
|
||||
itemStyle: this.toPlainObject(it.itemStyle)
|
||||
}
|
||||
})
|
||||
|
||||
const option = {
|
||||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 'center',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: { fontSize: 11, color: '#666' }
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['45%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
data: data,
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: { show: false },
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}]
|
||||
}
|
||||
this.chartOption = this.toPlainObject(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-wrap { width: 100%; position: relative; overflow: hidden; }
|
||||
.chart { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
|
||||
</style>
|
||||
|
||||
@@ -200,6 +200,7 @@ onMounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.layout-root {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: #f0f2f5;
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<view class="header">
|
||||
<view class="header-left">
|
||||
<text class="crumb">{{ breadcrumb }}</text>
|
||||
<text class="crumb" v-for="(item, index) in breadcrumb" :key="item.id">
|
||||
{{ item.title }}
|
||||
<text v-if="index < breadcrumb.length - 1" class="separator"> / </text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="header-right">
|
||||
@@ -17,7 +20,7 @@
|
||||
|
||||
<script setup lang="uts">
|
||||
defineProps<{
|
||||
breadcrumb: string
|
||||
breadcrumb: Array<{id: string, title: string}>
|
||||
hasNotification: boolean
|
||||
}>()
|
||||
|
||||
@@ -34,13 +37,27 @@ defineEmits<{
|
||||
background:#fff;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.crumb{ color:#374151; font-size:14px; }
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.crumb {
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: #d1d5db;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.header-right{
|
||||
display:flex;
|
||||
|
||||
@@ -58,6 +58,7 @@ defineEmits<{
|
||||
background:#fff;
|
||||
border-radius: 6px;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items:center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@@ -1,26 +1,147 @@
|
||||
<template>
|
||||
<view class="home-page">
|
||||
<view class="welcome-section">
|
||||
<text class="welcome-title">欢迎使用 CRMEB 管理后台</text>
|
||||
<text class="welcome-subtitle">Welcome to CRMEB Admin</text>
|
||||
<!-- 数据统计卡片行 -->
|
||||
<view class="stats-row">
|
||||
<!-- 销售额卡片 -->
|
||||
<view class="stat-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">销售额</text>
|
||||
<view class="tag today">今日</view>
|
||||
</view>
|
||||
<view class="card-value">91.1</view>
|
||||
<view class="card-meta">
|
||||
<text class="meta-text">昨日 2740</text>
|
||||
<text class="meta-trend down">日环比 -96.67% ▼</text>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<text class="footer-label">本月销售额</text>
|
||||
<text class="footer-value">2831.1元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户访问量卡片 -->
|
||||
<view class="stat-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">用户访问量</text>
|
||||
<view class="tag today">今日</view>
|
||||
</view>
|
||||
<view class="card-value">224</view>
|
||||
<view class="card-meta">
|
||||
<text class="meta-text">昨日 136</text>
|
||||
<text class="meta-trend up">日环比 64.7% ▲</text>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<text class="footer-label">本月访问量</text>
|
||||
<text class="footer-value">360Pv</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单量卡片 -->
|
||||
<view class="stat-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">订单量</text>
|
||||
<view class="tag today">今日</view>
|
||||
</view>
|
||||
<view class="card-value">4</view>
|
||||
<view class="card-meta">
|
||||
<text class="meta-text">昨日 8</text>
|
||||
<text class="meta-trend down">日环比 -50% ▼</text>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<text class="footer-label">本月订单量</text>
|
||||
<text class="footer-value">12单</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 新增用户卡片 -->
|
||||
<view class="stat-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">新增用户</text>
|
||||
<view class="tag today">今日</view>
|
||||
</view>
|
||||
<view class="card-value">21</view>
|
||||
<view class="card-meta">
|
||||
<text class="meta-text">昨日 6</text>
|
||||
<text class="meta-trend up">日环比 250% ▲</text>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<text class="footer-label">本月新增用户</text>
|
||||
<text class="footer-value">27人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="quick-stats">
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">0</text>
|
||||
<text class="stat-label">今日订单</text>
|
||||
|
||||
<!-- 订单趋势图表区 -->
|
||||
<view class="chart-section">
|
||||
<view class="chart-header">
|
||||
<view class="header-left">
|
||||
<view class="chart-icon-box">
|
||||
<text class="chart-icon">📈</text>
|
||||
</view>
|
||||
<text class="chart-title">订单</text>
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<view class="period-tabs">
|
||||
<view
|
||||
v-for="p in periods"
|
||||
:key="p.value"
|
||||
class="period-tab"
|
||||
:class="{ active: activePeriod === p.value }"
|
||||
@click="activePeriod = p.value"
|
||||
>
|
||||
<text class="tab-text">{{ p.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">0</text>
|
||||
<text class="stat-label">今日销售额</text>
|
||||
|
||||
<view class="chart-body">
|
||||
<AnalyticsComboChart
|
||||
:xLabels="chartData.x"
|
||||
:gmv="chartData.gmv"
|
||||
:orders="chartData.orders"
|
||||
:height="360"
|
||||
/>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">0</text>
|
||||
<text class="stat-label">新增用户</text>
|
||||
</view>
|
||||
|
||||
<!-- 用户与购买统计行 -->
|
||||
<view class="stats-row bottom-charts">
|
||||
<!-- 用户趋势 -->
|
||||
<view class="chart-section half-width">
|
||||
<view class="chart-header">
|
||||
<view class="header-left">
|
||||
<view class="chart-icon-box user">
|
||||
<text class="chart-icon">👤</text>
|
||||
</view>
|
||||
<text class="chart-title">用户</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-body">
|
||||
<AnalyticsAreaChart
|
||||
:xLabels="userData.x"
|
||||
:data="userData.data"
|
||||
:height="300"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">0</text>
|
||||
<text class="stat-label">待处理订单</text>
|
||||
|
||||
<!-- 购买用户统计 -->
|
||||
<view class="chart-section half-width">
|
||||
<view class="chart-header">
|
||||
<view class="header-left">
|
||||
<view class="chart-icon-box buy">
|
||||
<text class="chart-icon">📈</text>
|
||||
</view>
|
||||
<text class="chart-title">购买用户统计</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-body">
|
||||
<AnalyticsPieChart
|
||||
:items="buyUserData"
|
||||
:height="300"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -28,70 +149,343 @@
|
||||
|
||||
<script setup lang="uts">
|
||||
/**
|
||||
* 管理后台首页组件
|
||||
* 在 AdminLayout 内部显示
|
||||
* 管理后台首页 - CRMEB 数据统计
|
||||
* 1:1 复刻 CRMEB 首页设计
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import AnalyticsComboChart from '@/components/analytics/AnalyticsComboChart.uvue'
|
||||
import AnalyticsAreaChart from '@/components/analytics/AnalyticsAreaChart.uvue'
|
||||
import AnalyticsPieChart from '@/components/analytics/AnalyticsPieChart.uvue'
|
||||
|
||||
// 这里可以添加首页的数据和逻辑
|
||||
// Filter periods
|
||||
const periods = [
|
||||
{ label: '30天', value: '30d' },
|
||||
{ label: '周', value: 'week' },
|
||||
{ label: '月', value: 'month' },
|
||||
{ label: '年', value: 'year' }
|
||||
]
|
||||
const activePeriod = ref('30d')
|
||||
|
||||
// Mock data generator for different periods
|
||||
function getMockChartData(period: string): any {
|
||||
if (period === '30d') {
|
||||
return {
|
||||
x: ['01-04', '01-06', '01-08', '01-10', '01-12', '01-14', '01-16', '01-18', '01-20', '01-22', '01-24', '01-26', '01-28', '01-30', '02-02'],
|
||||
gmv: [10000, 15000, 130000, 20000, 15000, 10000, 40000, 25000, 100000, 30000, 5000, 70000, 20000, 15000, 10000],
|
||||
orders: [15, 12, 18, 10, 8, 14, 12, 11, 15, 12, 35, 10, 11, 15, 8]
|
||||
}
|
||||
} else if (period === 'week') {
|
||||
return {
|
||||
x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
gmv: [45000, 52000, 48000, 61000, 55000, 89000, 95000],
|
||||
orders: [42, 48, 45, 56, 51, 82, 88]
|
||||
}
|
||||
} else if (period === 'month') {
|
||||
return {
|
||||
x: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
gmv: [1200000, 1500000, 1350000, 1800000, 2100000, 1950000],
|
||||
orders: [1200, 1500, 1350, 1800, 2100, 1950]
|
||||
}
|
||||
} else { // year
|
||||
return {
|
||||
x: ['2021', '2022', '2023', '2024', '2025'],
|
||||
gmv: [12000000, 15000000, 18500000, 22000000, 28000000],
|
||||
orders: [12000, 15000, 18500, 22000, 28000]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Chart data tied to activePeriod
|
||||
const chartData = computed(() => {
|
||||
return getMockChartData(activePeriod.value)
|
||||
})
|
||||
|
||||
// Mock data for User and Buying stats
|
||||
const userData = ref({
|
||||
x: ['01-3', '01-4', '01-5', '01-6', '01-7', '01-8', '01-9', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-1', '02-2'],
|
||||
data: [8, 32, 38, 28, 30, 33, 18, 26, 22, 18, 12, 6, 20, 32, 35, 30, 25, 23, 14, 12, 22, 30, 32, 29, 30, 22, 18, 22, 10, 8, 17]
|
||||
})
|
||||
|
||||
const buyUserData = ref([
|
||||
{ name: '未消费用户', value: 850, itemStyle: { color: '#3b82f6' } },
|
||||
{ name: '消费一次用户', value: 120, itemStyle: { color: '#a78bfa' } },
|
||||
{ name: '留存客户', value: 45, itemStyle: { color: '#10b981' } },
|
||||
{ name: '回流客户', value: 15, itemStyle: { color: '#f59e0b' } }
|
||||
])
|
||||
|
||||
// TODO: 后续接入真实数据接口
|
||||
const statsData = ref({
|
||||
sales: {
|
||||
today: 91.1,
|
||||
yesterday: 2740,
|
||||
monthTotal: 2831.1,
|
||||
trend: -96.67
|
||||
},
|
||||
visits: {
|
||||
today: 224,
|
||||
yesterday: 136,
|
||||
monthTotal: 360,
|
||||
trend: 64.7
|
||||
},
|
||||
orders: {
|
||||
today: 4,
|
||||
yesterday: 8,
|
||||
monthTotal: 12,
|
||||
trend: -50
|
||||
},
|
||||
users: {
|
||||
today: 21,
|
||||
yesterday: 6,
|
||||
monthTotal: 27,
|
||||
trend: 250
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
padding: 24px;
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 48px 32px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.quick-stats {
|
||||
.stats-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
min-width: 280px;
|
||||
background-color: #ffffff;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
margin-bottom: 8px;
|
||||
.stat-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
/* 卡片头部 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tag.today {
|
||||
background-color: #e8f4ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 卡片主值 */
|
||||
.card-value {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 卡片元数据 */
|
||||
.card-meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.meta-trend {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-trend.up {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.meta-trend.down {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
/* 图表区样式 */
|
||||
.chart-section {
|
||||
margin-top: 16px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chart-icon-box {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #e6f7ff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.period-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.period-tab {
|
||||
padding: 5px 16px;
|
||||
background-color: #fff;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.period-tab:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.period-tab.active {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.period-tab.active .tab-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 14px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom-charts {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.half-width {
|
||||
flex: 1;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.chart-icon-box.user { background-color: #e6f7ff; }
|
||||
.chart-icon-box.buy { background-color: #f0f5ff; }
|
||||
|
||||
/* 卡片底部 */
|
||||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-label {
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.footer-value {
|
||||
font-size: 13px;
|
||||
color: #262626;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (max-width: 1400px) {
|
||||
.stat-card {
|
||||
min-width: calc(50% - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.bottom-charts {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.half-width {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.home-page {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
min-width: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user