<!--
 * @Author: 张宁 18339727226@163.com
 * @Date: 2024-05-22 08:40:56
 * @LastEditors: 张宁 18339727226@163.com
 * @LastEditTime: 2024-05-30 14:58:06
 * @FilePath: \welcome-system-screen\src\views\index\right-top.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { useDataStore } from "@/stores/index";
const dataStore = useDataStore();
const { payDto } = storeToRefs(dataStore)
</script>

<template>
  <div class="right-top">
    <div class="items">
      <div class="item-title">已缴费人数</div>
      <div class="item-content">{{ payDto.payNum }}</div>
    </div>
    <div class="items item-two">
      <div class="item-title">已报到未缴费人数</div>
      <div class="item-content">{{ payDto.reportNotPay }}</div>
    </div>
    <div class="items item-three">
      <div class="item-title">生活用品缴费人数</div>
      <div class="item-content">{{ payDto.consumerGoods }}</div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.right-top {
  display: flex;

  .items {
    width: 150px;
    height: 140px;
    background: url("@/assets/img/zheke/right_top1.png");
    background-size: cover;
    background-position: center center;
    text-align: center;
    padding-top: 20px;
    transform: scale(0.9);

    .item-title {
      font-weight: bold;
      font-size: 18px;
      color: #79BFED;
      line-height: 26px;
    }

    .item-content {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 30px;
      color: #F1FBFF;
      background: linear-gradient(179deg, rgba(126, 216, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .item-two {
    background: url("@/assets/img/zheke/right_top2.png");
    background-size: cover;
    background-position: center center;

    .item-title {
      color: #fd89ac;
    }

    .item-content {
      color: #F1FBFF;
      background: linear-gradient(179deg, rgba(253, 137, 172, 1) 0%, rgba(255, 255, 255, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .item-three {
    background: url("@/assets/img/zheke/right_top3.png");
    background-size: cover;
    background-position: center center;

    .item-title {
      color: #4bf1d8;
    }
    .item-content {
      color: #F1FBFF;
      background: linear-gradient(179deg, rgba(75, 241, 216, 1) 0%, rgba(255, 255, 255, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
