ioc-admin-ui/src/views/dataManagement/basicInfo/index.vue

<template>
  <div class="container">
    <div class="header">
      <el-button @click="Show1()">公司基本信息</el-button>
      <el-button @click="Show2()">楼宇基本信息</el-button>
      <el-button @click="Show3()">底层系统信息</el-button>
    </div>
    <corporation-info v-if="show1" class="content"></corporation-info>
    <building-info v-if="show2" class="content"></building-info>
    <accessedSystem v-if="show3" class="content"></accessedSystem>
  </div>
</template>

<script>
import CorporationInfo from "./corporationInfo";
import buildingInfo from "./buildingInfo";
import accessedSystem from "./accessedSystem";
export default {
  components: { CorporationInfo, buildingInfo, accessedSystem },
  data() {
    return {
      show1: true,
      show2: false,
      show3: false,
    };
  },
  methods: {
    Show1() {
      this.show1 = true;
      this.show2 = false;
      this.show3 = false;
    },
    Show2() {
      this.show1 = false;
      this.show2 = true;
      this.show3 = false;
    },
    Show3() {
      this.show1 = false;
      this.show2 = false;
      this.show3 = true;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  position: absolute;
  left: 218px;
  top: 77px;
  right: 16px;
  bottom: 20px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  .header {
    text-align: left;
    // padding: 15px;
    font-size: 25px;
    width: 95%;
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;

    .el-button {
      border-radius: 50px;
      margin-right: 30px;
      &:focus,
      &:hover {
        background: #2ea8e6;
        color: #fff;
      }
    }
  }
  .content {
    height: calc(100% - 60px);
  }
}
</style>