null/pages/mang/components/eva-item.vue

<template>
	<view class="eva-wrap flex-col">
		<view class="flex-row justify-between">
			<view class="flex-row">
				<image
					src="/static/temp/pro.png"
					class="image_16 image_22"
					mode="aspectFill"
				/>
				<view class="flex-col items-start group_30">
					<text class="text_20 clamp">甜品大师姐</text>
					<text class="text_21">2022.07.13 10:56</text>
				</view>
			</view>
			<view class="stars align-center">
				 <image
				  src="/static/mang_star.png"
				  class="image_10"
				  v-for="(item,idx) in 5"
				  :key="idx"
				/>	
			</view>
		</view>
		<view class="flex-col group_31">
			<view class="group_32">
				<text class="text_22">这是我吃过的最好吃的一款，强烈推荐，口感细腻，想象不到的美味。太好吃了。</text>
			</view>
			<view class="imgs-wrap align-center">
				<image
					src="/static/temp/pro.png"
					class="image_19 image_24"
					mode="aspectFill"
					v-for="(item,idx) in 6" :key="idx"
					@tap="previewImg(idx)"
				/>	
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
	//请求数据
	info:{
		type:Object,
		default:()=>({})
	},
  },
  methods: {
	  previewImg(idx){
	  	let url = [];
	  	this.$tools.previewImg(url)
	  }
  }
};
</script>
<style lang="scss" scoped>
.eva-wrap {
	padding: 37rpx 33rpx 40rpx;
	.image_16 {
		width: 54rpx;
		height: 54rpx;
		border-radius: 54rpx;
	}
	.image_22 {
		margin-top: 4rpx;
	}
	.group_30 {
		margin-left: 20rpx;
	}
	.text_20 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		letter-spacing: 1.2rpx;
		max-width: 300rpx;
	}
	.text_21 {
		margin-top: 15rpx;
		color: #999999;
		font-size: 20rpx;
		font-family: PingFang;
	}
	.image_10 {
		width: 28rpx;
		height: 28rpx;
		margin-left: 4rpx;
	}
	.group_31 {
		margin: 13.5rpx 24rpx 0 7rpx;
	}
	.group_32 {
		line-height: 37rpx;
	}
	.text_22 {
		color: #333333;
		font-size: 26rpx;
		font-family: PingFang;
		line-height: 40rpx;
		letter-spacing: 1.04rpx;
	}
	.imgs-wrap{
		flex-wrap: wrap;
		.image_19 {
			width: 180rpx;
			height: 180rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			// &:nth-child(4n){
			// 	margin-right: 0;
			// }
		}
		.image_24 {
			margin-top: 16.5rpx;
			align-self: flex-start;
		}	
	}
	
}
</style>