|
@@ -1,8 +1,32 @@
|
|
|
<template>
|
|
|
- <router-view class="bg-white" />
|
|
|
+ <div :class="{ 'pt-[48px]': currentPath !== '' }">
|
|
|
+ <div
|
|
|
+ v-if="currentPath !== ''"
|
|
|
+ class="fixed z-50 top-0 left-0 shadow-sm w-[100vw]"
|
|
|
+ >
|
|
|
+ <div class="max-w-[1800px] mx-auto h-[48px] flex bg-sky-600">
|
|
|
+ <div class="leading-[48px] px-8 font-black text-white">Indent APP</div>
|
|
|
+ <div class="flex">
|
|
|
+ <div
|
|
|
+ v-for="item in navList"
|
|
|
+ :key="item.key"
|
|
|
+ @click="$router.push(item.path)"
|
|
|
+ class="cursor-pointer h-[100%] w-[100px] leading-[48px] px-4 no-underline text-white hover:font-bold flex justify-center"
|
|
|
+ :class="{
|
|
|
+ 'font-bold': currentPath === item.key,
|
|
|
+ 'bg-sky-900': currentPath === item.key,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ item.key }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <router-view class="bg-white" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { defineComponent, provide } from 'vue'
|
|
|
+import { defineComponent, provide, computed } from 'vue'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import Cookie from 'js-cookie'
|
|
|
defineComponent({
|
|
@@ -43,6 +67,38 @@ if (!token && $route.path !== '/indent-manage/login') {
|
|
|
console.log('已登录')
|
|
|
$router.replace({ path: $route.path })
|
|
|
}
|
|
|
+const navList = [
|
|
|
+ {
|
|
|
+ key: 'indent',
|
|
|
+ path: '/indent-manage/indent/list',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'product',
|
|
|
+ path: '/indent-manage/product/list',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'supplier',
|
|
|
+ path: '/indent-manage/supplier/list',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'user',
|
|
|
+ path: '/indent-manage/user',
|
|
|
+ },
|
|
|
+]
|
|
|
+let currentPath = computed(() => {
|
|
|
+ let result = ''
|
|
|
+
|
|
|
+ if (/indent-manage\/indent/.test($route.path)) {
|
|
|
+ result = 'indent'
|
|
|
+ } else if (/indent-manage\/product/.test($route.path)) {
|
|
|
+ result = 'product'
|
|
|
+ } else if (/indent-manage\/user/.test($route.path)) {
|
|
|
+ result = 'user'
|
|
|
+ } else if (/indent-manage\/supplier/.test($route.path)) {
|
|
|
+ result = 'supplier'
|
|
|
+ }
|
|
|
+ return result
|
|
|
+})
|
|
|
</script>
|
|
|
<style>
|
|
|
.bg-white {
|