From 2362f8bce1fc26a28b3c2a019ae3216efa399de5 Mon Sep 17 00:00:00 2001
From: 15179599649 <zhangyiyao89@qq.com>
Date: Mon, 11 Mar 2024 09:05:22 +0800
Subject: [PATCH] 细节样式调整
---
src/components/common/topbar.vue | 56 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 37 insertions(+), 19 deletions(-)
diff --git a/src/components/common/topbar.vue b/src/components/common/topbar.vue
index 21f54b2..59aa84d 100644
--- a/src/components/common/topbar.vue
+++ b/src/components/common/topbar.vue
@@ -1,32 +1,47 @@
<template>
- <div class="width-100 flex-row flex-justify-between flex-align-center" style="height: 60px;">
+ <div class="width-100 flex-row flex-justify-between flex-align-center" style="height: 58px;">
<div class="height-100">
<!-- <a-avatar :size="40" shape="square" :src="cloudapi" /> -->
- <span class="ml10 fontBold">{{ workspaceName }}</span>
+ <!-- <span class="ml10 fontBold">{{ workspaceName }}</span> -->
</div>
<a-space class="fz16 height-100" size="large">
- <router-link
+ <router-link
v-for="item in options"
:key="item.key"
:to="item.path"
:class="{
'menu-item': true,
- }">
- <span @click="selectedRoute(item.path)" :style="selected === item.path ? 'color: #2d8cf0;' : 'color: white'">{{ item.label }}</span>
- </router-link>
+ }"
+ >
+ <span
+ @click="selectedRoute(item.path)"
+ :style="selected === item.path ? 'color: #2d8cf0;' : 'color: white'"
+ >{{ item.label }}</span>
+ </router-link>
</a-space>
<div class="height-100 fz16 flex-row flex-justify-between flex-align-center">
<a-dropdown>
- <div class="height-100">
- <span class="fz20 mt20" style="border: 2px solid white; border-radius: 50%; display: inline-flex;"><UserOutlined /></span>
- <span class="ml10 mr10" style="float: right;">{{ username }}</span>
+ <div class="height-100 flex-display flex-align-center" style="height:58px;">
+ <span
+ class="fz18"
+ style="border: 2px solid white; border-radius: 50%; display: inline-flex;"
+ >
+ <UserOutlined />
+ </span>
+ <span class="ml5 mr5 fz14" style="float: right;">{{ username }}</span>
</div>
<template #overlay>
- <a-menu theme="dark" class="flex-column flex-justify-between flex-align-center">
+ <a-menu
+ theme="dark"
+ class="flex-column flex-justify-between flex-align-center"
+ style="margin-top:-15px;background:black"
+ >
<a-menu-item>
- <span class="mr10" style="font-size: 16px;"><ExportOutlined /></span>
+ <span class="mr10" style="font-size: 16px;">
+ <ExportOutlined />
+ </span>
<span @click="logout">退出登录</span>
</a-menu-item>
</a-menu>
@@ -47,13 +62,17 @@
const root = getRoot()
const selected = ref<string>(root.$route.path)
const route = useRoute()
-watch(route, (newVal) => {
- if (newVal) {
- selected.value = newVal.path
- }
-}, {
- immediate: true,
-})
+watch(
+ route,
+ (newVal) => {
+ if (newVal) {
+ selected.value = newVal.path
+ }
+ },
+ {
+ immediate: true,
+ },
+)
interface IOptions {
key: number
label: string
@@ -99,5 +118,4 @@
font-weight: 500;
font-size: 18px;
}
-
</style>
--
Gitblit v1.9.3