|
|
@@ -1,306 +1,366 @@
|
|
|
@keyframes numberMove {
|
|
|
- from {
|
|
|
- bottom: 20rpx;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- to {
|
|
|
- bottom: 200rpx;
|
|
|
- font-size: 50rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
+ from {
|
|
|
+ bottom: 20rpx;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ bottom: 200rpx;
|
|
|
+ font-size: 50rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.swiper_container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #eee;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #eee;
|
|
|
}
|
|
|
+
|
|
|
.swiper_container .video-swiper {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
- background: #ffffff;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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%;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: rgba(0, 0, 0, 0.8);
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ max-width: 210rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
.swiper_container .swiper_item .head_box .user_box .user_right .efun_tag {
|
|
|
- width: 68rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin-left: 4rpx;
|
|
|
+ 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);
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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);
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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);
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: rgba(0, 0, 0, 0.8);
|
|
|
}
|
|
|
+
|
|
|
.swiper_container .swiper_item .video_item {
|
|
|
- width: 100%;
|
|
|
- height: 422rpx;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 170rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper_container .swiper_item .video_place .activity_tigs {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 49rpx;
|
|
|
+}
|
|
|
+
|
|
|
.swiper_container .swiper_item .video_place .place_img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ 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: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding-left: 20rpx;
|
|
|
-}
|
|
|
+ width: 100%;
|
|
|
+ height: 65rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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: 38rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
+ width: 100%;
|
|
|
+ height: 111rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ 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;
|
|
|
+ width: 39rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
}
|
|
|
+
|
|
|
.swiper_container .swiper_item .btn_wrapper .reading_btn text {
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
}
|
|
|
+
|
|
|
.swiper_container .no_work {
|
|
|
- width: 100%;
|
|
|
- height: 120rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 120rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
.swiper_container .no_work .no_work_text {
|
|
|
- color: #373737;
|
|
|
- font-size: 30rpx;
|
|
|
-}
|
|
|
+ color: #373737;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
sun2511