<template>
  <div class="basic-info-tab">
    <el-descriptions
      title="系统基本信息"
      border
      :column="1"
      size="medium"
    >
      <el-descriptions-item label="项目">若依配测系统</el-descriptions-item>
      <el-descriptions-item label="数据源">若依配测系统</el-descriptions-item>
      <el-descriptions-item label="数据源类型">MYSQL</el-descriptions-item>
      <el-descriptions-item label="IP">172.19.1.166</el-descriptions-item>
      <el-descriptions-item label="管理的SCHEMA">ry</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
// 可以留空，因为数据是静态的
</script>

<style scoped>
.basic-info-tab {
  padding: 20px;
  background-color: white;
}

:deep(.el-descriptions__title) {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

:deep(.el-descriptions__header) {
  margin-bottom: 16px;
}

:deep(.el-descriptions__label) {
  width: 180px;
  background-color: #f5f7fa;
  font-weight: bold;
  color: #333;
}

:deep(.el-descriptions__content) {
  background-color: white;
}
</style>