样式

component/video-swiper/index.css

@@ -1,243 +0,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;
-}
-.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 .delete_image {
-  width: 25rpx;
-  height: 33rpx;
-  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;
-  padding-top: 3rpx;
-  box-sizing: border-box;
-}
-.swiper_container .swiper_item .head_box .my_btn .hide .hide_image {
-  width: 32rpx;
-  height: 33rpx;
-  margin-bottom: 2rpx;
-}
-.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;
-}
-.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 .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;
-}

component/video-swiper/index.less

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

component/video-swiper/index.wxss

@@ -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;
+}