Jingde-town-wechat-uniapp/pages_order/service/experience.vue

<template>
	<!-- 非遗体验 -->
	<view class="experience">
		<navbar title="非遗体验" leftClick @leftClick="$utils.navigateBack" />
		<view class="experience-img">
			<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill" />
		</view>
		<view class="experience-box" v-for="(item,index) in 10" 
		@click="toUrl(item)"
		:key="index">
			<view class="experience-box-img">
				<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="16rpx" width="100%" height="360rpx"
					:fade="false" />
			</view>

			<view class="experience-box-font">
				<view style="font-weight: 600;">孙天天陶瓷工作室</view>
				<view style="font-size: 24rpx; color: #999999;">开放时间：08：00-21：00</view>
				<view class="experience-box-button">
					<view>线上预订</view>
				</view>
			</view>
		</view>
		
		<tabber/>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toUrl(item){
				console.log(item);
				this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=2`)
			},
		}
	}
</script>

<style scoped lang="scss">
	.experience {
		.experience-img {
			height: 400rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.experience-box {
			width: 94%;
			margin-left: 3%;
			margin-top: 20rpx;
			background-color: #fff;
			box-shadow: 0px 0px 10rpx 0rpx #00000022;
			border-radius: 12rpx;

			.experience-box-img {
				width: 94%;
				margin-left: 3%;
				padding-top: 20rpx;
			}

			.experience-box-font {
				width: 94%;
				margin-left: 3%;
				margin-top: 30rpx;

				.experience-box-button {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 28rpx;
					color: #fff;
					padding-bottom: 40rpx;
					
					view {
						padding: 10rpx 40rpx;
						border-radius: 40rpx;
						background-color: #C83741;
					}
				}
			}
		}
	}
</style>