beiliyou_user_app/pages/home/healthCourse.vue

<template>
	<view class="column "  style="height: 100%;">
		<view class="justify-center bgf" >
			 <u-tabs :list="list1" lineWidth='30' lineColor="#018C39"
			 @click="acttab"></u-tabs>
		</view>
		<view v-if="acttabs==0" class="list-img flex-1 scrolly p20" >
			<view class="bgf radius20 list mtb10" v-for="item in 9" >
				<view class="posimg">
					<image src="https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250116/1737005549926.png" mode="aspectFill" class="img"></image>
					<image src="../../static/images/common/video_icon.png" class="ve"></image>
				</view>
				<view class="p20">
					<view>健康养生</view>
					<view class="color9 fs24 ellipsis ">
						通过科学的饮食、运动等方式养好自己身体，活出生命质量
					</view>
					<view class="mt8 justify-between align-center">
						<view class="justify-start align-center">
							<u-avatar :src="src" size="20"></u-avatar>
							<text class="fs24 color6 ml8">崔医生</text>
						</view>
						<view class="justify-start align-center zan">
							<image src='../../static/images/common/zan_icon.png' v-if='zanact'></image>
							<image src='../../static/images/common/zan_on_icon.png' v-else></image>
							<view class="color6 fs24">5454</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="column align-center">
				<image src="../../static/images/common/zanwuzhibo.png" 
				class="w200 h200"></image>
				<view>暂无课程</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '红包课程',
				}, {
					name: '直播课程',
				}],
				color:this.$store.state.theme.currentMoban['--base-color'],
				acttabs:0,
				src:'',
				zanact:true
			}
		},
		methods: {
			acttab(e){
				this.acttabs=e.index
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-img{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.list{
		width: 48%;
	}
}
.img{
	width: 100%;
	height: 350rpx;
	
}
.ve{
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	bottom: 50%;
	left: 40%;
}
.posimg{
	position: relative;
}
.zan{
	image{
		width: 32rpx;
		height: 32rpx;
	}
}
</style>