/* components/media-carousel/media-carousel.wxss */ .media-carousel { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 16rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); } /* 自适应高度模式 */ .media-carousel.adaptive-height { min-height: 400rpx; } .carousel-swiper { width: 100%; height: 100%; } .carousel-item { width: 100%; height: 100%; position: relative; } .adaptive-height .carousel-item { height: auto; } /* 图片容器样式 */ .image-container { width: 100%; height: 100%; position: relative; overflow: hidden; background-color: #f5f5f5; /* 添加背景色,避免空白区域突兀 */ display: flex; align-items: center; justify-content: center; } .adaptive-height .image-container { height: auto; background-color: transparent; } .carousel-image { width: 100%; height: 100%; display: block; /* 确保图片在aspectFit模式下居中显示 */ object-position: center; } .adaptive-height .carousel-image { height: auto; max-height: none; } .image-title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; padding: 20rpx; font-size: 28rpx; line-height: 1.4; z-index: 2; } /* 视频容器样式 */ .video-container { width: 100%; height: 100%; position: relative; overflow: hidden; } .carousel-video { width: 100%; height: 100%; display: block; } .video-title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; padding: 20rpx; font-size: 28rpx; line-height: 1.4; z-index: 2; }