Bit_Wise_World/src/views/bitcoin/TradeLayout.vue

<template>
  <div class="market-layout">
    <div class="market-nav">
      <div class="nav-left">
        <div
          class="nav-item pf600"
          :class="isCurrent('TradeContract') ? 'fs18 fc121212' : 'fs14 fcA8A8A8'"
          @click="switchTab('TradeContract')"
        >
          合约
          <div v-if="isCurrent('TradeContract')" class="active-line"></div>
        </div>

        <div
          class="nav-item pf600 sys-notifi"
          :class="isCurrent('TradeSeconds') ? 'fs18 fc121212' : 'fs14 fcA8A8A8'"
          @click="switchTab('TradeSeconds')"
        >
          秒合约
          <div v-if="isCurrent('TradeSeconds')" class="active-line"></div>
        </div>

        <div
          class="nav-item pf600 sys-notifi"
          :class="isCurrent('TradeOptions') ? 'fs18 fc121212' : 'fs14 fcA8A8A8'"
          @click="switchTab('TradeOptions')"
        >
          期权
          <div v-if="isCurrent('TradeOptions')" class="active-line"></div>
        </div>

        <div
          class="nav-item pf600 sys-notifi"
          :class="isCurrent('TradeMargin') ? 'fs18 fc121212' : 'fs14 fcA8A8A8'"
          @click="switchTab('TradeMargin')"
        >
          杠杆
          <div v-if="isCurrent('TradeMargin')" class="active-line"></div>
        </div>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const switchTab = (name) => {
  router.push({ name });
};

const isCurrent = (name) => {
  return route.name === name;
};
</script>

<style lang="less" scoped>
.market-layout {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  /* 确保导航栏样式正常 */
  .market-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 21px;
    width: 345px;
    height: 24px;
    /* 既然只放Tabs，可能需要一点底部间距，以免紧贴着下面的内容 */
    margin-bottom: 18px;

    .nav-left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-end;
      width: 349px;
      height: 24px;

      .nav-item {
        position: relative;
        cursor: pointer;
        transition: all 0.2s;

        .active-line {
          position: absolute;
          bottom: -6px;
          left: 50%;
          transform: translateX(-50%);
          width: 20px;
          height: 3px;
          background-color: #323233;
          border-radius: 2px;
        }
      }

      .sys-notifi {
        margin-left: 35px;
      }
    }
  }
}
</style>