FE-V2-PC/src/views/safetyCheck/safetyHazard/index.vue

<!--安全隐患-->
<template>
  <div class="app-container safetyHazard">
    <div class="safetyHazard-page">
      <div class="title-button-box">
        <div :class="pageType == 1?'check-div':''" @click="goPage(1)">
          <p>校院巡查隐患</p>
          <p></p>
        </div>
        <div :class="pageType == 2?'check-div':''" @click="goPage(2)">
          <p>实验室自查隐患</p>
          <p></p>
        </div>
        <div :class="pageType == 3?'check-div':''" @click="goPage(3)">
          <p>暂无法整改隐患</p>
          <p></p>
        </div>
      </div>
      <schoolListPage v-if="pageType == 1"></schoolListPage>
      <departmentListPage v-if="pageType == 2"></departmentListPage>
      <cannotListPage v-if="pageType == 3"></cannotListPage>
    </div>
  </div>
</template>

<script>
  import schoolListPage from './schoolListPage.vue'
  import departmentListPage from './departmentListPage.vue'
  import cannotListPage from './cannotListPage.vue'
  export default {
    name: 'index',
    components: {
      schoolListPage,
      departmentListPage,
      cannotListPage
    },
    data(){
      return{
        pageType:1,

      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      goPage(type){
        if(this.pageType != type){
          this.$set(this,'pageType',type);
        }
      },
    }
  }
</script>

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