|
@@ -2,7 +2,7 @@
|
|
|
<view class="container">
|
|
<view class="container">
|
|
|
<image class="bg" src="@/static/images/bg.png" mode="aspectFill"></image>
|
|
<image class="bg" src="@/static/images/bg.png" mode="aspectFill"></image>
|
|
|
<!-- 顶部搜索栏 -->
|
|
<!-- 顶部搜索栏 -->
|
|
|
- <view class="top-bar" :style="{marginTop: statusBarHeight}">
|
|
|
|
|
|
|
+ <view class="top-bar" :style="{ marginTop: statusBarHeight }">
|
|
|
<view class="search-row" @click="onSearch">
|
|
<view class="search-row" @click="onSearch">
|
|
|
<image src="@/static/images/new/search.png" mode=""></image>
|
|
<image src="@/static/images/new/search.png" mode=""></image>
|
|
|
<text class="search-placeholder">搜索你感兴趣的内容</text>
|
|
<text class="search-placeholder">搜索你感兴趣的内容</text>
|
|
@@ -53,15 +53,16 @@
|
|
|
<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
|
|
<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
|
|
|
<view v-for="(tag, idx) in videoTags" :key="idx" class="tag-item"
|
|
<view v-for="(tag, idx) in videoTags" :key="idx" class="tag-item"
|
|
|
:class="{ active: videoTagId === tag.cateId }" @click="handleSelectOneType(tag)">
|
|
:class="{ active: videoTagId === tag.cateId }" @click="handleSelectOneType(tag)">
|
|
|
- <text>{{ tag.cateName }}</text>
|
|
|
|
|
- <view v-if="videoTagId === tag.cateId" class="triangle"></view>
|
|
|
|
|
|
|
+ <text>{{ tag.cateName }}</text>
|
|
|
|
|
+ <view v-if="videoTagId === tag.cateId" class="triangle"></view>
|
|
|
</view>
|
|
</view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
- <template v-if="oneCourseListData.length >0">
|
|
|
|
|
- <view v-for="(item,index) in oneCourseListData" :key="index" class="x-bc"
|
|
|
|
|
|
|
+ <template v-if="oneCourseListData.length > 0">
|
|
|
|
|
+ <view v-for="(item, index) in oneCourseListData" :key="index" class="x-bc"
|
|
|
@click="onWatchLive(item)">
|
|
@click="onWatchLive(item)">
|
|
|
<view class="fv-thumb">
|
|
<view class="fv-thumb">
|
|
|
- <image class="fv-img" :src="item.imgUrl || '/static/images/new/banner.png'" mode="aspectFill"></image>
|
|
|
|
|
|
|
+ <image class="fv-img" :src="item.imgUrl || '/static/images/new/banner.png'"
|
|
|
|
|
+ mode="aspectFill"></image>
|
|
|
<view v-if="false" class="live-tag">
|
|
<view v-if="false" class="live-tag">
|
|
|
<text class="live-dot"></text>
|
|
<text class="live-dot"></text>
|
|
|
<text>直播中</text>
|
|
<text>直播中</text>
|
|
@@ -90,13 +91,13 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="courseTabViewClass">
|
|
<view class="courseTabViewClass">
|
|
|
- <u-tabs :list="courseTabList" :current="courseCurrentIndex" lineWidth="0" lineHeight="0" lineColor="#FF233CFF"
|
|
|
|
|
- :activeStyle="courseTabActiveStyle" :inactiveStyle="courseTabInactiveStyle" @click="handleSelectCourseTab">
|
|
|
|
|
|
|
+ <u-tabs :list="courseTabList" :current="courseCurrentIndex" lineWidth="0" lineHeight="0"
|
|
|
|
|
+ lineColor="#FF233CFF" :activeStyle="courseTabActiveStyle"
|
|
|
|
|
+ :inactiveStyle="courseTabInactiveStyle" @click="handleSelectCourseTab">
|
|
|
</u-tabs>
|
|
</u-tabs>
|
|
|
</view>
|
|
</view>
|
|
|
- <view v-if="courses.length>0" class="course-list">
|
|
|
|
|
- <view v-for="(course, idx) in courses" :key="idx" class="course-card"
|
|
|
|
|
- @click="onWatchLive(course)">
|
|
|
|
|
|
|
+ <view v-if="courses.length > 0" class="course-list">
|
|
|
|
|
+ <view v-for="(course, idx) in courses" :key="idx" class="course-card" @click="onWatchLive(course)">
|
|
|
<view class="course-thumb">
|
|
<view class="course-thumb">
|
|
|
<image class="course-img" :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill">
|
|
<image class="course-img" :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill">
|
|
|
</image>
|
|
</image>
|
|
@@ -124,641 +125,651 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- import {
|
|
|
|
|
- courseTypeDataApi,courseListDataApi
|
|
|
|
|
- } from '@/api/home'
|
|
|
|
|
- export default {
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
|
|
|
|
|
- videoTagId: null,
|
|
|
|
|
- videoTags: [],
|
|
|
|
|
- oneCourseListData: [],
|
|
|
|
|
- courseTabId: null,
|
|
|
|
|
- courseCurrentIndex: 0,
|
|
|
|
|
- courses: [],
|
|
|
|
|
- courseTabList: [],
|
|
|
|
|
- freePage:{
|
|
|
|
|
- pageNum: 1,
|
|
|
|
|
- pageSize: 10,
|
|
|
|
|
- total: 0,
|
|
|
|
|
- },
|
|
|
|
|
- courseTabActiveStyle: {
|
|
|
|
|
- color: '#FFFFFFFF',
|
|
|
|
|
- fontSize: '32rpx',
|
|
|
|
|
- padding: '8rpx 20rpx 10rpx',
|
|
|
|
|
- background: 'linear-gradient( 135deg, #FF5267 0%, #FF233C 100%)',
|
|
|
|
|
- borderRadius: '32rpx'
|
|
|
|
|
- },
|
|
|
|
|
- courseTabInactiveStyle: {
|
|
|
|
|
- color: '#000000D9',
|
|
|
|
|
- fontSize: '32rpx',
|
|
|
|
|
- background: '#FFFFFFFF',
|
|
|
|
|
- padding: '8rpx 20rpx 10rpx',
|
|
|
|
|
- borderRadius: '32rpx'
|
|
|
|
|
- }
|
|
|
|
|
|
|
+import {
|
|
|
|
|
+ courseTypeDataApi, courseListDataApi
|
|
|
|
|
+} from '@/api/home'
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
|
|
|
|
|
+ videoTagId: null,
|
|
|
|
|
+ videoTags: [],
|
|
|
|
|
+ oneCourseListData: [],
|
|
|
|
|
+ courseTabId: null,
|
|
|
|
|
+ courseCurrentIndex: 0,
|
|
|
|
|
+ courses: [],
|
|
|
|
|
+ courseTabList: [],
|
|
|
|
|
+ freePage: {
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ },
|
|
|
|
|
+ courseTabActiveStyle: {
|
|
|
|
|
+ color: '#FFFFFFFF',
|
|
|
|
|
+ fontSize: '32rpx',
|
|
|
|
|
+ padding: '8rpx 20rpx 10rpx',
|
|
|
|
|
+ background: 'linear-gradient( 135deg, #FF5267 0%, #FF233C 100%)',
|
|
|
|
|
+ borderRadius: '32rpx'
|
|
|
|
|
+ },
|
|
|
|
|
+ courseTabInactiveStyle: {
|
|
|
|
|
+ color: '#000000D9',
|
|
|
|
|
+ fontSize: '32rpx',
|
|
|
|
|
+ background: '#FFFFFFFF',
|
|
|
|
|
+ padding: '8rpx 20rpx 10rpx',
|
|
|
|
|
+ borderRadius: '32rpx'
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad() {
|
|
|
|
|
+ this.getOneCourseTypeData()
|
|
|
|
|
+ this.getFreeCourseTypeData()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ onSearch() {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/index/homePageSearch'
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
- onLoad() {
|
|
|
|
|
- this.getOneCourseTypeData()
|
|
|
|
|
- this.getFreeCourseTypeData()
|
|
|
|
|
|
|
+ onBannerClick() {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/index/course'
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
- methods: {
|
|
|
|
|
- onSearch() {
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: '/pages/index/homePageSearch'
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- onBannerClick() {
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: '/pages/index/course'
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- onMoreVideos() {
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: '/pages/index/video'
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- // 获取央广原乡行-类型
|
|
|
|
|
- async getOneCourseTypeData() {
|
|
|
|
|
- const params = {
|
|
|
|
|
- pageNum: 1,
|
|
|
|
|
- pageSize: 10,
|
|
|
|
|
- isShow: 1,
|
|
|
|
|
- cateType: 1,
|
|
|
|
|
- yxxTag: 1
|
|
|
|
|
- };
|
|
|
|
|
- const res = await courseTypeDataApi(params);
|
|
|
|
|
- if (res.code === 200) {
|
|
|
|
|
- this.videoTags = res.data.list;
|
|
|
|
|
- if(this.videoTags.length>0){
|
|
|
|
|
- this.videoTagId = this.videoTags[0].cateId;
|
|
|
|
|
- this.oneCourseListData = [];
|
|
|
|
|
- // 获取原乡行课程列表
|
|
|
|
|
- this.getYxxCourseList(this.videoTags[0].cateId)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ onMoreVideos() {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/index/video'
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 获取央广原乡行-类型
|
|
|
|
|
+ async getOneCourseTypeData() {
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 4,
|
|
|
|
|
+ isShow: 1,
|
|
|
|
|
+ cateType: 1,
|
|
|
|
|
+ yxxTag: 1
|
|
|
|
|
+ };
|
|
|
|
|
+ const res = await courseTypeDataApi(params);
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ this.videoTags = res.data.list;
|
|
|
|
|
+ if (this.videoTags.length > 0) {
|
|
|
|
|
+ this.videoTagId = this.videoTags[0].cateId;
|
|
|
|
|
+ this.oneCourseListData = [];
|
|
|
|
|
+ // 获取原乡行课程列表
|
|
|
|
|
+ this.getYxxCourseList(this.videoTags[0].cateId)
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
- // 获取免费精品课-类型
|
|
|
|
|
- async getFreeCourseTypeData() {
|
|
|
|
|
- const params = {
|
|
|
|
|
- pageNum: 1,
|
|
|
|
|
- pageSize: 10,
|
|
|
|
|
- isShow: 1,
|
|
|
|
|
- cateType: 1,
|
|
|
|
|
- yxxTag: 0
|
|
|
|
|
- };
|
|
|
|
|
- const res = await courseTypeDataApi(params);
|
|
|
|
|
- if (res.code === 200) {
|
|
|
|
|
- this.courseTabList = res.data.list.map(item => ({
|
|
|
|
|
- id: item.cateId,
|
|
|
|
|
- name: item.cateName
|
|
|
|
|
- }));
|
|
|
|
|
- if(this.courseTabList.length>0){
|
|
|
|
|
- this.courseTabId = this.courseTabList[0].id;
|
|
|
|
|
- this.courses = [];
|
|
|
|
|
- // 获取免费精品课课程列表
|
|
|
|
|
- this.getFreeCourseList(this.courseTabId)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 获取免费精品课-类型
|
|
|
|
|
+ async getFreeCourseTypeData() {
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ isShow: 1,
|
|
|
|
|
+ cateType: 1,
|
|
|
|
|
+ yxxTag: 0
|
|
|
|
|
+ };
|
|
|
|
|
+ const res = await courseTypeDataApi(params);
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ this.courseTabList = res.data.list.map(item => ({
|
|
|
|
|
+ id: item.cateId,
|
|
|
|
|
+ name: item.cateName
|
|
|
|
|
+ }));
|
|
|
|
|
+ this.courseTabList = [
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 0,
|
|
|
|
|
+ name: '精选'
|
|
|
|
|
+ },
|
|
|
|
|
+ ...this.courseTabList
|
|
|
|
|
+ ]
|
|
|
|
|
+ if (this.courseTabList.length > 0) {
|
|
|
|
|
+ this.courseTabId = this.courseTabList[0].id;
|
|
|
|
|
+ this.courses = [];
|
|
|
|
|
+ // 获取免费精品课课程列表
|
|
|
|
|
+ this.getFreeCourseList(this.courseTabId)
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
- // 点击切换央广原乡行-类型
|
|
|
|
|
- handleSelectOneType(e) {
|
|
|
|
|
- this.videoTagId = e.cateId;
|
|
|
|
|
- this.oneCourseListData = [];
|
|
|
|
|
- // 获取原乡行课程列表
|
|
|
|
|
- this.getYxxCourseList(this.videoTagId)
|
|
|
|
|
- },
|
|
|
|
|
- // 点击切换免费精品课-类型
|
|
|
|
|
- handleSelectCourseTab(item) {
|
|
|
|
|
- this.courseCurrentIndex = item.index;
|
|
|
|
|
- this.courseTabId = item.id;
|
|
|
|
|
- this.courses = [];
|
|
|
|
|
- this.freePage.pageNum = 1;
|
|
|
|
|
- this.freePage.total = 0;
|
|
|
|
|
- // 获取免费精品课课程列表
|
|
|
|
|
- this.getFreeCourseList(this.courseTabId)
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击切换央广原乡行-类型
|
|
|
|
|
+ handleSelectOneType(e) {
|
|
|
|
|
+ this.videoTagId = e.cateId;
|
|
|
|
|
+ this.oneCourseListData = [];
|
|
|
// 获取原乡行课程列表
|
|
// 获取原乡行课程列表
|
|
|
- async getYxxCourseList(cateId) {
|
|
|
|
|
- const params = {
|
|
|
|
|
- pageNum: 1,
|
|
|
|
|
- pageSize: 10,
|
|
|
|
|
- subCateId: cateId,
|
|
|
|
|
- yxxTag: 1,
|
|
|
|
|
- recommendSlot: 1,
|
|
|
|
|
- };
|
|
|
|
|
- const res = await courseListDataApi(params);
|
|
|
|
|
- if (res.code === 200 && res.data.list.length > 0) {
|
|
|
|
|
- this.oneCourseListData = [res.data.list[0]];
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ this.getYxxCourseList(this.videoTagId)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击切换免费精品课-类型
|
|
|
|
|
+ handleSelectCourseTab(item) {
|
|
|
|
|
+ this.courseCurrentIndex = item.index;
|
|
|
|
|
+ this.courseTabId = item.id;
|
|
|
|
|
+ this.courses = [];
|
|
|
|
|
+ this.freePage.pageNum = 1;
|
|
|
|
|
+ this.freePage.total = 0;
|
|
|
// 获取免费精品课课程列表
|
|
// 获取免费精品课课程列表
|
|
|
- async getFreeCourseList(cateId) {
|
|
|
|
|
- const params = {
|
|
|
|
|
- pageNum: this.freePage.pageNum,
|
|
|
|
|
- pageSize: this.freePage.pageSize,
|
|
|
|
|
- subCateId: cateId,
|
|
|
|
|
- yxxTag: 0,
|
|
|
|
|
- recommendSlot: 3,
|
|
|
|
|
- };
|
|
|
|
|
- const res = await courseListDataApi(params);
|
|
|
|
|
- if (res.code === 200) {
|
|
|
|
|
- this.freePage.total = res.data.total;
|
|
|
|
|
- this.courses = [...this.courses, ...res.data.list];
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- onWatchLive(e) {
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: `/pages/course/info?courseId=${e.courseId}`
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- onMoreCourses() {
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: '/pages/index/course'
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- // 分页获取免费精品课课程列表
|
|
|
|
|
- getPageFreeCoursesData() {
|
|
|
|
|
- if(this.freePage.total <= this.courses.length){
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
- this.freePage.pageNum = this.freePage.pageNum + 1;
|
|
|
|
|
- this.getFreeCourseList(this.courseTabId)
|
|
|
|
|
- },
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ this.getFreeCourseList(this.courseTabId)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 获取原乡行课程列表
|
|
|
|
|
+ async getYxxCourseList(cateId) {
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ subCateId: cateId,
|
|
|
|
|
+ yxxTag: 1,
|
|
|
|
|
+ recommendSlot: 1,
|
|
|
|
|
+ };
|
|
|
|
|
+ const res = await courseListDataApi(params);
|
|
|
|
|
+ if (res.code === 200 && res.data.list.length > 0) {
|
|
|
|
|
+ this.oneCourseListData = [res.data.list[0]];
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 获取免费精品课课程列表
|
|
|
|
|
+ async getFreeCourseList(cateId) {
|
|
|
|
|
+ let params = {
|
|
|
|
|
+ pageNum: this.freePage.pageNum,
|
|
|
|
|
+ pageSize: this.freePage.pageSize,
|
|
|
|
|
+ subCateId: cateId,
|
|
|
|
|
+ yxxTag: 0,
|
|
|
|
|
+ recommendSlot: 3,
|
|
|
|
|
+ };
|
|
|
|
|
+ if (params.subCateId == 0) {
|
|
|
|
|
+ delete params.subCateId;
|
|
|
|
|
+ }
|
|
|
|
|
+ const res = await courseListDataApi(params);
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ this.freePage.total = res.data.total;
|
|
|
|
|
+ this.courses = [...this.courses, ...res.data.list];
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onWatchLive(e) {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: `/pages/course/info?courseId=${e.courseId}`
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ onMoreCourses() {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/index/course'
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 分页获取免费精品课课程列表
|
|
|
|
|
+ getPageFreeCoursesData() {
|
|
|
|
|
+ if (this.freePage.total <= this.courses.length) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.freePage.pageNum = this.freePage.pageNum + 1;
|
|
|
|
|
+ this.getFreeCourseList(this.courseTabId)
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
- .bg {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 380rpx;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- z-index: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .container {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- min-height: 100vh;
|
|
|
|
|
- background: #F4F6F7;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 顶部搜索 */
|
|
|
|
|
- .top-bar {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- padding: 24rpx 24rpx 30rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .search-row {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- height: 76rpx;
|
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
- border-radius: 38rpx;
|
|
|
|
|
-
|
|
|
|
|
- image {
|
|
|
|
|
- width: 44rpx;
|
|
|
|
|
- height: 44rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .search-placeholder {
|
|
|
|
|
- margin-left: 12rpx;
|
|
|
|
|
- font-size: 32rpx;
|
|
|
|
|
- color: rgba(0, 0, 0, 0.25);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .top-actions {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- margin-left: 20rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .action-icon {
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
- color: #333;
|
|
|
|
|
- margin-right: 16rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .action-icon.scan {
|
|
|
|
|
- font-size: 40rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 品牌标题 */
|
|
|
|
|
- .brand {
|
|
|
|
|
- padding: 0 68rpx 30rpx;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
-
|
|
|
|
|
- image {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .brand-title {
|
|
|
|
|
- display: block;
|
|
|
|
|
- font-size: 40rpx;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #333;
|
|
|
|
|
- margin-bottom: 8rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .brand-subtitle {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* Banner */
|
|
|
|
|
- .banner {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- height: 210rpx;
|
|
|
|
|
- margin: 0 24rpx 40rpx;
|
|
|
|
|
- border-radius: 16rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
-
|
|
|
|
|
- //background: linear-gradient(135deg, #87CEEB 0%, #E0F4FF 100%);
|
|
|
|
|
- .inner {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 210rpx;
|
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
-
|
|
|
|
|
- .swiper,
|
|
|
|
|
- .swiper-item,
|
|
|
|
|
- .swiper-item image {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .banner-bg {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .banner-overlay {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- background: rgba(0, 0, 0, 0.15);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .banner-title {
|
|
|
|
|
- font-size: 48rpx;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
|
|
|
|
- margin-bottom: 8rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .banner-desc {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: rgba(255, 255, 255, 0.95);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 滚动内容区 */
|
|
|
|
|
- .scroll-content {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- height: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .section {
|
|
|
|
|
- padding-bottom: 32rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .section-head {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .section-title {
|
|
|
|
|
- width: 226rpx;
|
|
|
|
|
- height: 36rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .section-title-wrap {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .play-icon {
|
|
|
|
|
- width: 36rpx;
|
|
|
|
|
- height: 36rpx;
|
|
|
|
|
- margin-right: 10rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .section-more {
|
|
|
|
|
- font-size: 26rpx;
|
|
|
|
|
- color: #999;
|
|
|
|
|
-
|
|
|
|
|
- image {
|
|
|
|
|
- width: 16rpx;
|
|
|
|
|
- height: 20rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 横向标签 */
|
|
|
|
|
- .tag-scroll {
|
|
|
|
|
- height: 80rpx;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- margin-bottom: 5rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .tag-item {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- padding: 6rpx 24rpx;
|
|
|
|
|
- margin-right: 24rpx;
|
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .tag-item text {
|
|
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
|
|
- font-weight: 400;
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
- color: #FFFFFF;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .tag-item.active {
|
|
|
|
|
- background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 底部小三角核心 */
|
|
|
|
|
- .triangle {
|
|
|
|
|
- z-index: 10;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 50%;
|
|
|
|
|
- transform: translateX(-50%);
|
|
|
|
|
- bottom: -5px;
|
|
|
|
|
- width: 0;
|
|
|
|
|
- height: 0;
|
|
|
|
|
- border-left: 30rpx solid transparent;
|
|
|
|
|
- border-right: 30rpx solid transparent;
|
|
|
|
|
- border-top: 20rpx solid #FF233C;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .tag-item.active text {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 特色视频卡片 */
|
|
|
|
|
- .feature-video-card {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- //align-items: center;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- background: linear-gradient(135deg, #5F111A 0%, #37050B 100%);
|
|
|
|
|
- border-radius: 30rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- padding: 30rpx 20rpx;
|
|
|
|
|
- margin-left: 24rpx;
|
|
|
|
|
- margin-right: 24rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .fv-thumb {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- width: 360rpx;
|
|
|
|
|
- height: 240rpx;
|
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .fv-img {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- background: #e0e0e0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .live-tag {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- top: 20rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- width: 130rpx;
|
|
|
|
|
|
|
+.bg {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 380rpx;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background: #F4F6F7;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 顶部搜索 */
|
|
|
|
|
+.top-bar {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 24rpx 24rpx 30rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.search-row {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 76rpx;
|
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
+ border-radius: 38rpx;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 44rpx;
|
|
|
height: 44rpx;
|
|
height: 44rpx;
|
|
|
- background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
|
|
- border-radius: 0rpx 8rpx 8rpx 0rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .live-tag text {
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- margin-left: 6rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .live-dot {
|
|
|
|
|
- width: 12rpx;
|
|
|
|
|
- height: 12rpx;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- animation: blink 1s infinite;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- @keyframes blink {
|
|
|
|
|
- 50% {
|
|
|
|
|
- opacity: 0.5;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .fv-info {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- //padding: 20rpx 24rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- min-width: 0;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.search-placeholder {
|
|
|
|
|
+ margin-left: 12rpx;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- .fv-title {
|
|
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
- color: #FFFFFF;
|
|
|
|
|
- line-height: 50rpx;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- font-style: normal;
|
|
|
|
|
- margin-bottom: 8rpx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.top-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- .fv-desc {
|
|
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
|
|
- font-weight: 400;
|
|
|
|
|
- font-size: 32rpx;
|
|
|
|
|
- color: #FFFFFF;
|
|
|
|
|
- line-height: 44rpx;
|
|
|
|
|
- text-align: justify;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- display: -webkit-box;
|
|
|
|
|
- -webkit-line-clamp: 2;
|
|
|
|
|
- -webkit-box-orient: vertical;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.action-icon {
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- /* 红色按钮 */
|
|
|
|
|
- .btn-watch {
|
|
|
|
|
- width: 188rpx;
|
|
|
|
|
- height: 64rpx;
|
|
|
|
|
- line-height: 64rpx;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- background: #FFFFFF;
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- margin-top: 28rpx;
|
|
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- font-size: 32rpx;
|
|
|
|
|
- color: #3F040B;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.action-icon.scan {
|
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- .btn-watch2 {
|
|
|
|
|
- width: 168rpx;
|
|
|
|
|
- height: 64rpx;
|
|
|
|
|
- line-height: 60rpx;
|
|
|
|
|
- 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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+/* 品牌标题 */
|
|
|
|
|
+.brand {
|
|
|
|
|
+ padding: 0 68rpx 30rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
|
|
|
- .courseTabViewClass {
|
|
|
|
|
|
|
+ image {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- padding-left: 14rpx;
|
|
|
|
|
- margin-top: 8rpx;
|
|
|
|
|
- margin-bottom: 24rpx;
|
|
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- /* 课程列表 */
|
|
|
|
|
- .course-list {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- gap: 24rpx;
|
|
|
|
|
- padding: 0 24rpx
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .course-card {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- padding: 20rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .course-thumb {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- width: 296rpx;
|
|
|
|
|
- height: 222rpx;
|
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .course-img {
|
|
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.brand-title {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.brand-subtitle {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* Banner */
|
|
|
|
|
+.banner {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ height: 210rpx;
|
|
|
|
|
+ margin: 0 24rpx 40rpx;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ //background: linear-gradient(135deg, #87CEEB 0%, #E0F4FF 100%);
|
|
|
|
|
+ .inner {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
|
|
- background: #BB6D6D;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .course-tag {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- right: 0;
|
|
|
|
|
- padding: 8rpx 12rpx;
|
|
|
|
|
- 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;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- min-width: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .course-name {
|
|
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
- color: #222222;
|
|
|
|
|
- line-height: 50rpx;
|
|
|
|
|
- text-align: justify;
|
|
|
|
|
|
|
+ height: 210rpx;
|
|
|
|
|
+ border-radius: 10rpx;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- display: -webkit-box;
|
|
|
|
|
- -webkit-line-clamp: 2;
|
|
|
|
|
- -webkit-box-orient: vertical;
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .course-meta {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
-
|
|
|
|
|
- image {
|
|
|
|
|
- width: 30rpx;
|
|
|
|
|
- height: 30rpx;
|
|
|
|
|
|
|
+ .swiper,
|
|
|
|
|
+ .swiper-item,
|
|
|
|
|
+ .swiper-item image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- .meta-icon {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- margin-right: 6rpx;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .meta-count {
|
|
|
|
|
- margin-left: 10rpx;
|
|
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
|
|
- font-weight: 400;
|
|
|
|
|
- font-size: 32rpx;
|
|
|
|
|
- color: #666666;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 底部占位(为全局 tabBar 留出空间) */
|
|
|
|
|
- .bottom-placeholder {
|
|
|
|
|
- height: 120rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- ::v-deep .u-tabs__wrapper__nav__item {
|
|
|
|
|
- padding: 0 10rpx !important;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .emptyCourse {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- height: 200rpx;
|
|
|
|
|
- padding: 24rpx 50rpx;
|
|
|
|
|
- color: #999999;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.banner-bg {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.banner-overlay {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.15);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.banner-title {
|
|
|
|
|
+ font-size: 48rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.banner-desc {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.95);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 滚动内容区 */
|
|
|
|
|
+.scroll-content {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.section {
|
|
|
|
|
+ padding-bottom: 32rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.section-head {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.section-title {
|
|
|
|
|
+ width: 226rpx;
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.section-title-wrap {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.play-icon {
|
|
|
|
|
+ width: 36rpx;
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.section-more {
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 16rpx;
|
|
|
|
|
+ height: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 横向标签 */
|
|
|
|
|
+.tag-scroll {
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ margin-bottom: 5rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.tag-item {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ padding: 6rpx 24rpx;
|
|
|
|
|
+ margin-right: 24rpx;
|
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.tag-item text {
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.tag-item.active {
|
|
|
|
|
+ background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 底部小三角核心 */
|
|
|
|
|
+.triangle {
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
|
+ bottom: -5px;
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ height: 0;
|
|
|
|
|
+ border-left: 30rpx solid transparent;
|
|
|
|
|
+ border-right: 30rpx solid transparent;
|
|
|
|
|
+ border-top: 20rpx solid #FF233C;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.tag-item.active text {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 特色视频卡片 */
|
|
|
|
|
+.feature-video-card {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ //align-items: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ background: linear-gradient(135deg, #5F111A 0%, #37050B 100%);
|
|
|
|
|
+ border-radius: 30rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
|
|
+ margin-left: 24rpx;
|
|
|
|
|
+ margin-right: 24rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.fv-thumb {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 360rpx;
|
|
|
|
|
+ height: 240rpx;
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.fv-img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: #e0e0e0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.live-tag {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 20rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 130rpx;
|
|
|
|
|
+ height: 44rpx;
|
|
|
|
|
+ background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
|
|
+ border-radius: 0rpx 8rpx 8rpx 0rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.live-tag text {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ margin-left: 6rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.live-dot {
|
|
|
|
|
+ width: 12rpx;
|
|
|
|
|
+ height: 12rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ animation: blink 1s infinite;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@keyframes blink {
|
|
|
|
|
+ 50% {
|
|
|
|
|
+ opacity: 0.5;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.fv-info {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ //padding: 20rpx 24rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.fv-title {
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-style: normal;
|
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.fv-desc {
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
|
+ text-align: justify;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ display: -webkit-box;
|
|
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 红色按钮 */
|
|
|
|
|
+.btn-watch {
|
|
|
|
|
+ width: 188rpx;
|
|
|
|
|
+ height: 64rpx;
|
|
|
|
|
+ line-height: 64rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ margin-top: 28rpx;
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #3F040B;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.btn-watch2 {
|
|
|
|
|
+ width: 168rpx;
|
|
|
|
|
+ height: 64rpx;
|
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
|
+ 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;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.courseTabViewClass {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding-left: 14rpx;
|
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 课程列表 */
|
|
|
|
|
+.course-list {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 24rpx;
|
|
|
|
|
+ padding: 0 24rpx
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.course-card {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.course-thumb {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 296rpx;
|
|
|
|
|
+ height: 222rpx;
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.course-img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: #BB6D6D;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.course-tag {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ padding: 8rpx 12rpx;
|
|
|
|
|
+ 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;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.course-name {
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ color: #222222;
|
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
|
+ text-align: justify;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ display: -webkit-box;
|
|
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.course-meta {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ 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;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 底部占位(为全局 tabBar 留出空间) */
|
|
|
|
|
+.bottom-placeholder {
|
|
|
|
|
+ height: 120rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+::v-deep .u-tabs__wrapper__nav__item {
|
|
|
|
|
+ padding: 0 10rpx !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.emptyCourse {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ height: 200rpx;
|
|
|
|
|
+ padding: 24rpx 50rpx;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|