手写TAB栏

<template>
  <div class="ToggleBar" style="margin-left:300px">
    <div class="title">
   <div
        v-for="(item, index) in title"
        @click="idx(index)"
        :class="{ colors: index == num }"
      >
        {{ item }}<a-icon type="caret-down" v-if="!(index===0||index===title.length-1)" />
      </div>
     
    </div>
    <div
      class="text"
      v-for="(item, index) in text"
      :class="{ scopedlevel: index == num }"
      v-if="index == num"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      //一级
      title: ["全部","投融资服务","创业服务","人才培训","技术与质量","信息化服务","管理咨询","市场开括","法律服务","其他"],
      // 二级
      text: ["全部", "内容二", "内容三", "内容四", "内容五", "内容六","内容七","内容八"],
      num: 0,
    };
  },

  mounted() {},

  methods: {
    idx(index) {
      this.num = index;
    },
  },
};

</script>
<style  scoped>
.colors1 {
  width: 90px;
  height: 35px;
}
.title {
  padding: 10px 5px;
  display: flex;
  cursor: pointer;
  line-height: 35px;
}
.title > div {
  margin: 10px 15px;
}
/* 点击之后添加的类名 */
.colors {
  width: 90px;
  height: 35px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  background-color: #2e67d6;
}

.scopedlevel {
  width: 1000px;
  height: 50px;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding-left: 37px;
  padding-top: 12px;
}
.complete {
  padding-top: 8px;
    margin-right: 10px;
}
.complete1 {
  padding-top: 8px;
    margin-left: 10px;
}
.colors1 {
  width: 90px;
  height: 35px;
}
.title {
  padding: 10px 5px;
  display: flex;
  cursor: pointer;
  line-height: 35px;
}
.title > div {
  margin: 10px 15px;
}
/* 点击之后添加的类名 */
.colors {
  width: 90px;
  height: 35px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  background-color: #2e67d6;
}

.scopedlevel {
  width: 1000px;
  height: 50px;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding-left: 37px;
  padding-top: 12px;
}
.complete {
  padding-top: 8px;
    margin-right: 10px;
}
.complete1 {
  padding-top: 8px;
    margin-left: 10px;
}
</style>