63 lines
2.2 KiB
Vue
63 lines
2.2 KiB
Vue
<template>
|
|
<!-- 岗位概览统计卡片 -->
|
|
<div class="job-stats-overview" :style="{ height: cardHeight }">
|
|
<!-- 右上角装饰图片 -->
|
|
<img class="job-stats-overview__icon" src="@/assets/images/job-count-card-icon01.png" alt="" />
|
|
<!-- 内容居中容器 -->
|
|
<div class="job-stats-overview__inner">
|
|
<!-- 标题区域 -->
|
|
<div class="job-stats-overview__header">
|
|
<div class="job-stats-overview__title">{{ title }}</div>
|
|
<div class="job-stats-overview__date">{{ subtitle }}</div>
|
|
</div>
|
|
<!-- 数据指标区域 -->
|
|
<div class="job-stats-overview__metrics">
|
|
<!-- 今日新增 -->
|
|
<div class="job-stats-overview__metric-item">
|
|
<div class="job-stats-overview__metric-num">{{ todayCount }}</div>
|
|
<div class="job-stats-overview__metric-label">{{ todayLabel }}</div>
|
|
</div>
|
|
<!-- 分隔线 -->
|
|
<div class="job-stats-overview__divider"></div>
|
|
<!-- 累计收录 -->
|
|
<div class="job-stats-overview__metric-item">
|
|
<div class="job-stats-overview__metric-num">{{ totalCount }}</div>
|
|
<div class="job-stats-overview__metric-label">{{ totalLabel }}</div>
|
|
</div>
|
|
<!-- 分隔线 -->
|
|
<div class="job-stats-overview__divider"></div>
|
|
<!-- 可投率 -->
|
|
<div class="job-stats-overview__metric-item">
|
|
<div class="job-stats-overview__metric-num">{{ rateValue }}</div>
|
|
<div class="job-stats-overview__metric-label">{{ rateLabel }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
/** 岗位概览统计卡片 - 所有展示数据由父组件传入 */
|
|
|
|
defineProps<{
|
|
/** 卡片标题，如"岗位概览" */
|
|
title: string
|
|
/** 副标题，如"数据截至 07.28" */
|
|
subtitle: string
|
|
/** 今日新增数字 */
|
|
todayCount: string | number
|
|
/** 今日新增标签 */
|
|
todayLabel: string
|
|
/** 累计收录数字 */
|
|
totalCount: string | number
|
|
/** 累计收录标签 */
|
|
totalLabel: string
|
|
/** 可投率数字 */
|
|
rateValue: string | number
|
|
/** 可投率标签 */
|
|
rateLabel: string
|
|
/** 卡片高度（从父级传入，与筛选面板同步） */
|
|
cardHeight?: string
|
|
}>()
|
|
</script>
|