Quellcode durchsuchen

优化经典布局分割菜单

zhontai vor 2 Jahren
Ursprung
Commit
b2c6f4e877
1 geänderte Dateien mit 10 neuen und 1 gelöschten Zeilen
  1. 10 1
      src/layout/navBars/breadcrumb/index.vue

+ 10 - 1
src/layout/navBars/breadcrumb/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-navbars-breadcrumb-index">
+  <div class="layout-navbars-breadcrumb-index" :class="setBreadcrumbStyle">
     <Logo v-if="setIsShowLogo" />
     <Breadcrumb />
     <Horizontal :menuList="state.menuList" v-if="isLayoutTransverse" />
@@ -31,6 +31,12 @@ const state = reactive({
   menuList: [] as RouteItems,
 })
 
+const setBreadcrumbStyle = computed(() => {
+  const { topBar } = themeConfig.value
+  const bgTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff']
+  return [bgTheme.includes(topBar) ? '' : 'layout-navbars-breadcrumb-index-no-bb']
+})
+
 // 设置 logo 显示/隐藏
 const setIsShowLogo = computed(() => {
   let { isShowLogo, layout } = themeConfig.value
@@ -104,4 +110,7 @@ onUnmounted(() => {
   background: var(--next-bg-topBar);
   border-bottom: 1px solid var(--next-border-color-light);
 }
+.layout-navbars-breadcrumb-index-no-bb {
+  border-bottom-width: 0px;
+}
 </style>