skytek_xinliang
74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import {
|
|
BODY_COMPOSITION_COLORS,
|
|
getBodyFatTone,
|
|
} from "@/utils/body-composition-status";
|
|
|
|
const props = defineProps<{
|
|
bodyFatPercent: number;
|
|
bodyFatRange: string;
|
|
}>();
|
|
|
|
const statusColor = computed(
|
|
() => BODY_COMPOSITION_COLORS[getBodyFatTone(props.bodyFatRange)],
|
|
);
|
|
|
|
const formattedBodyFatPercent = computed(() =>
|
|
Number.isFinite(props.bodyFatPercent)
|
|
? props.bodyFatPercent.toFixed(1)
|
|
: "--",
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<v-card class="analysis-card rounded-xl mt-4" elevation="1">
|
|
<v-card-title class="text-h5 font-weight-black text-center pt-6">
|
|
體脂率分析
|
|
</v-card-title>
|
|
|
|
<v-card-text class="text-center pa-6">
|
|
<div class="text-title-medium text-grey-darken-2 mb-2">體脂率</div>
|
|
<div class="body-fat-value mb-6" :style="{ color: statusColor }">
|
|
{{ formattedBodyFatPercent }}<span class="body-fat-unit">%</span>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap justify-center align-center ga-2">
|
|
<span class="text-title-medium">您的體脂率屬於</span>
|
|
<v-chip
|
|
class="semantic-chip font-weight-black"
|
|
:color="statusColor"
|
|
label
|
|
size="large"
|
|
variant="flat"
|
|
>
|
|
{{ bodyFatRange }}
|
|
</v-chip>
|
|
<span class="text-title-medium">範圍</span>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.analysis-card {
|
|
border: 1px solid rgba(var(--v-theme-primary), 0.24);
|
|
}
|
|
|
|
.body-fat-value {
|
|
font-size: clamp(2.25rem, 10vw, 3.125rem);
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
}
|
|
|
|
.semantic-chip {
|
|
color: #252525 !important;
|
|
}
|
|
|
|
.body-fat-unit {
|
|
margin-left: 6px;
|
|
font-size: clamp(1.25rem, 5vw, 2rem);
|
|
font-weight: 500;
|
|
}
|
|
</style>
|