tab栏切换样式

<template>
  <view class="topTab">
    <view class="tabLeft" @click="realTime">
      <view :class="realEvent == 'real' ? 'textLine' : 'text'">
        实时
      </view>
    </view>
    <view class="tabRight" @click="makeTime">
      <view :class="makeEvent == 'make' ? 'textLineT' : 'text'">
        预约
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        realEvent: 'real',
        makeEvent: '',
      }
    },

    methods: {
      // 实时
      realTime() {
        this.realEvent = 'real';
        this.makeEvent = '';
      },
      // 预约
      makeTime() {
        this.makeEvent = 'make';
        this.realEvent = '';
      },
    }

  }
</script>

<style lang="less">
  .topTab {
    width: 94%;
    margin: 10px auto 0;
    display: flex;
    font-size: 32rpx;


    .tabLeft,
    .tabRight {
      width: 50%;
      text-align: center;
      height: 44rpx;
      line-height: 44rpx;
    }

    .tabLeft {
      height: 0;
      border-top: 76rpx transparent;
      border-left: 76rpx solid #41A863;
      border-right: 76rpx solid transparent;
      border-bottom: 76rpx solid #41A863;
      color: #fff;
      border-radius: 36rpx 0 0 36rpx;

      .text {
        margin-top: 16rpx;
      }
    }

    .tabRight {
      height: 0;
      border-top: 76rpx transparent;
      border-left: 76rpx solid #007AFF;
      border-right: 76rpx solid transparent;
      border-bottom: 76rpx solid #007AFF;
      border-radius: 36rpx 0 0 36rpx;
      transform: rotate(180deg);
      margin-left: -80rpx;
      color: #fff;

      .text {
        transform: rotate(180deg);
        margin-top: 16rpx;
      }
    }

    .textLine {
      margin: 0 auto;
      width: 76rpx;
      border-bottom: 2px solid #007AFF;
      margin-top: 16rpx;
    }

    .textLineT {
      margin: 0 auto;
      width: 76rpx;
      border-bottom: 2px solid #fff;
      transform: rotate(180deg);
      margin-top: 12rpx;
    }
  }
</style>