61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
|
<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>
|