tuanfeng-pc-admin/src/views/dashboard/components/miniCard.vue

<template>
  <div class="miniCardComponents">
    <span class="title">{{ title }}</span>
    <h2>{{ nums }}</h2>
    <span class="gray">{{ precent }}：</span>
    <span
      class="precent" :class="{
        redP: precentData > 0,
        greenP: precentData < 0
      }"
    >
      {{ precentData || 0 }}%
    </span>
    <span v-if="precentData > 0" class="triangle up"></span>
    <span v-if="precentData < 0" class="triangle down"></span>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    precent: {
      type: String,
      default: ''
    },
    nums: {
      type: Number,
      default: 0
    },
    precentData: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.miniCardComponents {
	$red: #D04A41;
	$green: #427A0A;
	margin-right: 50px;

	h2 {
		margin: 12px 0;
		font-weight: bold;
	}

	.title {
		font-size: 16px;
		font-weight: 700;
	}

	.gray {
		color: #929292;
	}

	.precent {
		margin: 0 8px;
	}

	.redP {
		color: $red;
	}

	.greenP {
		color: $green;
	}

	.triangle {
		width: 0;
		height: 0;
		position: relative;
		border: 8px solid;
	}

	.up {
		position: relative;
		top: -12px;
		border-color: transparent transparent $red transparent;
	}

	.down {
		position: relative;
		top: 12px;
		border-color: $green transparent transparent transparent;
	}
}</style>