<script setup>

</script>

<template>
  <div className="stats w-full h-[48%] p-2 mb-4 bg-slate-900 rounded-lg border border-cyan-200/20 shadow-md shadow-cyan-500/20">
    <!-- 電壓資訊 -->
    <div className="stat place-items-start">
      <div className="stat-title text-gray-200 3xl:text-[2rem]">今年電費總計 (元)</div>
      <div className="stat-value text-success text-5xl 3xl:text-[6rem]">516,519</div>
      <div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-01-01 ~ 2024-08-08</div>
    </div>
    <div className="stat place-items-start">
      <div className="stat-title text-gray-200 3xl:text-[2rem]">區間電費總計 (元)</div>
      <div className="stat-value text-success text-5xl 3xl:text-[6rem]">22,432</div>
      <div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-07-01 ~ 2024-07-31</div>
    </div>
  </div>

  <div className="stats w-full h-[48%] p-2 mb-4 bg-slate-900 rounded-lg border border-cyan-200/20 shadow-md shadow-cyan-500/20">
    <!-- 電流資訊 -->
    <div className="stat place-items-start">
      <div className="stat-title text-gray-200 3xl:text-[2rem]">今年用電度數 (kWh)</div>
      <div className="stat-value text-success text-5xl 3xl:text-[6rem]">172,173</div>
      <div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-01-01 ~ 2024-08-08</div>
    </div>
    <div className="stat place-items-start">
      <div className="stat-title text-gray-200 3xl:text-[2rem]">區間用電度數 (kWh)</div>
      <div className="stat-value text-success text-5xl 3xl:text-[6rem]">7,477</div>
      <div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-07-01 ~ 2024-07-31</div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
