SZYGM1.0/src/views/dashboard/components/comHead.vue

<template>
  <div class="dashboard-head flex">
    <!-- <div class="dashboard-head-title">{{title}}</div> -->
    <div class="dashboard-head-tabs flex-wrap">
      <div
        class="dashboard-head-tabs-list"
        :class="tabsIndex == index ? 'active' : ''"
        @click="tabClick(item, index)"
        v-for="(item, index) in tabs"
        :key="index"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- <div class="dashboard-head-zw"></div> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const router = useRouter();
const props = defineProps({
  tabsIndex: {
    type: Number,
    default: 0,
  },
});
const tabs = [
  {
    id: 1,
    label: "国内出港",
    value: "one",
  },
  {
    id: 2,
    label: "国内进港",
    value: "two",
  },
  {
    id: 3,
    label: "国际出港",
    value: "three",
  },
  {
    id: 4,
    label: "国际进港",
    value: "four",
  },
];
const { tabsIndex } = props;
const tabClick = (item, index) => {
  if (index == 0) {
    router.push({
      path: "../homeOut",
    });
  }
  if (index == 1) {
    router.push({
      path: "../homein",
    });
  }
  if (index == 2) {
    router.push({
      path: "../indexOut",
    });
  }
  if (index == 3) {
    router.push({
      path: "../indexIn",
    });
  }
};
</script>

<style lang="scss" scoped>
.dashboard-head {
  &-tabs {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    &-list {
      margin-right: 60px;
      cursor: pointer;
      position: relative;
      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      color: #51dee9;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 80%;
        left: 10%;
        height: 2px;
        background: #51dee9;
      }
    }
  }
}
</style>