medicine-xcx/pages/sort/search_sort/index.vue

<template>
	<view>
		<view class="search_box">
			<u-search height="80" placeholder="日照香炉生紫烟" @click="search_info" @custom="search_info" v-model="search_text"></u-search>
		</view>
		
		<view class="hot_search">
			<view class="title_box">
				<text class="title">热门搜索</text>
				<!-- <image class="hot" src="../../../static/hot.png" mode=""></image> -->
			</view>
			<view class="item_box">
					<view class="item" v-for="(item,index) in hot_list" :key="index">
						<text>{{item}}</text>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_text: '',
				hot_list: [
					"儿童感冒药",
					"退烧药",
					"儿童消毒液",
					"消炎药",
					"儿童感冒药",
					"退烧药",
					"儿童消毒液",
					"消炎药",
					"儿童感冒药",
					"退烧药",
					"儿童消毒液",
					"消炎药",
				]
			}
		},
		methods: {
			search_info() {
				// 搜索信息
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search_box{
		margin-top: 25rpx;
		margin-left: 15rpx;
		margin-right: 24rpx;
		/deep/ .u-content{
			box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
		}
	}
	.hot_search{
		margin-top: 32rpx;
		margin-left: 32rpx;
		margin-right: 30rpx;
		.title_box{
			display: flex;
			.title{
				padding-top: 12rpx;
				padding-right: 15rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
			.hot{
				width: 31rpx;
				height: 42rpx;
			}
		}
		.item_box{
			margin-top: 24rpx;
			display: flex;
			flex-wrap: wrap;
			.item{
				padding-top: 18rpx;
				padding-bottom: 18rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				margin-bottom: 39rpx;
				border-radius: 31rpx;
				background-color: #F5F5F5;
				box-sizing: border-box;
				font-size: 20rpx;
				margin-right: 36rpx;
				text{
					color: #707070;
				}
				&:nth-child(4n) {
					margin-right: 0;
				}
			}
		}
	}
</style>