61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
// 假資料
|
|
const dataItems = ref([
|
|
{ title: "今年電費累計(元)", data: "3,255,458" },
|
|
{ title: "區間電費(元)", data: "205,110" },
|
|
{ title: "今年碳排當量累計(公斤)", data: "455,128" },
|
|
{ title: "區間碳排當量", time: "2023-11-01~2023-11-19", data: "25,351" },
|
|
{ title: "今年用電度數(kWh)", data: "864,830" },
|
|
{ title: "區間用電度數(kWh)", time: "2023-11-01~2023-11-19", data: "50,355" },
|
|
]);
|
|
|
|
// 背景顏色處理
|
|
const getItemBackground = (index) => {
|
|
return index === 0 || index === 3 || index === 4
|
|
? "bg-slate-600"
|
|
: "bg-slate-800";
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="six-data">
|
|
<div
|
|
v-for="(item, index) in dataItems"
|
|
:key="index"
|
|
:class="
|
|
twMerge(
|
|
'item w-1/2 py-0 px-5 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>
|