jsh_erp/jshERP-web/src/views/dashboard/components/normalCard.vue

<template>
  <div id="normalCard" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }" class="normalCard">
    <ul class="left">
      <li class="top">
        <span class="title">今日销售</span>
        <img src="@/assets/image/question.png" alt="" />
      </li>
      <li class="mid">1023</li>
      <li class="bot">昨日：2333</li>
    </ul>
    <img class="right" src="@/assets/image/hicon1.png" alt="" />
  </div>
</template>

<script>
import { mixinPage } from '@/mixins/newMixin'

export default {
  mixins: [mixinPage],
  name: 'NormalCard',
  props: {
    imageName: {
      type: String,
      default: 'cardBg',
    },
  },
}
</script>

<style lang="less" scoped>
.normalCard {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  background-size: 100% 100%;
  border-radius: 8px;
  background-position: center;
  height: 116px;

  .top {
    color: #505968;
    font-size: 16px;
    .title {
      margin-right: 2px;
    }
    img {
      height: 16px;
      width: 16px;
    }
  }
  .mid {
    color: #333333;
    font-weight: 700;
    font-size: 32px;
  }
  .bot {
    font-size: 14px;
    color: #505968;
  }
  .right {
    width: 90px;
    height: 86px;
  }
}
</style>