style: header style

src/layouts/default/header/components/user-dropdown/index.vue

@@ -94,15 +94,11 @@ function handleMenuClick(e: MenuInfo) {
     <template #overlay>
       <Menu @click="handleMenuClick">
         <MenuItem key="profile" :text="t('layout.header.accountCenter')" icon="ion:person-outline" />
-        <MenuItem
-          v-if="getShowDoc" key="doc" :text="t('layout.header.dropdownItemDoc')"
-          icon="ion:document-text-outline"
-        />
+        <MenuItem v-if="getShowDoc" key="doc" :text="t('layout.header.dropdownItemDoc')"
+          icon="ion:document-text-outline" />
         <MenuDivider v-if="getShowDoc" />
-        <MenuItem
-          v-if="getUseLockPage" key="lock" :text="t('layout.header.tooltipLock')"
-          icon="ion:lock-closed-outline"
-        />
+        <MenuItem v-if="getUseLockPage" key="lock" :text="t('layout.header.tooltipLock')"
+          icon="ion:lock-closed-outline" />
         <MenuItem key="logout" :text="t('layout.header.dropdownItemLoginOut')" icon="ion:power-outline" />
       </Menu>
     </template>
@@ -124,6 +120,7 @@ function handleMenuClick(e: MenuInfo) {
 
   &__avatar {
     margin-right: 5px;
+    border-radius: 50%;
   }
 
   &__name {

src/layouts/default/header/index.less

@@ -55,7 +55,6 @@
   &-logo {
     min-width: 192px;
     height: @header-height;
-    padding: 0 10px;
     font-size: 14px;
 
     img {
@@ -116,7 +115,7 @@
       display: flex !important;
       align-items: center;
       height: @header-height;
-      padding: 0 2px;
+      padding: 0 8px;
       font-size: 1.2em;
       cursor: pointer;
 
@@ -146,7 +145,6 @@
     .@{header-prefix-cls}-action {
       &__item {
         .app-iconify {
-          padding: 0 10px;
           font-size: 16px !important;
         }
 
@@ -170,7 +168,6 @@
     .@{header-prefix-cls}-action {
       &__item {
         .app-iconify {
-          padding: 0 10px;
           font-size: 16px !important;
         }
 

src/layouts/default/header/index.vue

@@ -87,12 +87,10 @@ const getMenuMode = computed(() => {
     <!-- left start -->
     <div :class="`${prefixCls}-left`">
       <!-- logo -->
-      <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" />
-      <LayoutTrigger
-        v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
-        :theme="getHeaderTheme"
-        :sider="false"
-      />
+      <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme"
+        :style="getLogoWidth" />
+      <LayoutTrigger v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
+        :theme="getHeaderTheme" :sider="false" />
       <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
     </div>
     <!-- left end -->
@@ -105,7 +103,7 @@ const getMenuMode = computed(() => {
 
     <!-- action  -->
     <div :class="`${prefixCls}-action`">
-      <AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `" />
+      <AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item search-item`" />
 
       <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
 
@@ -113,9 +111,10 @@ const getMenuMode = computed(() => {
 
       <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
 
-      <AppSizePicker :show-text="false" :class="`${prefixCls}-action__item`" />
+      <AppSizePicker :show-text="false" :class="`${prefixCls}-action__item size-item`" />
 
-      <AppLocalePicker v-if="getShowLocalePicker" :reload="true" :show-text="false" :class="`${prefixCls}-action__item`" />
+      <AppLocalePicker v-if="getShowLocalePicker" :reload="true" :show-text="false"
+        :class="`${prefixCls}-action__item locale-item`" />
 
       <UserDropDown :theme="getHeaderTheme" />