继续完善页面布局

pages/mall/admin/homePage/components/KpiMiniCard.uvue

@@ -0,0 +1,187 @@
+<template>
+  <view class="kpi-card">
+    <!-- Header -->
+    <view class="kpi-header">
+      <text class="kpi-title">{{ title }}</text>
+
+      <view v-if="tagText" class="kpi-tag">
+        <text class="kpi-tag-text">{{ tagText }}</text>
+      </view>
+
+      <!-- 可选：你想在右上角塞额外按钮/图标 -->
+      <slot name="headerRight"></slot>
+    </view>
+
+    <!-- Body -->
+    <view class="kpi-body">
+      <text class="kpi-main-value">{{ valuePrefix }}{{ valueText }}</text>
+
+      <!-- 中间“昨日 / 日环比”行（可完全替换） -->
+      <view v-if="metaLeft || metaRight" class="kpi-meta">
+        <text v-if="metaLeft" class="kpi-meta-text">{{ metaLeft }}</text>
+
+        <view v-if="metaRight" class="kpi-meta-right">
+          <text class="kpi-meta-text">{{ metaRight }}</text>
+
+          <text
+            v-if="trend !== 'none'"
+            class="kpi-trend-arrow"
+            :class="trendClass"
+          >
+            {{ trendArrow }}
+          </text>
+        </view>
+
+        <!-- 可选：完全自定义这行 -->
+        <slot name="meta"></slot>
+      </view>
+
+      <view class="kpi-divider"></view>
+
+      <!-- 底部一行：左文案 + 右数值 -->
+      <view class="kpi-footer">
+        <text class="kpi-footer-left">{{ footerLeftText }}</text>
+        <text class="kpi-footer-right">{{ footerRightText }}</text>
+
+        <!-- 可选：完全自定义 footer -->
+        <slot name="footer"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  // Header
+  title: string
+  tagText?: string
+
+  // Body main
+  valueText: string
+  valuePrefix?: string // 例如 "¥"
+
+  // Meta line (可替换)
+  metaLeft?: string    // 例如 "昨日 4"
+  metaRight?: string   // 例如 "日环比 0%"
+  trend?: 'up' | 'down' | 'flat' | 'none' // none = 不显示箭头
+
+  // Footer
+  footerLeftText: string   // 例如 "本月订单量"
+  footerRightText: string  // 例如 "181单"
+}>(), {
+  tagText: '今日',
+  valuePrefix: '',
+  metaLeft: '',
+  metaRight: '',
+  trend: 'none'
+})
+
+const trendArrow = computed((): string => {
+  if (props.trend === 'up') return '▲'
+  if (props.trend === 'down') return '▼'
+  return '•'
+})
+
+const trendClass = computed((): string => {
+  if (props.trend === 'up') return 'is-up'
+  if (props.trend === 'down') return 'is-down'
+  return 'is-flat'
+})
+</script>
+
+<style>
+.kpi-card{
+  background-color:#ffffff;
+  border:1px solid #ebeef5;
+  border-radius:6px;
+  padding:16px;
+  box-shadow:0 2px 12px rgba(0,0,0,0.04);
+}
+
+/* Header */
+.kpi-header{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:12px;
+
+  .kpi-title{
+    font-size:14px;
+    color:#303133;
+    font-weight:600;
+  }
+  .kpi-tag{
+    padding:2px 8px;
+    border-radius:4px;
+    border:1px solid #e1f3d8;
+    background:#f0f9eb;
+  }
+  .kpi-tag-text{
+    font-size:12px;
+    color:#67c23a;
+  }
+
+}
+
+
+/* Body */
+.kpi-body{
+  margin-top:10px;
+  .kpi-main-value{
+    font-size:32px;
+    font-weight:600;
+    color:#303133;
+    line-height:40px;
+  }
+
+  /* “昨日 / 日环比” */
+  .kpi-meta{
+    margin-top:8px;
+    display:flex;
+    align-items:center;
+    justify-content:flex-start;
+    gap:12px;
+    flex-wrap:wrap;
+  }
+  .kpi-meta-text{
+    font-size:12px;
+    color:#909399;
+  }
+  .kpi-meta-right{
+    display:flex;
+    align-items:center;
+    gap:6px;
+  }
+  .kpi-trend-arrow{
+    font-size:12px;
+  }
+  .kpi-trend-arrow.is-up{ color:#f56c6c; }
+  .kpi-trend-arrow.is-down{ color:#67c23a; }
+  .kpi-trend-arrow.is-flat{ color:#909399; }
+
+  .kpi-divider{
+    height:1px;
+    background:#ebeef5;
+    margin:12px 0;
+  }
+
+  /* Footer */
+  .kpi-footer{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:12px;
+  }
+  .kpi-footer-left{
+    font-size:12px;
+    color:#909399;
+  }
+  .kpi-footer-right{
+    font-size:12px;
+    color:#909399;
+  }
+}
+
+</style>