/* packageC/video_goods/VideoList/VideoList.wxss */ .video-list .banner { width: 100%; /* height: 320rpx; */ } .video-list .load { text-align: center; } .video-list .load image { width: 90rpx; } .video-list .banner swiper { width: 100%; height: 320rpx; } .video-list .banner .img { width: 100%; height: 320rpx; } .video-list .banner .img image { width: 100%; height: 100%; } .video-list .video-list { margin: 16rpx; text-align: left; } .video-list .video-list .ul { vertical-align: top; display: inline-block; width: 49%; /* display: flex; */ /* flex-wrap: wrap; */ } .video-list .video-list .Mright { margin-right: 2%; } .video-list .video-list .li { position: relative; display: flex; flex-direction: column; background-color: #fff; overflow: hidden; border-radius: 12rpx; margin-bottom: 16rpx; } .video-list .video-list .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .video-list .video-list .play image { width: 100%; height: 100%; } .video-list .video-list .li:nth-child(odd) { /* margin-right: 16rpx; */ } .video-list .video-list .p { font-size: 28rpx; color: #333; font-weight: bold; padding: 10rpx 20rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .video-list .video-list .video-img { width: 100%; height: auto; } .video-list .video-list .video-img image { width: 100%; height: 100%; } .video-list .video-list .people { display: flex; padding: 10rpx; } .video-list .video-list .people .img { flex: 0 0 48rpx; width: 48rpx; height: 48rpx; border-radius: 50%; margin: 0 10rpx; } .video-list .video-list .people .img image { width: 100%; height: 100%; } .video-list .video-list .people .span { flex: 1; line-height: 48rpx; margin: 0 10rpx; font-size: 24rpx; color: #8c8c8c; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* .video-list .button { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 112rpx; height: 112rpx; } */ /* .video-list .button .img { width: 100%; height: 100%; } .video-list .button .img image { width: 100%; height: 100%; } */ .foot_2 .ul .li .button { margin-top: -25rpx; width: 112rpx; height: 112rpx; } .foot_2 .ul .li .button .img { width: 100%; height: 100%; } .foot_2 .ul .li .button .img image { width: 100%; height: 100%; } .foot_2 { position: fixed; bottom: 0; left: 0; width: 100%; height: 100rpx; background: #fff; z-index: 999999; padding-top: 14rpx; } .foot_2 .ul { display: flex; } .foot_2 .ul .li { flex: 2.5; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #888; } .foot_2 .ul .li.sele { color: #414141; } .foot_2 .ul .li .top { width: 50rpx; display: flex; align-items: center; justify-content: center; } .foot_2 .ul .li .top image { width: 100%; } .foot_2 .ul .li .bottom { display: flex; align-items: center; justify-content: center; } .posBox { position: fixed; bottom: 158rpx; right: 17rpx; width: 120rpx; height: 120rpx; z-index: 999; border-radius: 50%; } .posBoxs { position: fixed; bottom: 158rpx; right: 17rpx; width: 120rpx; height: 120rpx; z-index: 999; border-radius: 50%; animation: run 1s linear 1; } .posBox image, .posBoxs image { width: 100%; height: 100%; border-radius: 50%; } .playPos { position: fixed; bottom: 170rpx; right: 21rpx; width: 92rpx; height: 92rpx; z-index: 999; border-radius: 50%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background-image: linear-gradient( 132deg, #fe7575 0%, #fc3d3d 100% ), linear-gradient( #7f5e5e, #7f5e5e ); } .rotateImg { transform: rotate(135deg); -webkit-transform: rotate(135deg); transition: transform 0.5s; } .normalImg { transform: rotate(0deg); -webkit-transform: rotate(0deg); transition: transform 0.5s; } .lz_one { transform: translate(10rpx, -120rpx); transition: transform 0.5s; } .lz_two { transform: translate(0rpx, 0rpx); transition: transform 0.5s; } .playPos icon { font-size: 26px; height: 60rpx; margin-top: -10rpx; color: #fff; } .playPos .text { font-size: 20rpx; color: #fff; } .jl_one { transform: translate(-100rpx, -60rpx); transition: transform 0.5s; } .jl_two { transform: translate(0rpx, 0rpx); transition: transform 0.5s; } .recordPos { position: fixed; bottom: 180rpx; right: 35rpx; width: 92rpx; height: 92rpx; z-index: 999; border-radius: 50%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background-image: linear-gradient( 132deg, #fe7575 0%, #fc3d3d 100% ), linear-gradient( #7f5e5e, #7f5e5e ); } .recordPos icon { font-size: 26px; height: 60rpx; margin-top: -10rpx; color: #fff; } .recordPos .text { font-size: 20rpx; color: #fff; }