54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
<template>
|
|
<view class="search-wrapper" :style="{ paddingTop: pTop + 'rpx', backgroundColor: bgColor }">
|
|
<view class="search-main" @tap="emits('click')">
|
|
<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
|
|
<input type="text" :placeholder="place" placeholder-style="color: rgba(0,0,0,0.35);" :style="{ fontSize: size + 'rpx' }" disabled />
|
|
</view>
|
|
<slot name="right" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
place: { type: String }, //提示语
|
|
pTop: { type: Number }, //距离上边距离 使用padding 为了有背景色
|
|
bgColor: { type: String }, //背景色
|
|
size: { type: Number, default: 27 }, //搜素框文字大小
|
|
})
|
|
const emits = defineEmits(['click'])
|
|
|
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.search-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 110rpx;
|
|
background-color: $J-bg-ff;
|
|
padding: 0 30rpx;
|
|
.search-main {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 70rpx;
|
|
background-color: $J-bg-f5;
|
|
border-radius: $J-b-r12;
|
|
image {
|
|
padding: 0 22rpx;
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
input {
|
|
flex: 1;
|
|
}
|
|
.search-text {
|
|
padding: 0 30rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: $J-color-t29;
|
|
}
|
|
}
|
|
}
|
|
</style>
|