.container { width: 100%; height: 100%; display: flex; gap: 10px; padding-left: 5px; // padding-right: 5px; padding-top: 10px; padding-bottom: 10px; background-color: #f5f5f5; // 左侧菜单 .leftMenu { display: flex; flex-direction: column; // gap: 1px; flex-shrink: 0; background-color: #fff; .menuItem { width: 180px; height: 50px; background-color: #FFFFFF; border-radius: 4px; display: flex; align-items: center; position: relative; cursor: pointer; transition: all 0.3s ease; padding-left: 20px; .menuText { font-size: 14px; color: #999999; font-weight: 400; transition: color 0.3s ease; } // 激活状态的指示器(左侧长条) .activeIndicator { position: absolute; left: 3px; width: 17.34765625px; height: 1.97802734375px; border-radius: 6px; background-color: #009D6F; transform: rotate(-90deg); } // 激活状态样式 &.active { background-color: #D4FFEC; .menuText { color: #009D6F; } } // 鼠标悬停效果 &:hover:not(.active) { background-color: #f9f9f9; } } } // 右侧内容区 .rightContent { flex: 1; // background-color: #FFFFFF; border-radius: 4px; // padding: 20px; overflow: auto; .contentPlaceholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #666666; } } }