sljiaxuanuser_uniapp/pages/home/components/courseView.vue

<template>
	<view class="open-class bgf" v-if="cardList&&cardList.length>0">
		<view class="title-box bgf">
			<text class="title">健康大讲堂</text>
			<view class="more" @click="goClassList()">
				<text>查看全部</text>
				<u-icon name="arrow-right" size='12'></u-icon>
			</view>
		</view>
		<swiper class="class-swiper" style="height: 250rpx;" :autoplay="true" circular interval="3000" duration="1000" display-multiple-items='2' next-margin="20px">
			<swiper-item class="class-swiper-item" v-for="(item, index) in cardList" :key="index" @click="goClass(item.courseId)">
				<view class="class-item">
					<view class="img-box">
						<image :src="item.imgUrl || 'https://cos.his.cdwjyyh.com/fs/20250807/1eebee6c3bff4fd68d1d3dde090bdf89.png'" mode="widthFix"></image>
					</view>
					<view class="one-t" style="max-width: 280rpx;display: block;">{{item.courseName}}</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getAppletCourse
	} from '@/api/course.js'
	export default {
		data() {
			return {
				cardList: [],
			}
		},
		mounted() {
			this.getCourseList()
		},
		methods: {
			goClassList() {
				uni.navigateTo({
					url: '/pages_course/teacherClassroom'
				})
			},
			goClass(courseId) {
				uni.navigateTo({
					url: '/pages_course/learn?courseId='+courseId
				})
			},
			getCourseList() {
				getAppletCourse().then(res => {
					if (res.code == 200) {
						this.cardList = res.data.splice(0, 6)
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.class-swiper {
		margin-top: 20rpx;
	}
	.class-swiper-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.open-class {
		.title-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.more {
				font-size: 24rpx;
				padding-left: 30rpx;
				color: #999999;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}


		.class-item {
			display: inline-block;
			font-size: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-weight: 500;

			.img-box {
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 12rpx;
				width: 280rpx;
				height: 157.5rpx;
				image {
					width: 280rpx;
					height: 157.5rpx;
				}
			}


			&:last-child {
				margin-right: 0rpx;
			}
		}
	}
</style>