thoth-frontend-test/src/views/ToConfigure/index.vue

<template>
  <el-container class="configure_Background">
    <el-header style="height: auto;" class="configure_header">
      <div class="configure_title">配置中心</div>
      <el-divider />
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="成员配置" name="first" />
        <el-tab-pane label="需求方向配置" name="second" />
        <el-tab-pane label="技术模块配置" name="third" />
        <el-tab-pane label="通知配置" name="fourth" />
        <el-tab-pane label="业务线配置" name="fourths" />
      </el-tabs>
    </el-header>
    <el-container>
      <el-main :class="{ 'configure_Main1': tabIndex === '0', 'configure_Main': tabIndex !== '0' }">
        <div v-if="tabIndex === '0'">
          <div class="member_demo">
            <div class="member_left">
              <member-configuration @details="detailslist" />
            </div>
            <div style="width: -webkit-fill-available; overflow-x: hidden;">
              <Member-details :data="childName" />
            </div>
          </div>
        </div>
        <div v-if="tabIndex === '1'">
          <Business />
        </div>
        <div v-if="tabIndex === '2'">
          <Technology />
        </div>
        <div v-if="tabIndex === '3'">
          <notice-config />
        </div>
        <div v-if="tabIndex === '4'">
          <biz-configure />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import bizConfigure from './components/bizConfigure.vue'
import Business from './components/BusinessDirection.vue'
import Technology from './components/businessTechnology.vue'
import noticeConfig from './components/noticeConfig.vue'
import memberConfiguration from './components/memberConfiguration.vue'
import MemberDetails from './components/MemberDetails.vue'

export default {
  components: {
    bizConfigure,
    Business,
    Technology,
    noticeConfig,
    memberConfiguration,
    MemberDetails
  },
  data() {
    return {
      activeName: 'first',
      tabIndex: '0',
      childName: 'all'
    }
  },
  methods: {
    handleClick(tab, event) {
      this.tabIndex = tab.index
    },
    detailslist(val) {
      this.childName = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .configure_Background {
    background: #F2F3F6;
    >>>.el-tabs__nav-wrap::after {
    display: none;
    }
    >>>.el-tabs__active-bar {
      display: none;
    }
    >>>.el-tabs__header {
    margin: 0 0 20px !important;
    }
    >>>.el-tabs__item {
    color: #333;
    }
  }
  .configure_header {
    margin: 0 10px;
    background: #FFF;
  }
  .configure_Main {
    padding: 20px;
    margin: 10px;
    background: #FFF;
    min-height: calc(100vh - 236px);
  }
  .configure_Main1 {
    margin: 10px;
    background: #FFF;
    padding: 0px;
    min-height: calc(100vh - 236px);
  }
  .configure_title {
    font-size: 22px;
    font-weight: 800;
    color: #444;
    padding-top: 20px;
    display: table-cell;
    vertical-align: middle;
  }
  .member_demo {
  display: flex;
  justify-content: flex-start;
  }
.member_left {
  width: 220px;
  border-right: 1px solid #EEEEEE;
  min-height: calc(100vh - 236px);
  padding: 0 !important;
}
</style>