aizuda-web-vue3/src/layout/LayoutTop/index.scss

@import "../layout_common";
.#{$prefix}layout-wrap--top {
  width: 100%;
  height: 100%;
	.#{$prefix}layout-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: $header_height;
    padding: 0;
    background-color: var(--el-header-bg-color);
    border-bottom: 1px solid var(--el-header-border-color);
    //box-shadow: 0 1px 4px -1px var(--el-header-border-color);
    //z-index: $header_index;
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 210px;
      margin-right: 10px;
      .logo-img {
        //width: 28px;
        width: 36px;
        height: 36px;
        object-fit: contain;
        margin: 0 6px;
      }
      .logo-text {
        font-size: 15px;
        font-weight: bold;
        color: var(--el-color-primary);
        white-space: nowrap;
      }
    }
    .layout-menu-wrap {
      flex: 1;
      height: 100%;
      overflow: hidden;
      border-bottom: none;
			margin-top: 0;
      .el-sub-menu__hide-arrow {
        width: 65px;
        //height: $header_height - 1px;
      }
			.el-menu-item,
			.el-sub-menu__title {
				margin-top: 0;
				&::before {
					left: 0;
					right: 0;
				}
			}
      .is-active {
        border-bottom-color: var(--el-color-primary) !important;
        /*&::before {
          width: 0;
        }*/
        .el-sub-menu__title {
          border-bottom-color: var(--el-color-primary) !important;
        }
      }
    }
  }

  @media screen and (width <= 730px) {
    .logo {
      display: none !important;
    }
  }
  .app-main {
    min-height: 0;
  }
}
.layout-menu-popper-wrap.el-menu--horizontal {
	--el-menu-horizontal-sub-item-height: 42px;
	.el-menu-item::before,
	.el-sub-menu__title::before {
		left: 0;
		right: 0;
	}
}