FE-V2-PC/src/views/comprehensive/system/publicConfig/index.vue

<template>
  <div class="app-container classifiedGrading">
    <div class="top-button-max-box">
      <div class="top-button-box" @click="buttonPageType(1)">
        <p :class="pageType == 1 ? 'p-color':''">基础配置</p>
        <p :class="pageType == 1 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(2)">
        <p :class="pageType == 2 ? 'p-color':''">化学品终端</p>
        <p :class="pageType == 2 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(3)">
        <p :class="pageType == 3 ? 'p-color':''">一体机</p>
        <p :class="pageType == 3 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(4)">
        <p :class="pageType == 4 ? 'p-color':''">小程序</p>
        <p :class="pageType == 4 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(5)">
        <p :class="pageType == 5 ? 'p-color':''">开发配置</p>
        <p :class="pageType == 5 ? 'p-back':''"></p>
      </div>
    </div>
    <basics-config v-if="pageType == 1"></basics-config>
    <chemicals-config v-if="pageType == 2"></chemicals-config>
    <integrationConfig v-if="pageType == 3"></integrationConfig>
    <program-config v-if="pageType == 4"></program-config>
    <exploit-config v-if="pageType == 5"></exploit-config>
  </div>
</template>

<script>
import basicsConfig from "./basicsConfig.vue";
import chemicalsConfig from "./chemicalsConfig.vue";
import integrationConfig from "./integrationConfig.vue";
import programConfig from "./programConfig.vue";
import exploitConfig from "./exploitConfig.vue";
export default {
  name: "index",
  components: {
    basicsConfig,
    chemicalsConfig,
    integrationConfig,
    programConfig,
    exploitConfig,
  },
  data() {
    return {
      pageType:1,
    }
  },
  created() {

  },
  mounted(){

  },
  methods:{
    // 选项卡切换
    buttonPageType(type){
      if(this.pageType != type){
        this.pageType = type;
      }
    },
  }
}
</script>

<style scoped lang="scss">
.classifiedGrading{
  flex:1;
  display: flex;
  flex-direction: column;
  *{
    margin:0;
  }
  .top-button-max-box{
    display: flex;
    padding:16px 10px 0;
    border-bottom:1px solid #D8D8D8;
    .top-button-box{
      height:73px;
      padding:0 25px;
      p:nth-child(1){
        line-height:68px;
        text-align: center;
        font-weight:500;
        cursor: pointer;
      }
      p:nth-child(2){
        height:5px;
        border-radius:2px;
      }
      .p-color{
        color:#0045AF;
      }
      .p-back{
        background: #0045AF;
      }
    }
  }
}
</style>