<template>
  <div class="cardInfo">
    <el-card shadow="card" style="height: 100%">
      <h2 class="cardHead">主机</h2>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-tag type="success">运行</el-tag>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">报警</el-tag>
        </el-col>
        <el-col :span="6">
          <el-button key="primary" type="primary" size="small" text bg> 自动启动 </el-button>
        </el-col>

        <el-col :span="6">
          <el-button key="info" type="info" size="small" text bg>手动启动</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';

const props = defineProps({
  fontFamily: {
    type: String,
    default: 'Segoe UI'
  },
  fontSize: {
    type: Number,
    default: 14
  },
  headline: {
    type: String,
    default: '自定义标题'
  }
});

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

<style scoped>
/* 去除 el-card__body 的默认边距 */
:deep(.el-card__body) {
  padding-top: 5px !important;
  padding-bottom: 0 !important;
  /* margin: 2 !important; */
}

.cardInfo {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* max-width: 480px; */
  color: v-bind('props.testColor');
  font-family: v-bind('props.fontFamily');
  /* font-family: 'Segoe UI'; */
  font-size: v-bind('computedSize');
}
.card {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.cardHead {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 15px;
  /* padding-bottom: 10px; */
  text-align: center;
}
.grid-content {
  /* background-color: #9e0000; */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: flex-start;
}
</style>
