<template>
  <div class="app-container smallProgramButtonConfig">
    <div class="table-button-max-box">
      <p :class="checkType === 1 ? 'check-p':''" @click="checkClick(1)">首页配置</p>
      <p :class="checkType === 2 ? 'check-p':''" @click="checkClick(2)">个人中心配置</p>
    </div>
    <homeMenuConfig v-if="checkType === 1"></homeMenuConfig>
    <mineMenuConfig v-if="checkType === 2"></mineMenuConfig>
  </div>
</template>
<script>
  import homeMenuConfig from "./homeMenuConfig.vue";
  import mineMenuConfig from "./mineMenuConfig.vue";
  export default {
    name: 'smallProgramButtonConfig',
    components: {
      homeMenuConfig,
      mineMenuConfig,
    },
    data () {
      return {
        checkType:1,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      checkClick(type){
        if(this.checkType !== type){
          this.$set(this,'checkType',type);
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .smallProgramButtonConfig{
    .table-button-max-box{
      display: flex;
      height:40px;
      border-bottom:1px solid #dedede;
      p{
        line-height:40px;
        font-size:16px;
        text-align: center;
        flex:1;
        cursor: pointer;
      }
      .check-p{
        background-color: #0183FA;
        color:#fff;
      }
    }
  }
</style>
