mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<template>
|
|
<view class="search-bar" :style="{ backgroundColor: backgroundColor,border:border}">
|
|
<view v-if="showChoseCity" class="location-chose" @click="$emit('chooseCity')" :style="{fontSize:fontSize,color:fontColor}">
|
|
{{ city || '选择' }}
|
|
<u-icon name="arrow-down-fill" class="choseIcon" size="15" :color="fontColor" :style="{marginLeft:'2rpx'}" />
|
|
</view>
|
|
<view class="search-input" @click="$emit('search')">
|
|
<u-icon v-if="searchIconShowLeft" name="search" size="40" :color="fontColor" class="search-icon-left" />
|
|
<text class="placeholder" :style="{fontSize:fontSize,color:fontColor}">{{ placeholder }}</text>
|
|
<u-icon v-if="!searchIconShowLeft" name="search" size="40" :color="fontColor" class="search-icon-right" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SearchBar',
|
|
props: {
|
|
city: {
|
|
type: String,
|
|
default: '宜昌市'
|
|
},
|
|
showChoseCity: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
fontSize: {
|
|
type: String,
|
|
default: '30rpx'
|
|
},
|
|
searchIconShowLeft: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
fontColor:{
|
|
type: String,
|
|
default: '#FFFFFF'
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: 'rgba(255,255,255,0.6)' ,
|
|
},
|
|
border: {
|
|
type: String,
|
|
default: 'border: 1px solid #FFFFFF' ,
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '搜索小区/城市/门店'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.choseIcon {
|
|
margin-left: 5rpx;
|
|
}
|
|
.search-bar {
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 10rpx;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.location-chose {
|
|
font-family: Noto Sans S Chinese;
|
|
font-weight: 400;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 25%;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 83.5rpx;
|
|
padding: 25rpx 30rpx;
|
|
}
|
|
|
|
.placeholder {
|
|
font-family: Noto Sans S Chinese;
|
|
font-weight: 400;
|
|
flex: 1;
|
|
}
|
|
|
|
.search-icon-right {
|
|
|
|
}
|
|
|
|
.search-icon-left {
|
|
margin-right: 5%;
|
|
}
|
|
</style>
|