.pole-monitor-wrap { background-image: url("@/assets/common/bg_banner_1.png"); background-size: cover; background-position: bottom; background-repeat: no-repeat; height: 823px; .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: 511px; position: relative; background-color: #090F48; border-radius: 4px; // img { // width: 100%; // max-height: 460px; // } video { width: 100%; max-height: 460px; } .image-info{ position: absolute; height: 52px; line-height: 52px; bottom: 0; font-size: 14px; padding: 0 16px; &> span { margin-right: 10px; } } } .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, .active-slide video { 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); } } } } } }