hlt_app/pages/message/index.vue

<template>
	<view class="message-page">
		<view class="menus-box">
			<view class="menus-item" v-for="(item,index) in menus" :key="index" :class="{'clicked':current===item.id}"
				@tap="handleChangeMessageType(item)">
				<text>{{item.title}}</text>
			</view>
		</view>
		
		<view class="message-list">
			<message-card-vue v-for="(item,index) in list" :key="index" :message="item"></message-card-vue>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import messageCardVue from './components/messageCard.vue';
	// 菜单切换
	const menus = [{
			title: "未读消息",
			id: "1"
		},
		{
			title: "已读消息",
			id: "2"
		}
	]
	const current = ref("1")
	const handleChangeMessageType = (item) => {
		current.value = item.id
	}
	
	const list = [
		{
			id:1,
			name:"消息名称",
			time:"2021.1.21 16:03:02",
			remark:"李某某于2023.04.04 12:02:02 提交渠道水情信息李某某于2023.04.04 12:02:02 提交渠道水情信息李某某于2023.04.04 12:02:02 提交渠道水情信息"
		},
		{
			id:1,
			name:"消息名称",
			time:"2021.1.21 16:03:02",
			remark:"李某某于2023.04.04 12:02:02 提交渠道水情信息"
		}
	]
</script>

<style lang="scss" scoped>
	.message-page {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 40rpx);
		background-color: $uni-user-page-bgc;
		padding: 20rpx;

		.menus-box {
			width: 100%;
			overflow-x: auto;
			display: flex;

			.menus-item {
				flex: 0 0 50%;
				height: 80rpx;
				display: flex;
				justify-content: center;

				text {
					font-family: Source Han Sans;
					font-size: 40rpx;
					font-weight: 700;
					letter-spacing: 0rpx;
					font-feature-settings: "kern" on;
					border-bottom: 6rpx solid transparent;
					box-sizing: border-box;
					color: $uni-text-color;
					white-space: nowrap;
				}
			}

			.clicked {
				text {
					color: $uni-user-selected;
					border-bottom: 6rpx solid $uni-user-selected;
				}
			}
		}
		
		.message-list{
			margin-top: 20rpx;
		}
	}
</style>