<template>
  <div class="lpb">
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="编辑楼盘" name="edit">
        <bjlp></bjlp>
      </el-tab-pane>
      <el-tab-pane label="预览楼盘" name="preview">
        <yllp></yllp>
      </el-tab-pane>
      <el-tab-pane label="详细信息" name="detail">
        <xxxx></xxxx>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import bjlp from "./bjlp"
import yllp from "./yllp"
import xxxx from "./xxxx"
export default {
  name:"",
  components:{bjlp,yllp,xxxx},
  props:{},
  data() {
      return {
        activeName: 'edit'
      };
    },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  created(){},
  mounted(){},
  computed: {},
  watch: {},
}
</script>
<style scoped  lang="less">
.lpb{
		width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding:18px;
    padding-bottom: 0;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
    /deep/.el-tabs__header{
      margin-bottom: 0;
    }
    /deep/.el-tabs--card>.el-tabs__header{
      background-color: #FAFAFA;
      border-top: 1px solid #E4E7ED;
    }
    /deep/.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
      background-color: #fff;
      border-top: 2px solid #006CFF;
      height: 42px;
    }
    /deep/ .el-tabs__item{
      border-top: 0;
    }
    .el-tabs{
      height: 100%;
      display: flex;
      flex-direction: column;
      /deep/.el-tabs__content{
        position: unset;
      }
    }
    .el-tab-pane{
      height: 100%;
    }
}
</style>