smsb-web-develop/src/views/dashboard/AdminDashboard.vue

<template>
  <wrapper margin>
    <div class="c-cards">
      <tenant-card class="c-cards__item" />
      <card
        class="c-cards__item"
        type="info"
        title="总次数"
        tip="100"
      />
      <card
        class="c-cards__item"
        type="safety"
        title="安全异常"
        desc="累计异常数：30"
      />
      <card
        class="c-cards__item"
        type="performance"
        title="性能异常"
        desc="累计异常数：30"
        count="3"
      />
    </div>
  </wrapper>
</template>

<script>
import Card from './components/Card'
import TenantCard from './components/CardTenant'

export default {
  name: 'AdminDashboard',
  components: {
    Card,
    TenantCard
  }
}
</script>

<style lang="scss" scoped>
.c-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: $spacing;

  &__item {
    min-width: 0;
  }
}
</style>