jn_app/pages/common/companyHeader.vue

<template>
	<view class="home_header">
		<view class="header_message" @click="changeMsg">
			<image src="../../static/jnImage/indexPage/alarmSet.png"></image>
		</view>
		<view class="header_title">
			<text class="titleName">发电场站生产实时运营管理平台</text>
		</view>
		<view class="header_more" @click="changeStation">
			<image src="../../static/jnImage/indexPage/moreNew.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			changeMsg() {
				this.$tab.redirectTo('/pages/common/messagePage')
			},
			changeStation() {
				this.$tab.redirectTo('/pages/common/stationListPage')
			}
		}
	}
</script>

<style lang="scss">
	.home_header {
		width: calc(100% -32px);
		display: flex;
		justify-content: space-between;
		height: 60px;
		padding-top: 16px;
		// position: fixed;

		.header_message {
			width: 15%;

			image {
				position: relative;
				top: 5px;
				left: 10px;
				width: 25px;
				height: 25px;
			}
		}

		.header_title {
			width: 70%;
			position: relative;
			left: 5px;

			image {
				width: 28px;
				height: 22px;
				position: relative;
				top: 5px;
			}

			.titleName {
				line-height: 20px;
				font-size: 36upx;
				font-family: FZZhengHeiS-M-GB;
				font-weight: 600;
				color: #fff;
				position: relative;
				top: 8px;
			}
		}

		.header_more {
			width: 15%;
			position: relative;
			top: 10px;
			left: 10px;

			image {
				width: 25px;
				height: 18px;
			}
		}
	}
</style>