<template>
  <section class="kf-panels">
    <span class="kf-p-label" :title="label">{{label}}</span>
    <div class="kf-p-body">
      <button class="kf-p-body-btn">{{config.value + config.unit}}</button>
      <!-- <span class="kf-p-body-value">{{config.value + config.unit}}</span> -->
    </div>
  </section>
</template>

<script setup>
import { onMounted, toRefs } from "vue";


const props = defineProps(['config','label']);
const { config,label } = toRefs(props);

onMounted(() => {
  // console.log(config.value);
})
</script>

<style lang="scss" scoped>
.kf-p-body-btn{
  width: 65%;
  height: 25px;
  background-color: #2978EC;
  padding: 3px 5px;
  border: none;
  color: #ddd;
  border-radius: 3px;
}
.kf-p-body-btn:hover{
  color: #fff;
}
</style>