hlt_app/pages/index/components/headerTitle.vue

<template>
	<view class="header-title">
		<!-- 个人信息 -->
		<view class="user-info-box">
			{{ userInfo.username || '欢迎登录' }}，{{ timeStatus }}好
		</view>
		<!-- 流程按钮 -->
		<view class="right-flows">
			<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="flowNumber" absolute="rightTop"
				:offset="[10, 5]">
				<view class="flow-text">我的流程 ></view>
			</uni-badge>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useUserStore
	} from '@/store/index.js';
	import moment from 'moment';
	const userStore = useUserStore();
	const userInfo = userStore.userInfo;
	const flowNumber = ref(10);
	const timeStatus = ref('早上')
	onMounted(() => {
		getTimeStatus()
		setInterval(() => {
			getTimeStatus()
		}, 300000)
	})
	const getTimeStatus = () => {
		let hours = moment().hours()
		if (hours < 9) {
			timeStatus.value = '早上'
		} else if (hours >= 9 && hours < 12) {
			timeStatus.value = '上午'
		} else if (hours >= 12 && hours < 14) {
			timeStatus.value = '中午'
		} else if (hours >= 14 && hours < 18) {
			timeStatus.value = '下午'
		} else if (hours >= 18) {
			timeStatus.value = '晚上'
		}
	}
</script>

<style lang="scss" scoped>
	.header-title {
		margin: 40rpx 0 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: $uni-text-color;

		.user-info-box {
			font-family: Source Han Sans;
			font-size: 40rpx;
			font-weight: bold;
			font-feature-settings: "kern" on;
		}

		.right-flows {
			.flow-text {
				font-family: Source Han Sans;
				font-size: 40rpx;
				font-weight: bold;
				font-feature-settings: "kern" on;
			}
		}
	}
</style>