<template>
  <el-card class="card">
    <template #header>
      <h2 class="cardHead">{{ props.headline }}</h2>
    </template>
    <div class="cardBody">
      <p>2025-04-25 14:22:17 2号主变油色谱总烃超标</p>
      <p>2018-03-21 15:28:11 220kV GIS室O2气体含量低报警（2号传感器O2浓度15%）</p>
      <p>2018-04-25 14:22:17 2号主变油色谱总烃超标</p>
      <p>2018-03-21 15:28:11 220kV GIS室O2气体含量低报警（2号传感器O2浓度15%）</p>
      <p>2018-04-25 14:22:17 2号主变油色谱总烃超标</p>
      <p>2018-03-21 15:28:11 220kV GIS室O2气体含量低报警（2号传感器O2浓度15%）</p>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { globalStore } from '@/components/mt-edit/store/global';
const props = defineProps({
  fontFamily: {
    type: String,
    default: 'Segoe UI'
  },
  fontSize: {
    type: Number,
    default: 14
  },
  testColor: {
    type: String,
    default: '#000000'
  },
  headline: {
    type: String,
    default: '自定义标题'
  }
});

console.log();

function test2() {
  console.log('props:', props);
}

let computedSize = computed({
  // 读取
  get() {
    return props.fontSize + 'px';
  }, // 修改
  set(val) {
    console.log('有人修改了fullName', val);
  }
});
</script>

<style scoped>
:deep(.el-card__body) {
  margin: 0;
  padding: 0px;
}
:deep(.el-card__header) {
  margin: 0;
  padding: 10px 0px;
}

P {
  margin: 3px 0px;
  padding: 2px;
  transition: background-color 0.3s ease;
}

P:hover {
  background-color: #f0f0f0; /* 悬停时的底色，您可以根据需要调整颜色 */
}

.card {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100;
  /* max-width: 480px; */
  color: v-bind('props.testColor');
  font-family: v-bind('props.fontFamily');
  /* font-family: 'Segoe UI'; */
  font-size: v-bind('computedSize');
}

.cardHead {
  margin: 0;
  padding: 0px;
  text-align: center;
}
.cardBody {
  margin: 0;
  padding: 0px;
  padding-bottom: 15px;
}
</style>
