wanzai_school_app/pages/msgWarn/msgWarn.vue

<template>
	<view class="container">
		<!-- 顶部筛选框区域 -->
		<picker @change="bindPickerChange" :value="index" :range="array">
			<view class="search">
				{{ array[index] }}
				<img class="search_icon" src="../../static/images/bottom.png" />
			</view>
		</picker>

		<!-- 每一条信息区域 -->
		<view class="box" v-for="item in list" :key="item.id">
			<view class="box_time">{{ item.time }}</view>
			<view class="box_card">
				<view class="card_title">
					<view class="title_read" v-if="item.isRead === 0"></view>
					{{ item.title }}
				</view>
				<view class="card_msg">姓名：{{ item.name }}</view>
				<view class="card_msg" v-if="item.type">类型：{{ item.type }}</view>
				<view class="card_msg" v-if="item.content">内容：{{ item.content }}</view>
				<view class="card_msg" v-if="item.warn">{{ item.warn }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {})

// 筛选框当前索引
const index = ref(0)

// 筛选框类型数组
const array = ref(['全部通知', '预警推送', '课表提醒'])

// 信息列表
const list = ref([
	{
		id: 1,
		title: '预警推送',
		name: '张三',
		type: '越界',
		content: '实验室越界',
		isRead: 1,
		time: '2023-11-30 14:20:20'
	},
	{
		id: 2,
		title: '课表提醒',
		name: '李四',
		warn: '小宝明天（08月09日，星期五有课，请做好准备）',
		isRead: 0,
		time: '2023-11-30 12:20:20'
	}
])

// 切换筛选框回调
const bindPickerChange = (e) => {
	index.value = e.detail.value
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	padding: 0 20rpx;
	min-height: 100vh;
	background-color: #f1f6fe;

	// 顶部筛选框区域样式
	.search {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		width: 230rpx;
		height: 80rpx;
		font-size: 28rpx;
		border-radius: 56rpx;
		background-color: #fff;

		.search_icon {
			margin-left: 10rpx;
			width: 28rpx;
			height: 28rpx;
		}
	}

	.box {
		// height: 326rpx;

		.box_time {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			color: #a6a6a6;
			font-size: 24rpx;
		}

		.box_card {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-sizing: border-box;
			padding: 25rpx 30rpx;
			line-height: 52rpx;
			color: #808080;
			font-size: 24rpx;
			border-radius: 8rpx;
			background-color: #fff;

			.card_title {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #000;

				.title_read {
					margin-right: 10rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #d43030;
				}
			}
		}
	}
}
</style>