Skip to content

Y
ydl-group-course
Commit 615421ac by zhengxiao
Options

feat(custom): 课程首页

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