71 lines
1.5 KiB
Vue
71 lines
1.5 KiB
Vue
<script setup>
|
|
import { ref, watch } from "vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t, locale } = useI18n();
|
|
|
|
const updateDataItems = () => {
|
|
return [
|
|
{ title: t("energy.elec_bills"), data: "3,255,458" },
|
|
{ title: t("energy.interval_elec_charges"), data: "205,110" },
|
|
{ title: t("energy.year_carbon_emission"), data: "455,128" },
|
|
{
|
|
title: t("energy.interval_carbon_emission"),
|
|
time: "2023-11-01~2023-11-19",
|
|
data: "25,351",
|
|
},
|
|
{ title: t("energy.year_elec_consumption"), data: "864,830" },
|
|
{
|
|
title: t("energy.interval_elec_consumption"),
|
|
time: "2023-11-01~2023-11-19",
|
|
data: "50,355",
|
|
},
|
|
];
|
|
};
|
|
|
|
const dataItems = ref(updateDataItems());
|
|
|
|
watch(locale, () => {
|
|
dataItems.value = updateDataItems();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="six-data">
|
|
<div
|
|
v-for="(item, index) in dataItems"
|
|
:key="index"
|
|
:class="
|
|
twMerge(
|
|
'item w-1/2 py-0 px-3 h-[85px] text-white flex justify-center flex-col',
|
|
index == 0 || index == 3 || index == 4
|
|
? 'bg-slate-800'
|
|
: 'bg-slate-700'
|
|
)
|
|
"
|
|
>
|
|
<div class="title">{{ item.title }}</div>
|
|
<div v-if="item.time" class="time">{{ item.time }}</div>
|
|
<div class="data">{{ item.data }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.six-data {
|
|
@apply flex flex-wrap mb-2.5;
|
|
|
|
.title {
|
|
@apply text-sm;
|
|
}
|
|
|
|
.time {
|
|
@apply text-xs;
|
|
}
|
|
|
|
.data {
|
|
@apply text-2xl;
|
|
}
|
|
}
|
|
</style>
|