<template>
	<view class="w-100 search-bar flex j-center a-center" :style="{background: bg}" @click="nav">
		<view class="my-2 search text-center flex j-center a-center" :style="{background: innerBg}">
			<image 
				class="search-icon mr-2"
				src="../../static/images/common/icon-search.png"
				mode="aspectFit"
			/>
			<text class="font-24">搜索商品</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		bg: {
			type: String,
			default: "#fff"
		},
		innerBg: {
			type: String,
			default: "#f8f8f8"
		}
	},
	methods: {
		nav() {
			uni.navigateTo({
				url: '/pages/search/index'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.search-bar {
	background-color: $white;
	.search {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #7F7F7F;
		background-color: #F8F8F8;
		.search-icon {
			width: 34rpx;
			height:34rpx;
		}
	}
}
</style>