|
|
@@ -31,10 +31,9 @@
|
|
|
scrollValue > 200 ? 'nav-scrolled' : 'nav-not-scrolled',
|
|
|
]"
|
|
|
>
|
|
|
- <div></div>
|
|
|
- <div class="group">
|
|
|
+ <div class="nav-box nav-left">
|
|
|
</div>
|
|
|
- <div class="group center">
|
|
|
+ <div class="nav-box nav-center">
|
|
|
<div class="headerlogos">
|
|
|
<img class="main-clickable" src="@/assets/images/LogoIcon.png" @click="goIndex" />
|
|
|
<div>
|
|
|
@@ -42,22 +41,21 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="group">
|
|
|
+ <div class="nav-box nav-right">
|
|
|
+ <a-dropdown v-if="authStore.isLogged" :trigger="['click']">
|
|
|
+ <div class="flex flex-row items-center gap-2 cursor-pointer">
|
|
|
+ <span>{{ authStore.userInfo?.nickname || '请登录' }}</span>
|
|
|
+ <a-image :src="IconUser" class="right-button" :preview="false" />
|
|
|
+ </div>
|
|
|
+ <template #overlay>
|
|
|
+ <a-menu>
|
|
|
+ <a-menu-item key="2" @click="router.push('/change-password')">修改密码</a-menu-item>
|
|
|
+ <a-menu-item key="3" @click="logout">退出登录</a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </template>
|
|
|
+ </a-dropdown>
|
|
|
+ <div v-else></div>
|
|
|
</div>
|
|
|
-
|
|
|
- <a-dropdown v-if="authStore.isLogged" :trigger="['click']">
|
|
|
- <div class="flex flex-row items-center gap-2 cursor-pointer">
|
|
|
- <span>{{ authStore.userInfo?.nickname || '请登录' }}</span>
|
|
|
- <a-image :src="IconUser" class="right-button" :preview="false" />
|
|
|
- </div>
|
|
|
- <template #overlay>
|
|
|
- <a-menu>
|
|
|
- <a-menu-item key="2" @click="router.push('/change-password')">修改密码</a-menu-item>
|
|
|
- <a-menu-item key="3" @click="logout">退出登录</a-menu-item>
|
|
|
- </a-menu>
|
|
|
- </template>
|
|
|
- </a-dropdown>
|
|
|
- <div v-else></div>
|
|
|
</nav>
|
|
|
</template>
|
|
|
|
|
|
@@ -120,7 +118,7 @@ $nav-height: 70px;
|
|
|
nav.main {
|
|
|
position: fixed;
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
z-index: 100;
|
|
|
width: 100%;
|
|
|
@@ -153,6 +151,24 @@ nav.main {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .nav-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .nav-left {
|
|
|
+ width: 20%;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ .nav-center {
|
|
|
+ width: 60%;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .nav-right {
|
|
|
+ width: 20%;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
.group {
|
|
|
display: flex;
|
|
|
gap: 1rem;
|