tuanfeng-pc-admin/src/views/dashboard/componets/TrendPanel.vue

<template>
  <div class="trend-panel-container">
    <StatisticsItem :title="label" :value="value"></StatisticsItem>
    <!-- <div class="trend-text">
      <span class="lable">较昨日{{ currentInfo.text }}:</span>
      <span class="percent-text" :style="{ color: currentInfo.color }">{{ percent }}</span>
      <img class="trend-icon" :src="currentInfo.icon" alt="" />
    </div> -->
  </div>
</template>

<script>
import StatisticsItem from './StatisticsItem.vue'

const up = { text: '上涨', color: '#E90808', icon: require('../../../assets/images/dashboard/up-icon.png') }
const down = { text: '下跌', color: '#0BBD1D', icon: require('../../../assets/images/dashboard/down-icon.png') }

export default {
  components: { StatisticsItem },
  props: {
    type: {
      type: String,
      default: 'up'
    },
    percent: {
      type: String,
      default: '0%'
    },
    label: {
      type: String,
      required: true
    },

    value: {
      type: [Number, String],
      required: true
    }
  },

  computed: {
    currentInfo() {
      return this.type === 'up' ? up : down
    }
  }
}
</script>

<style lang="scss" scoped>
@media (max-width: 1540px) {
  ::v-deep .title {
    font-size: 12px !important;
  }

  ::v-deep .value{
    font-size: 18px !important;
  }
}

@media (max-width: 1390px) {
  ::v-deep .title {
    font-size: 16px !important;
  }

  ::v-deep .value{
    font-size: 24px !important;
  }
}


.trend-panel-container {
  position: relative;
  background-color: #f7f8fa;
  flex: 1;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 350ms, border-radius 1s;

  &::after {
    position: absolute;
    content: '';
    display: block;

    .trend-text {
      color: #fff !important;
    }
  }

  &:hover {
    transform: translateY(-5px);
    border-radius: 20px;
  }

  .trend-text {
    display: flex;
    align-items: center;
    color: #3d3d3d;
    font-size: 12px;

    .lable {
      @media (max-width: 1669px) {
        display: none;
      }
    }

    .percent-text {
      margin: 0 7px;
    }

    .trend-icon {
      width: 14px;
      height: 8px;
    }
  }
}
</style>