<template>
  <div class="card-container">
    <div class="card-header" :style="`font-size:${size+2}px`">{{ title }}</div>
    <div class="card-body" :style="`font-size:${size+2}px`">
      <div class="card-row" v-for="(value, key) in data" :key="key">
        <span class="card-key">{{ key }}:</span>
        <span class="card-value">{{ value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '标题'
  },
  size: {
    type: Number,
    default: 10
  },
  data: {
    type: Object,
    default: () => ({
      '数据1': '123',
      '数据2': '456',
      '数据3': '789'
    })
  }
});
</script>

<style scoped>
.card-container {
  min-width: 50xpx;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(39, 72, 100, 0.8); /* 半透明背景 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-family: Arial, sans-serif;
}

.card-header {
  background-color: #274864; /* 标题不透明 */
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card-body {
  padding: 2px 6px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-row:last-child {
  border-bottom: none;
}

.card-key {
  font-weight: 500;
  color: #a0c4ff;
}

.card-value {
  font-weight: 400;
  color: #ffffff;
  padding-left: 0.5vw;
}
</style>
