mobile_h5/actMgt/components/my-topbar/my-topbar.vue

<template>
	<view class="topbar uni-row">
		<view class="topbar-left-right uni-row uni-jct">
			<uni-icons v-if="showBack" type="back" class="topbar-ico topbar-ico-back" @click="btnBack"></uni-icons>
		</view>
		<text class="title" v-html="title"></text>
		<view class="topbar-left-right uni-row uni-jce">
			<!-- <uni-icons type="settings" class="topbar-ico topbar-ico-settings" @click="btnFullscreen"></uni-icons> -->
			<view class="uni-row" @click="btnFullscreen">
				<img class="topbar-ico-fullscreen" src="/static/ico_fullscreen.svg" onload="SVGInject(this)" />
			</view>
		</view>
	</view>
</template>

<script>
	import SVGInject from '@iconfu/svg-inject';
	
	export default {
		name:"my-topbar",
		props: {
			title: {
				type: String,
				default: ""
			},
			showBack: {
				type: Boolean,
				default: true
			}
		},
		emits: ['btnBackClick', 'btnInfoClick', 'btnSettingsClick'],
		data() {
			return {
			};
		},
		onLoad() {
		},
		methods: {
			btnBack() {
				this.$emit('btnBackClick');
			},
			btnInfo() {
				this.$emit('btnInfoClick');
			},
			btnFullscreen() {
				this.$global.fullscreen();
				this.$emit('btnSettingsClick');
			}
		}
	}
</script>

<style>
	.topbar {
		width: 97%;
		justify-content: space-between;
		color: #000000;
	}

	.topbar-color-default {
		color: #5b9100;
	}
	
	.topbar-left-right {
		min-width: 50rpx;
	}
	
	.topbar-ico {
		width: 43rpx;
		height: 43rpx;
		/* padding: 0 10rpx; */
		color: inherit !important;
		font-size: 46rpx !important;
	}
	
	.topbar-ico-back {
		/* padding-right: 10rpx; */
	}
	
	.topbar-ico-settings {
		padding-right: 16rpx;
	}
	
	.topbar-ico-fullscreen {
		width: 39rpx;
		height: 39rpx;
		padding-right: 16rpx;
	}
	
	.topbar-rule {
		/* width: 60rpx; */
		padding: 0 10rpx;
		font-size: 30rpx;
		white-space: nowrap;
	}
	
	.title {
		/* padding: 0 10rpx; */
		/* width: 80%; */
		font-size: 36rpx;
		font-weight: 550;
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
	}
	
	.exchangeTitle {
		font-size: 22px;
		font-weight: 550;
		color: #A65600;
		white-space: nowrap;
		overflow: hidden;
	}
	
</style>