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.
107 lines
2.0 KiB
107 lines
2.0 KiB
3 months ago
|
<template>
|
||
|
|
<view class="title-header-box" :style="{height:`${height}px`}">
|
||
|
|
<view class="title-header" :style="{paddingTop:`${padHeight}px`,height:`${height}px`}">
|
||
|
|
<view class="left" @click="goBack"><uni-icons type="left" size="30"></uni-icons></view>
|
||
|
|
<view class="center">
|
||
|
|
<view class="title">三个桃子</view>
|
||
|
|
<view class="subtitle">时间里的约定</view>
|
||
|
|
</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: 60,
|
||
|
|
height: 88
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
const systemInfo = uni.getSystemInfoSync();
|
||
|
|
const statusBarHeight = systemInfo.statusBarHeight;
|
||
|
|
const rect = uni.getMenuButtonBoundingClientRect();
|
||
|
|
this.height = statusBarHeight + 55
|
||
|
|
uni.setStorageSync('titleHeight', this.height)
|
||
|
|
this.padHeight = systemInfo.statusBarHeight - 15
|
||
|
|
this.right = (systemInfo.screenWidth - rect.right) + rect.width
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.title-header-box {
|
||
|
|
background-color: #FFF;
|
||
|
|
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: 60rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title{
|
||
|
|
font-size: 30rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle{
|
||
|
|
font-size: 22rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|