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.
100 lines
1.9 KiB
100 lines
1.9 KiB
5 months ago
|
<template>
|
||
|
|
<view class="title-header-box" :style="{height:`${height+padHeight}px`}">
|
||
|
|
<view class="title-header" :style="{paddingTop:`${padHeight}px`,height:`${height}px`}">
|
||
|
|
<view class="left" @click="goBack" v-if="title !== '太湖'"><i class="iconfont"></i></view>
|
||
|
|
<view class="center">{{title ? title.substr(0,10) : '太湖'}}</view>
|
||
|
|
<view class="right"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "SearchHeader",
|
||
|
|
props: ['title', 'icon'],
|
||
|
|
watch: {
|
||
|
|
'title'(newVal, oldVal) {
|
||
|
|
this.title = newVal
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
keywords: '',
|
||
|
|
padHeight: 0,
|
||
|
|
height: 88
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
search() {
|
||
|
|
uni.$emit('search', {
|
||
|
|
keywords: this.keywords
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
let systemInfo = uni.getSystemInfoSync(),
|
||
|
|
rect = uni.getMenuButtonBoundingClientRect();
|
||
|
|
let height = (rect.top - systemInfo.statusBarHeight) * 2 + rect.height
|
||
|
|
this.height = height
|
||
|
|
this.padHeight = systemInfo.statusBarHeight
|
||
|
|
this.right = (systemInfo.screenWidth - rect.right) + rect.width
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.title-header-box {
|
||
|
|
background-color: #F8F8F8;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-header {
|
||
|
|
/* background-color: #FFC825; */
|
||
|
|
background: white;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 88rpx;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 1000;
|
||
|
|
padding-top: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-header .left {
|
||
|
|
padding-left: 30rpx;
|
||
|
|
width: 58rpx;
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-header .search-box {
|
||
|
|
width: 502rpx;
|
||
|
|
height: 58rpx;
|
||
|
|
border-radius: 29rpx;
|
||
|
|
background: #F0F0F0;
|
||
|
|
padding: 0 26rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-header .search-box .iconfont {
|
||
|
|
flex-shrink: 0;
|
||
|
|
color: #999999;
|
||
|
|
font-size: 30rpx;
|
||
|
|
margin-right: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-header .search-box .input {
|
||
|
|
flex: 1;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
background: none;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
</style>
|