feat(custom): 课程首页

src/components/course-block.vue

@@ -7,31 +7,35 @@
       </view>
       <view class="study-count">{{ studyCount }}万人已学习</view>
     </view>
-    
+
     <view class="course-list">
-      <view 
-        class="course-item" 
-        v-for="(item, index) in showCourseList" 
+      <view
+        v-for="(item, index) in showCourseList"
         :key="index"
+        class="course-item"
       >
-        <image 
-          class="course-img" 
-          :src="item.image || '/static/images/course-placeholder.png'" 
-          mode="aspectFill" 
+        <image
+          class="course-img"
+          :src="item.image || '/static/images/course-placeholder.png'"
+          mode="aspectFill"
         />
         <view class="course-info">
-          <view class="course-title">{{item.title}}</view>
-          <view class="course-desc">{{item.desc}}</view>
+          <view class="course-title">{{ item.title }}</view>
+          <view class="course-desc">{{ item.desc }}</view>
           <view class="course-meta">
-            <text class="enroll-count">{{item.enrollCount}}人已报名</text>
+            <text class="enroll-count">{{ item.enrollCount }}人已报名</text>
             <button class="study-btn">去学习</button>
           </view>
         </view>
       </view>
     </view>
 
-    <view v-if="courseList.length > 2" class="show-more" @tap="toggleShowMore">
-      <text>{{isExpanded ? '收起合集' : '展开更多'}}</text>
+    <view
+      v-if="courseList.length > 2"
+      class="show-more"
+      @tap="toggleShowMore"
+    >
+      <text>{{ isExpanded ? '收起' : '展开更多' }}</text>
       <text :class="['arrow', isExpanded ? 'up' : '']">∨</text>
     </view>
   </view>
@@ -43,141 +47,153 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     subtitle: {
       type: String,
-      required: true
+      required: true,
     },
     studyCount: {
       type: Number,
-      required: true
+      required: true,
     },
     courseList: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
-      isExpanded: false
+      isExpanded: false,
     }
   },
   computed: {
     showCourseList() {
       return this.isExpanded ? this.courseList : this.courseList.slice(0, 2)
-    }
+    },
   },
   methods: {
     toggleShowMore() {
       this.isExpanded = !this.isExpanded
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss">
 .section-block {
-  margin: 20rpx;
-  padding: 30rpx;
+  margin: 12px;
+  padding: 12px 10px;
   background: #fff;
-  border-radius: 16rpx;
+  border-radius: 16px;
 
   .block-header {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 24rpx;
+    align-items: center;
+    margin-bottom: 16px;
 
     .left {
       .title {
-        font-size: 32rpx;
-        font-weight: 500;
-        color: #333;
-        margin-bottom: 8rpx;
+        color: #242424;
+        font-weight: 600;
+        font-size: 16px;
+        margin-bottom: 1px;
         display: block;
+        line-height: 22px;
       }
 
       .desc {
-        font-size: 24rpx;
-        color: #999;
+        color: #999999;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 17px;
       }
     }
 
     .study-count {
-      font-size: 24rpx;
-      color: #999;
-      background: #F5F6F8;
-      padding: 8rpx 16rpx;
-      border-radius: 20rpx;
+      display: flex;
+      align-items: center;
+      border-radius: 13px;
+      background: linear-gradient(270deg, rgba(255, 244, 221, 1) 0%, rgba(255, 255, 255, 0) 100%);
+      color: #B5985F;
+      font-weight: 400;
+      font-size: 12px;
+      padding: 5px 10px;
     }
   }
 
   .course-list {
     .course-item {
       display: flex;
-      padding: 24rpx 0;
-      border-bottom: 1rpx solid #EBEDF0;
+      margin-bottom: 18px;
 
       &:last-child {
-        border-bottom: none;
+        margin-bottom: 0;
       }
 
       .course-img {
-        width: 160rpx;
-        height: 160rpx;
-        border-radius: 12rpx;
-        margin-right: 20rpx;
-        background: #F5F6F8;
+        width: 64px;
+        height: 79px;
+        margin-right: 8px;
+        border-radius: 4px;
+        background-color: #d8d8d8;
       }
 
       .course-info {
         flex: 1;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
 
         .course-title {
-          font-size: 28rpx;
+          color: #000000;
           font-weight: 500;
-          color: #333;
-          margin-bottom: 8rpx;
+          font-size: 14px;
+          line-height: 20px;
+          // 单行
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         .course-desc {
-          font-size: 24rpx;
-          color: #999;
-          margin-bottom: 20rpx;
+          color: #000000;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 12px;
+          margin-top: 6px;
+          // 单行
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         .course-meta {
+          flex: 1;
           display: flex;
           justify-content: space-between;
-          align-items: center;
+          align-items: flex-end;
 
           .enroll-count {
             font-size: 24rpx;
             color: #999;
             display: flex;
             align-items: center;
-            
-            &::before {
-              content: '';
-              display: inline-block;
-              width: 24rpx;
-              height: 24rpx;
-            //   background: url('/static/icons/user.png') no-repeat center/cover;
-              margin-right: 8rpx;
-            }
           }
 
           .study-btn {
-            font-size: 26rpx;
-            color: #666;
-            background: #F5F6F8;
-            padding: 8rpx 24rpx;
-            border-radius: 24rpx;
-            border: none;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 60px;
+            height: 25px;
+            border-radius: 12.5px;
+            background-color: rgba(0, 146, 255, 0.1);
+            color: #0092FF;
+            font-weight: 500;
+            font-size: 12px;
+            padding: 0;
           }
         }
       }
@@ -195,11 +211,11 @@ export default {
       font-size: 20rpx;
       display: inline-block;
       transition: transform 0.3s ease;
-      
+
       &.up {
         transform: rotate(180deg);
       }
     }
   }
 }
-</style> 
\ No newline at end of file
+</style>