You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.1 KiB
104 lines
2.1 KiB
11 months ago
|
<template>
|
||
|
|
<div class="title-header-box search" :style="{height:`${height}px`}">
|
||
|
|
<div class="title-header"
|
||
|
|
:style="{height:`${height}px`,top:`${height+padHeight}px`,backgroundColor:bgColor || '#FFFFFF'}">
|
||
|
|
<div class="search-box" :style="{backgroundColor:bgColor ? '#F2F2F2' : '#F2F2F2'}">
|
||
|
|
<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt="">
|
||
|
|
<input type="text" class="input" placeholder="请输入想要的产品或服务" v-model="keywords" @confirm="search" />
|
||
|
|
<div class="btn" @click="search()">搜索</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Base from "./Base";
|
||
|
|
export default {
|
||
|
|
name: "SearchHeader",
|
||
|
|
extends: Base,
|
||
|
|
props: ['bgColor'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
keywords: '',
|
||
|
|
padHeight: 0,
|
||
|
|
height: 88,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
search() {
|
||
|
|
uni.$emit('search', {
|
||
|
|
keywords: this.keywords
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// #ifdef MP-WEIXIN
|
||
|
|
let systemInfo = uni.getSystemInfoSync(),
|
||
|
|
rect = uni.getMenuButtonBoundingClientRect();
|
||
|
|
this.height = (rect.top - systemInfo.statusBarHeight) * 2 + rect.height
|
||
|
|
this.padHeight = systemInfo.statusBarHeight
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
let systemInfo = uni.getSystemInfoSync()
|
||
|
|
this.height = systemInfo.statusBarHeight*1.5
|
||
|
|
this.padHeight = systemInfo.statusBarHeight
|
||
|
|
// #endif
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.title-header-box {
|
||
|
|
padding: 16rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-header {
|
||
|
|
padding: 16rpx 0;
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
margin: auto;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-box {
|
||
|
|
width: 697rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-radius: 60rpx;
|
||
|
|
padding: 6rpx 7rpx 6rpx 26rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: #F2F2F2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-box img {
|
||
|
|
width: 28rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-box .input {
|
||
|
|
flex: 1;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
background: none;
|
||
|
|
color: #000000;
|
||
|
|
margin: 0 20rpx;
|
||
|
|
background-color: #F2F2F2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-box .btn {
|
||
|
|
/* background-color: #FFC825; */
|
||
|
|
border-radius: 27rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
padding: 10rpx 26rpx;
|
||
|
|
background-color: #00AAFF;
|
||
|
|
}
|
||
|
|
</style>
|