<template>
  <div class="thematicMap">
    <div class="container">
      <div class="header">
        <!-- <div class="back"></div> -->
        <div class="text"></div>
      </div>
      <div class="con_main">
        <div class="con_left">
          <posLeft />
        </div>
        <div class="con_center">
          <posCenter />
        </div>
        <div class="con_right">
          <posRight />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import posLeft from './posLeft.vue'
import posCenter from './posCenter.vue'
import posRight from './posRight.vue'
</script>

<style lang="scss" scoped>
.thematicMap {
  width: 100%;
  height: 100%;
  background-color: #010E23;
  padding: 10px;
  box-sizing: border-box;
  .container {
    width: 100%;
    height: 100%;
    background-color: #010E23;
    overflow: auto;
    .header {
      height: 68px;
      background: url('@/assets/images/document/thematicMap/header-bg.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      position: relative;
      .back {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: url('@/assets/images/document/thematicMap/header-home.png') no-repeat;
        background-size: 100% 100%;
      }
      .text {
        margin: 12px auto;
        width: 286px;
        height: 40px;
        background: url('@/assets/images/document/thematicMap/header-text.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .con_main {
      margin-top: 10px;
      height: calc(100% - 78px);
      display: flex;
      align-items: center;
      .con_left,
      .con_right {
        height: 100%;
        width: 418px;
        flex-shrink: 0;
      }
      .con_center {
        width: calc(100% - 836px);
        height: 100%;
        padding: 0 20px;
        box-sizing: border-box;
      }
    }
  }
  :deep(.table) {
    &.el-table {
      background-color: transparent !important;
      .el-table__header-wrapper,
      .el-table__fixed-header-wrapper  {
        th {
          background-color: rgba(21, 154, 254, 0.1) !important;
          color: #159AFE;
          border: none;
        }
      }
      tr {
        background-color: transparent !important;
      }
      .el-table__body-wrapper {
        background-color: transparent !important;
        .el-table__body {
          .el-table__row {
            &:hover {
              >td.el-table__cell {
                background-color: transparent !important;
              }
            }
            td {
              color: #fff;
              border: none;
            }
          }
        }
        .el-table__empty-block {
          background-color: transparent !important;
        }
      }
      .el-table__inner-wrapper {
        &::before {
          display: none;
        }
      }
    }
  }
}
</style>