init

components/searchBox.vue

@@ -0,0 +1,61 @@
+<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>