<template>
  <div class="max-big-box">
    <div class="top-max-box">
      <p :class="{'p-color-A':pageType==1,'p-color-B':pageType!=1,}"
         @click="pageTypeClick('1')">列表信息</p>
      <p :class="{'p-color-A':pageType==2,'p-color-B':pageType!=2,}"
         @click="pageTypeClick('2')">统计信息</p>
    </div>
    <div class="bottom-max-box">
      <list-info v-if="pageType==1"></list-info><!--列表信息-->
      <statistics v-if="pageType==2"></statistics><!--统计信息-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "equipmentMaterialReserveLevelInformation",//装备物资储备水平信息
    components:{
      listInfo: resolve => {require(['@/components/equipmentSituation/equipmentMaterialReserveLevelInformationView/listInfo'], resolve)},//列表信息
      statistics: resolve => {require(['@/components/equipmentSituation/equipmentMaterialReserveLevelInformationView/statistics'], resolve)},//统计信息
    },
    data () {
      return {
        pageType:1,
      }
    },

    created(){

    },
    mounted() {

    },
    methods: {
      //页面切换
      pageTypeClick(type){
        if(this.pageType!=type){
          this.pageType=type;
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex-direction column
    flex:1;
    .top-max-box
      display: flex;
      margin:0 105px 0;
      p
        margin-right:24px;
        width:120px;
        font-size:$font_13;
        color:$color_ff
        line-height:30px;
        border-radius:4px;
        cursor:pointer
      .p-color-A
        box-shadow:0 0 20px 1px #06b1f0 inset
        background:rgba(6,177,240,0.5);
      .p-color-B
        box-shadow:0 0 20px 1px #0a73a7 inset
        background:rgba(6,177,240,0.2);

    .bottom-max-box
      display flex
      flex:1;
</style>
