<template>
  <view>
    <view class="data_card">
      <view class="collection_rate"> 97.2% </view>
      <view class="collection_rate_sub_title"> 本月收缴率 </view>
      <view class="collection_rate_target"> 超目标 1.2% (目标: 95%) </view>
      <view class="collection_rate_progress">
        <view class="item">
          <view class="number"> ¥3.3万 </view>
          <view class="label"> 今日收款 </view>
        </view>
        <view class="item">
          <view class="number"> 15 </view>
          <view class="label"> 今日催收 </view>
        </view>
        <view class="item">
          <view class="number"> 2 </view>
          <view class="label"> 已发律师函 </view>
        </view>
      </view>
    </view>

    <view class="data_card">
      <view class="charts_title"><view class="border"></view>缴费结果分布 </view>
      <MyCharts />
    </view>

    <view class="data_card">
      <view class="charts_title charts_title_no_border"> 欠费房屋 <text>Top3重点催收</text> </view>
      <view class="cell"> A栋1303 <text>欠费2392.21</text> </view>
      <view class="cell"> B栋1133 <text>欠费2176.11</text> </view>
      <view class="cell"> A栋0903 <text>欠费1392.01</text> </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import MyCharts from './components/charts.vue'
</script>

<style lang="scss">
@import './style.scss';
</style>
