tab切换样式

一、样式一

 
        {{item.label}}
      

data(){
    return {
    active: 0,
    tabs: [
      {label: '我的工作'},
      {label: '我发布的'},
    ],
  }
}

  .tabs {
    display: flex; gap: 20px;
    .tab {
      background-color: $uni-bg-color; padding: 3px 10px; position: relative; transform: scale(1); transform-origin: left bottom; border-radius: 5px;
      transition: background-color .3s, color .3s, transform .3s;
      &:before, &:after {
        content: ""; position: absolute; display: block; background-color: #FFFFFF; width: 20px; height: 100%;  top: 0; z-index: -1; transition: background-color .3s;
      }
      &:before {
        left: 0; transform: skewX(20deg) translateX(-50%);
      }
      &:after {
        right: 0; transform: skewX(20deg) translateX(50%);
      }
      &.active {
        background-color: $uni-color-primary; color: $uni-text-color-inverse; transform: scale(1.11); z-index: 9;
        &:before, &:after {
          background-color: $uni-color-primary;
        }
        &:before {
          border-top-left-radius: 5px; border-bottom-left-radius: 5px;
        }
        &:after {
          border-top-right-radius: 5px; border-bottom-right-radius: 5px;
        }

      }
      &:first-child:before, &:last-child:after {
        display: none;
      }
      &:first-child {
        padding-left: 20px;
      }
      &:last-child {
        padding-right: 20px;
      }
    }
  }