'1'

component/video-swiper/index.css

@@ -0,0 +1,243 @@
+.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,3 +1,4 @@
+// out: index.wxss   
 .swiper_container {
     width: 100%;
     height: 100%;
@@ -221,6 +222,13 @@
                 flex-direction: row;
                 align-items: center;
 
+                &.share_btn {
+                    outline: none;
+                    padding: 0;
+                    margin: 0;
+                    background: #fff;
+                }
+
                 .collect_btn_icon {
                     width: 48rpx;
                     height: 46rpx;
@@ -231,6 +239,11 @@
                     width: 46rpx;
                     height: 46rpx;
                     margin-right: 8rpx;
+                    outline: none;
+                    padding: 0;
+                    margin: 0;
+                    border-radius: 0;
+                    background: #fff;
                 }
 
                 .flower_btn_icon {
@@ -284,6 +297,19 @@
         }
     }
 
+    .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

@@ -3,14 +3,12 @@
   height: 100%;
   background: #eee;
 }
-
 .swiper_container .video-swiper {
   width: 100%;
   height: 100%;
   display: block;
   background: #ffffff;
 }
-
 .swiper_container .swiper_item {
   width: 100%;
   background: #ffffff;
@@ -18,12 +16,10 @@
   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;
@@ -34,7 +30,6 @@
   padding-right: 20rpx;
   position: relative;
 }
-
 .swiper_container .swiper_item .head_box .tag_icon {
   width: 66rpx;
   height: 34rpx;
@@ -42,7 +37,6 @@
   right: 0;
   top: 0;
 }
-
 .swiper_container .swiper_item .head_box .user_box {
   width: 378rpx;
   height: 100%;
@@ -50,14 +44,12 @@
   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;
@@ -65,55 +57,46 @@
   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;
@@ -122,23 +105,19 @@
   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;
@@ -148,7 +127,6 @@
   justify-content: center;
   position: relative;
 }
-
 .swiper_container .swiper_item .video_place .play_btn {
   width: 100rpx;
   height: 100rpx;
@@ -158,12 +136,10 @@
   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;
@@ -174,12 +150,10 @@
   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;
@@ -190,7 +164,6 @@
   padding-left: 27rpx;
   font-weight: bold;
 }
-
 .swiper_container .swiper_item .foot_box {
   width: 100%;
   height: 65rpx;
@@ -199,13 +172,11 @@
   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;
@@ -214,13 +185,17 @@
   flex-direction: row;
   align-items: center;
 }
-
+.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;
@@ -231,21 +206,18 @@
   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;
@@ -257,7 +229,6 @@
   padding-bottom: 20rpx;
   box-sizing: border-box;
 }
-
 .swiper_container .swiper_item .btn_wrapper .reading_btn {
   width: 271rpx;
   height: 80rpx;
@@ -267,27 +238,23 @@
   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;
 }
-
-.no_work {
+.swiper_container .no_work {
   width: 100%;
   height: 120rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-
-.no_work .no_work_text {
+.swiper_container .no_work .no_work_text {
   color: #373737;
   font-size: 30rpx;
-}
+}

pages/index/index.js

@@ -81,7 +81,7 @@ Page({
       title: "小学语文朗读配音", //标题
     },
     grade: wx.getStorageSync('grade'),
-    noMoreWork: false ,// 没有更多作品 已经到底了
+    noMoreWork: false, // 没有更多作品 已经到底了
 
   },
   jurisdiction: function () {
@@ -333,6 +333,7 @@ Page({
       title: '小学语文朗读配音'
     })
     console.log('页面返回页面返回', this.data.fromLoginIndex)
+    console.log('页面返回页面返回', this.data.myIndex)
     if (this.data.fromLoginIndex) {
       console.log('页面返回页面返回', this.data.fromLoginIndex)
       let index = this.data.fromLoginIndex;
@@ -350,6 +351,12 @@ Page({
       })
       this.updateData(3)
     }
+    // 刷新课程资源的收藏数等
+    if (this.data.myIndex === 2) {
+      console.log('去刷新')
+      this.refreshCourseAmount()
+    }
+
     // const userInfo = wx.getStorageSync('user')
     // console.log('userInfo',userInfo)
     // if (userInfo.wechatName) {
@@ -379,7 +386,7 @@ Page({
     httpRequestApi.getHotRecommendSecond(grade, pageNo, pageSize).success(res => {
       console.log(res)
       const recommendRes = res.data.data.list;
-      if (recommendRes.length === 0){
+      if (recommendRes.length === 0) {
         this.setData({
           noMoreWork: true
         })
@@ -392,8 +399,8 @@ Page({
   // 组装list
   formatWorksList(list, notSet) {
     // const tempList = [];
-    console.log('列表长度列表长度',list.length)
-    if(list.length < 6 || list.length === 0){
+    console.log('列表长度列表长度', list.length)
+    if (list.length < 6 || list.length === 0) {
       this.setData({
         noMoreWork: true
       })
@@ -886,10 +893,40 @@ Page({
   goToReading: function (e) {
     console.log('去朗读', e)
     const id = e.detail.activeId ? e.detail.activeId : e.currentTarget.dataset.id;
+    const index = e.currentTarget.dataset.index;
+    this.setData({
+      goToCoursesId: id,
+      goToCoursesIndex: index
+    })
     wx.navigateTo({
       url: `../../pages/reading/reading?id=${id}`
     });
   },
+  refreshCourseAmount() {
+    console.log(this.data.goToCoursesId)
+    console.log(this.data.goToCoursesIndex)
+    if (this.data.goToCoursesId && (this.data.goToCoursesIndex || this.data.goToCoursesIndex === 0)) {
+      httpRequestApi.getClassDetail(this.data.goToCoursesId).success(res => {
+        console.log('刷新', res.data.data.userRead)
+        let likeStr = `coursesData[${this.data.goToCoursesIndex}].userRead.likeAmount`;
+        let commentStr = `coursesData[${this.data.goToCoursesIndex}].userRead.commentAmount`;
+        let playStr = `coursesData[${this.data.goToCoursesIndex}].userRead.playAmount`;
+        let shareStr = `coursesData[${this.data.goToCoursesIndex}].userRead.shareAmount`;
+        let collectStr = `coursesData[${this.data.goToCoursesIndex}].userRead.collectAmount`;
+        console.log(1, this.data.coursesData[this.data.goToCoursesIndex].userRead.likeAmount)
+        console.log(2, res.data.data.userRead.likeAmount)
+        this.setData({
+          [likeStr]: res.data.data.userRead.likeAmount,
+          [commentStr]: res.data.data.userRead.commentAmount,
+          [playStr]: res.data.data.userRead.playAmount,
+          [shareStr]: res.data.data.userRead.shareAmount,
+          [collectStr]: res.data.data.userRead.collectAmount,
+        }, () => {
+          console.log(111222333, this.data.coursesData[this.data.goToCoursesIndex])
+        })
+      })
+    }
+  },
   courseCollectTap: function collectClass(e) {
     console.log('收藏按钮', e);
     const data = {

templates/courses/courses.less

@@ -1,3 +1,4 @@
+// out: courses.wxss   
 .courses_container {
     width: 100%;
     height: 100%;
@@ -5,7 +6,7 @@
 
     .course_item {
         width: 100%;
-        height: 400rpx;
+        height: 460rpx;
         background: #fff;
         margin-bottom: 20rpx;
         padding-top: 20rpx;
@@ -36,22 +37,52 @@
                 font-size: 30rpx;
 
             }
+        }
+
+        .course_btn_wrapper {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-left: 24rpx;
+            padding-right: 24rpx;
+            box-sizing: border-box;
 
-            .course_btn_wrapper{
-                width: 290rpx;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-              }
             .course_btn {
                 // width: 270rpx;
                 display: flex;
                 align-items: center;
+
                 // justify-content: space-between;
                 .btn_icon {
                     width: 48rpx;
                     height: 46rpx;
-                    margin-right: 7rpx;
+                    margin-right: 10rpx;
+
+                    &.comment_icon {
+                        width: 22rpx;
+                        height: 25rpx;
+                    }
+
+                    &.play_icon {
+                        width: 30rpx;
+                        height: 25rpx;
+                    }
+
+                    &.like_icon {
+                        width: 29rpx;
+                        height: 26rpx;
+                    }
+
+                    &.share_icon {
+                        width: 33rpx;
+                        height: 30rpx;
+                    }
+
+                    &.collect_icon {
+                        width: 32rpx;
+                        height: 30rpx;
+                    }
                 }
 
                 .btn_text {
@@ -62,4 +93,17 @@
         }
 
     }
+
+    .no_work {
+        width: 100%;
+        height: 120rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .no_work_text {
+            color: #373737;
+            font-size: 30rpx;
+        }
+    }
 }

templates/courses/courses.wxml

@@ -1,21 +1,34 @@
 <!-- <wxs src="../../pages/commonWxs/format.wxs" module="format" /> -->
 <template name="courses">
     <view class="courses_container">
-        <view class="course_item" bindtap="goToReading" wx:for="{{coursesData}}" data-id="{{item.userRead.exampleId}}" wx:key="index">
+        <view class="course_item" bindtap="goToReading" wx:for="{{coursesData}}" data-id="{{item.userRead.exampleId}}" data-index="{{index}}" wx:key="index">
             <image class="course_icon" src="{{item.userRead.iconImg}}" lazy-load="true" />
             <view class="course_info">
                 <text class="course_title">{{item.userRead.title}}</text>
-                <view class="course_btn_wrapper">
-                    <view class="collect course_btn" data-index="{{index}}" data-id="{{item.userRead.id}}" data-type="{{item.userRead.type}}" catchtap="courseCollectTap">
-                        <image class="collect_icon btn_icon" src="{{item.isFavorites ?'../../static/index/star_colored.png' :'../../static/index/star.png' }}" />
-                        <text class="collect_text btn_text">{{item.isFavorites? '收藏' : '收藏'}}</text>
+            </view>
+            <view class="course_btn_wrapper">
+
+                    <view class="collect course_btn" data-index="{{index}}" data-id="{{item.userRead.id}}" data-type="{{item.userRead.type}}">
+                        <image class="comment_icon btn_icon" src="../../static/index/res_comment.png" />
+                        <text class="collect_text btn_text">{{item.userRead.commentAmount}}</text>
+                    </view>
+                    <view class="collect course_btn" data-index="{{index}}" data-id="{{item.userRead.id}}" data-type="{{item.userRead.type}}">
+                        <image class="play_icon btn_icon" src="../../static/index/res_eye.png" />
+                        <text class="collect_text btn_text">{{item.userRead.playAmount}}</text>
+                    </view>
+                    <view class="collect course_btn" data-index="{{index}}" data-id="{{item.userRead.id}}" data-type="{{item.userRead.type}}">
+                        <image class="like_icon btn_icon" src="../../static/index/res_like.png" />
+                        <text class="collect_text btn_text">{{item.userRead.likeAmount}}</text>
                     </view>
                     <view class="share course_btn" catchtap="coursesOpenShare" data-author="{{item.user.nickName}}" data-index="{{index}}" data-id="{{item.userRead.id}}" data-avatar="{{item.user.avatar}}" data-uid="{{item.user.uid}}" data-shareImg="{{item.userRead.shareImg}}" data-icon="{{item.userRead.iconImg}}" data-title="{{item.userRead.title}}" data-type="{{item.userRead.type}}">
-                        <image class="share_icon btn_icon" src="../../static/index/share.png" />
-                        <text class="share_text btn_text">分享</text>
+                        <image class="share_icon btn_icon" src="../../static/index/res_share.png" />
+                        <text class="share_text btn_text">{{item.userRead.shareAmount}}</text>
+                    </view>
+                    <view class="collect course_btn" data-index="{{index}}" data-id="{{item.userRead.id}}" data-type="{{item.userRead.type}}" catchtap="courseCollectTap">
+                        <image class="collect_icon btn_icon" src="../../static/index/res_star.png" />
+                        <text class="collect_text btn_text">{{item.userRead.shareAmount}}</text>
                     </view>
                 </view>
-            </view>
         </view>
         <view class="no_work" wx:if="{{noMoreWork}}">
             <text class="no_work_text">已经到底啦！</text>

templates/courses/courses.wxss

@@ -5,7 +5,7 @@
 }
 .courses_container .course_item {
   width: 100%;
-  height: 400rpx;
+  height: 460rpx;
   background: #fff;
   margin-bottom: 20rpx;
   padding-top: 20rpx;
@@ -30,34 +30,56 @@
   color: #373737;
   font-size: 30rpx;
 }
-.courses_container .course_item .course_info .course_btn_wrapper {
-  width: 290rpx;
+.courses_container .course_item .course_btn_wrapper {
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-left: 24rpx;
+  padding-right: 24rpx;
+  box-sizing: border-box;
 }
-.courses_container .course_item .course_info .course_btn {
+.courses_container .course_item .course_btn_wrapper .course_btn {
   display: flex;
   align-items: center;
 }
-.courses_container .course_item .course_info .course_btn .btn_icon {
+.courses_container .course_item .course_btn_wrapper .course_btn .btn_icon {
   width: 48rpx;
   height: 46rpx;
-  margin-right: 7rpx;
+  margin-right: 10rpx;
+}
+.courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.comment_icon {
+  width: 22rpx;
+  height: 25rpx;
+}
+.courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.play_icon {
+  width: 30rpx;
+  height: 25rpx;
+}
+.courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.like_icon {
+  width: 29rpx;
+  height: 26rpx;
+}
+.courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.share_icon {
+  width: 33rpx;
+  height: 30rpx;
+}
+.courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.collect_icon {
+  width: 32rpx;
+  height: 30rpx;
 }
-.courses_container .course_item .course_info .course_btn .btn_text {
+.courses_container .course_item .course_btn_wrapper .course_btn .btn_text {
   font-size: 28rpx;
   color: rgba(0, 0, 0, 0.6);
 }
-.no_work{
+.courses_container .no_work {
   width: 100%;
   height: 120rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.no_work .no_work_text{
+.courses_container .no_work .no_work_text {
   color: #373737;
   font-size: 30rpx;
 }
-