细节样式调整

15179599649

2024-03-11 2362f8bce1fc26a28b3c2a019ae3216efa399de5

 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>