<template>
  <div class="jiZhiJianShe">
    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
    <div class="ListBoxBody">
      <div class="content">
        <div class="table_content">
          <el-table ref="table" :data="tableData" height="170">
            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const tableData = ref([
  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
]);

onMounted(() => {});

onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.jiZhiJianShe {
  width: 49%;
  margin-left: 10px;

  .ListBoxBody {
    background: rgba(8, 75, 125, 1);
    padding: 10px;
    margin-top: -3px;
    .content {
      width: 100%;
      height: 100%;

      .img_box {
        width: 100%;
        height: 100%;
      }

      .tabs {
        height: 36px;
        color: #fff;
        margin-bottom: 10px;
      }

      .table_content {
        height: 98%;
      }

      .monitor {
        width: 20px;
        height: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

#tables {
  width: 100%;
  ::v-deep .el-table__header-wrapper .el-table__header thead {
    background: transparent !important;
    border-bottom: 1px solid #579ff6 !important;
  }
  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
    background: transparent !important;
    border-bottom: 2px solid #2eafbf !important;
  }
}

::v-deep .table_content .el-table__body-wrapper {
  padding-top: 5px;
}
</style>