xingmingyi_applet/pages/index/components/knowAuthList.vue

<template>
	<view class="box">
		<view class="boxlist">
			<view @click="nextTo(item)" class="bb vidLi dfsb" v-for="(item, ind) in list" :key="ind">
				<view class="imgbox">
					<image :src="item.img" mode=""></image>
					<text class="left-img" v-if="ind < 3">第{{ ind + 1 }}名</text>
				</view>
				<view class="dffd flex1">
					<view class="title elli">{{item.title}}</view>
					<view class="textgrey fontsm">{{item.tags}}</view>
					<view v-if="flag==1" class="auth dfsb">
						<text class="fontssm textgrey">作者：{{item.athour}}</text>
						<text class="fontssm textgrey">{{item.down_num}}人下载</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

<style scoped lang="scss">
.boxlist {
	.vidLi {
		width: 100%;
		padding: 27rpx 0;
		background-color: #fff;
		&:nth-of-type(2) {
			.imgbox {
				.left-img {
					background: #ea7334;
				}
			}
		}
		&:nth-of-type(3) {
			.imgbox {
				.left-img {
					background: #f5b344;
				}
			}
		}
		.imgbox {
			position: relative;
			width: 128rpx;
			height: 180rpx;
			margin-right: 18rpx;
			.left-img {
				position: absolute;
				top: 0;
				left: 0;
				height: 33rpx;
				line-height: 33rpx;
				font-size: 18rpx;
				color: #fff;
				padding: 0 5rpx;
				background: #E84325;
				border-radius: 7rpx;
			}
			image {
				width: 128rpx;
				height: 180rpx;
			}
		}
		.title {
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 12rpx;
		}
		.auth {
			margin-top: 15rpx;
			width: 100%;
		}
	}
}
</style>