@keyframes numberMove { from { bottom: 20rpx; opacity: 1; } to { bottom: 200rpx; font-size: 50rpx; opacity: 0; } } .swiper_container { width: 100%; height: 100%; background: #eee; } .swiper_container .video-swiper { width: 100%; height: 100%; display: block; background: #ffffff; } .swiper_container .swiper_item { width: 100%; background: #ffffff; margin-bottom: 20rpx; padding-bottom: 20rpx; overflow: hidden; position: relative; } .swiper_container .swiper_item.no_swiper { max-height: 879rpx; min-height: 640rpx; } .swiper_container .swiper_item .head_box { width: 100%; height: 120rpx; display: flex; justify-content: space-between; padding-left: 20rpx; box-sizing: border-box; padding-right: 20rpx; position: relative; } .swiper_container .swiper_item .head_box .tag_icon { width: 66rpx; height: 34rpx; position: absolute; right: 0; top: 0; } .swiper_container .swiper_item .head_box .user_box { width: 378rpx; height: 100%; display: flex; align-items: center; position: relative; } .swiper_container .swiper_item .head_box .user_box .avatar { width: 80rpx; height: 80rpx; border: 2rpx solid green; border-radius: 50%; } .swiper_container .swiper_item .head_box .user_box .avatar_fans { width: 34rpx; height: 34rpx; position: absolute; bottom: 5rpx; left: 26rpx; } .swiper_container .swiper_item .head_box .user_box .user_right { margin-left: 16rpx; display: flex; align-items: center; } .swiper_container .swiper_item .head_box .user_box .user_right .nickname { font-size: 30rpx; color: rgba(0, 0, 0, 0.8); font-weight: bold; } .swiper_container .swiper_item .head_box .user_box .user_right .efun_tag { width: 68rpx; height: 30rpx; margin-left: 4rpx; } .swiper_container .swiper_item .head_box .time { display: flex; align-items: center; font-size: 30rpx; color: rgba(0, 0, 0, 0.8); } .swiper_container .swiper_item .head_box .my_btn { display: flex; align-items: center; } .swiper_container .swiper_item .head_box .my_btn .delete { display: flex; flex-direction: column; align-items: center; margin-right: 45rpx; } .swiper_container .swiper_item .head_box .my_btn .delete .download_image { width: 29rpx; height: 32rpx; margin-bottom: 2rpx; } .swiper_container .swiper_item .head_box .my_btn .delete .delete_image { width: 25rpx; height: 32rpx; margin-bottom: 2rpx; } .swiper_container .swiper_item .head_box .my_btn .delete .delete_text { font-size: 26rpx; color: rgba(0, 0, 0, 0.8); } .swiper_container .swiper_item .head_box .my_btn .hide { display: flex; flex-direction: column; align-items: center; margin-right: 23rpx; box-sizing: border-box; } .swiper_container .swiper_item .head_box .my_btn .hide .hide_image { width: 32rpx; height: 33rpx; margin-bottom: 1rpx; } .swiper_container .swiper_item .head_box .my_btn .hide .hide_text { font-size: 26rpx; color: rgba(0, 0, 0, 0.8); } .swiper_container .swiper_item .video_item { width: 100%; height: 422rpx; } .swiper_container .swiper_item .video_place { width: 100%; height: 430rpx; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; position: relative; } .swiper_container .swiper_item .video_place .play_btn { width: 100rpx; height: 100rpx; position: absolute; top: 170rpx; left: 0; right: 0; margin: 0 auto; } .swiper_container .swiper_item .video_place .place_img { width: 100%; height: 100%; } .swiper_container .swiper_item .video_item_dialog { width: 100%; height: 422rpx; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1; } .swiper_container .swiper_item .video_item_dialog .video_item_dialog_img { width: 215rpx; height: 215rpx; } .swiper_container .swiper_item .video_title { width: 100%; height: 58rpx; font-size: 34rpx; color: #373737; display: flex; align-items: center; padding-left: 27rpx; font-weight: bold; } .swiper_container .swiper_item .foot_box { width: 100%; height: 65rpx; margin-top: 43rpx; display: flex; justify-content: space-between; padding-left: 20rpx; } .swiper_container .swiper_item .foot_box .foot_left, .swiper_container .swiper_item .foot_box .foot_right { display: flex; align-items: center; position: relative; } .swiper_container .swiper_item .foot_box .video_btn { margin-right: 42rpx; font-size: 28rpx; color: rgba(0, 0, 0, 0.8); display: flex; flex-direction: row; align-items: center; } .swiper_container .swiper_item .foot_box .video_btn .animation-flower { width: 90rpx; height: 40rpx; position: absolute; left: 17rpx; bottom: 24rpx; opacity: 0; display: flex; align-items: center; flex-direction: row; justify-content: center; } .swiper_container .swiper_item .foot_box .video_btn .animation-flower .animation-flower-icon { width: 32rpx; height: 38rpx; display: block; margin-right: 8rpx; } .swiper_container .swiper_item .foot_box .video_btn .animation-flower text { margin-top: -15rpx; display: block; font-size: 26rpx; font-weight: 800; color: #fc3b3b; } .swiper_container .swiper_item .foot_box .video_btn .add-one-come-out { animation: numberMove 1.2s ease; -webkit-animation: numberMove 1.2s ease; } .swiper_container .swiper_item .foot_box .video_btn.share_btn { outline: none; padding: 0; margin: 0; background: #fff; } .swiper_container .swiper_item .foot_box .video_btn .collect_btn_icon { width: 48rpx; height: 46rpx; margin-right: 7rpx; } .swiper_container .swiper_item .foot_box .video_btn .share_btn_icon { width: 46rpx; height: 46rpx; margin-right: 8rpx; outline: none; padding: 0; margin: 0; border-radius: 0; background: #fff; } .swiper_container .swiper_item .foot_box .video_btn .flower_btn_icon { width: 46rpx; height: 46rpx; margin-right: 10rpx; border-radius: none; } .swiper_container .swiper_item .foot_box .video_btn .comment_btn_icon { width: 49rpx; height: 47rpx; margin-right: 9rpx; border-radius: 0; } .swiper_container .swiper_item .btn_wrapper { width: 100%; height: 111rpx; display: flex; align-items: center; justify-content: center; margin-top: 45rpx; margin-bottom: 10rpx; padding-bottom: 20rpx; box-sizing: border-box; } .swiper_container .swiper_item .btn_wrapper .reading_btn { width: 271rpx; height: 80rpx; background: #3FACFF; border-radius: 100rpx; display: flex; align-items: center; justify-content: center; } .swiper_container .swiper_item .btn_wrapper .reading_btn image { width: 39rpx; height: 50rpx; margin-right: 20rpx; } .swiper_container .swiper_item .btn_wrapper .reading_btn text { color: #fff; font-size: 30rpx; } .swiper_container .no_work { width: 100%; height: 120rpx; display: flex; align-items: center; justify-content: center; } .swiper_container .no_work .no_work_text { color: #373737; font-size: 30rpx; }