.appearance-monitor-warp { height: 100%; display: flex; justify-content: center; // align-items: center; // .appearance-monitor-right { // display: flex; // } .pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; } :deep(.el-pagination__total) { color: #606266; margin-right: 10px; } :deep(.el-pagination__sizes .el-select__inner) { background: #002a5c; color: white; border: 1px solid #409eff; } :deep(.el-pagination__item), :deep(.el-pagination__button) { background: #002a5c; color: white; border: 1px solid #409eff; margin-right: 5px; } :deep(.el-pagination__item.is-active) { background: #409eff; color: white; } .appearance-monitor-left { .monitor-left-top { box-sizing: border-box; padding: 32px 16px; min-height: 600px; img { width: 100%; height: 600px; } } .monitor-left-bottom { width: 100%; overflow: visible; .swiper { width: 100%; height: 100%; .swiper-slide { width: 20%; border-radius:4px; img { width: 100%; height: 100%; border-radius:4px; } } .active-slide img { border-radius:4px; border: 2px solid #2ECCE0; } .swiper-button-prev, .swiper-button-next { background-color: rgba(0, 0, 0, 0.5); color: white; width: 32px; height: 32px; border-radius: 50%; } .swiper-button-prev::after, .swiper-button-next::after { font-size: 12px ; color: #FFF; } /* 修改按钮悬停样式 */ .swiper-button-prev:hover, .swiper-button-next:hover { background-color: rgba(0, 0, 0, 0.8); } } } } }