统计：会员统计

src/views/mall/statistics/trade/components/TradeStatisticValue.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg flex flex-col gap-2 p-6">
+  <div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
     <div class="flex items-center justify-between text-gray-500">
       <span>{{ title }}</span>
       <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
@@ -34,8 +34,3 @@ defineProps({
   percent: propTypes.oneOfType([Number, String]).def(0)
 })
 </script>
-<style scoped>
-.bg {
-  background-color: var(--el-bg-color-overlay);
-}
-</style>

src/views/mall/statistics/trade/components/TradeTrendValue.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="mb-8 flex flex-row items-center gap-3">
+  <div class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4">
     <div
       class="h-12 w-12 flex flex-shrink-0 items-center justify-center rounded-1"
       :class="`${iconColor} ${iconBgColor}`"
     >
       <Icon :icon="icon" class="!text-6" />
     </div>
-    <div class="bg flex flex-col gap-1">
+    <div class="flex flex-col gap-1">
       <div class="flex items-center gap-1 text-gray-500">
         <span class="text-3.5">{{ title }}</span>
         <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
@@ -17,7 +17,10 @@
         <div class="text-7">
           <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" />
         </div>
-        <span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
+        <span
+          v-if="percent != undefined"
+          :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'"
+        >
           <span class="text-sm">{{ Math.abs(toNumber(percent)) }}%</span>
           <Icon
             :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
@@ -44,11 +47,6 @@ defineProps({
   prefix: propTypes.string.def(''),
   value: propTypes.number.def(0),
   decimals: propTypes.number.def(0),
-  percent: propTypes.oneOfType([Number, String]).def(0)
+  percent: propTypes.oneOfType([Number, String]).def(undefined)
 })
 </script>
-<style scoped>
-.bg {
-  background-color: var(--el-bg-color-overlay);
-}
-</style>

src/views/mall/statistics/trade/index.vue

@@ -218,7 +218,7 @@
           />
         </el-col>
       </el-row>
-      <!-- 拆线图 -->
+      <!-- 折线图 -->
       <el-skeleton :loading="trendLoading" animated>
         <Echart :height="500" :options="lineChartOptions" />
       </el-skeleton>