huimv-baqing/ruoyi-screen/src/components/ScreenNavBar.vue

<template>
  <header class="screen-nav">
    <div class="screen-nav-left">
      <div
        class="screen-nav-left-item"
        v-for="item in leftNav"
        :key="item.name"
        @click="goNav(item)"
        :class="{ active: isActive(item) }"
      >
        <div class="screen-nav-item-zh">
          {{ item.zh }}
        </div>
        <div class="screen-nav-item-bo">{{ item.bo }}</div>
      </div>
    </div>
    <div class="screen-nav-right">
      <div
        class="screen-nav-right-item"
        v-for="item in rightNav"
        :key="item.name"
        @click="goNav(item)"
        :class="{ active: isActive(item) }"
      >
        <div class="screen-nav-item-zh">
          {{ item.zh }}
        </div>
        <div class="screen-nav-item-bo">
          {{ item.bo }}
        </div>
      </div>
    </div>
    <div class="logout" @click.stop="onLogout">
      <div class="screen-nav-item-zh">
        {{ logoutNav.zh }}
      </div>
      <div class="screen-nav-item-bo">
        {{ logoutNav.bo }}
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { logout } from "@/api/login";
import { removeToken } from "@/utils/auth";
import { resetScreenAutoLoginState } from "@/utils/screenAutoLogin";

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

const leftNav = [
  { name: "ScreenHome", path: "/home", zh: "首页", bo: "གཙོ་ངོས།" },
  {
    name: "LivestockResources",
    path: "/livestock-resources",
    zh: "畜牧资源",
    bo: "སྐྱེས་ཁམས་ཐོན་ཁུངས།",
  },
  {
    name: "EpidemicRisk",
    path: "/epidemic-risk",
    zh: "疫病风险",
    bo: "ནད་རིམས་ཉེན་ཁ།",
  },
];

const rightNav = [
  {
    name: "TradeSales",
    path: "/trade-sales",
    zh: "交易销售",
    bo: "འབྲེལ་གཏོང་ཚོང་འབུལ།",
  },
  {
    name: "CommonProsperity",
    path: "/common-prosperity",
    zh: "共同富裕",
    bo: "སྤྱི་འགྲོས་ཕྱུག་པོ།",
  },
];

const logoutNav = {
  name: "Logout",
  path: "/logout",
  zh: "退出登录",
  bo: "ཕྱིར་ལོག་འཛུལ་བ།",
};

const activeName = computed(() => route.name);

function isActive(item) {
  return item.name && activeName.value === item.name;
}

function goNav(item) {
  if (item.path) router.push(item.path);
}

function onLogout() {
  logout().catch(() => {});
  removeToken();
  resetScreenAutoLoginState();
  router.replace({ path: "/login" });
}
</script>


<style scoped>
.screen-nav {
  width: 100%;
  height: 100px;
  position: relative;
  font-family: inherit;
  pointer-events: none;
  background: url("../assets/header.png") no-repeat center center;
}
.screen-nav-left {
  position: absolute;
  left: 60px;
  top: 30px;
  display: flex;
}
.screen-nav-left-item {
  width: 179px;
  height: 63px;
  background: url("../assets/nav/btn.png") no-repeat center center;
  background-size: 100% 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 5px 10px;
  cursor: pointer;
  margin-right: 10px;
  pointer-events: auto;
}
.screen-nav-left-item:hover {
  background: url("../assets/nav/btn_active.png") no-repeat center center;
  background-size: 100% 100%;
}
.screen-nav-left-item.active {
  background: url("../assets/nav/btn_active.png") no-repeat center center;
  background-size: 100% 100%;
}
.screen-nav-right {
  position: absolute;
  right: 240px;
  top: 30px;
  display: flex;
}
.screen-nav-right-item {
  width: 179px;
  height: 63px;
  background: url("../assets/nav/btn.png") no-repeat center center;
  background-size: 100% 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 5px 10px;
  cursor: pointer;
  margin-right: 10px;
  pointer-events: auto;
}
.screen-nav-right-item:hover {
  background: url("../assets/nav/btn_active.png") no-repeat center center;
  background-size: 100% 100%;
}
.screen-nav-right-item.active {
  background: url("../assets/nav/btn_active.png") no-repeat center center;
  background-size: 100% 100%;
}
.logout {
  width: 179px;
  height: 63px;
  text-align: center;
  box-sizing: border-box;
  padding: 5px 10px;
  cursor: pointer;
  position: absolute;
  right: 70px;
  top: 30px;
  pointer-events: auto;
}
.screen-nav-item-zh {
  font-size: 18px;
  color: #fff;
}
.screen-nav-item-bo {
  font-size: 14px;
  color: #fff;
}
.logout:hover .screen-nav-item-zh {
  color: #16A769;
}
.logout:hover .screen-nav-item-bo {
  color: #16A769;
}

</style>