|
|
@@ -1,40 +1,27 @@
|
|
|
<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"
|
|
|
- >
|
|
|
+ <view v-for="(cat, idx) in categories" :key="idx" class="tag-item"
|
|
|
+ :class="{ active: categoryIndex === idx }" @click="categoryIndex = idx">
|
|
|
<text>{{ cat }}</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>
|
|
|
+ <image :class="{ 'rotate-arrow': !categoryExpand }" src="@/static/images/new/expand.png"></image>
|
|
|
<!-- <text class="arrow">{{ categoryExpand ? '▲' : '▼' }}</text> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -43,16 +30,9 @@
|
|
|
<!-- 精品课程 内容 -->
|
|
|
<scroll-view v-show="tabIndex === 0" scroll-y class="scroll-wrap" :show-scrollbar="false">
|
|
|
<!-- 分类标签区 -->
|
|
|
-
|
|
|
-
|
|
|
<!-- 课程网格 -->
|
|
|
<view class="course-grid">
|
|
|
- <view
|
|
|
- v-for="(course, idx) in courseList"
|
|
|
- :key="idx"
|
|
|
- class="course-card"
|
|
|
- @click="onCourseClick(course)"
|
|
|
- >
|
|
|
+ <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>
|
|
|
</view>
|
|
|
@@ -60,14 +40,14 @@
|
|
|
<text class="card-title">{{ course.title }}</text>
|
|
|
<view class="y-bc">
|
|
|
<view class="course-meta">
|
|
|
- 邀你一起看恩施美景,寻长寿秘密
|
|
|
+ 邀你一起看恩施美景,寻长寿秘密
|
|
|
</view>
|
|
|
<view class="y-end">
|
|
|
<view class="btn-watch" @click.stop="onCourseClick(item)">立即观看</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bottom-placeholder"></view>
|
|
|
@@ -82,12 +62,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>
|
|
|
@@ -112,21 +87,18 @@
|
|
|
<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-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.cover || '/static/logo.jpg'" mode="aspectFill" class="cover-img">
|
|
|
+ </image>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="card-footer">
|
|
|
<text class="card-title">{{ course.title }}</text>
|
|
|
<view class="y-b">
|
|
|
<view class="course-meta">
|
|
|
- 邀你一起看恩施美景,寻长寿秘密
|
|
|
+ 邀你一起看恩施美景,寻长寿秘密
|
|
|
</view>
|
|
|
<view class="y-end">
|
|
|
<view class="btn-watch" @click.stop="onCourseClick(item)">回看</view>
|
|
|
@@ -150,7 +122,7 @@ export default {
|
|
|
tabIndex: 0,
|
|
|
categoryExpand: true,
|
|
|
categoryIndex: 0,
|
|
|
- categories: ['全部', '歌唱艺术', '太极养生', '防骗指南', '手机摄影', '棋牌益智', '用药指导', '膳食营养', '慢病管理'],
|
|
|
+ categories: [],
|
|
|
courseList: [
|
|
|
{ title: '刘金的《0基础金曲演唱速练课》', views: '9239', cover: '' },
|
|
|
{ title: '邹方斌讲《毛笔书法修心课》', views: '10.8w', cover: '' },
|
|
|
@@ -185,21 +157,42 @@ export default {
|
|
|
onLoad() {
|
|
|
// 若无最近学习,可置空 recentList 显示空态
|
|
|
// this.recentList = [];
|
|
|
+ this.getOneCourseTypeData();
|
|
|
},
|
|
|
methods: {
|
|
|
onCourseClick(course) {
|
|
|
uni.showToast({ title: course.title || '立即观看', icon: 'none' })
|
|
|
// uni.navigateTo({ url: '/pages_course/videovip?id=' + (course.id || '') })
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 切换顶部 Tab
|
|
|
+ handleChangeTopTab(index) {
|
|
|
+ this.tabIndex = index;
|
|
|
+ },
|
|
|
+ // 获取央广原乡行-类型
|
|
|
+ async getOneCourseTypeData() {
|
|
|
+ const params = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ isShow: 1,
|
|
|
+ cateType: 1,
|
|
|
+ yxxTag: 1
|
|
|
+ };
|
|
|
+ const res = await courseTypeDataApi(params);
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log(res.data.list);
|
|
|
+ this.categories = res.data.list;
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- /* 图片箭头旋转类(展开时向上) */
|
|
|
- .rotate-arrow {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
+/* 图片箭头旋转类(展开时向上) */
|
|
|
+.rotate-arrow {
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+
|
|
|
.container {
|
|
|
min-height: 100vh;
|
|
|
background: #F5F5F5;
|
|
|
@@ -214,29 +207,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%;
|
|
|
@@ -244,14 +242,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;
|
|
|
@@ -265,24 +265,27 @@ 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 {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- gap:24rpx;
|
|
|
+ gap: 24rpx;
|
|
|
flex-direction: row;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
.category-tags.collapsed {
|
|
|
max-height: 88rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.tag-item {
|
|
|
width: 30%;
|
|
|
padding: 20rpx 0;
|
|
|
@@ -290,18 +293,22 @@ export default {
|
|
|
border-radius: 20rpx;
|
|
|
background: #f0f0f0;
|
|
|
}
|
|
|
+
|
|
|
.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;
|
|
|
@@ -312,29 +319,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;
|
|
|
@@ -342,20 +354,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;
|
|
|
@@ -366,7 +380,7 @@ export default {
|
|
|
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;
|
|
|
text-align: justify;
|
|
|
overflow: hidden;
|
|
|
@@ -375,11 +389,13 @@ export default {
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
+
|
|
|
.meta-icon {
|
|
|
font-size: 24rpx;
|
|
|
margin-right: 6rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
+
|
|
|
.meta-count {
|
|
|
margin-left: 10rpx;
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
@@ -387,6 +403,7 @@ export default {
|
|
|
font-size: 32rpx;
|
|
|
color: #666666;
|
|
|
}
|
|
|
+
|
|
|
.card-cover {
|
|
|
position: relative;
|
|
|
width: 296rpx;
|
|
|
@@ -395,11 +412,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;
|
|
|
@@ -413,15 +432,17 @@ export default {
|
|
|
-webkit-line-clamp: 1;
|
|
|
-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;
|
|
|
@@ -429,16 +450,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;
|
|
|
}
|
|
|
|
|
|
@@ -446,16 +468,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;
|
|
|
@@ -463,6 +488,7 @@ export default {
|
|
|
line-height: 56rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
+
|
|
|
.recent-card {
|
|
|
display: flex;
|
|
|
background: #fff;
|
|
|
@@ -471,9 +497,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;
|
|
|
@@ -482,11 +510,13 @@ export default {
|
|
|
overflow: hidden;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+
|
|
|
.thumb-img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #BB6D6D;
|
|
|
}
|
|
|
+
|
|
|
.recent-info {
|
|
|
flex: 1;
|
|
|
padding-left: 24rpx;
|
|
|
@@ -496,6 +526,7 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
+
|
|
|
.recent-title {
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
@@ -509,11 +540,12 @@ export default {
|
|
|
-webkit-line-clamp: 1;
|
|
|
-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;
|
|
|
}
|
|
|
|
|
|
@@ -526,16 +558,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;
|
|
|
}
|
|
|
|
|
|
@@ -543,6 +577,7 @@ export default {
|
|
|
.recommend-section {
|
|
|
padding: 0 24rpx 32rpx;
|
|
|
}
|
|
|
+
|
|
|
.recommend-title {
|
|
|
display: block;
|
|
|
font-family: PingFangSC, PingFang SC;
|