Bit_Wise_World/src/views/asset/otc/order/Index.vue

<template>
  <div class="loan-header">
    <div class="header-content pf600 fs16 fc1F2937">
      <img
        class="left-arrow-image"
        src="@/assets/icon/index/left-arrow.svg"
        @click="toPath()" />
      贷款
      <div class="save">
        <img src="@/assets/icon/asset/rili.png" alt="" />
      </div>
    </div>
  </div>
  <div class="notifi-classifi">
    <div class="pf600 fs18 fc121212" @click="messageChange('all')">全部</div>
    <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('buy')">购买</div>
    <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('sell')">出售</div>
  </div>
  <component :is="currentComponent" />
</template>
<script setup>
  import All from "./All.vue";
  import Buy from "./Buy.vue";
  import Sell from "./Sell.vue";
  import { ref, computed } from "vue";

  const current = ref("all");
  const componentsMap = {
    all: All,
    buy: Buy,
    sell: Sell,
  };
  const currentComponent = computed(() => componentsMap[current.value]);

  const messageChange = (key) => {
    current.value = key;
  };
</script>
<style lang="less" scoped>
  .loan-header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 48px;
    background: #ffffff;
    overflow: hidden;

    .header-content {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
      height: 48px;

      .left-arrow-image {
        position: absolute;
        left: 14px;
        top: 16px;
        width: 9px;
        height: 16px;
      }

      .save {
        position: absolute;
        top: 15px;
        right: 16px;

        img {
          width: 15px;
          height: 16px;
        }
      }
    }
  }

  .notifi-classifi {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0 auto;
    margin-top: 48px;
    width: 345px;
    height: 24px;

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