siyu_app/pages/course/components/hallItem.vue

<template>
	<view class="hall-box-item">
		<view class="video-imgbox">
			<image class="video-img" :src="item.imgUrl" mode="scaleToFill" :lazy-load="true"></image>
			<image class="video-img-icon" src="@/static/image/hall/video_icon.png" mode="aspectFill"></image>  
		</view>
		
		<view class="hall-box-info">
			<view class="hall-box-name">{{item.courseName}}</view>
			<view class="hall-box-desc">{{item.description}}</view>
			<view class="hall-box-footer">
				<view class="hall-box-footerl footer-flex">
					<image class="hall-box-img" :src="item.avatar"></image>
					<text>{{item.talentName}}</text>
				</view>
				<view class="hall-box-footerr footer-flex">
					<image class="hall-box-img" src="@/static/image/hall/zan_icon.png"></image>
					<text>{{ formatNum(item.likes)  }}</text>
				</view>
			</view>
		</view>
	    <view v-if="item.isIntegral!=1" class="vip">VIP</view>
	
	</view>
</template>

<script>
	export default {
		name: "hallItem",
		props: {
			item: {
				type: Object,
				default() {
					return { imgUrl:"",isIntegral:-1 };
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			formatNum(num){
				if(num>10000){
					return (num/10000.0).toFixed(1)+'万';
				}
				return num;
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.vip{ 
		  position: absolute;
		  width: 54rpx;
		  height: 20rpx;
		  line-height: 20rpx;
		  background: linear-gradient(94deg, #FFE9D0 0%, #E9BD97 100%);
		  border-radius: 16rpx 0 16rpx 0;
		  top: 0;
		  left: 0;
		  color:#333;
		  font-size:18rpx ;
		  text-align: center;
		  font-weight: 500;
		  font-style: italic;		  
	}
	.hall-box {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		&-item {
			width: 342rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
            position: relative;
			.video-imgbox {
				width: 342rpx;
				height: 191rpx;
				background: #ECECEC;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				position: relative;
				overflow: hidden;
			}
			.video-img-icon {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
			}
			.video-img {
				width: 342rpx;
				height: 191rpx;
				// &::after {
				// 	content: "";
				// 	width: 48rpx;
				// 	height: 48rpx;
				// 	position: absolute;
				// 	left: 50%;
				// 	top: 50%;
				// 	transform: translate(-50%, -50%);
				// 	z-index: 1;
				// 	background-image: url("@/static/hall/video_icon.png");
				// 	background-repeat: no-repeat;
				// 	background-size: 100% 100%;
				// }
			}
					
		
		}

		&-info {
			padding: 22rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

		&-name {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		&-desc {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin: 10rpx 0 18rpx;
		}

		&-footer {
			@include u-flex(row, center, space-between);
			width: 100%;
		}

		&-footerl {
			flex: 1;
			text {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		&-img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
			flex-shrink: 0;
		}
	}
	
	.footer-flex {
		overflow: hidden;
		@include u-flex(row, center, flex-start);
	}
	


</style>