导航栏 - davy-gan/web GitHub Wiki

.moneyTabs {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden;
  margin-bottom: 12px;

  :global {
    .top-tabs {
      margin: 13px 0;
      display: flex;

      .tab-self {
        border-right: 1px solid #dfdfdf;
        flex: 1;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
      }

      .tab-self.last {
        border: 0;
      }

      .active {
        color: #2491fc;
      }
    }

    .bottom-line {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 2px;
      transition: all 0.5s;

      span {
        width: 120px;
        height: 2px;
        display: block;
        background: #2491fc;
        margin-left: calc(16.5% - 60px);
      }
    }

    .line2 {
      transform: translateX(34%);
    }

    .line3 {
      transform: translateX(67%);
    }
  }
}

<div className={styles.moneyTabs} style={{ height: '48px' }}>
          <div className="top-tabs">
            <div
              className={`tab-self ${current === 1 && 'active'}`}
              onClick={() => this.handleTab(1)}
            >
              <MyIcon type="icon-jiebei" />
              &nbsp;&nbsp;借呗
            </div>
            <div
              className={`tab-self ${current === 2 && 'active'}`}
              onClick={() => this.handleTab(2)}
            >
              <MyIcon type="icon-huabei" />
              &nbsp;&nbsp;花呗
            </div>
            <div
              className={`tab-self last ${current === 3 && 'active'}`}
              onClick={() => this.handleTab(3)}
            >
              <MyIcon type="icon-bao" />
              &nbsp;&nbsp;商融保理
            </div>
          </div>
          <div className={`bottom-line line${current}`}>
            <span />
          </div>
        </div>