.leftMenu { width: 16%; min-height: 94%; border-radius: 5px; box-shadow: 0px 4px 4px 0px rgba(0, 55, 143, 0.2); // background-color: rgba(255 255 255 / 80%); // background-color: pink; } .tab-wrapper { position: relative; box-sizing: border-box; display: flex; justify-content: center; width: 100%; height: 50px; padding: 0 45px; user-select: none; background-color: #ffffff; border-bottom: 1px solid #f8f8f8; border-top-left-radius: 5px; border-top-right-radius: 5px; } .line { position: absolute; bottom: 0; height: 2px; background-color: #409eff; transition: left 0.2s ease; } .tab { flex: 1; font-size: 12px; // font-weight: 400; line-height: 49px; color: #808284; text-align: center; cursor: pointer; &.active { color: #409eff; } } .search-wrapper { box-sizing: border-box; display: flex; align-items: center; width: 100%; height: 50px; padding: 0 10px; background-color: #ffffff; } .search-btn { margin-left: 12px; } .footer { display: flex; align-items: center; justify-content: center; height: 50px; background-color: #ffffff; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } .content { min-height: 83%; // padding: 0 10px; background-color: #ffffff; .fule { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; // padding: 0 10px; // display: flex; // flex-direction: column; .item { height: 101px; padding: 0px 10px 0 10px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; } } } .isActive { background-color: #e1eeff; border-left: 3px solid #0e7eff; } :deep(.btn-prev) { border: 1px solid #e5e5e5; } :deep(.btn-next) { border: 1px solid #e5e5e5; }