smsb-web-develop/src/views/dashboard/components/Card.vue

<template>
  <div
    class="o-card has-padding u-pointer"
    @click="go"
  >
    <div class="o-card__title">
      <i
        class="l-flex__none o-card__icon"
        :class="type"
      />
      <div class="l-flex__fill u-text-center">
        <div class="u-relative">
          <auto-text :text="title" />
          <i
            v-if="count"
            class="o-card__count"
          >
            {{ count }}
          </i>
        </div>
        <auto-text
          v-if="tip"
          :text="tip"
        />
      </div>
    </div>
    <auto-text
      v-if="desc"
      class="o-card__desc"
      :text="desc"
    />
  </div>
</template>

<script>
import AutoText from '@/components/AutoText'

export default {
  name: 'Card',
  components: {
    AutoText
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    tip: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    count: {
      type: [String, Number],
      default: null
    }
  },
  methods: {
    go () {
      // this.$router.push({
      //   name: 'abnormal',
      //   params: { type: 'a' }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.o-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
  color: $black;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  background-color: #fff;

  &__title {
    display: inline-flex;
    align-items: flex-start;
    max-width: 100%;
    line-height: 36px;
  }

  &__count {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 20px;
    padding: 2px 4px;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 1;
    border: 2px solid #fff;
    border-radius: 10px;
    background-color: $error--dark;
  }

  &__icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-right: $spacing;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    &.info {
      background-image: url("~@/assets/icon_info.png");
    }

    &.safety {
      background-image: url("~@/assets/icon_safety.png");
    }

    &.performance {
      background-image: url("~@/assets/icon_performance.png");
    }

    &.log {
      background-image: url("~@/assets/icon_log.png");
    }

    &.date {
      background-image: url("~@/assets/icon_date.png");
    }
  }

  &__desc {
    margin-top: $spacing;
    color: $gray;
    font-size: 12px;
    font-weight: normal;
  }
}
</style>