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('Cryptocurrency') ? 'fs18 fc121212' : 'fs14 fcA8A8A8'"
          @click="switchTab('Cryptocurrency')"
        >
          币币
          <div v-if="isCurrent('Cryptocurrency')" class="active-line"></div>
        </div>
        <div
          class="nav-item pf600 sys-notifi"
          :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>
    </div>

    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

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

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

// 监听路由路径变化
watch(
  () => route.path,
  () => {
    window.scrollTo(0, 0);
    const scrollBox = document.querySelector('.page-container');
    if (scrollBox) {
      scrollBox.scrollTop = 0;
    }
  }
);

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

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

<style lang="less" scoped>
.market-layout {
  display: flex;

  align-items: center;
  width: 100%;
  height: auto;
  z-index: auto;

  /* 确保导航栏样式正常 */
  .market-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:0 15px;
    //width: 100px;
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #FFFFFF;
    /* 既然只放Tabs，可能需要一点底部间距，以免紧贴着下面的内容 */
    margin-bottom: 18px;

    .nav-left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-end;
      width: 345px;
      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>