fix(style): fix layout style, fix #633

vben
1 parent e3569b81
Showing 2 changed files with 27 additions and 31 deletions
src/layouts/default/header/MultipleHeader.vue
src/layouts/default/header/index.less
@@ -50,42 +50,38 @@
         return unref(getFixed) || unref(getShowFullHeaderRef);
       });
-      const getWrapStyle = computed(
-        (): CSSProperties => {
-          const style: CSSProperties = {};
-          if (unref(getFixed)) {
-            style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
-          }
-          if (unref(getShowFullHeaderRef)) {
-            style.top = `${HEADER_HEIGHT}px`;
-          }
-          return style;
+      const getWrapStyle = computed((): CSSProperties => {
+        const style: CSSProperties = {};
+        if (unref(getFixed)) {
+          style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
         }
-      );
+        if (unref(getShowFullHeaderRef)) {
+          style.top = `${HEADER_HEIGHT}px`;
+        }
+        return style;
+      });
       const getIsFixed = computed(() => {
         return unref(getFixed) || unref(getShowFullHeaderRef);
       });
-      const getPlaceholderDomStyle = computed(
-        (): CSSProperties => {
-          let height = 0;
-          if (
-            (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
-            unref(getShowHeader) &&
-            !unref(getFullContent)
-          ) {
-            height += HEADER_HEIGHT;
-          }
-          if (unref(getShowMultipleTab) && !unref(getFullContent)) {
-            height += TABS_HEIGHT;
-          }
-          headerHeightRef.value = height;
-          return {
-            height: `${height}px`,
-          };
+      const getPlaceholderDomStyle = computed((): CSSProperties => {
+        let height = 0;
+        if (
+          (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
+          unref(getShowHeader) &&
+          !unref(getFullContent)
+        ) {
+          height += HEADER_HEIGHT;
         }
-      );
+        if (unref(getShowMultipleTab) && !unref(getFullContent)) {
+          height += TABS_HEIGHT;
+        }
+        headerHeightRef.value = height;
+        return {
+          height: `${height}px`,
+        };
+      });
       const getClass = computed(() => {
         return [
@@ -116,7 +112,7 @@
     flex: 0 0 auto;
     &--dark {
-      margin-left: 0;
+      margin-left: -1px;
     }
     &--fixed {
@@ -166,7 +166,7 @@
   &--dark {
     background-color: @header-dark-bg-color !important;
-    border-bottom: 1px solid @border-color-base;
+    // border-bottom: 1px solid @border-color-base;
     border-left: 1px solid @border-color-base;
     .@{header-prefix-cls}-logo {
       &:hover {