.pole-monitor-wrap { background-image: url("@/assets/common/bg_banner.png"); // background-color: red; background-size: contain; background-position: center; background-repeat: no-repeat; .bg_footer_desp{ width: 100%; height: 20px; background-image: url("@/assets/common/bg_banner_footer.png"); // background-color: red; background-size: contain; background-position: bottom center; background-repeat: no-repeat; } .search-section { padding: 16px 0; } .pole-main-content { width: 100%; } .pole-monitor-search-box { display: flex; align-items: center; gap: 12px; margin: 16px 0; } .right-panel { .el-scrollbar__view { background: transparent !important; height: 600px; } } .pole-monitor-main { .left-panel { .main-image { box-sizing: border-box; min-height: 512px; img { width: 100%; height: 512px; } } .thumbnail-container { width: 100%; overflow: visible; .swiper { width: 100%; height: 100%; .swiper-slide { width: 20%; border-radius: 4px; img { width: 100%; height: 144px; 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); } } } } } }