xingmingyi_applet/components/videoList.vue

<template>
	<view class="box">
		<view v-if="flag == 1" class="dffs boxlist">
			<view @click="nextTo(item)" class="vidLi" v-for="(item, ind) in list" :key="ind">
				<view class="imgbox">
					<image :src="item.img" mode=""></image>
					<view class="look">{{ item.see_num }}人观看</view>
				</view>
				<view class="title oneelli ">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		list: {
			type: Array,
			default: []
		},
		flag: {
			type: [String, Number],
			default: 1
		}
	},
	methods: {
		nextTo(item) {
			uni.navigateTo({
				url: '/pages/index/video/videoInfo?id=' + item.id
			});
		}
	}
};
</script>

<style scoped lang="scss">
.boxlist {
	align-items: flex-start;
	width: auto;
	overflow-x: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	.vidLi {
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.07);
		border-radius: 0px 0px 10rpx 10rpx;
		margin-right: 20rpx;
		width: 200rpx;
		.imgbox {
			width: 200rpx;
			height: 200rpx;
			position: relative;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			.look {
				position: absolute;
				bottom: 15rpx;
				left: 19rpx;
				background: rgba(#000, 0.3);
				border-radius: 18rpx;
				font-size: 20rpx;
				line-height: 28rpx;
				padding: 5rpx 14rpx;
				color: #ffffff;
				display: inline-block;
			}
		}
		.title {
			margin: 18rpx 12rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 40rpx;
			height: 40rpx;
		}
	}
}
</style>