manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/analysis/components/TrendCard.vue

<template>
  <div class="border-gray-200 border rounded p-3 flex flex-row justify-between">
    <div class="flex flex-col justify-between text-gray-500 text-xs gap-1">
      <div class="">{{ title }}</div>
      <div class="text-gray-800">
        <span class="text-sm">{{
          number === null || number === undefined ? '--' : number
        }}</span>
        {{ unit }}
      </div>
      <div>
        <span>较上月 </span>
        <span
          class="text-xs text-red-600 inline-flex items-center"
          v-if="compare"
        >
          <span>{{ compare.includes('-') ? compare.slice(1) : compare }}</span>
          <el-icon class="mt-0.5">
            <Bottom v-if="compare.includes('-')" />
            <Top v-else />
          </el-icon>
        </span>
        <span v-else>--</span>
      </div>
    </div>
    <div>
      <img
        width="60"
        :style="{
          transform: compare?.includes('-') ? 'rotate(66deg)' : 'rotate(180deg)'
        }"
        src="../../../assets/line.png"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
type Props = {
  compare?: string;
  title: string;
  number?: number;
  unit: '个' | '人' | '元';
};

defineProps<Props>();
</script>