<template>
  <div class="container">
    <div class="right-content">
      <div class="name-content">
        <div class="drug-name">
          <span class="name">药品通用名称 : </span>
          <span class="tag">健母宝经典修护精华液</span>
          <div class="info-Tag">
            <div>10年老企</div>
            <div>高风险企业</div>
          </div>
        </div>
        <div class="close-icon">
          <i class="el-icon-close" size="50"></i>
        </div>
      </div>
    </div>
    <!-- <div class="left">
      <div class="left-grids">
        <gridsTitle title="检查人员组成" />
        <div class="main">
          <people />
        </div>
      </div>
      <div class="left-grids middle-box">
        <gridsTitle title="检查队伍学历分布" />
        <div class="main">
          <xueli />
        </div>
      </div>
      <div class="left-grids">
        <gridsTitle title="执法监督工作" />
        <div class="main">
          <zfdb />
        </div>
      </div>
    </div>
    <div class="middle">
      <gridsTitle title="全省数据" />
      <div class="main">
        <leafletMap />
      </div>
    </div>
    <div class="right">
      <div class="right-grids">
        <gridsTitle title="检查员层级分布" />
        <div class="main">
          <hierarchy />
        </div>
      </div>
      <div class="right-grids middle-box">
        <gridsTitle title="检查员类别分布" />
        <div class="main">
          <typePie />
        </div>
      </div>
      <div class="right-grids">
        <gridsTitle title="检查员级别分布" />
        <div class="main">
          <LevelPie />
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import gridsTitle from "../components/gridsTitle";
import leafletMap from "../components/home/map";
// 左侧图表
import people from "../components/home/leftEcharts/people.vue";
import xueli from "../components/home/leftEcharts/xueli.vue";
import zfdb from "../components/home/leftEcharts/zfdb.vue";
// 右侧图表
import hierarchy from "../components/home/rightEchats/hierarchy.vue";
import typePie from "../components/home/rightEchats/typePie.vue";
import LevelPie from "../components/home/rightEchats/LevelPie.vue";
export default {
  components: {
    gridsTitle,
    leafletMap,
    people,
    xueli,
    zfdb,
    hierarchy,
    typePie,
    LevelPie,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #f2f2f2;
  padding: 10px;
  & > div {
    flex: 1;
    height: 100%;
  }
  & > div:nth-child(2) {
    flex: 2;
    margin: 0 10px;
  }
  .middle {
    height: 100%;
    background: #ffff;
    border-radius: 8px;
    overflow: hidden;
  }
  .left,
  .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    & > div {
      width: 100%;
      border-radius: 8px;
      flex: 1;
      background: #ffffff;
    }
  }
  .middle-box {
    margin: 10px;
  }

  .main {
    height: calc(100% - 40px);
  }
  .right-content {
    background-color: #fff;
    .name-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #F2F3F5;
      .drug-name {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
        font-weight: bold;
        color: #323233;
        .name {

        }
        .tag {
          color: #1349C5;
          margin-left: 4px;
        }
        .info-Tag {
          // margin-top: vh(9);
          margin-left: 12px;
          display: flex;
          align-items: center;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          div {
            padding: 4px 11px;
            margin-right: 10px;
            background: #DDEBFA;
            border-radius: 4px;
            color: #1E80EB;
            &:last-child {
              margin-right: 0;
              background: #FDEBEB;
              border-radius: 4px;
              color: #E42424;
            }
          }
          
        }
      }
      .close-icon {
        cursor: pointer;
        i {
          font-size: 25px;
        }
      }
    }
  }
}
</style>
