<script setup>
import { useStore } from '@/store'
const store = useStore()
// props
const props = defineProps(['width'])
</script>
<template>
	<!-- <view class="custom-status-bar" id="custom-status-bar" :style="{paddingTop: `${store.status_bar_height}px`,width:`${width}`}"> -->
	<view class="custom-status-bar" id="custom-status-bar" :style="{width:`${width}`}">
		<view class="empty-wrap"></view>
		<view class="search-box">
			<input class="uni-input" confirm-type="search" placeholder="" />
			<view class="search-btn">
				<icon style="color: rgb(248, 248, 248);" type="search"  size="16"/>
			</view>
		</view>
	</view>
</template>
<style>
	.empty-wrap{
		width: 100%;
		height:20rpx;
	}
	.search-btn{
		position: absolute;
		/* right: 0%; */
		/* background: #26758d; */
		color: white;
		width: 63rpx;
		height: 63rpx;
		/* border-radius: 50%; */
		text-align: center;
		line-height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* box-shadow: -1px 1px 10px grey; */
	}
	.uni-input{
		width: 100%;
		padding: 20rpx;
		/* margin: 20rpx 0; */
		/* border: 2rpx solid #e7e7e7; */
		/* border-radius: 100rpx; */
		font-size: 20rpx;
		color: gray;
	}
	.search-box{
		display: flex;
		/* width: 95%; */
		align-items: center;
		position: relative;
		/* width: 100%; */
		/* position: fixed; */
		top:0px;
		background: white;
		z-index: 10;
		border-radius: 100rpx;
		border: 2rpx solid #eeeeee;
	}
</style>