liebao-web/src/components/shopInfo.vue

<template>
  <div class="shopInfo">
    <el-row class="order_tab">
      <el-col :span="15">
        <div class="tab_list">
          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tab_ac==i?true:false}"
               v-for="(item,i) in tab_list" :key="i">
            <span>{{item.name}}</span>
            <div class="tab_line"></div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row class="content">
      <el-col :span="24">
        <component :is="activeName"></component>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import shopList from './shopCompoents/shopList';
  import storeList from './shopCompoents/bindTakeOut.vue';
  import deliveryList from './shopCompoents/bindDelivery.vue';
  import printerList from './shopCompoents/bindPrinter.vue';
  export default {
    name: 'HelloWorld',
    components: {
      shopList,
      storeList,
      deliveryList,
      printerList
    },

    data() {
      return {
        activeName: 'shopList',
        tab_list: [
          {name: '门店管理', index: 0},
          {name: '绑定外卖平台', index: 1},
          {name: '绑定配送平台', index: 2},
          {name: '绑定打印机', index: 3}
        ],
        tab_ac: 0,
      }
    },
    methods: {
      changeTabs(i) {
        this.tab_ac = i;
        switch(i) {
          case 0:
            this.activeName = 'shopList';
          break;
          case 1:
            this.activeName = 'storeList';
          break;
          case 2:
            this.activeName = 'deliveryList';
          break;
          case 3:
            this.activeName = 'printerList';
          break;
          default:
            this.activeName = 'shopList';
          break;
        }
      }
    },
    mounted() {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .shopInfo {
    .order_tab {
      width: 100%;
      height: 74px;
      background: #FFF;

      .tab_list {
        width: 100%;
        height: 74px;
        padding-top: 20px;
        padding-left: 36px;
        box-sizing: border-box;
        display: flex;

        .tab_item {
          min-width: 58px;
          margin-right: 56px;
          font-size: 16px;
          font-weight: 500;
          color: #B1B1B1;
          position: relative;
          text-align: center;
          cursor: pointer;

          .tab_line {
            width: 58px;
            height: 6px;
            background: #FFF;
            border-radius: 3px;
            margin: 15px auto 0;
          }
        }

        .tab_item_ac {
          color: #FC7200;

          .tab_line {
            background: #FC7200;
          }
        }
      }
    }

    .content {
      width: 100%;
      margin-top: 10px;
    }
  }
</style>