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

<template>
  <div class="statistics-panel-1">
    <img :style="{ 'box-shadow': iconShadow }" :src="icon" class="pane-icon" alt="" />
    <Counter :count="amount" :tip="tip"></Counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'
export default {
  components: { Counter },
  props: {
    icon: { type: String, required: true },
    amount: { type: Number, default: 0 },
    tip: { type: String, default: '' },
    iconShadow: {
      type: String,
      default: '0px 7px 6px -6px rgba(1, 85, 221, 0.42), 0px 6px 10px 0px rgba(1, 85, 221, 0.24)'
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-panel-1 {
  padding-left: 30px;
  padding-top: 44px;
  width: 456px;
  height: 152px;
  background-color: #fff;
  display: flex;
  border-radius: 8px;
  box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);

  .pane-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    margin-right: 24px;
  }
}
</style>