<template>
  <div class="data-card">
    <div class="card-header">
      <h3 class="card-title">{{ title }}</h3>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataCard',
  props: {
    title: {
      type: String,
      default: '数据卡片'
    }
  }
}
</script>

<style scoped>
.data-card {
  width: 100%;
  background: rgba(0, 20, 40, 0.7);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.card-header {
  height: 60px;
  background-image: url('/src/assets/images/数据小标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #e0fcff;
  margin: 0;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

.card-body {
  padding: 20px;
  min-height: 120px;
  font-size: 16px;
  line-height: 1.6;
  color: #e0fcff;
}
</style>