用css和div模拟一个tab栏

效果如图

 <div class="tabBar">
      <div
        class="tab-item"
        :class="tabType === 1 ? 'active' : ''"
        @click="tabType = 1"
      >
        项目概述
      </div>
      <div
        class="tab-item"
        :class="tabType === 2 ? 'active' : ''"
        @click="tabType = 2"
      >
        建设周期
      </div>
      <div
        class="tab-item"
        :class="tabType === 3 ? 'active' : ''"
        @click="tabType = 3"
      >
        设计效果图
      </div>
      <div
        class="tab-item"
        :class="tabType === 4 ? 'active' : ''"
        @click="tabType = 4"
      >
        考核体系及目标
      </div>
      <div
        class="tab-item"
        :class="tabType === 5 ? 'active' : ''"
        @click="tabType = 5"
      >
        建设子项
      </div>
    </div>

使用

样式

  .tabBar {
    
    
    height: 50px;
    @include bg_color5($background-color5-theme1); // 引入主题变更时的样式颜色
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .tab-item {
    
    
      padding: 0 24px;
      font-size: 16px;
      font-weight: 400;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      @include text_color2($text-color2-theme1);
      cursor: pointer;
      &.active {
    
    
        color: #1890ff;
        border-bottom: 2px solid #1890ff;
      }
    }
  }