nc.963.cn/components/list/list.vue

<template>
	<view class="main-container">
		<view class="list-img"  v-if="!home">
			<image src="../../static/img/like.png"></image>
		</view>
		<view class="test-list">
			<view class="list-li" v-for="(book,index) in List" :key="index">
				<view @click="godetail(book)"><image :src="book.img" mode="aspectFill"></image></view>
				<view>
					<p @click="godetail(book)">{{ book.name }}</p>
					<p @click="godetail(book)">{{ book.content }}</p>
					<p>
						<span>{{ book.price}} 元</span>
						<span v-if="!home"  @click="gotest(book)">立即测评</span>
					</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {
	},
	props: ['home','List'],
	data() {
		return {
			
		};
	},
	onLoad() {
	},
	methods: {
		// 立即测评
		gotest(book){
			uni.navigateTo({
				url:'/pages/test/test?id='+book.id+'&time='+book.time
			})
		},
		// 跳转当前点击的详情
		godetail(book) {
			uni.navigateTo({
				url:'/pages/test-detail/test-detail?id='+book.id+'&img='+book.img
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.main-container{
		// padding: 32upx 32upx 0upx 32upx;
		// margin-top: 20upx;
		.list-img{
			image{
				width: 170upx;
				height: 40upx;
			}
		}
		.test-list{
			.list-li{
				overflow: hidden;
				padding: 24upx 0upx;
				border-bottom: 2upx solid #E6E6E6;
				&:last-child{
					border-bottom: 0;
				}
				image{
					min-width: 186upx;
					max-width: 100%;
					height: 148upx;
				}
				view{
					float: left;
					display: inline-block;
					&:nth-child(1){
						width: 30%;
					}
					&:nth-child(2){
						width: 70%;
						text-indent: 20upx;
						p{
							text-overflow:ellipsis;
							white-space: nowrap;
							&:nth-child(1){
								overflow: hidden;
								font-size: 30upx;
								font-weight: 600;
								color: #292929;
							}
							&:nth-child(2){
								overflow: hidden;
								font-size: 26upx;
								font-weight: 400;
								color: #848484;
								margin: 20upx 0upx 26upx 0upx;
							}
							&:nth-child(3){
								position: relative;
								span{
									display: inline-block;
									&:nth-child(1){
										display: contents;
										font-size: 24upx;
										font-weight: 400;
										color: #FA564C;
									}
									&:nth-child(2){
										width: 150upx;
										right: 0;
										position: absolute;
										height: 50upx;
										line-height: 50upx;
										background: #EFD140;
										opacity: 1;
										border-radius: 26upx;
									}
									
								}
							}
						}
					}
				}
			}
		}
	}
	
</style>