sign/components/headtitle/headtitle.vue

<template>
	<view :style="{background:bgColor}">
		<!-- 状态栏占位 -->
		<view class="status_bar"></view>
		<view class="title">
			<zui-svg-icon icon="back" v-if="isback" :style="{color:color}" class="icon" @click="leftClick()" />
			<view class="content" :style="{color: fontColor}">
				<slot></slot>
			</view>
			<view class="right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useColortore
	} from '@/store/index.js';
	import {
		navTo,
		navBack,
		navTabbar
	} from '@/utils/navigate';
	const props = defineProps({
		theme: String,
		isback: String,
		bgColor: String,
		fontColor: String,
		toWallet: Boolean
	});

	const color = ref('' || '#000000');
	const isback = ref(true)
	const bgColor = ref('' || '#EC0000');
	const fontColor = ref('' || '#FFFFFF');
	onMounted(() => {
		const colorStore = useColortore()
		bgColor.value = colorStore.mainRed
		
		if (props.theme === 'white') {
			color.value = '#ffffff'
		}
		if (props.isback == "false") {
			isback.value = false
		}
		if (props.bgColor != "") {
			bgColor.value = props.bgColor
		}
		if (props.fontColor != "") {
			fontColor.value = props.fontColor
		}
	})
	const leftClick = () => {
		console.log('leftClick:')
		console.log(props.leftFunc)
		if (props.toWallet == true) {
			navTabbar('/pages/project/index')
		} else {
			navBack()
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		padding-bottom: 30rpx;
		z-index: 998;
		font-size: 36rpx;

		.icon {
			position: absolute;
			left: 30rpx;
			width: 20rpx;
			height: 34rpx;
		}

		.right {
			position: absolute;
			right: 50rpx;
		}
	}
</style>