reader/component/video-swiper/index.wxss

.container {
  width: 100%;
  height: 100%;
  padding-top: 20rpx;
}
.container .video-swiper {
  width: 100%;
  height: 100%;
  display: block;
  background: #ffffff;
  margin-top: 64rpx;
}
.container .video-swiper .swiper_item {
  width: 100%;
  height: 100%;
}
.container .video-swiper .swiper_item .head_box {
  width: 100%;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  padding-left: 20rpx;
}
.container .video-swiper .swiper_item .head_box .user_box {
  width: 400rpx;
  height: 100%;
  display: flex;
  align-items: center;
}
.container .video-swiper .swiper_item .head_box .user_box .avatar {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid green;
  border-radius: 50%;
}
.container .video-swiper .swiper_item .head_box .user_box .user_right {
  margin-left: 16rpx;
}
.container .video-swiper .swiper_item .head_box .user_box .user_right .nickname {
  font-size: 30rpx;
  color: rgba(0, 0, 0, 0.6);
}
.container .video-swiper .swiper_item .head_box .user_box .user_right .time {
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.6);
}
.container .video-swiper .swiper_item .head_box .more_btn {
  width: 50rpx;
  height: 100%;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.container .video-swiper .swiper_item .head_box .more_btn .more_item {
  width: 5rpx;
  height: 5rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
}
.container .video-swiper .swiper_item .video_item {
  width: 100%;
  height: 422rpx;
}
.container .video-swiper .swiper_item .video_title {
  width: 100%;
  height: 62rpx;
  font-size: 30rpx;
  color: #373737;
  display: flex;
  align-items: center;
}
.container .video-swiper .swiper_item .foot_box {
  width: 100%;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  padding-left: 20rpx;
}
.container .video-swiper .swiper_item .foot_box .foot_left,
.container .video-swiper .swiper_item .foot_box .foot_right {
  display: flex;
  align-items: center;
}
.container .video-swiper .swiper_item .foot_box .btn {
  margin-right: 42rpx;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.container .video-swiper .swiper_item .foot_box .btn .collect_btn_icon {
  width: 48rpx;
  height: 46rpx;
  margin-right: 14rpx;
}
.container .video-swiper .swiper_item .foot_box .btn .share_btn_icon {
  width: 46rpx;
  height: 46rpx;
  margin-right: 14rpx;
}
.container .video-swiper .swiper_item .foot_box .btn .flower_btn_icon {
  width: 46rpx;
  height: 46rpx;
  margin-right: 14rpx;
}
.container .video-swiper .swiper_item .foot_box .btn .comment_btn_icon {
  width: 49rpx;
  height: 47rpx;
  margin-right: 14rpx;
}
.container .video-swiper .swiper_item .btn_wrapper {
  width: 100%;
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .video-swiper .swiper_item .btn_wrapper .reading_btn {
  width: 271rpx;
  height: 80rpx;
  background: #14c962;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .video-swiper .swiper_item .btn_wrapper .reading_btn image {
  width: 39rpx;
  height: 50rpx;
  margin-right: 20rpx;
}
.container .video-swiper .swiper_item .btn_wrapper .reading_btn text {
  color: #fff;
  font-size: 30rpx;
}