xwc/components/hua-page-head/hua-page-head.vue

<template>
	<view>
		<view class="page-head" :style="{color}">
			<text class="iconfont" @tap='goBack' >&#xe63c;</text>
			<view class="text-center title">
				{{pageTitle}}
			</view>
			<view class="right-btn" v-show="rightMenu" @click="$emit('clickMenu')">
				{{rightMenu}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"hua-page-head",
		props:{
			pageTitle:{},
			rightMenu:{},
			color:{
				type: String,
				default: '#040404'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			goBack(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
.page-head{
		height: 80rpx;
		line-height: 80rpx;
		position: relative;
		
		.iconfont{
			position: absolute;
			left: 24rpx;
			top:50%;
			transform: translateY(-50%) rotateY(180deg);
		}
		.title{
			font-weight: bold;
		}
		.right-btn{
			position: absolute;
			right: 24rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 28rpx;
		}
	}
</style>