fix
This commit is contained in:
@@ -28,10 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4 flex items-end justify-between gap-3">
|
<div class="mt-4 flex items-end justify-between gap-3">
|
||||||
<div
|
<div class="text-[30px] leading-none font-semibold tracking-tight text-slate-900">
|
||||||
class="leading-none font-semibold tracking-tight text-slate-900"
|
|
||||||
:class="[valueFontSize]"
|
|
||||||
>
|
|
||||||
{{ value }}
|
{{ value }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="$slots.right" class="shrink-0">
|
<div v-if="$slots.right" class="shrink-0">
|
||||||
@@ -55,16 +52,6 @@ const props = defineProps({
|
|||||||
description: { type: String, default: '' }
|
description: { type: String, default: '' }
|
||||||
});
|
});
|
||||||
|
|
||||||
const valueFontSize = computed(() => {
|
|
||||||
const valStr = String(props.value ?? '');
|
|
||||||
const len = valStr.length;
|
|
||||||
if (len > 20) return 'text-[20px]';
|
|
||||||
if (len > 16) return 'text-[24px]';
|
|
||||||
if (len > 12) return 'text-[28px]';
|
|
||||||
if (len > 10) return 'text-[32px]';
|
|
||||||
return 'text-[38px]';
|
|
||||||
});
|
|
||||||
|
|
||||||
function hexToRgba(hex, alpha) {
|
function hexToRgba(hex, alpha) {
|
||||||
const h = String(hex || '')
|
const h = String(hex || '')
|
||||||
.replace('#', '')
|
.replace('#', '')
|
||||||
@@ -72,9 +59,9 @@ function hexToRgba(hex, alpha) {
|
|||||||
const full =
|
const full =
|
||||||
h.length === 3
|
h.length === 3
|
||||||
? h
|
? h
|
||||||
.split('')
|
.split('')
|
||||||
.map((c) => c + c)
|
.map((c) => c + c)
|
||||||
.join('')
|
.join('')
|
||||||
: h;
|
: h;
|
||||||
if (full.length !== 6) return `rgba(91, 137, 255, ${alpha})`;
|
if (full.length !== 6) return `rgba(91, 137, 255, ${alpha})`;
|
||||||
const r = parseInt(full.slice(0, 2), 16);
|
const r = parseInt(full.slice(0, 2), 16);
|
||||||
|
|||||||
Reference in New Issue
Block a user