moxuan_takeaway_user/my/detail/detail.vue

<template>
	<view class="container">
		<!-- 搜索框区域 -->
		<view class="search">
			<u-icon name="search" size="42" color="#888888"></u-icon>
			<input v-model="searchValue" class="search_input" type="text" placeholder="搜索可用商家名称" />
			<view class="btn">搜索</view>
		</view>

		<!-- 列表区域 -->
		<view class="body">
			<view class="body_header">
				<view class="header_left">全部可用商家</view>
				<view class="header_right">
					共
					<text class="text">6</text>
					家
				</view>
			</view>

			<view class="body_list">
				<!-- 每一个商家区域 -->
				<view class="list_item" v-for="item in 6" :key="item">
					<image class="item_img" src="/running/static/hb_bg.png" mode="aspectFill"></image>
					<view class="item_right">
						<view class="right_name">妈妈菜套餐饭（二食堂）</view>
						<view class="right_info">
							<view class="info_score">4.97分</view>
							<view class="info_sale">月售1000+</view>
							<view class="info_way">平台配送</view>
						</view>
						<view class="right_msg">
							<view class="msg_1">起送¥7</view>
							<view class="msg_2">配送¥1</view>
							<view class="msg_3">45分钟 816m</view>
						</view>
						<view class="right_time">营业时间：9:00 - 19:20</view>
						<view class="right_tags">
							<view class="tag">全场85折</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchValue: ''
		}
	},
	onReachBottom() {
		console.log(1)
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 10rpx 20rpx;
	height: 100vh;
	background-color: #fff9ef;

	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
		padding-left: 20rpx;
		width: 625rpx;
		height: 60rpx;
		border-radius: 60rpx;
		border: 2rpx solid #5b9188;

		.search_input {
			padding: 0 10rpx;
			flex: 1;
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			height: 60rpx;
			font-size: 24rpx;
			color: #fff;
			border-radius: 60rpx;
			background: linear-gradient(90deg, #74a498 0%, #5a8f86 100%);
		}
	}

	.body {
		margin-top: 40rpx;

		.body_header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 25rpx;
			font-weight: bold;
			font-size: 32rpx;

			.header_left {
			}

			.header_right {
				.text {
					margin: 0 10rpx;
					color: #5a9087;
					font-size: 28rpx;
				}
			}
		}

		.body_list {
			.list_item {
				display: flex;
				margin-bottom: 20rpx;
				padding: 15rpx;
				width: 710rpx;
				border-radius: 24rpx;
				background-color: #fff;

				.item_img {
					width: 220rpx;
					height: 220rpx;
				}

				.item_right {
					flex: 1;
					padding-left: 15rpx;

					.right_name {
						margin-bottom: 8rpx;
						font-size: 32rpx;
						font-weight: bold;
					}

					.right_info {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.info_score {
							font-size: 26rpx;
							color: #efa443;
						}
						.info_sale {
							margin-left: 10rpx;
							font-size: 22rpx;
						}

						.info_way {
							margin-left: 150rpx;
							padding: 2rpx;
							height: 30rpx;
							font-size: 16rpx;
							color: #999999;
							border-radius: 6rpx;
							border: 2rpx solid #999999;
						}
					}

					.right_msg {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;
						color: #808080;
						font-size: 24rpx;

						.msg_2 {
							margin-left: 10rpx;
						}

						.msg_3 {
							margin-left: 100rpx;
						}
					}

					.right_time {
						margin-bottom: 8rpx;
						width: 300rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: #efa443;
						border-radius: 6rpx;
						background-color: #fdf7e9;
					}

					.right_tags {
						display: flex;
						flex-wrap: wrap;
						align-items: center;

						.tag {
							margin-right: 8rpx;
							padding: 0 4rpx;
							height: 34rpx;
							color: #d43030;
							font-size: 22rpx;
							border-radius: 6rpx;
							border: 2rpx solid #d43030;
						}
					}
				}
			}
		}
	}
}
</style>