jp-education-student/pages/youth/search/search.vue

<template>
	<view>
		<view class="search">
			<u-icon name="arrow-left"></u-icon>
			<u-search placeholder="  输入关键字搜索课程" action-text="查询"></u-search>
			 </view>
			 
			 <view class="search-history">
				 <view class="head">
					 <view class="title">
					 	搜索历史
					 </view>
					 <view class="clear">
					 	清空历史
					 </view>
				 	
				 </view>
				 <view class="content">
				 	<view class="item">书法</view>
					<view class="item">舞蹈</view>
				 </view>
			 	
			 </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.search{
            background-color: #fff;
			padding: 16rpx 24rpx;
			display: flex;
			::v-deep.u-icon--right{
				margin-right: 11px;
			}
			::v-deep.u-action{
				   width: 17.1%;
				   text-align: center;
				   line-height: 28px;
				   border-radius: 50px;
				   background-color: rgba(13, 186, 199, 1);
				   color: rgba(255, 255, 255, 1);
			}
			::v-deep.u-content{
				   background-color: rgba(240, 244, 250, 1) !important;
			}
			::v-deep.u-input{
				   background-color: rgba(240, 244, 250, 1) !important;
			}
		}

.search-history{
	margin-top: 20px;
	padding: 0 18px;
	.head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title{
			color: #101010;
		}
		.clear{
			color: rgba(169, 169, 169, 1);
			font-size: 12px;
		}
	}
	.content{
		display: flex;
		margin-top: 9px;
		.item{
			width: 150rpx;
			line-height: 66rpx;
			border-radius: 10px;
			background-color: rgba(239, 240, 245, 1);
			color: rgba(88, 88, 88, 1);
			font-size: 12px;
			text-align: center;
			margin-right: 26rpx;
		}
	}
	
}


</style>