real3d-portalsite/src/views/farmlandProtection/components/tbDetails.vue

<template>
  <div class="ghzc">
    <div class="sm-panel sm-function-module-query" v-drag>
      <div class="sm-panel-header">
        <span>服务详情</span>
        <i class="el-icon-close" @click="closeBox"></i>
      </div>
      <div class="ServiceCon">
        <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
          <el-tab-pane label="基本信息" name="jbxx">
            <Jbxx :detailObj="detailObj" @updateParent="changeData"></Jbxx>
          </el-tab-pane>
          <el-tab-pane label="核查信息" name="hcxx">
            <Hcxx @updateParent="changeData"></Hcxx>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Jbxx from "./jbxx.vue";
import Hcxx from "./hcxx.vue";
export default {
  props: {
    detailObj: {
      type: Object,
    },
  },
  components: {
    Jbxx,
    Hcxx,
  },
  data() {
    return {
      activeTabs: "jbxx",
      templateList: [
        {
          图斑编号: 6401812024070108270002,
          行政名称: "海棠区",
          前时相: "20230925",
          后时相: "20240701",
          前类型: "XX",
          后类型: "XXX",
        },
      ],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    closeBox() {
      this.$emit("updateParent", "isShowTb", false);
    },
  },
  watch: {},
  watch: {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.ServiceCon {
  height: 760px;
  //   background-color: aliceblue;
  cursor: auto;
}
/deep/ .el-icon-close:before {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: larger;
  font-weight: bold;

  &:hover {
    color: aqua;
  }
}

.sm-panel {
  width: 400px;
  max-width: 400px;
  /deep/ .el-icon-close:before {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: larger;
    font-weight: bold;

    &:hover {
      color: aqua;
    }
  }
}

.sm-function-module-query {
  max-height: 800px !important;
  top: 28px !important;
}
.xz_box {
  padding: 1rem 0.5rem 0px 0.5rem;
  height: 100% !important;
}
</style>