zdtap-uniapp-main/components/rowBeer.vue

/**
 * @description 横向滚动的啤酒列表组件
 * @author [作者名]
 * @usage 用于展示横向滚动的啤酒列表，支持点击跳转到酒评详情
 * @props beers: Array - 啤酒列表数据，包含啤酒的详细信息
 * @events 无
 * @example
 * <rowBeer :beers="beerList" />
 */
<template>
	<scroll-view scroll-x="true" class="scroll-container">
		<view v-for="(it, index) in beers" :key="index" style="display: inline-block;" class="row-box" @click="toReview(it)">
			<view class="beer-box">
				<image :src="it.cover" class="cover"></image>
				<view class="title word-all">{{ it.beerName || ''}}</view>
				<view class="desc word-all">{{ it.beerStyles || '' }}</view>
				<view class="desc word-all">{{ it.brandName ||'' }}</view>
				<view class="flex align-center num">
					<image src="@/static/vector.png" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
					</image>
					{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）
				</view>
			</view>
		</view>
		
	</scroll-view>
</template>

<script>
	export default {
		name:"rowBeer",
		data() {
			return {
				
			};
		},
		props: {
			beers: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			// 跳转酒评页
			toReview(it) {
				uni.navigateTo({
					url: "/pages/index/review?beerId=" + it.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
// 1. 横向滚动容器样式
.scroll-container {
		display: flex; // 弹性布局
		flex-direction: row;// 水平方向排列
		white-space: nowrap; // 内容不换行
		min-height: 505rpx;// 最小高度505rpx
		// padding-bottom: 10rpx;
		// margin-bottom: 24rpx;// 底部外边距32rpx

		// 2. 每个啤酒盒子的样式
		.row-box {
			&:nth-child(1) {
				margin-left: 32rpx; // 第一个啤酒盒子左边外边距32rpx
			}
		}

		  // 3. 啤酒卡片基础样式
		.beer-box {
			width: 208rpx;
			background: #FFFFFF;
			margin-right: 16rpx;
			margin-bottom: 24rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;// 顶部对齐
			
			// 4. 啤酒封面图样式

			.cover {
				width: 208rpx;
				height: 300rpx;
				border-radius: 12rpx;
				margin-bottom: 16rpx;
				// margin-top: 16rpx;
			}
			 // 5. 啤酒名称样式
			.title {
				font-size: 28rpx;
				font-weight: 600;
				line-height: 40rpx;
				color: #030303;
				margin-bottom: 12rpx;
				line-height: 1.4;
				white-space: normal;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			// 6. 啤酒描述样式
			.desc {
				font-size: 24rpx;
				color: #606060;
				margin-bottom: 12rpx;
				color: #606060;
			}

			// 7. 评分样式
			.num {

				font-size: 24rpx;
				color: #FFCC00;
			}
		}
	}
</style>