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

<template>
	<view class="topbar uni-row">
		<view class="topbar-left-right uni-row uni-jct">
			<uni-icons type="left" class="topbar-ico topbar-ico-back" @click="btnBack"></uni-icons>
			<text v-if="showMessage" class="topbar-rule"></text>
		</view>
		<text class="mcName" v-html="mcName"></text>
		<view class="topbar-left-right uni-row uni-jce">
			<uni-icons v-if="showMessage" type="notification-filled" class="topbar-ico topbar-ico-message" @click="btnMessage"></uni-icons>
			<text v-if="showRule" class="topbar-rule" @click="btnInfo">规则</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-topbar",
		props: {
			mcName: {
				type: String,
				default: ""
			},
			showMessage: {
				type: Boolean,
				default: false
				// default: true
			},
			showRule: {
				type: Boolean,
				default: true
				// default: true
			}
		},
		emits: ['btnBackClick', 'btnInfoClick', 'btnMessageClick'],
		data() {
			return {
			};
		},
		methods: {
			btnBack() {
				this.$emit('btnBackClick');
			},
			btnInfo() {
				this.$emit('btnInfoClick');
			},
			btnMessage() {
				this.$emit('btnMessageClick');
			}
		}
	}
</script>

<style>

	.topbar {
		width: 92%;
		/* padding-top: 2px; */
		justify-content: space-between;
	}

	.topbar-color-default {
		color: #5b9100;
	}
	
	.topbar-left-right {
		min-width: 50px;
		max-width: 128rpx;
		/* background-color: dimgray; */
	}
	
	.topbar-ico {
		width: 43rpx;
		height: 43rpx;
		/* padding: 0 10rpx; */
		color: inherit !important;
		font-size: 46rpx !important;
	}
	
	.topbar-ico-back {
		padding-right: 10rpx;
	}
	
	.topbar-ico-message {
		padding-left: 10rpx;
	}
	
	.topbar-rule {
		/* width: 60rpx; */
		padding: 0 10rpx;
		font-size: 30rpx;
		white-space: nowrap;
	}
	
	.mcName {
		/* padding: 0 10rpx; */
		/* width: 80%; */
		font-size: 36rpx;
		font-weight: 550;
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
	}
	
</style>