<template>
  <div class="app-container checkConfiguration">
    <div class="checkConfiguration-title-box">
      <div :class="buttonType==1?'check-box':''" @click="buttonTitleClick(1)">
        <p>检查人员</p>
        <p></p>
      </div>
      <div :class="buttonType==2?'check-box':''" @click="buttonTitleClick(2)">
        <p>整改人员</p>
        <p></p>
      </div>
    </div>
    <checkUserPage v-if="buttonType==1"></checkUserPage>
    <rectificationUserPage v-if="buttonType==2"></rectificationUserPage>
  </div>
</template>

<script>
  import checkUserPage from './checkUserPage.vue'
  import rectificationUserPage from './rectificationUserPage.vue'
  export default {
    name: 'index',
    components: {
      checkUserPage,
      rectificationUserPage,
    },
    data(){
      return{
        buttonType:1,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //页面切换
      buttonTitleClick(type){
        if(this.buttonType != type){
          this.$set(this,'buttonType',type)
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .checkConfiguration{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    *{
      font-weight:500;
    }
    .checkConfiguration-title-box{
      padding:0 20px;
      display: flex;
      border-bottom:1px solid #E0E0E0;
      div{
        height:80px;
        margin-right:40px;
        cursor: pointer;
        p:nth-child(1){
          width:80px;
          font-size:16px;
          text-align: center;
          color:#333;
          line-height:40px;
          height:40px;
          margin-top:20px;
        }
        p:nth-child(2){
          width:60px;
          height: 4px;
          border-radius:4px;
          margin:0 10px;
        }
      }
      .check-box{
        p:nth-child(1){
          color:#0045AF;
        }
        p:nth-child(2){
          background-color: #0045AF;
        }
      }
    }
  }
</style>
