SaaS-DataScreen/src/views/hui-jia/components/card/index.vue

<!--
 * @Author: wjc
 * @Date: 2025-12-01 17:22:12
 * @LastEditors: wjc
 * @LastEditTime: 2025-12-12 15:38:59
 * @Description: 
-->
<template>
    <div class="card">
        <div class="card-header">
            <div class="card-lf">
              <img :src="icon" alt="icon" class="icon"/>
              <span class="title">{{ title }}</span>
              <span v-if="subTitle" class="sub-title">（{{subTitle}}）</span>
            </div>
            <div v-if="unit" class="unit">{{ unit }}</div>
        </div>
        <div class="card-body">
          <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'card',
  props: {
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/css/function.scss';
@import '@/assets/css/theme.scss';
.card {
    width: 100%;
    height: 100%;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(14,22,41,1) 0%,rgba(14,22,41,0.6) 100%);
    .card-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(185, 227, 244, 1);
      font-size: halfW(16);
      padding:  halfH(4) halfW(10);
      background: var(--title-bg);
      border-radius: var(--radius);
      .title{
        display: inline-block;
        vertical-align: middle;
      }
      .icon{
        width: halfW(28);
        height: halfW(28);
        vertical-align: middle;
        margin-right: halfW(8);
      }
      .sub-title{
        font-size: halfW(12);
      }
      .unit {
        font-size: halfW(12);
        color: #818181;
      }
    }
    .card-body{
      padding: halfH(16) halfW(10);
      box-sizing: border-box;
      height: calc(100% - halfH(8) - halfH(16) - halfW(28));
    }
}
</style>