From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/home/components/ComparisonCard.vue | 42 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 42 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/home/components/ComparisonCard.vue b/src/views/mall/home/components/ComparisonCard.vue
new file mode 100644
index 0000000..ee1c2f0
--- /dev/null
+++ b/src/views/mall/home/components/ComparisonCard.vue
@@ -0,0 +1,42 @@
+<template>
+ <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-tag>{{ tag }}</el-tag>
+ </div>
+ <div class="flex flex-row items-baseline justify-between">
+ <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" class="text-3xl" />
+ <span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
+ {{ Math.abs(toNumber(percent)) }}%
+ <Icon :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'" class="!text-sm" />
+ </span>
+ </div>
+ <el-divider class="mb-1! mt-2!" />
+ <div class="flex flex-row items-center justify-between text-sm">
+ <span class="text-gray-500">鏄ㄦ棩鏁版嵁</span>
+ <span>{{ prefix || '' }}{{ reference }}</span>
+ </div>
+ </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { toNumber } from 'lodash-es'
+import { calculateRelativeRate } from '@/utils'
+
+/** 浜ゆ槗瀵圭収鍗＄墖 */
+defineOptions({ name: 'ComparisonCard' })
+
+const props = defineProps({
+ title: propTypes.string.def('').isRequired,
+ tag: propTypes.string.def(''),
+ prefix: propTypes.string.def(''),
+ value: propTypes.number.def(0).isRequired,
+ reference: propTypes.number.def(0).isRequired,
+ decimals: propTypes.number.def(0)
+})
+
+// 璁＄畻鐜瘮
+const percent = computed(() =>
+ calculateRelativeRate(props.value as number, props.reference as number)
+)
+</script>
--
Gitblit v1.8.0