|
|
@@ -1,79 +1,64 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- 顶部导航 Tab -->
|
|
|
- <view class="top-nav" :style="{marginTop: statusBarHeight}">
|
|
|
+ <view class="top-nav" :style="{ marginTop: statusBarHeight }">
|
|
|
<view class="nav-tabs">
|
|
|
- <view
|
|
|
- class="nav-item"
|
|
|
- :class="{ active: tabIndex === 0 }"
|
|
|
- @click="tabIndex = 0"
|
|
|
- >
|
|
|
+ <view class="nav-item" :class="{ active: tabIndex === 0 }" @click="handleChangeTopTab(0)">
|
|
|
<text>精品课程</text>
|
|
|
<view v-if="tabIndex === 0" class="nav-indicator"></view>
|
|
|
</view>
|
|
|
- <view
|
|
|
- class="nav-item"
|
|
|
- :class="{ active: tabIndex === 1 }"
|
|
|
- @click="tabIndex = 1"
|
|
|
- >
|
|
|
+ <view class="nav-item" :class="{ active: tabIndex === 1 }" @click="handleChangeTopTab(1)">
|
|
|
<text>最近学习</text>
|
|
|
<view v-if="tabIndex === 1" class="nav-indicator"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="tabIndex === 0" class="category-wrap">
|
|
|
<view class="category-tags" :class="{ collapsed: !categoryExpand }">
|
|
|
- <view
|
|
|
- v-for="(cat, idx) in categories"
|
|
|
- :key="idx"
|
|
|
- class="tag-item"
|
|
|
- :class="{ active: categoryIndex === idx }"
|
|
|
- @click="categoryIndex = idx"
|
|
|
- >
|
|
|
- <text>{{ cat }}</text>
|
|
|
+ <view v-for="(cat, idx) in categories" :key="idx" class="tag-item"
|
|
|
+ :class="{ active: categoryIndex === cat.cateId }" @click="handleCategoryIdClick(cat.cateId)">
|
|
|
+ <text>{{ cat.cateName }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="expand-btn" @click="categoryExpand = !categoryExpand">
|
|
|
<text>{{ categoryExpand ? '收起' : '展开' }}</text>
|
|
|
- <image :class="{ 'rotate-arrow': !categoryExpand }" src="@/static/images/new/expand.png"></image>
|
|
|
- <!-- <text class="arrow">{{ categoryExpand ? '▲' : '▼' }}</text> -->
|
|
|
+ <image :class="{ 'rotate-arrow': !categoryExpand }" src="@/static/images/new/expand.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 精品课程 内容 -->
|
|
|
- <scroll-view v-show="tabIndex === 0" scroll-y class="scroll-wrap" :show-scrollbar="false">
|
|
|
+ <scroll-view v-show="tabIndex === 0" scroll-y class="scroll-wrap" :show-scrollbar="false"
|
|
|
+ @scrolltolower="getPageJpCoursesData">
|
|
|
<!-- 分类标签区 -->
|
|
|
-
|
|
|
-
|
|
|
<!-- 课程网格 -->
|
|
|
- <view class="course-grid">
|
|
|
- <view
|
|
|
- v-for="(course, idx) in courseList"
|
|
|
- :key="idx"
|
|
|
- class="course-card"
|
|
|
- @click="onCourseClick(course)"
|
|
|
- >
|
|
|
+ <view v-if="courseList.length > 0" class="course-grid">
|
|
|
+ <view v-for="(course, idx) in courseList" :key="idx" class="course-card" @click="onCourseClick(course)">
|
|
|
<view class="card-cover">
|
|
|
- <image :src="course.cover || '/static/logo.jpg'" mode="aspectFill" class="cover-img"></image>
|
|
|
+ <image :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill" class="cover-img"></image>
|
|
|
</view>
|
|
|
<view class="course-info">
|
|
|
- <text class="card-title">{{ course.title }}</text>
|
|
|
+ <text class="card-title">{{ course.courseName }}</text>
|
|
|
<view class="x-end" style="justify-content: space-between;">
|
|
|
<view class="course-meta">
|
|
|
<image src="@/static/images/new/renshu.png"></image>
|
|
|
- <text class="meta-count">{{ course.views }}</text>
|
|
|
+ <text class="meta-count">{{ course.watchUserCount }}</text>
|
|
|
</view>
|
|
|
<view class="btn-watch" @click.stop="onCourseClick(course)">立即观看</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view v-else class="empty-state">
|
|
|
+ <image class="empty-icon" src="@/static/images/new/nodata.png"></image>
|
|
|
+ <text class="empty-text">暂无课程</text>
|
|
|
+ </view>
|
|
|
<view class="bottom-placeholder"></view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<!-- 最近学习 内容 -->
|
|
|
- <scroll-view v-show="tabIndex === 1" scroll-y class="scroll-wrap" :show-scrollbar="false">
|
|
|
+ <scroll-view v-show="tabIndex === 1" scroll-y class="scroll-wrap" :show-scrollbar="false"
|
|
|
+ @scrolltolower="recentList.length > 0 ? getPageCourseStudyData() : getPageRecommendCoursesData()">
|
|
|
<!-- 有学习记录:按日期分组列表 -->
|
|
|
<template v-if="recentList.length > 0">
|
|
|
<view v-for="(group, gIdx) in recentList" :key="gIdx" class="recent-group">
|
|
|
@@ -81,12 +66,7 @@
|
|
|
<image class="date-icon" src="@/static/images/new/time.png"></image>
|
|
|
<text class="date-text">{{ group.date }}</text>
|
|
|
</view>
|
|
|
- <view
|
|
|
- v-for="(item, i) in group.list"
|
|
|
- :key="i"
|
|
|
- class="recent-card"
|
|
|
- @click="onCourseClick(item)"
|
|
|
- >
|
|
|
+ <view v-for="(item, i) in group.list" :key="i" class="recent-card" @click="onCourseClick(item)">
|
|
|
<view class="recent-thumb">
|
|
|
<image :src="item.cover || '/static/logo.jpg'" mode="aspectFill" class="thumb-img"></image>
|
|
|
</view>
|
|
|
@@ -104,35 +84,35 @@
|
|
|
<!-- 无学习记录:空态 + 为您精选 -->
|
|
|
<template v-else>
|
|
|
<view class="empty-state">
|
|
|
- <!-- <view class="empty-icon"></view> -->
|
|
|
<image class="empty-icon" src="@/static/images/new/nodata.png"></image>
|
|
|
<text class="empty-text">暂无学习内容</text>
|
|
|
</view>
|
|
|
<view class="recommend-section">
|
|
|
<text class="recommend-title">为您精选</text>
|
|
|
- <view class="course-grid" style="padding: 0;">
|
|
|
- <view
|
|
|
- v-for="(course, idx) in recommendList"
|
|
|
- :key="idx"
|
|
|
- class="course-card"
|
|
|
- @click="onCourseClick(course)"
|
|
|
- >
|
|
|
+ <view v-if="recommendList.length > 0" class="course-grid" style="padding: 0;">
|
|
|
+ <view v-for="(course, idx) in recommendList" :key="idx" class="course-card"
|
|
|
+ @click="onCourseClick(course)">
|
|
|
<view class="card-cover">
|
|
|
- <image :src="course.cover || '/static/logo.jpg'" mode="aspectFill" class="cover-img"></image>
|
|
|
+ <image :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill" class="cover-img">
|
|
|
+ </image>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="card-footer">
|
|
|
- <text class="card-title">{{ course.title }}</text>
|
|
|
+ <text class="card-title">{{ course.courseName }}</text>
|
|
|
<view class="x-end" style="justify-content: space-between;">
|
|
|
<view class="course-meta">
|
|
|
<image src="@/static/images/new/renshu.png"></image>
|
|
|
- <text class="meta-count">{{ course.views }}</text>
|
|
|
+ <text class="meta-count">{{ course.watchUserCount }}</text>
|
|
|
</view>
|
|
|
<view class="btn-watch" @click.stop="onCourseClick(course)">立即观看</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view v-else class="empty-state">
|
|
|
+ <image class="empty-icon" src="@/static/images/new/nodata.png"></image>
|
|
|
+ <text class="empty-text">暂无课程</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<view class="bottom-placeholder"></view>
|
|
|
@@ -141,63 +121,192 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import {
|
|
|
+ courseTypeDataApi, courseListDataApi
|
|
|
+} from '@/api/home'
|
|
|
+import { getCourseStudyList } from '@/api/course'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
|
|
|
tabIndex: 0,
|
|
|
- categoryExpand: true,
|
|
|
+ categoryExpand: false,
|
|
|
categoryIndex: 0,
|
|
|
- categories: ['全部', '歌唱艺术', '太极养生', '防骗指南', '手机摄影', '棋牌益智', '用药指导', '膳食营养', '慢病管理'],
|
|
|
- courseList: [
|
|
|
- { title: '刘金的《0基础金曲演唱速练课》', views: '9239', cover: '' },
|
|
|
- { title: '邹方斌讲《毛笔书法修心课》', views: '10.8w', cover: '' },
|
|
|
- { title: '张斌《元气八段锦》系列课', views: '2.5w', cover: '' },
|
|
|
- { title: '翔哥精讲摄影课—手机微距拍摄技巧...', views: '100w+', cover: '' },
|
|
|
- { title: '道家智慧 入门21讲', views: '1.2w', cover: '' },
|
|
|
- { title: '入门进阶必修 瑜伽呼吸全精讲', views: '3.6w', cover: '' }
|
|
|
- ],
|
|
|
+ categories: [{ cateId: 0, cateName: '全部' }],
|
|
|
+ courseList: [],
|
|
|
+ jpPage: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
recentList: [
|
|
|
- {
|
|
|
- date: '2026-02-08',
|
|
|
- list: [
|
|
|
- { title: '歌唱家刘金的《0基础金曲演唱速练课》', progress: 87, cover: '' },
|
|
|
- { title: '资深编辑邹方斌讲《毛笔书法修心课》', progress: 56, cover: '' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- date: '2026-02-01',
|
|
|
- list: [
|
|
|
- { title: '张斌《元气八段锦》系列课', progress: 56, cover: '' }
|
|
|
- ]
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // date: '2026-02-08',
|
|
|
+ // list: [
|
|
|
+ // { title: '歌唱家刘金的《0基础金曲演唱速练课》', progress: 87, cover: '' },
|
|
|
+ // { title: '资深编辑邹方斌讲《毛笔书法修心课》', progress: 56, cover: '' }
|
|
|
+ // ]
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2026-02-01',
|
|
|
+ // list: [
|
|
|
+ // { title: '张斌《元气八段锦》系列课', progress: 56, cover: '' }
|
|
|
+ // ]
|
|
|
+ // }
|
|
|
],
|
|
|
- recommendList: [
|
|
|
- { title: '刘金的《0基础金曲演唱速练课》', views: '9239', cover: '' },
|
|
|
- { title: '邹方斌讲《毛笔书法修心课》', views: '10.8w', cover: '' },
|
|
|
- { title: '张斌《元气八段锦》系列课', views: '2.5w', cover: '' },
|
|
|
- { title: '翔哥精讲摄影课-手机微距拍摄技巧...', views: '100w+', cover: '' }
|
|
|
- ]
|
|
|
+ recentPage: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ recommendList: [],
|
|
|
+ recommendPage: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
- // 若无最近学习,可置空 recentList 显示空态
|
|
|
- // this.recentList = [];
|
|
|
+ this.getJpCourseTypeData();
|
|
|
+ this.getJpCourseList();
|
|
|
},
|
|
|
methods: {
|
|
|
- onCourseClick(course) {
|
|
|
- uni.showToast({ title: course.title || '立即观看', icon: 'none' })
|
|
|
- // uni.navigateTo({ url: '/pages_course/videovip?id=' + (course.id || '') })
|
|
|
- }
|
|
|
+ onCourseClick(e) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/course/info?courseId=${e.courseId}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 切换顶部 Tab
|
|
|
+ handleChangeTopTab(index) {
|
|
|
+ this.tabIndex = index;
|
|
|
+ if (index == 1) {
|
|
|
+ this.resetCourseStudyDataList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取学习记录课程列表
|
|
|
+ async getCourseStudyListMethos() {
|
|
|
+ const res = await getCourseStudyList({});
|
|
|
+ if (res.code === 200 && res.data.list.length > 0) {
|
|
|
+ this.recentPage.total = res.data.total;
|
|
|
+ this.recentList = [...this.recentList, ...res.data.list];
|
|
|
+ } else {
|
|
|
+ this.recentList = [];
|
|
|
+ this.resetRecommendDataList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分页获取学习记录课程列表
|
|
|
+ getPageCourseStudyData() {
|
|
|
+ if (this.recentPage.total <= this.recentList.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.recentPage.pageNum++;
|
|
|
+ this.getCourseStudyListMethos();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 学习记录课程列表重置方法
|
|
|
+ resetCourseStudyDataList() {
|
|
|
+ this.recentPage.pageNum = 1;
|
|
|
+ this.recentPage.total = 0;
|
|
|
+ this.recentList = [];
|
|
|
+ this.getCourseStudyListMethos();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取为您精选课程列表
|
|
|
+ async getRecommendData() {
|
|
|
+ let params = {
|
|
|
+ pageNum: this.recommendPage.pageNum,
|
|
|
+ pageSize: this.recommendPage.pageSize,
|
|
|
+ };
|
|
|
+ const res = await courseListDataApi(params);
|
|
|
+ if (res.code === 200 && res.data.list.length > 0) {
|
|
|
+ this.recommendPage.total = res.data.total;
|
|
|
+ this.recommendList = [...this.recommendList, ...res.data.list];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分页获取为您精选课程列表
|
|
|
+ getPageRecommendCoursesData() {
|
|
|
+ if (this.recommendPage.total <= this.recommendList.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.recommendPage.pageNum++;
|
|
|
+ this.getRecommendData();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 为您精选课程列表重置方法
|
|
|
+ resetRecommendDataList() {
|
|
|
+ this.recommendPage.pageNum = 1;
|
|
|
+ this.recommendPage.total = 0;
|
|
|
+ this.recommendList = [];
|
|
|
+ this.getRecommendData();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击分类标签
|
|
|
+ handleCategoryIdClick(id) {
|
|
|
+ this.categoryIndex = id;
|
|
|
+ this.resetJpDataList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取精品课程-类型
|
|
|
+ async getJpCourseTypeData() {
|
|
|
+ const params = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ isShow: 1,
|
|
|
+ cateType: 1,
|
|
|
+ yxxTag: 0
|
|
|
+ };
|
|
|
+ const res = await courseTypeDataApi(params);
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.categories = [...this.categories, ...res.data.list];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取精品课程-列表
|
|
|
+ async getJpCourseList() {
|
|
|
+ let params = {
|
|
|
+ pageNum: this.jpPage.pageNum,
|
|
|
+ pageSize: this.jpPage.pageSize,
|
|
|
+ cateId: this.categoryIndex,
|
|
|
+ yxxTag: 0,
|
|
|
+ };
|
|
|
+ if (params.cateId === 0) {
|
|
|
+ delete params.cateId;
|
|
|
+ }
|
|
|
+ const res = await courseListDataApi(params);
|
|
|
+ if (res.code === 200 && res.data.list.length > 0) {
|
|
|
+ this.jpPage.total = res.data.total;
|
|
|
+ this.courseList = [...this.courseList, ...res.data.list];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 分页获取精品课程列表
|
|
|
+ getPageJpCoursesData() {
|
|
|
+ if (this.jpPage.total <= this.courseList.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.jpPage.pageNum++;
|
|
|
+ this.getJpCourseList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 精品课程列表重置方法
|
|
|
+ resetJpDataList() {
|
|
|
+ this.jpPage.pageNum = 1;
|
|
|
+ this.jpPage.total = 0;
|
|
|
+ this.courseList = [];
|
|
|
+ this.getJpCourseList();
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- /* 图片箭头旋转类(展开时向上) */
|
|
|
- .rotate-arrow {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
+/* 图片箭头旋转类(展开时向上) */
|
|
|
+.rotate-arrow {
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+
|
|
|
.container {
|
|
|
min-height: 100vh;
|
|
|
background: #F5F5F5;
|
|
|
@@ -212,29 +321,34 @@ export default {
|
|
|
background: #fff;
|
|
|
/* border-bottom: 1rpx solid #f0f0f0; */
|
|
|
}
|
|
|
+
|
|
|
.nav-tabs {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
.nav-item {
|
|
|
- flex:1;
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
padding: 24rpx 0;
|
|
|
}
|
|
|
+
|
|
|
.nav-item text {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 36rpx;
|
|
|
color: #030303;
|
|
|
}
|
|
|
+
|
|
|
.nav-item.active text {
|
|
|
font-weight: 600;
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
+
|
|
|
.nav-indicator {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
@@ -242,14 +356,16 @@ export default {
|
|
|
transform: translateX(-50%);
|
|
|
width: 100rpx;
|
|
|
height: 10rpx;
|
|
|
- background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
|
|
|
+ background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
border-radius: 6rpx;
|
|
|
}
|
|
|
+
|
|
|
.nav-actions {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 24rpx;
|
|
|
}
|
|
|
+
|
|
|
.action-icon {
|
|
|
font-size: 36rpx;
|
|
|
color: #666;
|
|
|
@@ -263,43 +379,63 @@ export default {
|
|
|
|
|
|
/* 分类标签 */
|
|
|
.category-wrap {
|
|
|
- padding:24rpx 0;
|
|
|
+ padding: 24rpx 0;
|
|
|
border-radius: 0rpx 0rpx 20rpx 20rpx;
|
|
|
background: #fff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
.category-tags {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- gap:24rpx;
|
|
|
flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
.category-tags.collapsed {
|
|
|
- max-height: 88rpx;
|
|
|
+ max-height: 100rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.tag-item {
|
|
|
- width: 30%;
|
|
|
+ width: 31%;
|
|
|
+ height: 96rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
padding: 20rpx 0;
|
|
|
text-align: center;
|
|
|
border-radius: 20rpx;
|
|
|
background: #f0f0f0;
|
|
|
+ margin-right: 3%;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-item:nth-last-child(-n+3) {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-item:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
+
|
|
|
.tag-item text {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 40rpx;
|
|
|
- color: rgba(0,0,0,0.85);
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
}
|
|
|
+
|
|
|
.tag-item.active {
|
|
|
- background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
|
|
|
+ background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
}
|
|
|
+
|
|
|
.tag-item.active text {
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.expand-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -310,29 +446,34 @@ export default {
|
|
|
border-radius: 32rpx;
|
|
|
border: 2rpx solid #FF233C;
|
|
|
}
|
|
|
+
|
|
|
.expand-btn text {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 32rpx;
|
|
|
color: #FF233C;
|
|
|
}
|
|
|
+
|
|
|
.expand-btn .arrow {
|
|
|
margin-left: 6rpx;
|
|
|
font-size: 22rpx;
|
|
|
}
|
|
|
-.expand-btn image{
|
|
|
- margin-left:10rpx ;
|
|
|
+
|
|
|
+.expand-btn image {
|
|
|
+ margin-left: 10rpx;
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
}
|
|
|
+
|
|
|
/* 课程网格 */
|
|
|
.course-grid {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- padding:24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
gap: 24rpx 20rpx;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
.course-card {
|
|
|
display: flex;
|
|
|
background: #fff;
|
|
|
@@ -340,20 +481,22 @@ export default {
|
|
|
overflow: hidden;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
+
|
|
|
.course-tag {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
right: 0;
|
|
|
padding: 8rpx 12rpx;
|
|
|
- background: linear-gradient(transparent, rgba(0,0,0,0.6));
|
|
|
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
|
|
|
font-size: 22rpx;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.course-info {
|
|
|
flex: 1;
|
|
|
padding-left: 24rpx;
|
|
|
-/* padding: 20rpx 24rpx; */
|
|
|
+ /* padding: 20rpx 24rpx; */
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
@@ -363,17 +506,20 @@ export default {
|
|
|
.course-meta {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- image{
|
|
|
+
|
|
|
+ image {
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
.meta-icon {
|
|
|
font-size: 24rpx;
|
|
|
margin-right: 6rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
+
|
|
|
.meta-count {
|
|
|
margin-left: 10rpx;
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
@@ -381,6 +527,7 @@ export default {
|
|
|
font-size: 32rpx;
|
|
|
color: #666666;
|
|
|
}
|
|
|
+
|
|
|
.card-cover {
|
|
|
position: relative;
|
|
|
width: 296rpx;
|
|
|
@@ -389,11 +536,13 @@ export default {
|
|
|
overflow: hidden;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+
|
|
|
.cover-img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #BB6D6D;
|
|
|
}
|
|
|
+
|
|
|
.card-title {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
@@ -407,15 +556,17 @@ export default {
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
+
|
|
|
.card-footer {
|
|
|
flex: 1;
|
|
|
- padding-left: 24rpx;
|
|
|
+ padding-left: 24rpx;
|
|
|
/* padding: 20rpx 24rpx; */
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-width: 0;
|
|
|
}
|
|
|
+
|
|
|
.card-views {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
@@ -423,16 +574,17 @@ export default {
|
|
|
color: #666666;
|
|
|
line-height: 44rpx;
|
|
|
}
|
|
|
+
|
|
|
.btn-watch {
|
|
|
- width: 168rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
|
|
|
- border-radius: 32rpx;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 32rpx;
|
|
|
+ width: 168rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
+ border-radius: 32rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 32rpx;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
@@ -440,16 +592,19 @@ export default {
|
|
|
.recent-group {
|
|
|
padding: 24rpx 24rpx 0;
|
|
|
}
|
|
|
+
|
|
|
.group-date {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
|
+
|
|
|
.date-icon {
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
margin-right: 8rpx;
|
|
|
}
|
|
|
+
|
|
|
.date-text {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
@@ -457,6 +612,7 @@ export default {
|
|
|
line-height: 56rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
+
|
|
|
.recent-card {
|
|
|
display: flex;
|
|
|
background: #fff;
|
|
|
@@ -465,9 +621,11 @@ export default {
|
|
|
padding: 20rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
|
-.recent-card:last-child{
|
|
|
+
|
|
|
+.recent-card:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
+
|
|
|
.recent-thumb {
|
|
|
position: relative;
|
|
|
width: 296rpx;
|
|
|
@@ -476,11 +634,13 @@ export default {
|
|
|
overflow: hidden;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+
|
|
|
.thumb-img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #BB6D6D;
|
|
|
}
|
|
|
+
|
|
|
.recent-info {
|
|
|
flex: 1;
|
|
|
padding-left: 24rpx;
|
|
|
@@ -490,6 +650,7 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
+
|
|
|
.recent-title {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
@@ -503,11 +664,12 @@ export default {
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
+
|
|
|
.recent-progress {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 32rpx;
|
|
|
- color: rgba(0,0,0,0.65);
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
line-height: 44rpx;
|
|
|
}
|
|
|
|
|
|
@@ -520,16 +682,18 @@ export default {
|
|
|
padding: 80rpx 0 48rpx;
|
|
|
/* background: linear-gradient(180deg, #fff5f5 0%, #fff 100%); */
|
|
|
}
|
|
|
+
|
|
|
.empty-icon {
|
|
|
width: 310rpx;
|
|
|
height: 260rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
}
|
|
|
+
|
|
|
.empty-text {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 36rpx;
|
|
|
- color: rgba(0,0,0,0.25);
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
line-height: 50rpx;
|
|
|
}
|
|
|
|
|
|
@@ -537,6 +701,7 @@ export default {
|
|
|
.recommend-section {
|
|
|
padding: 0 24rpx 32rpx;
|
|
|
}
|
|
|
+
|
|
|
.recommend-title {
|
|
|
display: block;
|
|
|
font-family: PingFangSC, PingFang SC;
|