FE-V2-PC/src/views/comprehensive/personnel/patrolRecord/infoPage.vue

<template>
  <div class="onDutyConfigurationInfo">
    <div class="onDutyConfigurationInfo-title-box">
      <p>{{propsData.time}}巡查记录</p>
      <p class="add-button-one-90" @click="outButton">返回</p>
    </div>
    <div class="list-max-big-box scrollbar-box">
      <div class="list-max-big-title-box">
        <div>
          <p :class="buttonType == 1?'text-p':''" @click="buttonClick(1)">正常记录</p>
          <p :class="buttonType == 1?'color-p':''"></p>
        </div>
        <div>
          <p :class="buttonType == 2?'text-p':''" @click="buttonClick(2)">异常记录</p>
          <p :class="buttonType == 2?'color-p':''"></p>
        </div>
      </div>
      <normal-page v-if="buttonType==1" :propsPageData="propsData"></normal-page>
      <anomaly-page v-if="buttonType==2" :propsPageData="propsData"></anomaly-page>
    </div>
  </div>
</template>

<script>
  import normalPage from "./normalPage.vue";
  import anomalyPage from "./anomalyPage.vue";
  export default {
    name: 'infoPage',
    components: {
      normalPage,
      anomalyPage
    },
    props:{
      propsData:{},
    },
    data(){
      return{
        buttonType:1,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //页面切换按钮
      buttonClick(type){
        if(this.buttonType != type){
          this.$set(this,'buttonType',type)
        }
      },
      //返回按钮
      outButton(){
        this.$parent.goPage('index')
      },
    }
  }
</script>

<style scoped lang="scss">
  .onDutyConfigurationInfo{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    *{
      margin:0;
      padding:0;
    }
    .onDutyConfigurationInfo-title-box{
      display: flex;
      height: 80px;
      border-bottom:1px solid #E0E0E0;
      p:nth-child(1){
        flex:1;
        line-height:80px;
        margin-left:20px;
        color:#0045AF;
        font-size:16px;
        font-weight:900;
      }
      p:nth-child(2){
        margin:20px;
      }
    }
    .list-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:0 20px 10px;
      .list-max-big-title-box{
        display: flex;
        div{
          overflow: hidden;
          margin-right:48px;
          padding:15px 0 19px;
          p:nth-child(1){
            cursor: pointer;
            width: 78px;
            height: 42px;
            font-size: 16px;
            line-height: 42px;
            text-align: center;
          }
          p:nth-child(2){
            margin:0 auto;
            width: 55px;
            height: 4px;
          }
          .text-p{
            color: #0045AF;
          }
          .color-p{
            background: #0045AF;
            border-radius: 20px 20px 20px 20px;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .onDutyConfigurationInfo{
    .el-table__empty-text{
      font-size: 12px;
      background: none;
      color:#909399;
    }
  }
</style>