xc-app/pages/components/nav.vue

54 lines
958 B
Vue

<template>
<view class="nav" :style="{'padding-top': statusBarHeight}">
<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
<view class="nav-title">{{title}}</view>
<view class="nav-back"></view>
</view>
</template>
<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
export default{
props:{
title:{
type:String,
default:""
}
},
data(){
return{
statusBarHeight
}
},
methods:{
goBack(){
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.nav{
z-index: 100;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 23rpx;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
.nav-back{
width: 19rpx;
height: 34rpx;
}
.nav-title{
font-weight: 500;
font-size: 34rpx;
color: #000000;
}
}
</style>