kitchendDevice/components/search2.vue

<template>
	<!-- 搜索 -->
	<view class="search" @click="handleSearch">
		<input type="text" :placeholder="name" />
		<icon v-if="name" class="iconfont icon-error" @click="handleSearch"></icon>
		<image src="/static/28.png"></image>
	</view>
</template>

<script>
	export default {
		name: "search",
		data() {
			return {};
		},
		props: {
			name: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 搜索
			handleSearch() {
				uni.switchTab({
					url: '/pages/search/search'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.search {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		padding-bottom: 35px;
		padding-top: 20rpx;
		background-color: $maincolor;


		input {
			width: calc(100% - 80rpx);
			background: #fff;
			height: 39px;
			line-height: 38px;
			border-radius: 20rpx;
			padding: 0 20rpx;
			margin: 0 20rpx;
		}

		.input:hover {
			box-shadow: 0 1rpx 20rpx #ccc;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 40rpx;
			top: 18px;
			z-index: 99;
		}
	}

	.icon-error {
		color: #888484;
		position: absolute;
		right: 120rpx;
		top: 18px;
		font-size: 24px;
	}
</style>