<template>
	<!-- 搜索 -->
	<view class="serachBox">
	  <view class="serach-box">
	    <view class="searchInput">
	      <div class="search-wrap" @click="handleSearch">
	        <text>搜索食材...</text>
	      </div>
	    </view>
	    <view class="searchBtn">
	      <view @click="handleSearch">搜索</view>
	    </view>
	  </view>
	</view>
</template>

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

<style scoped lang="scss">
	.serachBox {
	  height: 40px;
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  padding: 0 15px 10px;
	  z-index: 99;
	  background-color: #efefef;
	
	  .serach-box {
	    height: 40px;
	    border-radius: 10px;
	    position: relative;
	    background-color: #fff;
	
	    .search-wrap {
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      height: 100%;
	
	      text {
	        font-size: 30rpx;
	        color: #aaa;
	      }
	    }
	  }
	
	  .searchInput {
	    position: absolute;
	    left: 0;
	    right: 60px;
	    height: 40px;
	
	    icon {
	      position: absolute;
	      right: 10px;
	      top: 10px;
	      display: flex;
	      z-index: 99999;
	    }
	  }
	
	  .searchBtn {
	    position: absolute;
	    width: 60px;
	    right: 0px;
	    height: 40px;
	    line-height: 40px;
	    background: $maincolor;
	    border-radius: 0 10px 10px 0;
	    text-align: center;
	    color: #fff;
	  }
	
	  .icon {
	    width: 50px;
	    height: 40px;
	    position: absolute;
	    right: 15px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	  }
	
	}
</style>
