W250913/14.uniapp/project2/components/listContent.vue

<template>
	<view class="content">
		<view class="list-header">
			<view class="left">
				{{main.value.subject_collection.name}}
			</view>
			<view class="right" @click="goList">
				更多{{main.value.total}}
				<van-icon name="arrow" />
			</view>
		</view>
		<view class="list-content">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view class="list-bar">
					<view class="list-item" v-for="(item,index) in main.value.subject_collection_items" :key="index">
						<image class="list-img" :src="item.pic.normal" mode="widthFix"></image>
						<view class="list-name">{{item.title}}</view>
						<view class="list-rate">
							<van-rate color="#ffd21e" void-color='#c7c7c7' :value="item.rating.star_count" />{{item.rating.value}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "listContent",
		data() {
			return {
			};
		},
		props: ['main'],
		created() {
				console.log(this.main,'main',this.main.value.subject_collection.id)
		},
		methods: {
			goList() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(() => {
					uni.navigateTo({
						url:`/pages/list/index?ids=${this.main.value.subject_collection.id}`
					})
					uni.hideLoading();
				}, 2000);
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .custom-class {
		font-size: 14px;
		/* 调整星星大小 */
	}

	.content {
		padding: 10px;
		margin-top: 20rpx;
		margin-bottom: 30rpx;

		.list-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.left {
				font-weight: 500;
				color: #111;
				font-size: 40rpx;
			}

			.right {
				color: #111;
				font-size: 30rpx;
				display: flex;
				align-items: center;
			}
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}

		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}

		.list-bar {
			display: flex;
			.list-item {
				width: 260rpx;
				text-align: center;
				margin-left: 20rpx;
				border-radius: 16rpx;
				&:first-child {
					margin-left: 0;
				}

				.list-img {
					width: 100%;
					border-radius: 16rpx;
				}

				.list-name {
					width: 100%;
					color: #111;
					font-size: 35rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.list-rate {
					::v-deep .van-rate__icon{
						font-size: 10rpx;
					}
				}
			}
		}
	}
</style>