CZC/operationSupport/src/views/payService/systemSetup/index.vue

<template>
  <div class="main content">
    <div class="search_bottom_tab">
      <div
        class="tab_list"
        v-for="(item, index) in tabs"
        @click="toggle(index + 1)"
        :class="activeIndex == index + 1 ? 'active' : ''"
        :key="index"
      >
        {{ item.label }}
      </div>
    </div>

    <paymentSetup v-if="activeIndex == 1" />
    <valveSetup v-if="activeIndex == 2" />
    <gateSetup v-if="activeIndex == 3" />
    <billingSettings v-if="activeIndex == 4" />
  </div>
</template>

<script>
import gateSetup from './stepPage/gateSetup.vue';
import paymentSetup from './stepPage/paymentSetup.vue';
import valveSetup from './stepPage/valveSetup.vue';
import billingSettings from './stepPage/billingSettings.vue'

export default {

  components: {
    gateSetup,
    paymentSetup,
    valveSetup,
    billingSettings
  },
  name: "systemSetup",
  data () {
    return {
      tabs: [
        {
          label: '缴费设置'
        },
        {
          label: '阀控设置'
        },
        {
          label: '闸控设置'
        },
        //  {
        //   label: '账单设置'
        // }
      ],
      activeIndex: 1
    };
  },
  methods: {
    toggle (index) {
      this.activeIndex = index;
    }
  },

  created () { }
};
</script>
<style lang='scss' scoped >
@import '@assets/css/public-style.scss';
.search_bottom_tab {
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    .tab_list {
        display: inline-block;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        color: #424656;
        &:not(:last-child) {
            margin-right: 40px;
        }
        &.active {
            color: $mainTextColor;
            border-color: $mainTextColor;
        }
    }
}
</style>