<template>
  <div class="tabDataBox">
    <div class="flex titleBox semanticBox" :style="{ height: tableHeight + 'px' }">
      <div style=" height: 100%;width: 250px;margin-right: 10px;background-color: #fff;border-radius: 10px;">
        <leftList />
      </div>
      <div style=" height: 100%;width: calc(100% - 262px);">
        <div class="headerTitle">警情/案件/情报线索类语义分析</div>
        <SearchTool />
        <TableType />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import leftList from './components/leftList.vue';
import SearchTool from './components/searchTool.vue'
import TableType from './components/tableType.vue'

onMounted(() => {
  tabHeightFn();
});
const tableHeight = ref()


// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value =
    window.innerHeight - 150;
  window.onresize = function () {
    tabHeightFn();
  };
};
</script>

<style lang="scss" scoped>
.semanticBox {
  background-color: #ffffff00 !important;
}

.headerTitle {
  font-size: 24px;
  padding: 10px;
  font-family: 'verdana';
  color: #000;
  padding-left: 8px;
  position: relative;
}

.headerTitle::after {
  content: "";
  display: block;
  position: absolute;
  top: 14px;
  left: 0px;
  width: 4px;
  border-radius: 5px;
  height: 31px;
  background-color: #0386fb
}
</style>
