首页

components/analytics/AnalyticsAreaChart.uvue

@@ -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>
+

components/analytics/AnalyticsComboChart.uvue

@@ -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,
+            rotate: x.length > 20 ? 45 : 0,
-            interval: 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: { 

components/analytics/AnalyticsPieChart.uvue

@@ -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>
+

layouts/admin/AdminLayout.uvue

@@ -200,6 +200,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .layout-root {
   display: flex;
+  flex-direction: row;
   width: 100%;
   min-height: 100vh;
   background: #f0f2f5;

layouts/admin/components/AdminHeader.uvue

@@ -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
 }>()
 
@@ -35,12 +38,26 @@ defineEmits<{
   border-bottom: 1px solid #eef2f7;
   display:flex;
   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; 

layouts/admin/components/AdminTagsView.uvue

@@ -58,6 +58,7 @@ defineEmits<{
   background:#fff;
   border-radius: 6px;
   display:flex;
+  flex-direction: row;
   align-items:center;
   gap: 8px;
 }

layouts/admin/pages/HomeIndex.uvue

@@ -1,26 +1,147 @@
 <template>
   <view class="home-page">
-    <view class="welcome-section">
+    <!-- 数据统计卡片行 -->
-      <text class="welcome-title">欢迎使用 CRMEB 管理后台</text>
+    <view class="stats-row">
-      <text class="welcome-subtitle">Welcome to CRMEB Admin</text>
+      <!-- 销售额卡片 -->
+      <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="quick-stats">
+      <!-- 用户访问量卡片 -->
       <view class="stat-card">
-        <text class="stat-value">0</text>
+        <view class="card-header">
-        <text class="stat-label">今日订单</text>
+          <text class="card-title">用户访问量</text>
+          <view class="tag today">今日</view>
         </view>
-      <view class="stat-card">
+        <view class="card-value">224</view>
-        <text class="stat-value">0</text>
+        <view class="card-meta">
-        <text class="stat-label">今日销售额</text>
+          <text class="meta-text">昨日 136</text>
+          <text class="meta-trend up">日环比 64.7% ▲</text>
         </view>
-      <view class="stat-card">
+        <view class="card-footer">
-        <text class="stat-value">0</text>
+          <text class="footer-label">本月访问量</text>
-        <text class="stat-label">新增用户</text>
+          <text class="footer-value">360Pv</text>
         </view>
+      </view>
+
+      <!-- 订单量卡片 -->
       <view class="stat-card">
-        <text class="stat-value">0</text>
+        <view class="card-header">
-        <text class="stat-label">待处理订单</text>
+          <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="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="chart-body">
+        <AnalyticsComboChart
+          :xLabels="chartData.x"
+          :gmv="chartData.gmv"
+          :orders="chartData.orders"
+          :height="360"
+        />
+      </view>
+    </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="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">
 /**
- * 管理后台首页组件
+ * 管理后台首页 - CRMEB 数据统计
- * 在 AdminLayout 内部显示
+ * 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 {
+.stats-row {
-  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 {
   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: 4px;
-  border-radius: 8px;
+  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  text-align: center;
+  transition: box-shadow 0.3s;
 }
 
-.stat-value {
+.stat-card:hover {
-  display: block;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
-  font-size: 36px;
-  font-weight: 600;
-  color: #1890ff;
-  margin-bottom: 8px;
 }
 
-.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>