93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<template>
|
|
<div class="navbar-wrap px-24px">
|
|
<div class="w-full h-full relative flex justify-between">
|
|
<div class="left-wrap flex items-center cursor-pointer" @click="onLogoClick">
|
|
<img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
|
|
</div>
|
|
<!-- <div class="flex-1"> -->
|
|
<MiddleSide v-if="!isHomeRoute" />
|
|
<!-- </div> -->
|
|
<RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import MiddleSide from './components/middle-side';
|
|
import RightSide from './components/right-side';
|
|
|
|
import { useUserStore } from '@/stores';
|
|
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
|
import { handleUserHome } from '@/utils/user.ts';
|
|
import router from '@/router';
|
|
|
|
const route = useRoute();
|
|
const userStore = useUserStore();
|
|
const enterpriseStore = useEnterpriseStore();
|
|
|
|
const hasOpenEnterprise = computed(() => enterpriseStore.isOpenEnterprise);
|
|
const isAgentRoute = computed(() => {
|
|
return route.meta?.isAgentRoute;
|
|
});
|
|
|
|
const isHomeRoute = computed(() => {
|
|
return route.name === 'Home';
|
|
});
|
|
|
|
const onLogoClick = () => {
|
|
if (hasOpenEnterprise.value) {
|
|
handleUserHome();
|
|
} else {
|
|
router.push({
|
|
name: 'Trial',
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.navbar-wrap {
|
|
position: relative;
|
|
height: 100%;
|
|
// &::before {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// background: url('@/assets/img/icon-app-header-bg.png') center top no-repeat !important;
|
|
// background-size: cover !important;
|
|
// bottom: 0;
|
|
// content: '';
|
|
// display: block;
|
|
// left: 0;
|
|
// position: absolute;
|
|
// right: 0;
|
|
// top: 0;
|
|
// z-index: -998;
|
|
// }
|
|
|
|
// background-color: var(--color-bg-2);
|
|
// border-bottom: 1px solid var(--color-border);
|
|
.left-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.arco-dropdown-option-suffix {
|
|
display: none;
|
|
}
|
|
|
|
.enterprises-doption {
|
|
.arco-dropdown-option-content {
|
|
padding: 0 !important;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
&:not(.arco-dropdown-option-disabled):hover {
|
|
background-color: transparent;
|
|
|
|
.arco-dropdown-option-content {
|
|
background: var(--BG-200, #f2f3f5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|