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

</script>

<template>
  <div class="center-top">
    <div class="top-item-img">
      <div class="top-item-icon">
        <img src="@/assets/img/zheke/center_top1.png">
      </div>
      <div class="top-item">
        <div class="top-item-title">{{ computDate }}迎新人数</div>
        <div class="top-item-content">{{ today.nowStuden ?? '0' }}</div>
      </div>

    </div>
    <div class="top-item">
      <div class="top-item-title">{{ computDate }}预报到人数</div>
      <div class="top-item-content">{{ today.forecastStuden ?? '0' }}</div>
    </div>
    <div class="top-item">
      <div class="top-item-title">{{ computDate }}预报到报到率</div>
      <div class="top-item-content"> {{ forecastRate ?? '0' }}% </div>
    </div>
    <div class="top-item-img">
      <div class="top-item-icon">
        <img src="@/assets/img/zheke/center_top2.png">
      </div>
      <div class="top-item">
        <div class="top-item-title">预报到总人数报到率</div>
        <div class="top-item-content"> {{totalRate ?? '0'}}% </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.center-top {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .top-item-img {
    display: flex;
    flex-direction: row;
  }

  .top-item {
    display: flex;
    flex-direction: column;
    margin-left: 20px;

    .top-item-title {
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 32px;
      text-shadow: 1px 2px 0px rgba(25, 27, 28, 0.22);
      font-style: italic;
      // background: #3652AB;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0%, rgba(76, 127, 220, 0.64) 30%, rgba(0, 0, 0, 0.14) 100%);

    }

    .top-item-content {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 26px;
      color: #FFFFFF;
      background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(255, 255, 255, 0.94) 50%, rgba(182, 198, 229, 0.64) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }


}
</style>
