.container { background-color: transparent; width: 100%; height: 89vh; overflow: hidden; display: flex; flex-direction: column; .TopButton { background-color: white; width: 100%; padding: 8px 15px 5px; display: flex; gap: 24px; // margin-left: 6px; .TopButtonItem { background-color: #FFFFFF !important; color: #999999 !important; font-family: 'PingFang SC', sans-serif !important; font-weight: 500 !important; font-size: 14px !important; line-height: 100% !important; border-radius: 8px !important; padding: 4px 16px !important; height: auto !important; border: none !important; box-shadow: none !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; transition: all 0.3s ease !important; &:hover { color: #999999 !important; border: none !important; } &:focus { color: #999999 !important; border: none !important; } &.active { background: linear-gradient(98.03deg, #00E49C 0.68%, #00D2D2 98.3%) !important; box-shadow: 0px 2px 2px 0px #AEEDDE !important; color: #FFFFFF !important; &::after { content: ''; width: 28px; height: 5px; background-color: #FFFFFF; border-radius: 6px; opacity: 1; } } } } .content { // ======== 内容区域样式 ======== flex: 1; // ======== 占据剩余空间 ======== overflow-y: auto; // ======== 允许垂直滚动 ======== padding: 0; // ======== 无内边距 ======== } }