<template>
  <div id="supervisory">
    <div class="side-area">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="监控点名称"
        style="margin-bottom: 20px"
      ></el-input>
      <ShadowContainer>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          icon-class="el-icon-arrow-right"
        ></el-tree>
      </ShadowContainer>
    </div>
    <div></div>
  </div>
</template>
<script>
export default {
  name: "Supervisory",
  data() {
    return {
      treeData: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
#supervisory {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  .side-area {
    width: 20%;
  }
}
::v-deep .el-input__inner {
  background: rgba(40, 137, 195, 0.2);
  border: 1px solid #217ff7;
}
::v-deep .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
::v-deep .el-tree {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
::v-deep .el-tree-node__content:hover {
  background: rgba(44, 96, 162, 0.5) !important;
  color: #00a2ff;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background: rgba(44, 96, 162, 0.5) !important;
  color: #00a2ff;
}
</style>