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.

164 lines
3.3 KiB

7 months ago
<template>
<view :class="[scrolltop?'backs1':'backs']" :style="{'padding-top':statusBarHeight+'px'}">
<view :class="['header_left_back',backgroundColor==true?'bgcolor':'']" @click="toback">
<image class="header_icon" v-if="!scrolltop" src="/static/zhouWei-navBar/icon_back_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="/static/zhouWei-navBar/icon_back_black.png" mode="aspectFit"></image>
</view>
<view class="ctitle" v-if="scrolltop">{{title}}</view>
<view class="sskuang" v-if="info.shou" :style="{height:scrolltop?'80rpx':'100%'}">
<input :class="[scrolltop?'hinput':'winput']" type="text" value="" v-model="name" v-if="ssshow" @input="come"/>
<image :src="$getimg(scrolltop?'wfqy-icon-xss.png':'wfqy-icon-xss1.png')" @click="ss" mode="aspectFill"></image>
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {
//true--白色;false--黑色
navFontColor: false,
backgroundColor: false,
name:'',
statusBarHeight:0,
ssshow:false,
scrolltop:false,
title:''
}
},
onLoad() {
},
mounted() {
//获取手机状态栏高度
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
console.log(this.statusBarHeight)
},
onReady() {
this.navFontColor = this.info.color;
if (this.info.bg) {
this.backgroundColor = this.info.bg;
}
},
watch:{
info(){
this.scrolltop=this.info.num;
this.title=this.info.name;
this.$forceUpdate();
}
},
methods: {
toback() {
uni.navigateBack();
},
ss(){
var that=this;
this.ssshow=!this.ssshow;
if(!this.ssshow){
this.name='';
this.$emit('getSsname',{
name:''
})
}
},
come(){
var that=this;
this.$emit('getSsname',{
name:that.name
})
}
}
}
</script>
<style lang="scss">
@function unit($num) {
@return $num+0upx;
}
.ctitle{
font-size: 36rpx;
color: #505050;
font-weight: 500;
width: 560rpx;
text-align: center;
}
.sskuang{
width: 465rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
height: 100%;
.hinput{
margin-right: 20rpx;
border: 1rpx solid rgba(0,0,0,0.1);
border-radius: 35rpx;
height: 70%;
color: #333;
padding: 0 20rpx;
background: rgba(0,0,0,0.1);
font-size: 24rpx;
width: 170rpx;
}
.winput{
margin-right: 20rpx;
border: 1rpx solid #fff;
border-radius: 35rpx;
height: 70%;
color: #fff;
padding: 0 20rpx;
background: rgba(255,255,255,0.2);
font-size: 24rpx;
width: 170rpx;
}
image{
width: 37rpx;
height: 36rpx;
}
}
.backs {
position: absolute;
left: 0;
// width: unit(70);
height: 88rpx;
z-index: 100;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.backs1{
position: fixed;
background: rgba(255,255,255,1);
/* top: 40rpx; */
left: 0;
height: 88rpx;
z-index: 100;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
width: 100%;
}
.header_left_back {
width: 70rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.bgcolor {
border-radius: 50%;
background-color: #446A86;
}
.header_icon {
width: unit(18);
height: unit(34);
}
</style>