web_sh_audit/src/components/popup/AttributePopup.vue

<template>
  <div
    class="attribute"
    :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
  >
    <div class="close-btn" @click="closeEvent"></div>
    <el-table
      :header-cell-style="{ 'text-align': 'center' }"
      :data="tableData"
      v-if="tableType === 'normal'"
      height="100%"
    >
      <el-table-column label="版本" prop="version"></el-table-column>
      <el-table-column label="shape-long" prop="long"></el-table-column>
      <el-table-column label="shape-area" prop="area"></el-table-column>
      <el-table-column
        label="性质"
        prop="nature"
        align="center"
      ></el-table-column>
      <el-table-column label="面积" prop="area"></el-table-column>
    </el-table>
    <el-table height="100%" v-if="tableType === 'personal'" :data="tableData">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="类别" prop="type"></el-table-column>
      <el-table-column label="描述" prop="des"></el-table-column>
    </el-table>
  </div>
</template>
<script>
/**
 * 疑点详细属性(预设模型 - 图层详细信息)
 *
 * tableType (normal,personal)
 *
 * normal -- 预设模型中的默认图层详细属性
 *
 * personal -- 我的标记
 */
export default {
  name: "AttributePopup",
  components: {},
  props: ["tableType", "boxWidth", "boxHeight", "tableData"],
  watch: {},
  methods: {
    closeEvent() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="less" scoped>
@borderColor: #00aaff;
@borderColor32: #00aaff32;
@borderColor64: #00aaff64;
@topTitleBgLeft: #002645;
@topTitleMinLeft: #002f56;
@lightColor: #74ffff;
.attribute {
  display: flex;
  align-items: center;
  justify-content: center;

  .close-btn {
    cursor: pointer;
    position: absolute;
    right: -15px;
    top: -15px;
    width: 40px;
    height: 40px;
    background: url("../../assets/image/close.png") no-repeat center;
    z-index: 1;
  }
  /deep/.el-table__empty-text {
    color: #fff;
  }

  /deep/.el-table {
    font-size: 0.95rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    background: rgba(0, 39, 77, 0.6);
    border: 1px solid #2fb8ff;

    .el-table__body-wrapper,
    .el-table__footer-wrapper,
    .el-table__header-wrapper {
      width: 100%;
    }

    thead {
      color: #fff;
      background-image: --webkit-linear-gradient(
        to left,
        @topTitleMinLeft,
        @borderColor,
        @topTitleMinLeft
      );
      background-image: --moz-linear-gradient(
        to left,
        @topTitleMinLeft,
        @borderColor,
        @topTitleMinLeft
      );
      background-image: linear-gradient(
        to left,
        @topTitleMinLeft,
        @borderColor,
        @topTitleMinLeft
      );
    }
    th {
      position: relative;
      left: 2px;
      padding: 5px 0;
      background: transparent;
    }
    tr {
      background: transparent;
      .is-leaf {
        border-bottom: 0px solid #ebeef5;
      }
    }
    td {
      padding: 2px 0;
      position: relative;
      border-bottom: 0px solid #ebeef5;
      font-size: 0.85rem;
    }
  }
  /deep/.el-table::before {
    height: 0px;
  }
}
</style>